Customizing K2: Part 4
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.
<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.
<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.
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.
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.
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.
/* look at Bharath’s CSS 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; /* http://getfirefox.com */
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.
</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.
/* 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.
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.
Thanks for the 4th and follow up article to the rest. I love K2 and I like to customize but I wasn’t sure on some of this.
Especially image maps.
How about having the shelf tut. from http://www.wiphey.com?
Seems like she already covered it pretty well…
Hey Paul, Great job on the new layout. I like it a lot! Keep up the good work.
Joe
Nice stuff Paul, I was hoping you’d be giving another K2 tutorial, this is great, they’ve all really helped me in my design.
how did you do the numbered comments?
Paul, as always thanks for your work you do here, I use it constantly to learn what I can about web design, macs and mint (all things I really enjoy). I had a question for you if you get a moment, about I used your CSS to move the menu links into a vertical setup, but when you have the mouse over the image in the header the “block” part of the menu flickers and flashes. Is there a way to limit it to only that area that its in? Also because I did it this way, will I be able to make the header clickable (I have the coding from your other tutorials on how to do it). thanks for your help.
Thanks for writing that part about image maps. I’ll be using that on my next design.
I wrote a simple tutorial on how to add in two lines of PHP and some CSS to get the top 15 tag bars seen in binarybonsai’s archives in place of the usual tag cloud. It’s my first tutorial, so please be gentle with me! Hope it’s of use.
A few things you might want to talk about perhaps?
1. Embedding Adsense ads into your blog at specific places in K2. I do this on my own blog with CG-Inbetween and Adsense
2. Cross-posting WP posts to other sites like LJ, MySpace, etc. The biggest problem with xposting right now seems to be that in K2 images get handled by the CSS but there needs to be different info in the IMG SRC tags when cross-posting since other sites cant use your CSS
3. Perhaps provide an easy way for people to link a blog entry to one of the online news sites like Digg, etc?
Awesome tutorial, thanks for the service.
This tutorial rocks. I used the part about the image map for the first time on a site I recently coded for Chris Gillis on http://bieredetable.com/.
He’s a graphic designer and made all the graphics, I did all the code to plug in the design to k2. Using an image map for the header title image made things much easier.
Thanks for this one. I’m not sure what I learned but I’m sure I learned something. I use sidebar widgets for the sidebar so I didn’t need the code for the menu.
And aesthetically I’m happy with the one sidebar so I didn’t need to use the double sidebar option.
Image maps, I’m afraid I still don’t know what they are or how one or more would benefit me. Something to read up on there. Although generally I’m trying to avoid using any more images on my side as I want to keep it fit and slim and moving fast.
Generally, I suppose, I felt that this tutorial moved on a long way, esoterically, from the first three. Suddenly it wasn’t for beginners any more and seemed to be speaking to people who already knew a whole lot more than me.
Not that it wasn’t useful, only that it wasn’t perhaps as useful as the first three seemed to be.
Still, tomorrow I’ll move on to tutorial five. Will I understand it?
I have the sidebar menu setup and working properly. I like the look of having the pages listed in 2 columns, like how yours is currently displaying. How did you make that happen? and what css file should I make changes to? -Thanks!
Hi, I used your helpful toutorial to move the pages to the sidebar, but I can’t seem to get the links to appear at any time except when I’m in the categories section. can you help?
Hi,
I really want to use your image map ideas for the header, but it seems editing the header in such a way is a bit more complicated. Or so it seems to me :)
How would I use an image map in the header?
Thank you so much for the information on mapping the footer. I was able to use it to map my header logo. There might have been an easier way, but this worked for me. Thanks, you are a Godsend! :-)
Nicole
Thanks for your advice! I’m now using K2 release 4.
Hi. I’ve been designing Blogger Blogs for a while, and I have just started working on wordpress. Is there a way to add a second sidebar to K2 in Wordpress.com hosted blogs where you can only edit the CSS?
If not, which standard theme would you recommend as an easily customizable 3 column theme?
@Sarah - I’m not sure if it’s still on WP.com but you can use my “2813″ theme