changing color values for specific text

Something neat to do to add visual impact to your blog posts is to change the colors of individual words, phrases, or even punctuation.

For an example, check out the Jordan template. See how at the beginning of the first sample post the bits that say "tucson, arizona", "chris richards", and "elaine taylor" are in a different color, but are not hyperlinks?

To change the colors of portions of your blog text, first make sure you're in the Compose mode. Then click and drag to highlight the word or words you want to change the color of. Click the little color palette icon above, and choose a color.

But what if you want a color that's not in this choice of 70 basic colors? Here's how to do that.

1. From Compose mode, click/drag to highlight the text you want to color change.
2. Click the palette icon, and choose any color to change the text. Doesn't matter what color you pick; you'll change it in just a second.
3. Now, switch over the Edit HTML mode.
4. Look for the part of the HTML that represents this color-changed text - "color: #(FF6666);

The bit in parenthesese is the color tag, and can be replaced with any hex color code you'd like. You can change sections of text, individual letters, or even punctuation, such as I did with the bullets on this post.

To obtain exact color matches, there are a few things you can do.

1. You can see what hex code values are applied to various fonts on your blog by scrolling through the options that have been assigned in Layout / Fonts and colors.
2. You can see what hex code values are applied to your borders, background, etc. by pulling colors from your blog template. Just go to Layout / Edit HTML, and scroll down looking for six digit hex codes such as #fab883, #47f7f7... etc.
3. You can upload something from your blog, such as your header image, etc. to this site, which will generate hex code values.

Even more good news! This same method of changing text colors can be used in your HTML/JavaScript widgets, as well. Just click "Rich Text" to switch over and choose a color from the palette, then click back to the HTML mode to edit the color value.

RETURN TO TUTORIALS