SidekickBlog

I had promised (weeks ago) to post a tutorial on how to add footer widgets to the Mimbo 3.0 theme once I figured out how to add them to http://www.recipemobile.com.  Although, I was able to make the necessary tweaks to recipemobile, I have not had the time to post a tutorial.  So, for now, I am publishing the code I have added to enable the footer widgets.  I hope to be able to update this post to a full tutorial soon.

You will have to edit 3 files in your theme:

Functions.php

In functions.php, add the following code under the existing widget code:
if ( function_exists(’register_sidebar’) )
register_sidebar(array(
‘name’ => ‘Mimbo Footerbar1′,
‘before_widget’ => ‘<div class=”clearfloat”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3 class=”widgettitle”>’,
‘after_title’ => ‘</h3>’,
));

if ( function_exists(’register_sidebar’) )
register_sidebar(array(
‘name’ => ‘Mimbo Footerbar2′,
‘before_widget’ => ‘<div class=”clearfloat”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3 class=”widgettitle”>’,
‘after_title’ => ‘</h3>’,
));

if ( function_exists(’register_sidebar’) )
register_sidebar(array(
‘name’ => ‘Mimbo Footerbar3′,
‘before_widget’ => ‘<div class=”clearfloat”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3 class=”widgettitle”>’,
‘after_title’ => ‘</h3>’,
));

Footer.php

In the footer.php file, add the following code right under the footer div definition:

Style.css

Now, all you have to do is edit your style.css files to add the appropriate styling to the footers.  This is the css code that I have used to get you started.

#footerbar {
        display:block;
        clear:both;
margin-top:-10px;
list-style-type: none;
list-style-image: none;
margin-bottom:15px;
}
 
#footerbar ul {
padding-left: 15px;
}
 
#footerbar h3 {
        color:#dadada;
        font-family: 'Tempus Sans ITC','Bradley Hand ITC','Comic Sans MS','Zapf-Chancery', cursive;
        font-size: 18px;
	letter-spacing:0.15em;
border:none;
margin:0px;
}
 
#footerbar h3.widgettitle {
        color:#dadada;
border:none;
}
 
#footerbar a {
display:block;
}
 
#footerbar1 {
        float: left;
margin-right:10px;
        }
 
#footerbar2 {
        float: left;
        }
 
#footerbar3 {
        float: right;
margin-left:5px;
        }		
 
#footerbar1, #footerbar2, #footerbar3 {
width:32%;
}

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

In this article, I will show you how to change the hover states of important objects in your Mimbo theme.  These include:

1. The page navigation bar link hover color
2. The category bar link hover color
3. The hover effect of the lead story background
4. The default link hover colors (continue reading…)

The links below point to a series of articles on my blog about modifying the popular Mimbo 3.0 theme for Wordpress.  These posts come from my experience in changing the wordpress theme on my food website Recipe Mobile.  The reasons why I decided to change the theme are detailed here.  These are the reasons I chose to go with the Mimbo 3.0 theme and this is why I recommend using child themes to make design tweaks to your Wordpress blog.

Making parent theme modifications: This is the first part of the posts where I detail what parent theme modifications I made to the Mimbo theme.  Future posts are pending.

Modifications using the child theme:  This is the first part in the series of posts where I show what modifications can be made using a child theme.  Part 2 of the child theme changes deal with modifications of the hover state of theme items.  Other posts that deal with modifying the child theme are still to come

Please subsribe to my RSS feed to receive updates of more articles like these.  If you find these articles useful please spread the word by using the Digg, StumbleUpon or Twitter buttons.

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:

1. The website background
2. The category bar background, and 
3. The lead story background.

(continue reading…)

If you usually post across multiple topics and sort them by category, you might want to highlight a few categories so that your readers can easily find them.  One way of doing this is to create page tabs (like the ones saying ‘Home’, ‘About’ towards the top of your Wordpress blog) that link directly to the category page. Wordpress makes this extremely easy.  

All the categories pages are automatically built.  You can access these category pages by clicking on the category name on your blog (if you have the category widget displayed) or from your Wordpress dashboard.  Copy the URL of the particular category page you want.

Once you have the URL to the category, create a new page in Wordpress and add a link tag in the title.  The syntax will be <a href’=”URL”>Page Title</a>, where URL is the url of the category page and Page Title is the text you wish to appear on the tab.  Save the page.  Refresh your blog and you should see the new tab.

Categories like ‘how-to’, ‘tips’, ‘news’ particularly can benefit from this.

Having finally decided to go with the Mimbo Wordpress theme for Recipe Mobile, it was time for me to start customizing it.  The themes author, Darren Hoyt, recommends that style customizations should be made using child themes so that changes can be retained across future upgrades.  I have heard mention of child themes several times before but have never delved into it before. 

Luckily, Darren provides a child theme called Vintage Green on the same download page to help get started.  Installing a child theme is similar to installing a regular Wordpress theme.  You unzip and upload the theme folder to your ‘wp-content/themes’ folder and activate it from Appearance-Themes on your Wordpress dashboard.  Make sure the parent theme folder is also present in the themes folder. (Note: The child theme folder does not go into the parent theme folder but within the Themes folder itself.)  The child theme contains references to its parent theme already so every thing should happen smoothly

I have been customizing Mimbo using a child theme for only a few hours now and have already seen the benefits of using a child theme.  The only code changes that I have had to make in the parent themes files were to: (continue reading…)

In my previous post, I mentioned that while switching Recipe Mobile to the Mimbo 3.0 theme, I will also implement a child theme right from the beginning.  This process has been going well and I have already realized many of the benefits of using child themes. (continue reading…)

The decision has been made!  The new Recipe Mobile blog will be powered by the Mimbo 3.0 theme.  These are the reasons: (continue reading…)

I have reached the limit of the Cutting Board Wordpress theme that we launched Recipe Mobile with.  It was a good theme to start with as it was my first experience with Wordpress and the theme came customized to use on food and recipe websites.  However, the theme seemed to have issues with Internet Explorer right from the start and these issues were only compounded as I continued to customize it and add plugins.  The final straw was when the category pages started going out of whack when viewed in IE or Chrome.  There also does not seem to be any forum, documentation or support to help solve problems with this particular theme. (continue reading…)

I just edited the search box at Recipe Mobile to remove the search button that used to appear under it.  The ‘Search’ button takes up too much space and is frankly unnecessary.  

Most internet users know that if you fill in a text box and hit enter, the website will see that as a click on the button tied to the search box.  Some quick searches on Google got me to Bavotsan.com.  Along with with various other PHP tips, the blog also contained a smart way to edit the php code that controls the search box.

The short tutorial on Bavotsan.com uses the default Wordpress theme which contains a file called searchform.php.  However, since my theme does not have this file, I had to look around for the appropriate code to edit.  Since the search box shows up in Recipe Mobile’s right sidebar, I looked in the file sidebar-right.php in Appearance->Themes in the Wordpress admin menu and found the appropriate code there. 

This is what the new search box looks like now.  The text to ‘Type and Hit Enter’ shows up in the search box when it is not being used to educate the few users who might not be net savvy.