Adapting a WordPress Theme For Your Blog on Blog24

Adapting a WordPress Theme For Your Blog

Posted by Chris
On March 21, 2008
Categories: Blog24 Progress, WordPress

There have been a number of steps taken to convert Nurudin Jauhari’s Indian Muslims (IM) Wordpress theme to the design that you see before you today.

Images

As this theme uses images in the header area I thought it wise to replace them with my own work. I chose simple images that were not too busy and distracting and cropped them to the correct size before uploading them to the server.

The next image I changed was the favicon.ico - as shown here: Old favicon > New Blog24 favicon

Although there were a number of minor images to change or edit (those used for subtle effects) the last main graphic that required changing was the background. I wanted to keep it simple but somewhat random. I took the aforementioned favicon and pasted it onto the plain background in fairly random places, obviously it was coloured accordingly and random single pixel dots were added just add a very slight suggestion of texture.

Colour

I had already decided which colours I wanted to use and had already noted their hexadecimal RGB values so it was a case of finding and replacing these value in the theme’s stylesheet (stlye.css). To make this process easier I used two of my frequently used pieces of software: PageSpinner and Apple’s DigitalColor Meter.

Apple DigitalColor Meter Apple’s DigitalColor Meter is a very useful little application that is included with Mac OS X which enables to get the RGB values of any pixel on your screen. In this case it was used to discover the hex colour code for numerous elements of the IM theme so they would be easy to find within the long css file.

PageSpinner Icon PageSpinner is a great html editor and it is an app that I have been using for a number of years. There are many features but it was the find and replace I put into use replace the original colour codes with the new making recolouring the theme an absolute breeze.

After two or three changes I quickly uploaded the style sheet and refreshed the page to make sure that my changes had the desired effect. It would be rather annoying to completely replace something as simple as colour codes only to find that you have ruined the whole look of the design.

Typography

At the time of writing I am not sure about if I have settled on the font choice for Blog24 or not. However, I have tweaked the font sizes and line spacing here and there. I did remove most of the text-transform:uppercase in the style sheet - they had been used to capitalize all the heading tags, only the tabbed navigation was kept in uppercase letters. All the header tags included borders too which I thought made the overall layout look a little cluttered at times so they were removed too.

Layout

The main reason I chose to use an existing theme was to save time. I tried many themes and settled with IM because I really like the layout. As a result I have not touched the overall layout of the theme. As previously discussed I will develop my own layout and theme for Blog24 but time was short and I knew that WordPress 2.5 was going to be around the corner so I wanted a quick solution.

Without changing any html or css I have altered the sidebar using a great feature of WordPress, Widgets. These allow the blog’s administrator to rearrange blocks of navigation and introduce other features for their blog. I have chosen to tag all posts on this blog so added the tag cloud at the top of the sidebar. At the time of writing the sidebar is not finalised and changes will be seen over the next few weeks.

I have experimented with two Widgets: Text and RSS. The Text Widget has been used to play with advertising simply by pasting the code and adding the ‘Sponsor’ for the title. The second was the RSS Wiget which currently shows the latest links from my del.icio.us account. Basically, Widget make it extremely easy to add and delete elements to part of the layout of your WordPress blog but with this theme only one area is Widget ready, the sidebar to the right.

Summary

Hopefully this article may help others find their quick fix for setting up a more personalised blog design when using WordPress themes or templates of a different blogging system.

The style sheet was not altered very much, mainly the color, background and border attributes were altered along with a few tweaks to margin and padding - all of which did not take very long to do. Despite this it is possible to make a dramatic change as illustrated by the following screenshots: