« "Email Me" Contact Forms | Main | Moving an Entry from One Blog to Another »

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.

Comments (2)

thatbradguy [TypeKey Profile Page]:

i've often wished for something similar in the CSS spec itself. it would make it much easier to change that light blue to a little bit darker blue everywhere it appears if i could just refer to it by some variable name.

while this is a nice solution when using MT, it'd be nice if there were a universal solution.

Why limit it to colors? You can use this technique for fonts too. Or any value you have to repeat throughout your stylesheet that you may want to change or adjust from time to time.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)