karenak Crown



Here's the Categorian Beginner's First Aid Kit - Part One



Change that boring black/white into something colorful !

Step 1

If you click "Style" the following code will be shown:


body { background-color: white; color: black; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review div.bar { background-color: lightgrey; }
.review div.text { font: normal 100% arial,helvetica,sans-serif }



Step 2

There are 4 lines here that concern us now:

1. First Line
Here you set your background color and the text color.

First find a color you want to use. Go --- here --- to find one.

Let's say you want the color "DarkBlue" for the background and simple "White" for text. Just replace the color names with those of your choice:


body { background-color: DarkBlue; color: White; }



2. Second Line

The a sets the color of the links. So that's everything that was blue up to now.

Just replace the "blue" here with some other color you like.


a { color: gold; }



3. Second To Last Line

This is the header bar of your posts. You need a color that contrasts both your page background as well as the link color Or you can make it transparent. Since you already know how to replace one color name with another, we'll set this one transparent:


.review div.bar { background-color: transparent; }



4. Last Line

Here we set the color of the text in your blog posts.


.review div.text { font: normal 100% arial,helvetica,sans-serif }



As you can see, there's nothing said of color so far. We'll just add it:



.review div.text { color: white; font: normal 100% arial,helvetica,sans-serif }




And that's it !


If you made these changes, your style sheet looks like this now:


body { background-color: DarkBlue; color: white; }
a { color: gold; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review div.bar { background-color: transparent; }
.review div.text { color:white; font: normal 100% arial,helvetica,sans-serif }



Step 3

Click the SAVE button and have a look :-)




>>>> Part Two