Modifying the Mimbo Theme: Child theme tweaks part 1
by Kunal Jain on Apr.21, 2009, under design
This article is part of an ongoing series where I share my experiences with modifying Recipe Mobile to use the Mimbo theme. You can see the related articles here.
Introduction
I apologize for the delay. I work on many project at the same time and though most of the updates to the new Recipe Mobile website are in place, I have not had a chance to publish details in this blog as I had said I would.
Anyway, here is a start. 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.
While the functionality of the Mimbo theme is great, I am not a fan of the greyish tones used in it by default. The first theme I used on the Recipe Mobile website had a strong red background with green elements. Initially, I was unsure that it would look good, but Deepa loved it and so I let it be. Eventually, it grew on me andI realized it gave the website a unique look. I wanted some continuity by maintaining a similar color scheme after the theme change. For that I had to change the colors of several elements of the Mimbo theme.
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.
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:3px solid #E36666; border-right:3px solid #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 hover colors and effects can be changed to fit into the rest of the color scheme.
Please subsribe to my RSS feed to receive updates of more articles like these. If you found this article useful please spread the word by using the Digg, StumbleUpon or Twitter buttons.
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
13 Comments for this entry
Leave a Reply
- Part of the
Network
April 24th, 2009 on 8:41 pm
Very nice and informative post. I will ask my son (my webmaster) to modify my site using your tutorial. my take a little while, he is in Japan and he doesn’t have Internet connection yet. ISP promised to install by May 14.
April 25th, 2009 on 12:59 am
Hey thanks for the informative blog. Did you ever figure out how to embed videos? Videos that i’ve used for other themes in the past show the actual video and not the url. Is mimbo 3.0 conducive to this?
April 25th, 2009 on 10:37 am
Hey CQ, unfortunately, I have not got around to adding videos yet. It probably will not be too hard and I’ll try to get it done either this weekend or by next week.
May 20th, 2009 on 11:30 pm
This worked really well. I changed the background of the nav bar and the color of my blog name. I changed the color of the drop down menus on the nav bar. They still have a grey border on the top and bottom though. I haven’t figured out how to change that yet. Thanks for the post.
Rick’s last blog post..Top Ten Food Safety Violators in Bountiful
June 9th, 2009 on 12:59 pm
Hello Kunal,
I had been checking this blog for some updates but you seem so busy to have the time to write about your recent modifications/additions to Mimbo 3.0 theme.
I noticed that you have already added some widgets in the footer of your Mobile Recipe site. How did you do it? Can you share it with us?
Thank you.
EdZee’s last blog post..An Enjoyable Blog Walking Day
June 11th, 2009 on 3:27 am
Hi Kunal,
I’m a rookie trying to implement 3.0 with Vintage Green child theme, but in both Vintage Green and standard 3.0, my “Featured Categories” space in the upper left of homepage shows this error:
Warning: Invalid argument supplied for foreach() in /home/content/12/4487012/html/wp-content/themes/mimbo/index.php on line 88
I’ve opened up the index.php file in Notepad++ and this is what’s there:
Line 88 begins “foreach etc” above
Any help would be appreciated. Actually I’m interested in using this space for something else, but that can wait till I get a better feel for the theme.
Thanks!
Andrew
Andrew Boyd’s last blog post..The Equipment I Use
June 11th, 2009 on 3:30 am
Sorry, it should have said this:
I’ve opened up the index.php file in Notepad++ and this is what’s there:
Line 88 begins “foreach etc” above
Thanks!
Andrew
Andrew Boyd’s last blog post..The Equipment I Use
June 11th, 2009 on 7:24 pm
@EdZee, I really apologize for neglecting this blog the past month. My work on a new project has been keeping me really busy. Thanks for checking back so often.
Yes, I was able to add the footers to Mimbo, it was quite easy in the end. Although, I probably will not have the time to write a full tutorial, what I will do is publish a post tomorrow with the code to create the footers and which files to add them in. That should atleast get you started, then you will have to change the css to match your own theme.
June 11th, 2009 on 7:40 pm
Thanks, Kunal. You’re really a big help to newbies like me. I will wait for your post and see if I can follow what has to be done to modify Mimbo 3.0 footer.
EdZee’s last blog post..Selling A Café Business
June 12th, 2009 on 12:51 pm
Hey Andrew,
Hmm, I have not seen this issue before. I try to look into your problem but unfortunately I have been extremely busy with another project recently so I cannot promise that it will be immediately. Meanwhile, have you already asked for a solution at the Mimbo forums? They might be your best bet to get a quick answer as someone else might have faced the problem before. Thanks for visiting!
June 12th, 2009 on 12:51 pm
@Rick, Thanks for visiting!
July 13th, 2009 on 6:03 pm
Kunal,
I fixed the problem. HOWEVER: I have not had success implementing your very cool fix to the Recent Posts and Featured Categories showing the same thing.
Are you sure the syntax you list in the fix is EXACTLY the way it needs to be entered into the file?
Thanks
Andrew
Andrew boyd´s last blog ..Understanding Photographic Lighting–Part I
August 29th, 2009 on 12:20 am
Is there a way to input 1 picture for the main post and it never changes?
Also, is there a way to input 3 images for the lead post that keep switching out?
I’m not trying to steal a link, so I don’t want to put my domains. Let me know if you need to look at my domains… but, I’m sure you have gotten this question before, thanks!
jeff hopeck´s last blog ..Secret Service Employment Opportunities