Mimbo Theme

The last article in the Modifying the Mimbo theme series dealt with making certain changes to the index.php & header.php template files in the parent theme itself. Now, this section is the first that will talk about modifications that can be made using a child theme. I have already written about the advantages of styling Wordpress blogs using child themes and today I will show you how.


In this article, I will be focusing on the major areas, where changing the color completely changed the look of the theme. These areas are: The website background, the category bar background, and the lead story background.

The below image is a snapshot of the Mimbo 3.0 theme demo. The areas I will be talking about are indicated.

DOWNLOAD

How to change the website background color

Considering how different the new Mimbo theme is from the old theme, using a the same red color for the new back ground was one of the ways I could maintain some continuity across the theme change.

The original Mimbo theme has a drab grey background colour that might not suit many websites. You can change it easily by copying the following code into your child theme
body { background:#C60001 }

Change the hex code after background: to correspond to the color you want. This will override the background colour instructions in the parent theme.
How to change the category bar background color

Green was the other color that I wanted to transfer over from the old theme and the prominent category bar in the Mimbo theme seemed like the appropriate place to use it. The way to do this is to add the following code to your child theme.
#nav-cat{ background:#7DA939 !important; }

Again, change the hex code for your color preference.
How to change the lead story background color

The lead story section is one of the more interesting features of the Mimbo theme and I really like the way it is designed. However, I felt that the original gray color was not standing out enough. Originally, I decided to colour it the same red as the website background but that was too strong and I finally settled for a lighter shade of red (closer to pink). I am still undecided about this but I have kept it here for now. I would love to hear your comments about this choice of color.

Here is how you can change the background of the lead story:
#lead{background:#E36666;border-bottom:3pxsolid#E36666;border-right:3pxsolid#E36666;}

Copy the above code into the child theme. Change the hex code after background: to the color of your choice. Notice that this code also changes the border colors of the lead story box. You can change this if you like.
Conclusions

Please let me know if you found the above instructions helpful, if there are any errors and if you think I can provide any additional details. I would love to answer any questions you might have.

This takes care of the background colors for some of the major sections of the theme. In the next post of the series I will publish how the section border, post title, link and hover colors can be changed to fit into the rest of the color scheme. Do subscribe to the blog's RSS feed or enter your email address to get the updates right in your inbox. If you found this post useful, please spread the word by digging, stumbling or twittering about it.