« "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 (5)

thatbradguy Author 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.


Does anyone know textile? I need to figure out how to code colors in, besides red and blue...


I tried to 'set' the color variable outside the css file (i.e. within the index pages themselves) but it does not get picked up. Each index page will have a different color theme (i.e. text, banner, etc. will be a different color for each index page). What is the best way to make this happen in Movable Type without using multiple css files for each page?

@Fatimah -

I'm not sure that I follow what you're saying, but it sounds like what you want to do is have each page have a different color theme. If that's true, you would simply give it a different CSS file. For instance, styles-blue.css, styles-green.css, styles-red.css, etc (the names don't matter, as long as they make sense to you in some way). Then all you have to do is change the style sheet name in the index page - you don't need to change anything else.

Post a comment

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