Learning Movable Type: Colors - Experimenting With, Using MTSetVar and MTGetVar

The default Movable Type styles use color schemes in which certain colors are repeated in different style elements throughout the stylesheet. For example, a style might use the same color red for the banner background color, the link hover color, the content h2, the calendar caption, and the sidebar h2 and border colors.

In the comments section of the LMT tutorial Colors - Background, Banner, Headline, and Font, developer Brad Choate remarked that you could easily use the MTSetVar tag to define a color and the top of your stylesheet, and use the MTGetVar tag throughout your stylesheet wherever you wanted that color to be used. This works because the stylesheet is a Movable Type template. Even though you are putting MT tags into the template, the output of the stylesheet will be standard CSS.

To do this, define a variable at the top of your stylesheet like so (use whatever color value you want. #7663BC is a shade of purple) :

<$MTSetVar name="highlight_color" value="#7663BC"$>

Then, wherever the color appears on your stylesheet, replace the color value with the following:

<$MTGetVar name="highlight_color"$>

Use color tools like ColorMatch to come up with a hexidecimal (6-digit) color value you like. Replace the MTSetVar value with the new color; save and rebuild your stylesheet. You may need to empty your browser's cache to see the color change on your site.

You can use this method with color values, font names, border styles, etc. Just put all of the variable declarations at the top of the stylesheet so they are easy to find.

This is an easy way to experiment with lots of different colors without having to manually change the color values of each stylesheet element.

Posted by Elise Bauer on October 26, 2004 2:14 PM to Learning Movable Type http://www.learningmovabletype.com/