September 12, 2004

Colors - Background, Banner, Headline, and Font

The first thing you might want to do when customizing your Movable Type blog style is to change the color of the background, banner, headlines, or text. This is pretty easy to do; the adjustments are made in your weblog's stylesheet template.

Before you start, you should have a basic understanding of how colors are coded into a web page. Open up your stylesheet from the templates menu in your MT edit screen. If you scroll down you will see several instances of the word "color" followed by a # sign and six characters comprised of letters and or numbers. These six characters represent a color; the first 2 characters affect the RED tones of RGB, the third and fourth characters represent the green, and the fifth and sixth characters the blue. Much like the red, green, blue color adjustments of your TV, these three colors in combination create the millions of colors that you can see on computer screens. #FFFFFF will produce white, #000000 will produce black, #FF0000 - red, #00FF00 - green, and #0000FF - blue. You can use a tool like CSS Color Values to experiment with different color combinations and see the color values that result.

Changing the Background and Banner Colors

Here is a screen shot of the MT3 default Gettysburg style. To change the background from grey-blue to another color, find the body { section a the very top of your stylesheet. Change the color value from the existing 6 characters to 6 new characters representing the color you want.

test_blog_basic.gif -> test_blog_body.gif

To change the banner color, find the #banner { section in your stylesheet and change the color value.

test_blog_basic.gif -> test_blog_banner.gif

To change the color of the background of where your entries are displayed, find the .content { section in your stylesheet and change the background-color value.

test_blog_basic.gif -> test_blog_content.gif

To change the color of the background of your sidebar, find the #right { section in your stylesheet and change the background-color value.

test_blog_basic.gif -> test_blog_sidebar.gif

Save and rebuild your stylesheet. To see the changes on your weblog in some browsers you need to empty the cache of your browser and then refresh the page.


Changing Headline and Font Colors

The following graph shows the text style tags associated with the different text elements in the default MT3 templates.

test_blog_fonts.gif

To change the colors of any of these elements, find the elements in your stylesheet and change the color value associated with them.

Note that by default, the banner color and the content h2 colors match.

Save and rebuild your stylesheet.

Links:
Experimenting with Colors using MTSetVar and MTGetVar - tip courtesy of Brad Choate


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

Posted by Elise Bauer on September 12, 2004 to Tutorials for Old Versions of MT
Comments(8) | Email to a friend | Printer-friendly version


Trackback

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

Comments

Since the stylesheet is defined as a MT template, why not replace those scattered color elements with variables? For example, define a variable like so:

     <$MTSetVar name="body_background" value="#000"$>

Then, wherever the body background color is used within the stylesheet, replace the color value with:

     <$MTGetVar name="body_background"$>

Do this with color values, font names, border styles... whatever you want. Put all the variable declarations at the top of the stylesheet so they're easy to find. This is really helpful where a particular value is repeated throughout the stylesheet.

Thanks Brad, that's a great tip!

i don't really understand that comment. maybe i'll email you brad. don't you set the elements in css usually anyways, as id's and classes?

maybe i'm confused.

Amit has listed some superb tools for finding great colours combinations here http://www.karmakars.com/weblog/archives/2004/02/01/colour

I just installed MT for my blog. I previously used B2 but after a hacker got into my site and corrupted everything I was froced to relaunch the site from scratch. Given the opportunity to start anew I decided to make the switch to MT. One thing I'd like to do is use an image in the banner color instead of a simple color. Does anybody know how can I do that?

Hi Tim - See http://www.elise.com/mt/archives/000632banner_images.php.

p.s. It's a good idea to search first.

Hello, I recently installed an MT blog that uses a pretty standard stylesheet that I took with permission from another site. I just wanted to change a few things about it, notably making the box around each post into a dashed line box. I'm fairly experienced with CSS and am a web-developer but I'm having a little trouble figuring out what exactly each element in the stylesheet refers to.

The problem I'm trying to fix is (here), there is a space between the top line of the dashed box around each post and I want for the box to not have any such spaces in it. I tried adjusting the .date and the .blogbody attributes for padding and margins and borders but can't seem to get rid of the space. Is there anyone who might know offhand some of the other sections I could try editing to remove this? My trial and error method is starting to vex me, I tried searching for this problem but it's not very easy to describe in search terms. Thanks so much in advance for any help you can provide!

-Jon

Jon - the best place to ask for help on problems like this is at the MT Support Forums. There are a lot of people there with time and experience to troubleshoot your problem.

Comments are now closed for this entry.


Email to a friend

Email this article to:


Your email address:


Message (optional):