The theme I had made for forbiddencityfc.com for the 2008 / 2009 was becoming dated and didn’t support native menus.

I liked the look of redbel theme, which is designed by a Belgian named pixelb. It has simple stark colours, simple design, with a nice WordPress 3.0 menu. So, as easy as 1-2-3, I installed the new theme and had it working, after a fashion.

Modifying WordPress Theme

However, as usual with these free WordPress themes, there are a few things that needed to be changed, or tweeked, or modified to better suit the look of the website.

For example, the Forbidden City brand needed to be stronger, with the use of a logo on the header, which was easy enough to add to header.php, but meant the removal of the custom search page. This is something I will talk about later.

Photoshop Change Colour of Image

Also, the colours were too plain. Forbidden City plays in red / yellow, as the colours of the Imperial Forbidden City of China. The blue buttons, sidebar sprite, article, read more labels and .pngs did not match. Using Adobe Photoshop CS4, I added an adjustment layer and colorized the hue/saturation, which is a very easy way to change colour of the image, if it is a fairly simple colouring.

Tutorial

1. Open the .png or .psd image in Photoshop
2. Go to Image > Adjustments > Hue/Saturation (or press Ctrl U on Windows) to open the adjustment settings.
3. Actually it is better practice to go to Layer > New Adjustment Layer > Hue/Saturation to add a new adjustment layer. This means a new layer is added on top of the base image, so you can easily revert or delete the layer if things don’t go according to plan or don’t look right.
4. Name your layer as you like, leave color as none, normal mode and 100% opacity (as default settings). Press OK.
5. Click the colorize button, then change the hue setting to match your new colour chose (60 for yellow). Adjust the saturation (90 for bright yellow) and the lightness to suit (+5 for yellow).
6. Job done. Save your new .png image as you like.

With the redbel theme there are four blue colour images you should change, in my case to either red or yellow. You can then either change the .css link for each file, or simply rename the existing images and upload them via FTP to the theme images folder.

Photoshop Colorized Images Screenshot

Here are the new colorized images as I changed them, which you are welcome to download to use on your redbel theme, giving some extra colour palettes if preferred.

Redbel custom colours download

Download the custom colours for the WordPress redbel theme.

Redbel Theme Image Colours yellow (233) – Download the Yellow theme background Colours for Redbel

Redbel Theme Image Colours red (217) – Download the Red theme background Colours for Redbel

Redbel Theme Image Colours green (225) – Download the Green theme background Colours for Redbel

Other Modifications

I changed the header background in a similar way to give it a bit of a yellow splash.

I then changed the default puce.gif, which is used as a list indent on the sidebar to a gif of a football, to remind of the football based theme of the website.

I wanted to change the width of the main article, but the border of this is made from a fixed width image, which would be screwed up if the page width was altered, so I left this for the time being.

I found a problem with the widget options in the dashboard, that they were not saving when reloading the widget menu, but found this fix on WordPress Forums. I understand bpixel has sinced fixed this on the theme download.

I still need to work out how to add a search page to the sidebar, as the default option and the current .css for search mucks up the layout of the sidebar background images.

With the .css file, I made a few text, image and text colour changes, but nothing too drastic.

Thanks again to bpixel for the theme I worked with. I am very happy with the redbel theme mods I have made so far for Forbidden City FC.

• Previous Entry: Aardvark
• Next Entry: “Or is that just me?” by Richard Hammond