To give a sense of how you can use the stylesheet to change the appearance of your site, we'll go through a simple example. Suppose you want to change the color of the banner and the font of the title of the blog. The code in the main index that creates the banner is:
<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
<span class="description"><$MTBlogDescription$></span>
</div>
|
The parameters for "banner" are defined in the stylesheet under #banner:
|
#banner {
font-family: arial, helvetica;
background-color: #cccccc;
border: 1px solid #888888;
color: #000000;
}
|
Your result would look like this:
The current font is a sans-serif font, arial, the text is black, and the background color is grey. Suppose we want to spiff up the site and change the background color to red and the font to Times New Roman and in white color. You need to change the corresponding stylesheet parameters to look like this.
#banner {
font-family: Times New Roman, serif;
background-color: #B22222;
border: 1px solid #888888;
color: #FFFFFF;
}
|
Which would make the page look like this instead:
But wait -- we're only two for three. The background color changed and the font changed (note, the font of both the headline and the description (subhead) changed, because both are fall under the "banner" division in the index page).
But the headline text is still black. Unfortunately, we also have to change the stylesheet in another place, because the banner text is defined as an anchor (link) on our page, and the banner anchor is also defined separately in the stylesheet (don't ask me why the default stylesheet is set up this way...). So we have to also change:
|
#banner a,
#banner a:link,
#banner a:visited,
#banner a:active,
#banner a:hover {
color: #000000;
font-size: xx-large;
font-weight: bold;
text-decoration: none;
}
|
to:
#banner a,
#banner a:link,
#banner a:visited,
#banner a:active,
#banner a:hover {
color: #FFFFFF;
font-size: xx-large;
font-weight: bold;
text-decoration: none;
}
|
to get:
Note that only the banner headline changed color -- unlike the font change, the color change didn't carry through to the description. This is because the "description" color is defined separately in the default stylesheet (but the font isn't).
]]>
