Building this Blog Site

The chosen theme

I finally decided on the Green Track theme from Sadish Bala (see his WordPress Themes by Sadish site and new WordPress Rocks! theme site). I started modifying the theme, changing fonts and subtle layout changes in the CSS files, again making great use of the Firebug Firefox plugin and the CSS references.

Making a duplicate theme

Being concerned with making changes to the standard theme and not being able to go back, I made a copy of the theme into a new directory and called it “Kyoto Green 1.0″. It took some searching to find out where the “theme-specific” info is held; it’s in the top comments section of style.css:

/*
Theme Name: Kyoto Green
Theme URI: http://wpthemes.info/
Design Name: Kyoto Green
Description: Kyoto Green
Based on Green Track From WPThemes.Info
Version: 1.0
Author: David Edwards
Author URI: http://davidedwardsphotos.com/
*/

With that done, I could easily switch between the Green Track theme and my new one to check changes.

Note that you can also create a screenshot.png or screenshot.jpg file (300×225) for the thumbnail image in the theme selector.

Changing the Banner Image

Whilst the image Satish had used was nice I knew I had a few images that were equally as good and also mine (given that the site is about my photos, I thought it wouldn’t do to have someone else’s image across the top). Changing the image was simple, all I needed was something of the same size and then changing the image in the CSS file…

#header {
/* background: url('img/rail.jpg'); */
background: url('img/2007_Kyoto_400_header.jpg');
height: 175px;
margin: 0;
padding:0;
}

Note that the img directory is relative to the themes directory, such as /public_html/blog/wp-content/themes/kyoto-green-10/img.

Adding a links bar under the header

I wanted some static links under the header. I created an image the same width as the header image and matching the bottom of the header image (i.e. I took a large image, cut out the bit for the header and cut out a bit a few pixels below it for the links bar).

I created a separate php file for the links bar, linksbar.php, and added the static links I wanted, as well as the links for the pages created through wordpress (I can’t include it as text ‘cos WP takes it as html code). It is a series of links using “a” tags in an unordered list, include the call to the wp_list_pages(‘title_li=’) function.

A set of css entries under the linksbar label are used to control the layout in the style.css file:

/* --------------------------------------------------------- */
/* Added whole new links bar under the header */
/* David Edwards, Mar 08 */
/* --------------------------------------------------------- */
#linksbar {
background: url('img/2007_Kyoto_400_linksbar.jpg');
height: 22px;
margin: 2px 0px 4px 0px;
/* margin: 4px 0px 0px 0px; */
padding:0;
text-align:right;
}
#linksbar ul {
border-left:2px solid white;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
position:relative;
top:0pt;
}
#linksbar li {
float: right;
margin: 0pt;
padding: 0pt;
}
#linksbar ul a:link, #linksbar ul a:visited {
border-left: 2px solid white;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 11pt;
color: #F0F0F0;
display: block;
height: 16px;
/* padding:3px 15px; */
padding:1px 15px 5px 15px;
text-decoration: none;
}
#linksbar ul li a:hover {
color: #FFFFFF;
text-decoration:underline;
}

This allows the links to appear as if they were uniquely created buttons with part of the image attached.

One thing I don’t understand is that the buttons appear in the order right to left. I suspect that’s because of the “text-align:right;” and “float: right;” settings.

Finally, to make the links bar appear on each page, I had to include an “include” statement in each file that defined the page layout (such as index.php, category.php and single.php):

Other changes

I played around with a few other settings, such as fonts, link colours, and the content in the sidebar. I’d moved the blog description up to the header and had a separate “About” page, so these two sections were removed from the sidebar.

The other thinks added to the sidebar came from the plugins, discussed on the next page.

Continue reading... go to page: 1 2 3 4