How to Create K2 Style-Part 3

by Janet Ashby Antigua Web Solutions Blog

See also How To:Create a New K2 Style- Part 1, How To:Create a New K2 Style-Part 2

Before we begin to look at menus I want to introduce you to another tool available in Firefox’s Web Developer. Click on Information, Display Element Information (or ctr-shift-F). A box will appear and your cursor will change into a cross. Position the cross over an element and click. A whole load of information for that element will appear in the box. As an example I clicked on the post text. The element information box is displayed below.

Click to enlarge

 

At the very top of the box it tells us that the element is a “p” and further down it tells us that it is a child of the div .entry-content. We can now change the text color by adding an entry

.entry p {color:red;}

All your post text is now in red!

Step 6: Changing the Top Menu Position

Add the following to your style sheet

ul.menu {
margin-bottom:200px !important;
margin-bottom:202px;}

The menu now moves to the top of the header. Why do we have 2 instructions for menu bottom here?

Good question! Let me introduce the bane of web developers everywhere! Internet Explorer. You’ll find that other browsers, Opera, Konqueror, Safari etc all render your web page in the same way. Not IE6 and below! For reasons I won’t get into here ( but see webcredible/Internet explorer and css issues) IE interprets the instructions in the style sheet differently. So you always need to check your changes in IE . If you find differences you need to give different instructions just for IE. This is where the !important tag comes in. All other browsers will see this tag and ignore any following code for the same element. IE being remarkably stupid ignores the tag and interprets any element it finds that follows. So in the above example IE will place the menu 202px above the bottom of the header instead of 200px as Firefox does. You’ll find a lot of use for the !important tag believe me!

Step 7 :Changing the Background For the Top Menu

Now lets change the color of the background for the menu. There are 2 sets of instructions relating to the top menu

ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover {
color: white !important;
text-decoration: none;
}

ul.menu li a:hover {
background: #111;
}

‘ul.menu li.current_page_item’ controls the tab when you are on the current page. ‘ul.menu li a’ controls the other tabs. So to change the color of the background ONLY for the current page add the following line within the curly brackets

background:red;

The entry now looks like this:

ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover {
color: white !important;
text-decoration: none;
background:red;
}

What if we want to add an image as the background when we hover over one of the other pages? Make an image file about 176px x 20px and place in your style sheet folder. I called mine bg.jpg. Now change the background attribute ul.menu li a:hover as follows

ul.menu li a:hover {
background: url(’bg.jpg’);
}

You can experiment with changing the background, text colour and text decoration for the tabs. You can separate the elements. e.g. to change the current page hover only remove ‘ul.menu li.current_page_item a:hover’ and give it its own separate entry. Don’t forget to remove the separating comma!

Hopefully you will now have a good grasp of how to adapt a style sheet to your own design. I’ll be posting quick tips for further help on my blog Antigua Web Solutions Blog

Se you there and have fun adapting your styles for K2!