Modify your blog’s theme


Modify your blog’s theme

are the style icons that drape themselves across the underlying , 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 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 , but the naming conventions, apart from , are almost guaranteed to be different. Thankfully, a browser and a visual HTML authoring tool can assist with the identification process. With 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 ( 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 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 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 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 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 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 title at the head of the . To remove this, head to >General and the Blog Title. To remove it altogether open the Header (header.) 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 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 , this image will be displayed.

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.

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!






Related posts