Modify your blog’s theme

Themes are the style icons that drape themselves across the underlying framework, making them exactly what the users see. There are thousands available on the web, whether premium or free.

Typically, premium themes offer more features and style, but there are plenty of free themes that make the grade, it’s just a matter of finding them. Once a theme has been found and installed it can be used immediately. However, the colors, fonts and background images might not be exactly what is wanted. For a quick fix makeover, the simple answer is to modify the style sheet (style.css).

This is common across all WordPress themes, but the naming conventions, apart from HTML tags, are almost guaranteed to be different. Thankfully, a browser and a visual HTML authoring tool can assist with the identification process. With tags identified and styles in mind, a theme can be changed very quickly.

Select a theme

There are thousands of themes out there, ready to be given a makeover. For this tutorial, we have downloaded the Killian theme from Solostream (www.solostream.com). Install the theme, head to the Dashboard and activate the theme. Now click Appearance>Editor and select Stylesheet (style.css) from the Edit Themes screen.

Easy to identify

To help identify the different elements, you can save the page in your browser and open it in a developer program or the developer tools option in your browser. Chrome and Firefox both have a built-in feature, which will help to identify the tags. Open Appearance>Editor and copy the content from style.css and back it up to your computer.

Body text

To view changes immediately, open two browser windows, one code and other URL, and place side-by-side. Alternatively, open two tabbed windows. The body tag contains the default font and font size. Change font-size to 10pt and font-family: Verdana, Lucinda, aerial, Geneva, sans-serif. Click Update file and refresh the page.

Post title

To modify the post title text head back to styles.css and locate Headings. The first class, h1, h2, h3, h4, h5, h6, h7, determines the font. Change font-family: Georgia, times, serif; to font-family: Verdana, Georgia, times, serif; Now head to the h2 tag and change the font-size to 24px. To change to a different size font simply modify to suit.

Remove backgrounds

The current theme uses a selection of background images to add the curved corners. Head to the #nav tag and comment out the background by adding /* before and */ after. This leaves the text there should it need to be put back into place at a later date, but also means it doesn’t display in the live page.

More backgrounds

The previous step gets rid of the background image at the top of the page. To remove the other main background images scroll down to #page and comment out the background. Finally, head to #footer and comment out the background image here too, giving you a clean slate to work with.

New background

Here we have chosen a vector-style winter themed image at 1500×1500 pixels to help compensate for different resolutions. Add background #55C5D1 URL(images/snow.jpg) 0 0 repeat-x;. This will add a horizontally repeating background image and a colored background that matches the image.

Transparent background

The main content area theme is now all one color, but not a complimentary one. This is to be changed to a transparent white to give a subtle blend and make the background visible. Create a 10×10 pixel image with a transparency of 70-80% and save as a PNG-24. Now add: background:URL(images/white70.png) repeat;.

Big head

The default theme incorporates the blog title at the head of the posts. To remove this, head to Settings>General and delete the Blog Title. To remove it altogether open the Header (header.php) template, scroll down and locate them. Add the following after the closing tag.

RSS feed

With your new-look theme almost done, create a preview image by viewing your blog and taking a screenshot. Save the image as a PNG-24 format file and save it as “screenshot.png”. Using your FTP software, upload this file to the theme folder on your server. When you preview the theme in WordPress, this image will be displayed.

Search bar

To modify the search bar colors, scroll down style.css and first locate ul.tabbernav under the Tabber section. Change the background to #55C5D1 and the border:1px solid #39c;. This will change the tab section. Now go to .tabberlive.tabbertab and set the background and border to the same as above.

Link styles

To modify the link styles locate .tabbernav li.tabberactive a and change the background color. Do the same to .tabbernav li.tabberactive a:hover. Finally, change the background color of .tabbernav li a: hover to the same color as the hover state. That’s it, a completely new theme in no time at all!

Building E-Commerce Solutions with WooCommerce

This book has been written for everyone who wants to learn how to expand an existing WordPress website with e-commerce functions using the WooCommerce plugin. Download Free eBook

Download Free eBook