October 26, 2004

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, the Independence style uses the same color red (#B22222) 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 or ColorMatch Remix 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.

Has this tutorial been helpful? Please consider linking to Learning Movable Type at http://learningmovabletype.com/ . Thanks!

Posted by Elise Bauer on October 26, 2004 to Style
Comments(2) | Email to a friend | Printer-friendly version


If you would like to send a trackback
please use the following URL: http://learningmovabletype.com/cgi-bin/mt32/mt-tb.cgi/363


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

(Before posting a comment please see the Comments and Trackbacks Policy. Do you need help troubleshooting your weblog? Please post questions and requests for support at the MT Support Forums. Thanks!)

Remember Me?

(you may use HTML tags for style)

Email to a friend

Email this article to:

Your email address:

Message (optional):