T U T O R I A L     S E R I E S

1. The Link Title
Controlled by:

#menu ul li {
font: italic normal 110% 'Times New Roman', Times, serif;
letter-spacing: 0.1em;
margin-top: 10px;
padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
}

Change fonts and spacing here. To alter the colour of a link title, add
color: #00ff00;
to the above statement. (You can change the #00ff00 to a more subtle colour if you really want to !)

The links themselves are controlled by:

#menu ul ul li {
border: 0;
font: normal normal 70%/115% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: 0;
margin-top: 0;
padding: 0;
padding-left: 12px;
}

#menu ul ul li a {
color: #000;
text-decoration: none;
}

#menu ul ul li a:hover {
border-bottom: 1px solid #809080;
}

Okay.. actually there is more css that affects them, but this lot will do for starters.
Change the link font in the top part
Change the normal link colour in the second part
Change how the link acts when it is hovered in the third part.
If you do not want it to be underlined, and just want it to change colour, make that line read:
color: #00ff00;
If you would rather have a dotted underline, and in bright green, make it:
border-bottom: 1px dotted #00ff00;
If you want the link to get bigger:
font-size: 150%;

This is an example of overkill!
#menu ul ul li a:hover {
font-size: 150%;
border-bottom: 1px solid #809080;
border-top: 2px dotted #00ff00;
}
But it should give you some idea of what you can mess with.

3. The Search Box

First, instead of it being on 2 lines, with "Search" on a button below, how about making it one line only ?

Add this to your style.css - it doesn't matter where;

form.searchform {display: inline;}

Now edit your index.php, and you will see these lines;

<form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" name="submit" value="<?php _e('Go!'); ?>" />
</div>

and delete the <br /> that is in bold.
If that does not do the trick, see this part above ? size="15" />. Make that '15' into 5 and increase it by 1 to whatever your template will tolerate.
If altering THAT doesn't move things around, look inside the CSS:

#menu input#s {
width: 80%;

And change the 80% to something smaller. That's that done.

Notice I changed the word from "Search" to "Go!" ? Put whatever you want of course.

Colour the Search box.
Add this to your css;

#menu li form input{
background-color: #ffff00;
}

#menu li form input#s{
background-color: #ffff00;
}

That will give you a bright yellow background where your viewers can enter the text they wish to look for.


Colour the Search button
Add this to your css;

#menu li form input.purple{
background-color: #ff00ff;
}

and in your index.php, edit these lines to include what is in bold

<form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<input class="purple" type="submit" name="submit" value="<?php _e('Go!'); ?>" />
</div>

That will give you a purple button. Again, use the colours you want, and what you call it does not matter - you could alter the background colour to whatever you want but still call it purple. It'll work, though it is always better to use the name of a colour when using classes.


Now ... you may have a really nice colour button, but you now want to alter the text on it too, so let's change that too.
In the CSS you added above, make it like this;

#menu li form input.purple{
background-color: #ff00ff;
font-size: 10px;
font-weight: bold;
color: #fff;
}

Again, you can change the font size, font weight, and text colour.


Make the Search button an image

First, go make your image. I'd recommend that you start with an image that is around 20 pixels square, no larger, and that it is a tranparent gif. This will merge well with your existing colour scheme.
Upload that image to wherever you want, and note it's location.

Into your CSS, you need to add a class;

.button {
repeat: no-repeat;
margin-bottom: -5px;
}

When trying to do this, I could not get the bottom of my image button to line up with the bottom of my search box. I have no idea right now why, but it just wouldn't. That's why I have a negative margin. You may need one, you may not. (If I come up with a better way of doing this, I will update the page).

Next, you need to modify your index.php;

<li id="search">
<label for="s">Search:</label>
<form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
<div>
<input type="text" name="s" id="s" size="15" />
<input type="image" src="pix/button.gif" name="search" alt="Search" class="button" />
</div>
</form>
</li>

Note the 'src="pix/button.gif" ' That is where I have my button - you must put your location.


And if, after reading all this, you do not want the Search function on your page, just delete that part of 'index.php'

5. The Calendar
The colours of the days of the week can be altered by adding to this;

#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}

so to make them red, turn the above into this;

#wp-calendar th {
font-style: normal;
text-transform: capitalize;
color: #ff0000;
}

To alter the numbers, you need this part;

#wp-calendar td {
color: #ccc;
font: normal 12px 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: normal;
padding: 2px 0;
text-align: center;
}

Change the colour on the top line, and the font on the second.


To change the colour of the text, and the colour of the highlight box that appears when a date you have posted is hovered;

#wp-calendar a:hover {
background: #e0e6e0;
color: #333;
}

To change the colour of the highlight box that appears when any date is hovered, alter the top line in the css below.
To change the colour of the text that appears in the highlighted box when it is hovered, alter the second line below.

#wp-calendar td:hover, #wp-calendar #today {
background: #eee;
color: #bbb;
}

The colour of the border that surrounds the calendar is controlled by;

#wp-calendar {
border: 1px solid #ddd;
empty-cells: show;
font-size: 14px;
margin: 0;
width: 90%;
}

Alter the top line to change the colour.
If you want a thicker border make the '1px' into '2px'
If you don't want a border, don't delete the line - just make it's colour the same as that of your page. That way, if you ever want to put it back, it's very easily done.
You can also alter the width by changing the 90%.

Boxing in your links

This creates the impression that you have cleverly made vertical boxes for your links content.
To do this, you modify the following part - this part was discussed above. It looks like this right now;

#menu ul li {
font: italic normal 110% 'Times New Roman', Times, serif;
letter-spacing: 0.1em;
margin-top: 10px;
padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
}

and you make it into this;

#menu ul li {
font: italic normal 110% 'Times New Roman', Times, serif;
letter-spacing: 0.1em;
margin-top: 10px;
padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
padding-left; 2px;
background-color: #fff;
border-top: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
}

Note: I have added a padding of 2px so that your link titles are slightly away from your new borders.
You can add a colour to the menu background by adding
background-color; #0000ff;
to your #menu div - it's the one at the top of this page.
You can again just have the borders you want, the sizes you want, colours etc..