Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - page menu (http://forum.bytesforall.com/showthread.php?t=4597)

How can I set menu button background color separate from menu background?

do you want it set for just one button or for all of them?

I'd like to set the background color different from all of the buttons, which would all be a different color.

there are several parts to the menu bar:
the background
the menu item's background
the menu items
the current menu item
whether it is active, visited, hovered, then all these things apply to each level of a submenu. There is a lot of CSS dealing with menu's.

But you can change things. All this CSS goes in ATO->add HTML/CSS Inserts->CSS Inserts.

to change the background use this

HTML Code:

/* ================================================== */

/* L0 - menu background                               */

/* ================================================== */

div#menu1 { 

        height: 40px;  

        margin-top:0px; 

        background: blue; 

}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

Next to change the Menu item's background use

HTML Code:

/* ================================================ */

/* L1 - Menu item's background and border           */

/* ================================================ */

div#menu1 ul.rMenu {

        background: red;

        border: none 0px; 

}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

and to change the menu items themselves use

HTML Code:

/* ================================================== */

/* L2 - Menu item                                     */

/* ================================================== */

ul.rMenu li a:link, 

ul.rMenu li a:active, 

ul.rMenu li a:hover, 

ul.rMenu li a:visited, 

ul.rMenu li {

        background: yellow !important;

        color: #000000 !important;

}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

if you want the menu item for the current page to be different use

HTML Code:

/* ================================================== */

/* L3 - current menu item                             */

/* ================================================== */

ul.rMenu li.current_page_item a:link, 

ul.rMenu li.current_page_item a:active, 

ul.rMenu li.current_page_item a:hover, 

ul.rMenu li.current_page_item a:visited, 

ul.rMenu li a:hover

ul.rMenu li {

        background: black !important;

        color: #white !important;

}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

You can delve deeper if you need. I hope this helps

I have tried to insert this codes in CSS-insert, but nothing changes. The Page menu buttons are the colors that are set in the Page Menu Bar option.

Quote:

Originally Posted by Per Lund (Post 22580)

I have tried to insert this codes in CSS-insert, but nothing changes. The Page menu buttons are the colors that are set in the Page Menu Bar option.

Me too.

I'd like the current page in the menu bar to be a different color than the hover color. Hoping for a solution here.

Thanks

the following will cause the current page bnackground to be yellow with black text and then switch to black with yellow text when hovered over

HTML Code:

ul.rMenu li.current_page_item a {background:yellow !important; color:black !important;}

ul.rMenu li.current_page_item a:hover {background:black !important; color:yellow !important;}

Quote:

Originally Posted by juggledad (Post 20183)

This was some time ago probably for an earlier version, what's the code for background in 3.7.9 ?

the code is the same, browsers have changed - I edited the code to remove the '#' before the color 'name' - try it now.