How to create a custom K2 Scheme: Part 1

K2 is a wonderful theme for the Blog Platform- WordPress. Before modifying it you need to know the basics of XHTML, CSS and PHP. You can find good tutorials for these on the net. A good introduction to Cascading Style Sheets (CSS) can be found here.

Introduction

What is CSS? It is a file with extension .css that controls the various aspects of a Website. Using it you can change the layout, color and font of an entire site at the same time instead of just a page.

Each entry in a CSS file is called a selector and each selector has attributes. For example

.intro {
background: #FFF6BF;
border-top: 2px solid #FFD324;
border-bottom: 2px solid #FFD324;
margin: 10px auto;
padding: 5px 20px;
}


In the above code intro is the selector and background, border-top, border-bottom, margin and padding are all it’s attributes. One basic rule is that each attribute for the selector must have a colon after it’s name and a semicolon at the end of the line. You can choose any name for the selector.

Some basic things you must know

• A color is usually entered in it’s hex format like #0000FF
• Colors such as #000000 and #66CCFF can be entered as #000 and #6CF.

  This type of writing is called ShortHand and can help you in the long run.

• When you have long CSS files it might get confusing to understand which code does what. This is when comments come handy. This is optional too but can be very useful.

  Comments are started with a ‘/*’ and ended with a ‘*/’ (without the quotes)

  For example:

  /* Comments are ignored by browsers */

• Sometimes it is required to add !important to your selector attributes if you find them not working. This gives your scheme attributes more importance than the ones in style.css

  For example

  border-top: 2px solid #3388CC !important;

• Those of you who use multiple browsers might know that every browser displays your site in a different way. How it varies depends on the code. To make your layout work properly in Internet Explorer you may need to add an underscore before the attribute like this

  _width: 250px;

  Check your layout in IE from time to time and if you find any attributes causing problems, use this method.

About K2 Schemes

In K2, a file called style.css, located in the root folder, controls the blog’s layout. But you do not have to touch that file. K2’s Scheme feature gives us the ability to manage our own stylesheet so that we can revert to the default style when needed.

K2 Schemes work in such a way that it will get the default settings for anything you don’t declare in your stylesheet from style.css file.

You can add as many schemes as you want in your K2 installation and switch from one style to another whenever you want. How to switch between schemes? You are given the option to select between schemes on the K2 Options page. It can be accessed from the WordPress Admin Panel > Presentation > K2 Options.

How to start a Scheme

First of all decide a good name for your scheme. Let’s call it TechnoBlue for now. Go to the style folder located on the root folder (wp-content/themes/K2).

Create a folder there with name of your scheme. In this case- TechnoBlue. It is in this folder that you put all the files needed by your scheme like the css file and images.

Now using your favorite text editor create a file called technoblue.css (or anything you like) in your schemes folder. This file will now be able to control your blog’s layout, colors, fonts, etc when you select it from the WordPress Admin Panel.

Now let’s start filling your stylesheet with the info it needs.

Author Info

The first piece of code you need to add is a bit of Author info like seen here

/*
Author Name : John T P
Author Site : https://johntp.com
Style Name : TechnoBlue
Style URI : https://johntp.com/2006/06/02/technoblue-released/
Version : R2
Comments : Based on a 3 column K2 theme by 59ideas
*/

Copy-paste the above code on your stylesheet and modify it to match your scheme. Do no remove /* and */

Body

The body selector describes how your blog’s body should look like. This is how my body selector looks like

body {
font-family: arial, comic sans ms, helvetica, sans-serif !important;
background: #c8d2da !important;
font-size: 62.5% !important;
color: #333 !important;
margin: 0 !important;
_margin: 0 !important;
padding-top: 10px;
padding-bottom: 10px;
}


In the above code,

font-family defines which fonts to use on your blog, background sets the background color for your blog and color is the color of the text.

Setting the Flexible Width

K2 allows us to choose between Flexible and Fixed width in the K2 Options. You can use this code for the flexible width setting.

