I didn't think I could talk this much about K2, but over the course of my recent redesign a few things have come to mind that I'd love to share with everyone. This whole K2 customization series has become rather lengthy, so I am really considering making a stylized PDF with them all and adding to each a bit. There might even be a Part 5, so leave comments if you want me to include something.
The Sidebar Main Menu
I've been using the standard horizontal menu that comes with K2 for several months. It works great, but it just says "I am using a default K2 install." 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.
<ul class="menu">
<li class="<?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>">Weblog</a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
<?php wp_register('<li>',''); ?>
</ul>
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.
<hr />
<div class="secondary">
<!--/* MAIN MENU START */-->
<ul class="sbmenu">
<li class="<?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>">Weblog</a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
<?php wp_register('<li>',''); ?>
</ul>
<!--/* MAIN MENU END */-->
If you are going to paste this code into your blog, be weary of foreign characters that may appear due to the way I have it displayed. Always double check what you paste.
Sidebar Main Menu CSS The way I chose to style my sidebar menu includes a hover activity over the entire span of the link. If you would like to use a background image for the menu items, add the appropriate url for the backgrounds of ul.sbmenu li.current_page_item and ul.sbmenu li:hover. I also probably overused !important and should revisit the rules. Note: I haven't tweaked this code for IE.
/* Sidebar Menu */
ul.sbmenu{
padding-top: 5px;
margin-top: -34px; /* Moves the menu up into the header image */
margin-left: 0px !important;
}
ul.sbmenu li{
display: block;
line-height: 1.1em;
margin-left: -10px !important;
padding-left: 10px;
}
ul.sbmenu li:hover{
background: #d5d5d5 !important;
width: 216px;
margin-left: 0px;
}
ul.sbmenu li a {
font: 2em Helvetica, Verdana, Arial, Sans-Serif;
text-transform: lowercase;
color: #666;
width: 216px !important;
display: block;
margin: 0;
border: 0;
}
ul.sbmenu li a:hover{
background: none !important;
text-decoration: none !important;
color: #000;
}
ul.sbmenu li.current_page_item a,
ul.sbmenu li.current_page_item a:hover {
color: #333 !important;
background: none !important;
text-decoration: none;
}
ul.sbmenu li.current_page_item{
background: #CCC !important;
width: 216px;
margin-left: 0px;
}
Hopefully you should now have a slick, vertical sidebar menu on your blog. Enjoy it now, because I'm telling you this will be the trend for Web 3.0, vertical sidebar menus.
The 3 Column K2 Layout
Sidebar space is a valuable commodity these days. There is always something great to put in your sidebar whether it be your recent coComments, del.icio.us, ma.gnolia or digg bookmarks, current flickr photos, tag cloud, creative commons license or lengthy blogroll. Three column layouts afford bloggers to give their readers more content and more reasons to stick around and hopefully subscribe to your website. Take a look at some successful three column layouts: Pat Collins' LeftLane.org and Bharath Kumar's OBharath.net. When it comes to coding the principle is very simple; just widen up the secondary div and put two divs inside of it, one floated left and one floated right. Then you have the task of deciding what you want to put in each sidebar and sort that out in sidebar.php. However, implementing a successful three column layout will require a wider page, something like 800 pixels and higher. I highly suggest taking a look at Bharath's code in the 3 Column K2 style he has released.
We will be looking at setting up the necessary div containers first. Open up sidebar.php in your favorite text editor. Find one of the first lines at the top that says <div class="secondary"> and place the line below directly under it.
<div class="leftsidebar">
Now you have the task of sorting out what you want to go in the 1st sidebar and the 2nd sidebar. The best thing is to add things and see what looks best. Once you have filled out the left sidebar, close it off with a </div>. Then add the next line right after that closing div.
<div class="rightsidebar">
Repeat what you did earlier and fill up that div with items you would like to populate the third column. Upon completing that, close it off with </div>. Now that we have the basic php structure down, it is time to style the rightsidebar and leftsidebar classes in CSS.
/* This code assumes you have a wide #page and a narrow .primary */
/* look at <a href="http://www.obharath.net/blog/2006/04/16/3-column-k2-r3-update/">Bharath's CSS</a> for a better idea */
.secondary {width: 450px !important;padding: 0px 0 10px!important;margin: 0 0 20px 500px !important;}
.leftsidebar {
width: 200px !important; /* adjust widths as you see fit */
_width: 200px; /* <a href="http://getfirefox.com">http://getfirefox.com</a> */
float: left !important; /* make this column stick to the left of the secondary div */
padding: 0 5px 0 10px !important; /* padding: top-right-down-left */
margin: 0;
}
.rightsidebar {
width: 200px !important;
_width: 200px;
float: right !important;
padding: 0 10px 0 5px !important;
margin: 0;
}
If you want to make the columns more distinguishable try adding a left and right border to .leftsidebar. This gives you a general idea of how a 3 column K2 style can be formulated. This CSS was purely for a guideline and probably won't look all that good in real life.
Saving Bandwidth with Image Maps
The footer is a great and unobtrusive place to show off some icons of affiliations, memberships or other websites you support. However, it starts to become detrimental to your site's loading time when you have several images loading in your footer or any image in general. The concepts I am about to discuss can be used on any image, not just the footer. Assuming your footer already has an image, open it up in photoshop and place your icons where you want them to be.
Select the slice tool, the one to the right of the crop tool. Slice out each area that you want to be clickable, then right click that area and select Edit Slice Options. This displays the exact location of the image map which we can use for the CSS.
Before we can create a CSS selector to control the location of the image map, we need to create a class in the footer with the appropriate link. Now that the footer doesn't hold any text and everything is in the image, I changed <p id="footer"></p> in footer.php to <div id="footer"></div>. Excluding my feedburner and creative commons code, this is what my footer.php looks like.
<br class="clear" />
</div>
<hr />
<div id="footer">
<a href="http://barcamp.org/BarCampHouston" class="barcamp">BarCamp Houston</a>
<a href="http://mediatemple.net/.from/paulstamatiou.com" class="mediatemple">Media Temple: High Velocity Web Hosting</a>
<a href="http://gatech.edu" class="gatech">Georgia Tech</a>
<a href="http://9rules.com" class="ninerules">9rules Network</a>
</div>
<?php ?>
<?php do_action('wp_footer'); ?>
</body>
</html>
Notice how each link I included has a class - eg barcamp, mediatemple, gatech and ninerules. I will take these classes and directly target their hyperlink attributes with the CSS like the snippet seen below.
#footer a:link, #footer a:visited { text-decoration: none; border: none; }
/* line above ensures that footer hyperlinks are not underlined */
a.barcamp {
position: absolute;
display: block;
text-indent: -9999px; /* moves link text off-screen */
background: transparent;
left: 534px; /* taken from Photoshop slice info "X" */
top: 10px; /* taken from Photoshop slice info "Y" */
width: 175px; /* taken from Photoshop slice info "W" */
height: 48px; /* taken from Photoshop slice info "H" */
cursor: pointer;
border: 0px;
}
For this code to work, it is assumed that you already have a footer image defined in your footer div. If not, get on that using the CSS below as an example. You will have to change the height, width, background and margin accordingly.
#footer {
background: #5A5A5A url('defiance/xlfooter.jpg') no-repeat !important;
height: 71px;
margin: -25px auto 0 !important;
position: relative !important;
padding-top: 0px;
width: 900px;
border: 0px !important;
}
Repeat the action of slicing up an image map area and creating the appropriate CSS for it using a hyperlink class defined in footer.php. Be sure to delete all of the slices before saving your footer image or Photoshop will cut it up and save it in multiple images, which is not what you want. Also when determining clickable image map areas in Photoshop, try not to overlap areas as you might confuse the browser with conflicting image maps. At the time of this writing, these image maps appear to work fine in IE, Safari, Firefox and Konqueror.