« Keeping an Entry at the Top | Main | Making a Sideblog or Linkblog »

Colors - Background, Banner, Headline, and Font

This tutorial is out of date. The templates have changed, however many of the concepts described are still relevant. ~Elise March 2, 2007

The first thing you might want to do when customizing your Movable Type blog style is to change the color of the background, banner, headlines, or text. This is pretty easy to do; the adjustments are made in your weblog's stylesheet template.

Before you start, you should have a basic understanding of how colors are coded into a web page. Open up your stylesheet from the templates menu in your MT edit screen. If you scroll down you will see several instances of the word "color" followed by a # sign and six characters comprised of letters and or numbers. These six characters represent a color; the first 2 characters affect the RED tones of RGB, the third and fourth characters represent the green, and the fifth and sixth characters the blue. Much like the red, green, blue color adjustments of your TV, these three colors in combination create the millions of colors that you can see on computer screens. #FFFFFF will produce white, #000000 will produce black, #FF0000 - red, #00FF00 - green, and #0000FF - blue. You can use a tool like CSS Color Values to experiment with different color combinations and see the color values that result.

Changing the Background and Banner Colors

Here is a screen shot of the MT3 default Gettysburg style. To change the background from grey-blue to another color, find the body { section a the very top of your stylesheet. Change the color value from the existing 6 characters to 6 new characters representing the color you want.

test_blog_basic.gif -> test_blog_body.gif

To change the banner color, find the #banner { section in your stylesheet and change the color value.

test_blog_basic.gif -> test_blog_banner.gif

To change the color of the background of where your entries are displayed, find the .content { section in your stylesheet and change the background-color value.

test_blog_basic.gif -> test_blog_content.gif

To change the color of the background of your sidebar, find the #right { section in your stylesheet and change the background-color value.

test_blog_basic.gif -> test_blog_sidebar.gif

Save and rebuild your stylesheet. To see the changes on your weblog in some browsers you need to empty the cache of your browser and then refresh the page.


Changing Headline and Font Colors

The following graph shows the text style tags associated with the different text elements in the default MT3 templates.

test_blog_fonts.gif

To change the colors of any of these elements, find the elements in your stylesheet and change the color value associated with them.

Note that by default, the banner color and the content h2 colors match.

Save and rebuild your stylesheet.

Links:
Experimenting with Colors using MTSetVar and MTGetVar - tip courtesy of Brad Choate

Comments (2)

Since the stylesheet is defined as a MT template, why not replace those scattered color elements with variables? For example, define a variable like so:

     <$MTSetVar name="body_background" value="#000"$>

Then, wherever the body background color is used within the stylesheet, replace the color value with:

     <$MTGetVar name="body_background"$>

Do this with color values, font names, border styles... whatever you want. Put all the variable declarations at the top of the stylesheet so they're easy to find. This is really helpful where a particular value is repeated throughout the stylesheet.

Thanks Brad, that's a great tip!