I tried Icey’s CSS Compressor and got my CSS compressed by 45%. But when I tested it here, I found the layout completely broken.

So for me the winner is CSS Tweak, which works perfectly even though it compresses my CSS only by 30%.

Which CSS Optimizer works best for you?

This is a Mod by Steve and he has provided excellent instructions on how to do it for K2 r167 and it’s nightly builds here.

One of the reasons I applied this Mod to my current design is that I feel the date stamp makes each post stand out.

Those of you interested in K2′s Live Search feature can try out Steve’s K2 Live Search Mod. I haven’t tried the Live Search Mod yet as I have disabled all Live features from my K2 blog to decrease page load time.

Have a nice time modifying K2

According to my Google Analytics stats, most of the visitors here are also on 1024×768. Actually, I think it’s good news because I don’t think my current 3 column theme would display well on resolutions of 800×600 or below.

via OneStat

Check out Part 1, Part 2 and Part 3 before reading this.

Calendar

I have not seen the Calendar being used on much K2 blogs. It is simply because K2 does not include it by default. I think that Calendars can be very useful in helping your readers dig through your archives.

You can put the Calendar on your blog’s sidebar with the following code

<?php get_calendar() ?>

You might not like the default look of the calendar. You can stylize it with the following CSS

#wp-calendar {
width:160px; //width of calendar
text-align:center;
border-collapse: collapse;
background:#f5f9fd;
}
#wp-calendar caption, #wp-calendar th {
background:#e0eaf5;
color:#666;
padding:2px;
}
#wp-calendar caption {
font-weight:bold;
background:#8db6de;
color:#fff;
}
#wp-calendar #today { /* highlights the current day */
background:#8db6de;
font-weight:bold;
color:#fff;
}
#wp-calendar a {
color:#3388CC;
text-decoration:underline;
}
#wp-calendar a:hover {
background:#96c1eb;
color:#fff;
text-decoration:none;
}

Category

After moving Categories to all pages on my blog, I noticed that my old posts were being viewed more often. You can put the Categories on all pages of your blog with this code

<div><h2>Categories</h2>
<ul>
<?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','') ?>
</ul>
</div>

Archives

This will help your readers to dig deep into your archives.

<div>
<h2><?php _e('Archives','k2_domain'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>

Noteworthy

Noteworthy is a WordPress plugin with which you can mark important posts that you want your readers to read. The plugin adds an icon of a heart near every post you mark.

The good news is that K2 supports this plugin and so the only thing you need to do to use this plugin is upload and activate.

Noteworthy also adds a Category called ‘Noteworthy’ onto which it puts all the posts you mark. This can be useful for your readers as they no longer have to search for the important posts, all they have to do is go to the ‘Noteworthy’ Category.

Download Noteworthy

I have added the Noteworthy plugin to the WordPress Plugins page.

Also check out Part 1, Part 2 and Part 3

If you liked this tutorial please bookmark it in Del.icio.us

Code Box

The way the default codes (<code></code>) 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.

<p class="alert">Put your text here</p>

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

Main menu

The main menu can be customized in many ways, the default being the horizontal tabs below the header. You can customize it to be above the header, on the sidebar or you could just change the tabs to some thing more better. After learning CSS, you will be able to use these ideas to create your own unique look.

Menu above the Header

ul.menu {
margin-bottom: 12px;
padding-left: 10px;
width: 90% !important;
word-spacing: 0;
}

In the above code,

Increase the value of margin-bottom until you get the menu to reach above header

padding-left lets you move the menu away from the default left side

width lets you control the spacing between the links in the menu

word-spacing lets you control the space between the words

You can adjust the font-size and default color of Menu links with this code

ul.menu li a {
font: 1em Verdana, Helvetica, Arial, Sans-Serif;
color: #ffffff;
font-weight: bold;
}

With the following code you can change the hover properties of the menu

ul.menu li a:hover{
background: #76a6d4 !important; /* hover background menu item color */
color: #ffffff !important; /* text color when hovered */
}
ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
color: #003366 !important; /* active tab hover text color */
background: #ffffff !important; /* active tab background color */
}

Play with the above code until you get the effect you want

Menu in the Sidebar

Paul Stamatiou has a good tutorial describing how to move your menu to the sidebar.

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.

<ul class="menu">
<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 } ?&g;"><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.

<hr />
<div class="secondary">

