How to Add Background Image/Color to Thesis Navigation Menu

Requirements

  • Thesis Theme
  • CSS basics

Thesis is the best theme framework, but it looks simple when installed. You need to customize to suite your needs. You can design any type of site with thesis theme and i recommend you to use thesis if you are interested in changing your theme now and then. In this article you will learn how to add background image or color to thesis navigation menu.

Navigation menu looks plain at the start but there are many options available inside “Thesis Options” panel. You can customize the theme by adding colors to sub menu, set the width of sub nav menu, set the border width, border color etc., If we keep on counting, the options are endless. Customization becomes even more powerful by using custom css files. So here we will make use of custom.css file available in thesis custom folder and add background images, colors and some hover effects to thesis naviagtion menu.

What are we going to Create?

Basic thesis theme looks like this.

How to Add Background to Thesis Navigation Menu - Thesis Customization Tutorial

Our Customized thesis theme looks like this.

Add Background to Thesis Navigation Menu - Thesis Customization Tutorial

Add Background Image to Thesis Navigation Menu

See the above screenshot on what we will be creating. The default thesis nav menu looks plain, so we will customize it by adding a background image, font-size, font color, borders and some hover effects etc., So, let’s get started.

Fist lets add background to thesis navigation menu and see how it looks. Add this code in your custom.css file available in custom folder or you can edit the file by going to “Custom file editor” under “Thesis Options” in wordpress admin panel.

[css]

.custom ul.menu{
background: url("images/nav-bg.png") repeat-x;
height: 36px;
}

[/css]

Replace “nav-bg.png” by your image name. An image must be placed in “images folder” in thesis theme prior to adding.

This is how the navigation menu looks when background image is applied to “ul” tag.

How to Add Background Imges to Thesis Navigation Menu - Thesis Customization Tutorial

By adding background image it is applied to whole menu i.e “ul”, but it is not applied to “anchor” tags. So lets apply background image to “a” tag.

[css]

.custom ul.menu li a{
background: url("images/nav-bg.png") repeat-x;
font-size:14px;
color:#FFFFFF;
}

[/css]

This is how the navigation menu looks when background image is applied to “a” tag.

How to Add Background Image to Thesis Navigation Menu - Thesis Customization Tutorial

Navigation menu looks good by now. But we will add some cool effects like borders and hovering effects.

Let’s add borders to the navigation menu so that it looks like each category is seperated. We will just add left and right borders of width 1px each to the same “anchor” tag we created above. The extra lines we add here are highlighted.

[css highlight="3,4"]

.custom ul.menu li a{
background: url("images/nav-bg.png") repeat-x;
border-left: 1px solid #145996;
border-right: 1px solid #388BDD;
font-size:14px;
color:#FFFFFF;
}

[/css]

This is how the navigation menu looks when borders are applied to “a” tag.

Add Background Image to Thesis Navigation Menu - Thesis Customization Tutorial

When left and right borders are applied to all list items they look odd on first and last list items. We can remove these borders with the helps of first-child and last-child CSS trick.

[css]

.custom ul.menu li:first-child a{
border-left: 0px;
}

.custom ul.menu li:last-child a{
border-right: 0px;
}

[/css]

This is how it looks when the first and last child items are removed.

Add Background Image to Thesis Navigation Menu - Thesis Customization Tutorial

The last step in thesis navigation menu customization is to apply a hover effect to the navigation menu. Choose a hover background image and add this CSS code.

[css]

.custom ul.menu li a:hover{
background: url("images/hover-bg.png") repeat-x;
}

[/css]

We have now completed adding background image to thesis navigation menu. You can add any colors to the navigation menu similarly. We will end this small tutorial here and we will be covering more and more on thesis customizations in near future.

If you want to know about any thesis customizations then feel free to ask me. I am hear to help you out. Comment out your problem and if you haven’t faced any problem then leave your suggestions.

6 Responses to “How to Add Background Image/Color to Thesis Navigation Menu”
  1. Rasel Rony January 5, 2012
  2. sovo April 11, 2012
  3. Koundeenya April 23, 2012
  4. sachmobile September 20, 2013
  5. Aha October 30, 2013
  6. Puisi October 30, 2013

Leave a Reply

Your email address will not be published. Required fields are marked *