October 26, 2004
Colors - Experimenting With, Using MTSetVar and MTGetVarThe 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) :
Then, wherever the color appears on your stylesheet, replace the color value with the following:
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!
If you would like to send a trackback
please use the following URL: http://learningmovabletype.com/cgi-bin/mt32/mt-tb.cgi/363