<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>',''); ?>

Use the following CSS to begin with.

/* Sidebar Menu */
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;
}

Modify the above code to match your blog

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.

Do not stop here, using these codes as a base you can design your own unique menu that makes your blog stand out.

Continue reading Part 3 and Part 4

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 : http://www.johntp.com
Style Name : TechnoBlue
Style URI : http://www.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 <p id=”footer”> 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

<?php do_action('wp_footer'); ?>

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

1. Frames: A few years ago, frames were the in thing. They allowed one or two parts of your site stay constant while only one frame changed.As a result people used to use them for fast loading of pages.But with the growing popularity of search engines, it became a known fact that Framed sites were not being properly indexed.

   When a search bot visits a site with frames it indexes only the main frame ignoring all the other frames, leading to sites with frames dropping rapidly in search engine rankings. This is one of the reasons why frames are no longer popular.

   Another reason is that bookmarking a site with frames is not easy.

2. Page Title: Most designers leave their page title as ‘Welcome to Mysite.com’. Now this is a very bad idea as it depends almost entirely on the page title whether or not a visitor clicks on your site on a search result. Your page title should be a very short description of your site.Most search engines only displays a part of a long page title, so make sure you keep it below 65 characters.
3. Page size: Huge pages take too much time to load and thus you could loose visitors. Keep your page sizes less than 100 KB.
4. Flash: Using Flash on your site to make it more attractive is a good idea but make sure you keep an eye on its size. Flash based sites are not spidered and thus it tends to loose visitors.Always remember that text loads before graphics and most people will scan through whatever appears on your site first and decides whether the content is what they are searching for. Even if you have relevant contents neatly dispalyed using Flash menus, many people may not stick around long enough to see this.

   If you have Flash intros on your site, make sure you include a ‘Skip Intro’ option.

   The loading time problems will no longer be a problem once everyone starts using broadband.

5. Colors: I have seen many web sites use colors that don’t match. It only proves that the designer does not have a good color sense.:idea: Tip: Choose a color (preferbly your sites logo color) and use its dark and light versions. If you decide to go for a dark background then use light text and dark text for a light background.

   A white background with black text is universally considered the most readable.

   You must always use Web safe colors on your site. You can use the Web safe color table from here.

6. Outdated Pages: You should always update the content on your site. A site that was last updated over a couple of months will loose visitors.
7. Navigation: Many times I have come across sites that have poor navigation. All pages of your site should be linked to your homepage and other major sections of your site. Create a navigation bar and use it on all pages of your site.
8. Animations: Marquees, like frames, are outdated and are not considered as good design anymore.Even Animated GIF images should not be used much. They are considered as advertisements by many. They will only make your site look unprofessional.
9. Tables: Yes, tables are outdated too. Tables make our pages load slowly. Use XHTML with CSS and your site will be much faster.
10. Images: Images help make our site more attractive. But always make sure you optimize its size by reducing the number of colors. You can do this with programs like Adobe Photoshop.Use the height and width attribute of the image tag so that pages won’t have to wait till the image is loaded completely.

    Use JPG for Photographs and GIF for artwork.

11. Javascript: Javascript helps to add more functionality to our site. But too much of it will increase page load time.
12. Music: A light music in the background is fine but keep an eye on its size.
13. Browser Support: Most web designers only check their designs on their favorite browser. Your visitors may be using another browser so check your designs in all major browsers like IE, Firefox, Opera and others. Also, it is a good idea to check your designs on Lynx, a text-based browser in Linux, to see how it will look like to a search engine bot.
14. Scroll bars: In professional web designing, scroll bars should not be visible on the homepage especially horizontal scrollbar. Homepages should fit the screen. To prevent scrollbars you can design your homepage at a resolution of 770 x 434 pixels.
15. Contents: I have seen many websites that take a lot of time to load just because they have included a lot of graphics. There should be a fine balance between text and graphics.A good rule of thumb is the ratio of 80:20, i.e, 80% text to 20% graphics.
16. Advertisements: Advertisements are not part of web designing. I have mentioned them here because a lot of people are using them to earn extra money. Just make sure you don’t clutter your pages with a lot of advertisements.Text based advertising is much better than image based ones. Animated advertisements are disliked by many and you could loose visitors using them. I recommend Google AdSense as their ads are based on the content of the web page

What other mistakes can a Web Designer make? Please share your tips here via comments.