body.flex #page {
width: 90%;
width: 80%;
min-width: 970px;
max-width: 1000px;
}

Page

Following is the code for your blog’s page. width is used to control the width of the entire blog.

#page {
width: 970px !important; /*Width of entire Blog*/
_width: 970px !important; /*Check in IE to get the value that matches your blog*/
border: 0px !important;
padding: 0px !important;
_padding: 0px !important;
}

Shadow Effect

If you want to add a shadow effect to your blog’s sidebar, like I have on this scheme, create an image of about 1 pixel height and 11 pixel width (these are the values of my sidebar shadow). You can change the images size to fit your blog. Then add this code to the page selector.

background: #fff url('sidebar.jpg') !important; /*#fff sets the background color of the page and url('sidebar.jpg') sets the sidebar image*/
background-repeat: repeat-y !important; /*this makes the sidebar shadow repeat vertically*/
background-position: right !important; /*this set the position of the background image to the right side*/
_background: #fff url('sidebar.jpg') !important; /*these are for IE*/
_background-repeat: repeat-y;
_background-position: right;

I have explained what the above codes do in comments.

Header

The Header is an important part of your blog that makes it stand out from every other blog. Design a good header and save it in your scheme folder. Now copy-paste this code on your stylesheet.

#header {
background: #3399CC url('header.jpg') no-repeat !important;
height: 127px !important; /*sets the height of header*/
_height: 126px !important; /*IE tweak*/
border: none !important;
padding: 0;
margin: 0;
position: relative;
}

Feel free to modify the above code to fit your blog’s needs. You may not want to use all the attributes I have used.

In the above code,

background sets the color and background image of your header and height sets the height of the header. Change your image’s header size accordingly.

You can adjust the width of your header title with this code

#header-title {
width: 47%;
float: left;
}

To make your blog extra unique, design a header graphic that has your blog name and description on it (like mine). Before this you will have to disable the blog name and description automatically displayed by WordPress. This can be done with the following code.

h1{
display: none;
}
#header .description {
display: none;
}


Footer

I have seen some bloggers leave the footer as it is. There are some things you can do with it like add a Footer image. The following is the code for it

#footer {
background: #ffffff url('footer.jpg') bottom center no-repeat !important;
height: 70px; /*sets the height of footer*/
margin: 0px auto 0 !important;
_margin-top: -15px;
position: relative !important;
padding-top: 0px;
_padding-top: 0px;
width: 970px; /*sets the width of footer*/
_width: 970px; /*IE tweak*/
}


In the above code, background is used to display your header image and no-repeat prevents the image from repeating.

Just make sure your footer image is there on your scheme folder.

What if you want to put links on your footer? You may want to add text or links on your footer like I have added ‘Copyright ©2005-2006 John T P, All rights reserved‘. You can do this by editing the footer.php.

Find

and add your text or links below it.

Changing the Link Color

#footer a {
color: #333;
border-bottom: 0px dotted #ccc;
font-weight: 100;
}

Add this code to modify the hover propertes of the links in footer

#footer a:hover {
border: none;
text-decoration: none;
color: #3366CC;
}

If you want your links underlined when hovered, substitute none with underline for text-decoration. Also you can use overline if you want your links overlined when hovered.

Adding Blog Stat Codes

I usually add codes by statistics softwares on the footer simply because I think it’s the best place for it. You can add your statistics code below this code in the footer.php

Color for your Blog

Do not know which color to use? You can select a Browser-Safe color from this chart

This chart was created by Lissa about 6 years ago. At that time I used to love her chart and saved it on my hard disk. Now 6 years later I am using it to help my readers

As you can see, it all depends on how you want your blog to look like. Feel free to modify the CSS codes I have given to match your blog. I will continue this series tomorrow. Please feel free to ask any questions you may have.

Help me to improve this tutorial by suggesting on what to cover on the upcoming parts of this series here.

Also check Part 2, Part 3 and Part 4