SidekickBlog

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

These items are indicated in the picture below

Change the hover color of the page navigation bar links

Add the following code to your child theme ’style.css’ file’ to change the color:

#nav a:hover {
color:#FFF !important;
}

Change the hex code after color: to your preference.

Change the default hover color for all the links in the page

Add the following code to use a different default color for the hover state of the links on your website:

a:hover, a:active {
color:#1E771E;
text-decoration:underline;
}

Notice that in my code, I have maintained the same color as the hover state for the link active state as well.  If you do not wish to do the same, remove the a:active reference (don’t forget to remove the ‘,’ before it) from the above code before pasting it into your stylesheet.  Change the hex color code after color: to your preference.

Remove the hover color change effect from the lead story background

I find the lead story background color change effect that comes as default with the Mimbo theme distracting and a bit tacky.  To remove this effect,  add the following code to your child theme ’style.css’ file.

#lead:hover {
 
background:#E36666;
 
}

Change the hex code after background: to match the color in your non hover state.  What I am basically doing here is changing the code between the parenthesis in my #lead:hover reference to match the code in my #lead reference.

Change the category bar title hover color

To change the hover color in the category titles in the ‘cat-nav’ bar, use the following code in your child theme:

#nav-cat a:hover, #nav-cat a:active {
color:#1E771E !important;
}

Notice that in my code, I have maintained the same color for the link active state as well.  If you do not wish to do the same, remove the #nav-cat a:active reference (don’t forget to remove the ‘,‘ before it) from the above code before pasting it into your stylesheet.  Change the color to your preference.

Conclusion

That takes care of most of the hover state design changes I made.  Do let me know if you think anything is missing or if you would like specific help with any of these or other design changes.

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.