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

/* ================================================== */
/* L0 - menu background                               */
/* ================================================== */
div#menu1 { 
	height: 40px;  
	margin-top:0px; 
	background: blue; 
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

Next to change the Menu item's background use

/* ================================================ */
/* L1 - Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
	background: red;
	border: none 0px; 
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

and to change the menu items themselves use

/* ================================================== */
/* 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

/* ================================================== */
/* 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.

Originally Posted by Per Lund

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

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;}

Originally Posted by juggledad

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

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.