Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Change background color for submenu cells/options in a WordPress site

Status
Not open for further replies.

weightinwildcat

Programmer
May 11, 2010
84
US
I am working on a WordPress web site and need to change the background color of the drop-down menus. The theme being used is non-standard. However, I believe I have found the key area of code in one of the CSS files that belong to the site. It reads like this:

.arrow a:hover:before{content:url(../images/navhoverarrow.png); }
.arrow a:hover{padding-left:0px;}
.arrow a{padding-left:15px;}
.arrowactive a:before{content:url(../images/navhoverarrow.png); }
.arrowactive a{padding-left:0px;}

The navhoverarrow appears whenever a submenu option is selected; so I feel this is the correct area of code in which to make a change or addition. Thus far the changes I have tried have not had the desired result. Will somebody give me examples of possible CSS entries to make that may solve the problem?

Thank you in advance for your help.
 
There is nothing here that indicates background color to change, so I would guess that you have not found the CSS to edit.

WordPress assembles the page from many parts so it is difficult for you to find it by analyzing the source files. It is much easier to analyze the output. Use your browser to do this. Firefox has the optional Firebug extension. IE and Chrome have developer tools built-in (press F12). All these tools have an element selector that will allow you to click on your drop down menu and discover all the files that are used to generate it. You can find the exact line where the background color or image is defined.
 
Like spamjim said in cases where output is weaved together using data sources and multiple files firebug is your best bet to analyze what is actually effecting individual elements.

Generally you would need a 'background-color' property followed by a value (usually hex)

Code:
background-color:#000;

Darryn Cooke
| Marketing and Creative Services
 
I appreciate the responses. They are/will be very helpful. I have been taking a look with all three browsers; very interesting.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top