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.

code { /* default was way too small to read */
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.

#header{
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:

#header{
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.

#page {
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.

body {
background: #CCC !important;
}

Alternatively you can change the page color as follows.

#page {
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).

h1 { /* H1 is used for the title of your blog */
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.

h1{
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.

Tagged as: How To's, Software, Web Dev

PaulStamatiou.com runs on the Thesis Theme for WordPress

Thesis is the search engine optimized WordPress theme of choice for serious online publishers. If you’re a blogger who doesn’t understand a lot of PHP, Thesis will give a ton of functionality without having to alter any code. For the advanced, Thesis has incredible customization possibilities via Thesis hooks.

With so many design options, you can use the template over and over and never have it look like the same site. The theme is robust and flexible enough not only to accommodate a site like PaulStamatiou.com, but also to enable the site to run far more efficiently than it ever has before.

• Take the Thesis Video Tour