How to create a custom K2 Scheme: Part 3

Yesterday I explained on Menus and how to customize them. Today let’s take a look at a few more things. You may want to read Part 1 and Part 2 before continuing.

Code Box

The way the default codes () are shown are ugly if you ask me. You may want to stylize it a bit. With the following code you can get the code box like I have.

code {
font: 1.1em 'Courier New', Courier, Fixed;
display:block;
overflow:auto;
text-align:left;
background:#fff;
border:1px solid #A6B0BF;
border-left: 6px solid #6395b0;
padding: 4px;
}


Author Comments

A default grey color highlights Author Comments. If you want your readers to find your comments easily you can change the looks. Here is the code I have used.

.comments #commentlist li.authorcomment {
background: #ECF4FD !important;
_background: #ECF4FD !important;
border-top: 2px solid #3388CC !important;
border-bottom: 2px solid #3388CC !important;
}

Modify the above code to match your blog.

Alert

Alert is a good way to put up important messages that you want your readers to notice. The default alert looks like this

This is an alert

The following code can be used to get the default alert.

Put your text here

Alert CSS

The CSS of the default alert is as follows

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

You may customize the above CSS to add a background image to the Alert

.alert {
background: #FFF6BF url('images/exclamation.png')no-repeat 15px;
border-top: 2px solid #FFD324;
border-bottom: 2px solid #FFD324;
text-align: center;
margin: 10px auto;
padding: 5px 20px;
padding-left: 40px;
}

Examples:

This alert has a background image

Download TechnoBlue

You can download the above icons from FamFamFam and upload them to your images directory.

PNG Icons

K2 uses lovely png icons from FamFamFam called Silk Icons. If you check your blog in Internet Explorer, you will find that these icons look ackward. This is because transparent pngs don’t work well in IE. The solution here is to convert all the png icons you use to Gif format.

You can find more detailed K2 customizations in Paul’s Blog

Also check out Part 4