Customizing K2: Part 1
With the long-awaited final version of the K2 theme for WordPress coming out before the New Year it is a good time to catch up on some tips and tricks to get your blog looking its best. I am trying to make this post be the definitive guide for helping beginners and amateurs out. A lot of the things covered in this tutorial have been lifted from frequently asked questions or problems within the Flickr Binary Bonsai support forums. After you’ve finished this, be sure to check out part 2 and part 3.
CSS Basics
Most of the things covered in this tutorial and in K2 can be done strictly in the CSS. CSS stands for Cascading Style Sheet and is a file that encompasses many aspects of every element on a website. Things such as padding, margins, backgrounds, colors, fonts and layout are all controlled by the CSS file. In K2, Michael has allowed users an easy way to manage their own stylesheet while affording tha ability of reverting to the default style or another custom style with schemes. Schemes allow additional functionality to the default style.css without touching it. Any K2 installation can have as many K2 schemes as necessary, easily switched from one to the other on the K2 Options page accessible via the WordPress admin panel » Presentation » K2 Options. Each K2 scheme lives in the styles folder within the K2 folder found in wp-content » themes » K2.
First let’s get familiar with some of the CSS lingo and attributes. Each entry in a CSS file is called a selector. Below is an excerpt of my CSS code to show you the typical format.
font: 1.3em ‘Courier New’, Courier, Fixed;
text-align: left;
background: #fff;
border: 1px solid #A6B0BF;
}
You can see the selector is initiated with the name code and an open curly brace. Each attribute for the selector (font, text-align, background and border in this case) must have a colon after their name and a semicolon to end the line. This CSS snippet is the same styling that created the code box it is in. A color is usually entered in it’s hex format and begins with a pound sign. If you are going to be entering a color such as #FFFFFF, #000000 or #3388CC you have the ability to save a few keystrokes and enter it in shorthand. Every second digit will be repeated when you enter three digits. For example, #38C is the same as #3388CC. It really doesn’t matter how you input the color but when you move on to making large CSS files this shorthand helps reclaim some of the monotony. It is also a good idea to comment each CSS selector or at least the not so obvious ones so you can easily keep track of what you have done. Comments can be started and ended with /* Comment Text Isn’t Parsed By The Browser */.
When you are working in your K2 scheme it might be a good idea to add !important to your selector attributes if they don’t seem to be having any effect. Adding this overrides the style.css with your custom scheme attribute. This may not always be the case, but if so this is the solution. Such an entry may look like this: border: 1px solid #A6B0BF !important;.
Sifting through the style.css included with K2 you may seen something like padding: 0 5px 2px 0;. The first time I saw this format, I was baffled as well. Thanks to Bryan I found out that each of those four numbers refers to the following directions: up, right, down, left. That means that there will be 5 pixels of padding to the right and 2 pixels of padding below. Unless the number is zero, you need to specify the unit, such as pixels with px.
One last thing before we jump into the K2 stuff involves browser compatibility. Your stylesheet may make your site look just the way you wanted in Safari or Firefox, but visit your site in Internet Explorer and you’ll be in a world of hurt. For example, if you have a piece of text controlled by the div “text” that is too close to the left border and you had already created an attribute in the text selector as follows: padding-left: 5px;. To make the same attribute work in Internet Explorer, copy it and prepend an underscore. This way you will have another entry _padding-left: 5px;. This trick applies for many CSS attributes. Testing your K2 design in multiple browsers is always a good idea. Firefox is a free and a fantastic browser as is Safari. If you don’t have access to a Macintosh computer you can see what your site looks like in Safari with this website.
Adding a Header Image
To change the header from the default blue background you can add any image. Before we get into the CSS, find a picture you like and open it in PhotoShop or Gimp and get it in the proper size. Check out my blog header graphic tutorial if you’d like some PhotoShop pointers. A standard installation of K2 uses an image size of 780 pixels wide by 200 pixels high. For the purpose of this tutorial, we will assume that you have a scheme named testscheme within the K2 » styles folder. Save your image as header.jpg (the name does not matter) in the K2 » styles » testscheme folder. Then add something as follows to your scheme stylesheet, testscheme.css. All paths are relative so the image has to be in your scheme folder. The reason we have #38C in the front is in case the image doesn’t get loaded, it will paint a background of color #38C first. Think of it as a failsafe. Another reason for this approach could be you have a transparent image and want that color to show through (beware, Internet Explorer does not play well with transparent PNG’s). Before you apply the following code, make sure that you have set your blog to fixed width under width style in K2 Options.
background: #38C url(’testscheme/header.jpg’);
}
If you are interested in setting up a header graphic that is not the default 200px high, you can add the following entrie to your #header: height: 165px !important;. This line assumes you have an image that is 165 pixels high. If you would like to have a header image that is not the default 780 pixels wide keep reading, I will discuss adjusting the page width.
Rotating Header Graphics
A rotating header randomly loads a different header graphic everytime your site is visited as well as adding a dynamic feel. Before continuing you will need to create several header graphics as described above. Make a new folder inside of testscheme and name it headers. Place your new header graphics in the newly created headers folder. You will also need to place a rotator script in that folder. A List Apart has a great article describing the use of the script and is worth a read if you have the time. Otherwise, you can find the file we need here (right-click » save link as/download link » rename to rotate.php). Place rotate.php in the headers folder. Now all you have to do is change your header CSS to point to the rotate file. It should look similar to the following:
background: #38C url(’testscheme/headers/rotate.php’);
}
Adjusting Page Width
For whatever reason, you may want to change the width of your K2 blog from 780 pixels wide to something larger for better readability or slimmer for a unique design. Regardless of your intentions, there is a simple way to go about achieving this. You need to add the following snippet to your current scheme stylesheet but edit the width pixels to represent what you are shooting for.
width: 640px; /* Width of entire blog */
_width: 640px; /* Check in IE and adjust accordingly */
}
Changing Background Color
The answer to this task lies in the body selector. Change #CCC to the color you would like to use. Visit ColourMod.com and use the demo on the right if you don’t know what color to use.
background: #CCC !important;
}
Alternatively you can change the page color as follows.
background: #FFF !important; /* Again, the !important may not be necessary */
}
Moving the Blog Title and Description
You may not like where the header title and description are placed by default. You can move it by adjusting the margin of both elements in your scheme stylesheet. The first entry is for h1, the title of your blog, while the second is for the smaller description. To adjust the vertical height, change padding-top in h1; make it smaller to move the title higher and vice versa. If you want to move it to the right, increase 40px in both h1 and the description to something like 300px (depends on blog width, trial & error).
font-size: 3em; /* Change to adjust title size */
padding-top: 75px;
margin: 0 0 0 40px;
font-weight: bold; /* Change bold to normal if you prefer that */
}
#header .description { /* Blog description, under blog title */
font-size: 1em; /* Make it larger with something like 1.1em */
margin: 0 0 0 40px;
}
Using a Header That Has the Blog Name In It
If you would like to use a header graphic that already has the blog name in it you will need to hide the title and description text automatically displayed by WordPress. This can be done in CSS with a simple entry.
display: none;
}
#header .description {
display: none;
}
Asides 101
Asides are an easy way to post a little snippet that isn’t as important as a full blown post. They are ideal for mentioning a notable link you came across online or other tasty tidbits. Fortunately, K2 has excellent support for asides. You need to first enable them in the K2 Options page. Tell it whether you would prefer inline or sidebar asides and give it a category to use. I have made a category called asides that I use for this situation. Basically the idea is that whenever you make a post and give it the category you set for asides, it will be marked and styled as an aside when you publish it. If you opt for sidebar asides, set a number of asides to show in the sidebar. After you’ve set the K2 Options that strike your fancy, click Update Options on your way out.
I like the article a lot, great idea to explain CSS/customization for one and all ;)
Great guide to editing K2 and is even useful for non-K2 CSS beginners.
Thank you! Very helpful pieces of information for a great template!
very nice and helpful
How about some info on how to add another column on the right side? :)
I know Paul that you covered IE hacks briefly in this guide, but I have a more in-depth article on how to tweak your site for IE. I just finished writing it and thought I would let people know, since this may be of use to all the K2 tweakers out there.
You can read my article here: The Ultimate IE Hack Guide
Awesome post and something I have been wanting to learn how to do myself. I don’t know if I can ever make a scheme as good as Deviance, but at least I can tinker with it some more and make it more personal to my site.
Great idea Paul!
Perhaps you should also mention which software tools you are using for editing. I’m using the following tools:
Webdeveloper Plugin for Firefox - this plugin is so powerful (http://chrispederick.com/work/webdeveloper/)
Topstyle - offline Style Sheet Editor (http://www.bradsoft.com/topstyle/index.asp)
PSPAD - universal freeware editor for PHP, HTML, XHTML… (http://www.pspad.com/)
FilzeZilla - freeware FTP Editor (http://filezilla.sourceforge.net/)
…
Great tutorial! I really appreciate your willingness to share and explain. You’re saving me a lot of trial and error steps for getting my website up. Look forward to reading more. Cheers!
Great start. I look forward to these with much aniticipation.
Any chance of running a tuturial on altering the page layout. Maybe for having asides seperate to the main posts but not in the sidebar (useful for those like you, who are/have removed the sidebar. I would also love a tutorial on plugins and such, how to code their seetup in the style sheet and how to dictate where they go, be it sidebar, at the top of the page, at the bottom of the page or where ever.
howabout a guide to changing the nav. options ie adding new links etc?
Well this is just part one Ed. Im sure we’ll see more of what your looking for in the upcoming parts. Great Job man so far with this…
Much appreciated. I am looking forward reading the next part of this really well done tutorial!
Great guide.
I would love it, if you could provide a guide on how to use a flash header like the one Rui’s got at http://the.taoofmac.com/space.
Ive tried to follow all the instructions at http://whatdoiknow.org/archives/001629.shtml and I can get it to work when its standalone. But when I try to include it in the Header. No luck.
Great work again Paul .. !
For customizing my stylesheet, I take much help from CSS and Xhtml guides available at ZVON… Check it out ..
On a different note, the comment list is appearing broken in Maxthon .. Its fixed in WP 2 and K2 133 .. So better upgrade soon .. :P
yes, sorry, forgot to say thanks for part 1!! :-)
Shahab, I’m on WP2 but still use a hacked WP1.5 r125 distro… I’m waiting for a final K2, hopefully today, because upgrading my theme is a lengthy process as I have modified every file in K2.
Paul….curious about how to do the ubiquitous yellow alert adorning so many K2 blogs. In the code, I see the div “primary” or “alert”.
thoughts?
Paul - just wanted to let you know that in K2 for WP2 the default header is 780×200.
Eric Nentrup, you can use the ‘alert’ class by writing something like this in a post or page:
Simplicity is something of infinite beauty.
of course take out the space after those “Simplicity is something of infinite beauty.
also Paul - i just wanted to say a big THANKS for writing these articles! :D these will be a gigantic help. i’m no CSS whiz at all, but can find my way around if someone tells me where to go. once again, thankyou. :)
Thanks a bunch! Without *REAL* documentation inside the K2-package (nevermind, because Michael is pointing towards this site in the K2-forum ;-), these articles are very useful.
One point, whenever wanting to customize someone’s else’s CSS, I use an add-on for FireFox or Mozilla that instantly let’s you see what CSS element is being used just by clicking on it in the page. Then, you can jump right to that section in the css file- amazing! Makes it really quick to modify CSS.
https://addons.mozilla.org/extensions/moreinfo.php?id=60
I have just checked and the default page width was 780 px, not 760.
That is right where I am on your tutorial. I am having trouble with my header image not being at the very top of the page…
Thanks,
Necati
Necati, when I had written this it was 760px, it was changed fairly recently to 780px.
I thought so. Just so that you could update your article.
Thanks for all your efforts; again.
Necati
Will read fully in the morning, however this looks to be a very interesting read :)
this was exactly what I was looking for. Thank you for your work here.
Okay so I am working on a new template using the K2 theme. I have almost everything done but I have run into a problem. Why is there a white space above my header image? Does anyone know how to get rid of it?
My new site template can be seen at http://eric-taylor.com/new
Username= guest
password= guest
Testing Ajax
great thanks for the info….
HELP! I’ve tried everything you described to put my own header in K2. It’s 780 x 200, I put it in the right folder, I’ve tried every variation on the file path that exists… I’ve tried your advice, dopamine addict’s advice (http://dopamineaddict.com/2006/01/13/modifying-k2-series-headers/), 2 friends’ advice.. nothing I’ve tried has resulted in my header becoming visible. Even if I suppress the h1 blog title info. I’m really at a loss for what I’m missing.
Great tut, visit my site http://www.dyberemening.dk
I ended up solving my problem through trial & error. Thanks for your helpful guide.
Great guide, thank you :)
I would like to thank you for your precious info about k2.
I’m using this nice theme on my site, and I will try to make some changes using
your well done guidelines.
Many many thanks for your great work.
Wow. This is a really sweet tutorial. Actually, I’m here to ask another question, and I hope that you could discuss this in some future tutorials for suctomizing K2… How did you lose your sidebar? I’ve been wanting to lose mine, only to actually hardcode it in the K2 files, such as taking out #secondary from the sidebar.php. Did you do this to implement this no sidebar thing?
Also, is it possible to have my entries in two columns?
These tutorials are great! I’m having lots of success following them. And I can’t wait to go through them all. I’m usually a little lost when it comes to customizing.
Quick question about sidebar asides: I’m thinking about using it to stick a few thumbnails of photos I’ve previously posted, and so I’m wondering, if I’ve set my reading options to show “At Most: 6 posts” and three of those are sidebar asides, are the main posts going to start pushing the asides off the page?
I’ve set sidebar asides to “3″. But I’m worried that my seventh post will drop the posted asides down to just two visible ones, and will put a fourth in the main section.
Nice info !! thx for it :)
I’ve read the css tuttorials and yours. But I still have not been able to make a narrower width for the primary text of the post. I have a single sidebar to the right, and I want the post text to have more space around it, and be narrower.
I’ve tried altering all the specs in the K2 css for primary, including the padding, margin, and width. Nothing makes the post narrower.
Please advise,
thanks,
David
I’ve stayed away from K2 for so long because of its complex style. Thanks to you I have made the switch and am on my way to making it unique to me. Thank you very much.
Many many thanks for your information.
If you have a look on my site, that use k2,
I have with a little javascript, the possibility to change css, so from white to black in this case.
The only thing that I can’t do is when the background is white, a quote comment remain black, so is hard to read from user.
Where is the code in the css for the block quote comment ?
Thank you..
Thanks for that, the random image script is great.
I’m now using it on http://things.networkbase.co.uk and asking the users if it should stay or not!
Thanks again, I’m off to read the other parts now!
Steve
This is nice!! Keep up the good work :)
Hi! thanks a lot for these great guides to everything K2!! it’s like a sienece in itself for beginners… anyway. i’m having a smalish problem with the blog i’m setting up. i followed the instructions to how to include a header image but it kinda destroys the beauty of the page in IE: it’s repeating itself. Do you know a trick? the url to the new blog is:
http://www.florian-behrenbruch.de/blog/
Hi,
how can I change the sort of the “own sites” in the header menu?
max
I have been using your tutorials a lot recently.
I find them lucid, to the point and enormously helpful as a reference. I use them every time I forget something about K2 or want to see how to use it better.
Thanks
Chris
Great tutorial! Thanks Paul!
Great tutorials so far. I changed my header image successfully but only after making the slightest of modifications to the code you provided:
#header{
background: #38C url(’testscheme/header.jpg’);
}
Of course I cannot duplicate it here (damn you plain text!) but in the example of the above code you gave in the tutorial “testscheme/header.jpg” is surrounded by “fancy quotes” (aka “typographer’s quotes”). I needed to change them to straight quotes (like they are above) to get the mod to work.
Aha! ‘Tis Wordpress that converts straight quotes to “fancy” quotes. Plaint text in the comments authoring box = “fancy” quotes once the comment has been published.
The custom header image doesn’t show. I’m using Kristin Pishdadi’s photoblog hack, so there’s no option to upload a header image. I put in all the right code, but it still doesnt show.
Great… i will traduce this article for Portuguese-BR…
Thanks!!!
Thanks Paul for more great info. :-)
Hello,
Thanks for all this info. I am trying to do the rotate image header in the above site. I am using an adapted version of the Andreas theme.The front image info is in the header.php thus:
and in the CSS I had it set as:
background: #38C url(’/headers/rotate.php’); added to what was there before, which was only the following:
#header{margin:25px 0 0;}
I just get a no image red X, as obviously this is not quite right.
Can you make any suggestions as to what I might be doing wrong?
Thanks
Ellie
Thanks for this introduction. I got through it and even understood most of it and feel just about ready to tackle part II.
My problem, mainly is where to look, in which file in the theme to find the code I need to alter to tweak the blog.
I suppose I’ll ‘get it’ eventually.
Nice site actually. Gone to my favourites. Thanks for creation.
Your link to the wiki page for a great intro to CSS (http://www.developersdigest.org/wiki/index.php/Intro_To_CSS) is not reachable. (It required membership?)
That link seems to be down, I took it out of the post.
Nice article and a life saver for people desperately wanting to alter K2! !!!
I can’t even begin to thank you enough for this.
I’ll have my beta blog looking right and be ready to convert over to it in no time.
Not to mention you are teaching me so much about CSS and K2 in the process.
You rock!
I see the option to activate Asides in the K2 options, but I don’t see where I can indicate that I want it on the side or inline. Where is that? I want it on the side but it defaults to inline.
…This is a great series, here. I’m finding it incredibly helpful, as a WP-n00b.
That said, I’m a bit confused by one thing:
I can find parts 1, 2, and 5, but can’t find any links to parts 3 or 4– and simply changing the number at the end of this page’s URL to 3 or 4 isn’t working…
Are parts 3 and 4 out there somewhere? I’m a bit mystified…
i just used the search box on my site and found them:
http://paulstamatiou.com/2006/01/21/customizing-k2-part-3
http://paulstamatiou.com/2006/04/16/customizing-k2-part-4