features

Archive for the ‘Uncategorized’ Category

How to modify Seasons Wordpress Themes design ?

Wednesday, January 30th, 2008

1.Changing the background image

Location of the background image can be found in the css document right here:
body {
background:#000 url(img/bg.jpg) no-repeat left top;
.....
}

For making this background I used some nice pictures and some photoshop brushes, and I mixed them up in photoshop.
Here are some snapshots of pictures I use and the final result:

Before:

t1.jpg

After:

t2.jpg

Depending on your final background size you can set the position of your blog content by changing the padding of your main container area (style.css):
#main_container {
.....
.....
padding:100px 0 0 150px;
}

2.Changing logo and titles

Logo can be found in header.php document at these lines:
<div style="float:left;">
<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/img/logo.gif" border="0"/></a>
</div>

I made it a transparent gif so you can make it with any font you like .
To change this edit the photoshop file logo.psd

Titles are also transparent gifs; for changing them just edit psd files.
Most of these titles can be found in sidebar.php:
<h2><img src="<?php bloginfo('template_directory'); ?>/img/archive.gif" border="0"/></h2>
<h2><img src="<?php bloginfo('template_directory'); ?>/img/meta.gif" border="0"/></h2>
......

When you save these files don’t forget to set the background of your gif the same as the background you want to place it.
Here is a screenshot of my logo:

t3.jpg

3.Changing buttons and bullets navigation
In the .zip document you will find psd source for any button and bullet and changing them is pretty much the same, just edit the .psd and export with the same size.

For example the right menu bullet’s location can be found in style.css at this lines:
#sidebar ul li ul li {
background: url(img/bullet.gif) no-repeat 0 6px;
padding-left: 23px;
line-height: 23px;
}

You can modify position of the bullet also by changing these lines :

..no-repeat 0 6px;

4.Other areas like posts, comments, footer can be modified by changing style.css

For example I use a jpg file for background of post details (date,author,nr comments) which can be easily modified by changing post_details.psd.
Lines that contain post details information can be found in style.css here:
.post_details {
padding: 0 15px;
background:url(img/post_details.jpg) no-repeat left top #0e0e0e;
}

For any questions don’t hesitate to contact us.