How to create a custom K2 Scheme: Part 2

Yesterday I explained on how to customize the body, page, header and footer. Today I shall cover on how to customize the main menu of your K2 blog. If you have missed the first part of this series, please read that before you continue.

Main menu

The main menu can be customized in many ways, the default being the horizontal tabs below the header. You can customize it to be above the header, on the sidebar or you could just change the tabs to some thing more better. After learning CSS, you will be able to use these ideas to create your own unique look.

Menu above the Header

ul.menu {
margin-bottom: 12px;
padding-left: 10px;
width: 90% !important;
word-spacing: 0;
}

In the above code,

Increase the value of margin-bottom until you get the menu to reach above header

padding-left lets you move the menu away from the default left side

width lets you control the spacing between the links in the menu

word-spacing lets you control the space between the words

You can adjust the font-size and default color of Menu links with this code

ul.menu li a {
font: 1em Verdana, Helvetica, Arial, Sans-Serif;
color: #ffffff;
font-weight: bold;
}

With the following code you can change the hover properties of the menu

ul.menu li a:hover{
background: #76a6d4 !important; /* hover background menu item color */
color: #ffffff !important; /* text color when hovered */
}
ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
color: #003366 !important; /* active tab hover text color */
background: #ffffff !important; /* active tab background color */
}

Play with the above code until you get the effect you want

Menu in the Sidebar

Paul Stamatiou has a good tutorial describing how to move your menu to the sidebar.

If you’re looking for an alternative design and want to get your blog to look much more unique, a sidebar menu may be the way to go. Here’s the break down of how this customization works: snag the menu code from header.php, paste it at the top of sidebar.php, add lots of CSS, enjoy.

Open up header.php and find the following code snippet and cut it out. Save header.php.

• Weblog


',''); ?>

Edit sidebar.php so that the top of your file looks like the code below. Notice how I changed the ul class to sbmenu. This was purely aesthetic but naming it like this is good coding style, with the sb prefix denoting sidebar usage.

---




Search JohnTP.com or view a random post

To receive this blogs articles for FREE on your email inbox, just enter your email address below and click 'Go':

Enter your email address: or .

Find out what I am doing currently by .

Posted on June 10th, 2006 | Category: Tutorials, Web Design, WordPress |