I've seen a lot folks asking various questions about this. I've managed to piece-meal a partial solution, but its got a few problems.

What I need help with:

* How to insert menu different button images for a static state and a hover state - and how to get them to be the correct size.

* Also how do I set the margin between the menu buttons - I want them wider.

PLEASE HELP - I AM ALMOST DONE WITH MY WEB SITE - JUST THE MENU AND THEN I'M GOOD TO GO!!

My site: DrSoszka.com.
I'm trying to emulate the page menu used at: Mercola.com

I've got a background image in place and its about 90% correct, it does seem to be smaller around the buttons. I had added padding for the top and bottom to make the image fit correctly, but the buttons are the same height as they in the default template.

Here's code I've put in the CSS Insert section (Please suggest corrections as appropriate):

ul#rmenu2 {
padding-top: 8px; padding-bottom: 5px;
margin: 10px 0 0 0;
background: url(/wp-content/themes/atahualpa332/images/menubkg.gif) repeat !important;}
ul.rMenu li
{background: url(/wp-content/themes/atahualpa332/images/menubkg.gif) repeat;
}
div#menu1 li.current_page_item a:link,
div#menu1 li.current_page_item a:active,
div#menu1 li.current_page_item a:visited {
background: url(/wp-content/themes/atahualpa332/images/menubkg.gif) repeat;
}
div#menu2 li.current_page_item a:hover {
background: url(/wp-content/themes/atahualpa332/images/menuhvr.gif);
}

This is pulled from various posts - I don't know CSS well enough to see why my site doesn't look quite right. I've achieve about 80% of my goal and I'm looking to finish it off and be done with formating the site.

Please help!!!

Wow, no one has anything to say or any help to offer??? I'm puzzled, normally people are all over posts like mine, just like cat hair on a velvet sofa....

Buehler..., Buehler..., Buehler....

try this CSS Insert (you will want to change teh #yellow and #blue to the url for your images

/* ================================================== */
/*  Menu item                                     */
/* ================================================== */
ul.rMenu li a:link, 
ul.rMenu li a:active, 
ul.rMenu li a:visited, 
ul.rMenu li {
	background: #yellow !important;
	color: #000000 !important;
}
ul.rMenu li a:hover {
	background: #blue !important;
	color: #000000 !important;
}

Thanks, that works almost perfect. I just have two tiny problems.

1. The menu bar with the items is too small is there any way to make its background fit the repeating background?

2. How can I space the menu items a little wider? I have a image for the hover but its not showing fully.

Thanks for your help!!!!

Originally Posted by ssoszka

2. How can I space the menu items a little wider? I have a image for the hover but its not showing fully.

Thanks for your help!!!!

Add these qualities to your CSS insert and play with the numbers and it should work:

margin-right: 35px;
margin-left: 35px;

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

/* ================================================== */
/* CSS for setting menu padding                       */
/* ================================================== */
ul.rMenu li {
	padding-top: 0px;
	margin: 7px 20px 7px 40px;
}
ul.rMenu-ver li {
	padding-top: 0px;
	margin-top: 7px 5px 0px 0px;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

Thanks, that works pretty well. The area that the menu that actually has the menu items is slightly larger than the background. How can I adjust the menu background to match the size of the menu items. DrSoszka.com

also, it looks like the hover image doesn't fit correctly, so I had a idea of breaking it into three parts: a left corner, right corner, and then an adjustable middle section with a small 2px wide graphic that repeats - much like amazon.com uses. Is that possible?

Also, how to do I eliminate the background and hover images for the submenus. I want to use a solid color for that.

Thanks for all the help so far!!!

-Shawn

How can I adjust the menu background to match the size of the menu items.

Play with the numbers in the CSS

Also, how to do I eliminate the background and hover images for the submenus. I want to use a solid color for that.

you can use this to start playing with

/* ================================================ */
/* Here is how to change the child menu items       */
/* ================================================ */
li.current_page_item ul.rMenu-ver li a:link, 
li.current_page_item ul.rMenu-ver li a:active, 
li.current_page_item ul.rMenu-ver li a:visited, 
li.current_page_item ul.rMenu-ver li a:hover, 
li.current_page_item ul.rMenu-ver li,
li.current_page_item ul.rMenu-ver {
	background: #ffffff !important;
	color: #2912E7 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

Originally Posted by juggledad

Play with the numbers in the CSS


you can use this to start playing with

/* ================================================ */
/* Here is how to change the child menu items       */
/* ================================================ */
li.current_page_item ul.rMenu-ver li a:link, 
li.current_page_item ul.rMenu-ver li a:active, 
li.current_page_item ul.rMenu-ver li a:visited, 
li.current_page_item ul.rMenu-ver li a:hover, 
li.current_page_item ul.rMenu-ver li,
li.current_page_item ul.rMenu-ver {
	background: #ffffff !important;
	color: #2912E7 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

Ok, but where would I insert this? I tried the various locations within the CSS insert menu but nothing worked.

this would be put at ATO->Add HTML/CSS Inserts->CSS Inserts

I did so, with no results, no changes.

Here's is my complete code for all my CSS inserts as it relates to my menus:

================================================== ==============


td#right,
div#right-sidebar,
div.post {
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* ================================================== */
/* Menu item */
/* ================================================== */
ul.rMenu li a:link,
ul.rMenu li a:active,
ul.rMenu li a:visited,
ul.rMenu li {
background: url(/wp-content/themes/atahualpa332/images/menubkg.gif) repeat;
}
ul#rmenu2 {
background: url(/wp-content/themes/atahualpa332/images/menubkg.gif) repeat !important;}
ul.rMenu li a:hover {
background: url(/wp-content/themes/atahualpa332/images/MenuHvr.gif) !important;
}
div#menu1 {
height: 60px;
margin-top:10px;
/* ================================================== */
/* CSS for setting menu padding */
/* ================================================== */
ul.rMenu li {
padding-top: 0px;
margin: 7px 80px 7px 40px;
}
ul.rMenu-ver li {
padding-top: 0px;
margin-top: 7px 5px 0px 0px;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
================================================ */
/* Here is how to change the child menu items */
/* ================================================ */
li.current_page_item ul.rMenu-ver li a:link,
li.current_page_item ul.rMenu-ver li a:active,
li.current_page_item ul.rMenu-ver li a:visited,
li.current_page_item ul.rMenu-ver li a:hover,
li.current_page_item ul.rMenu-ver li,
li.current_page_item ul.rMenu-ver {
background: #C7DBEB !important;
color: #092D55 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++

Hi,

I would like to assign an image to each individual current page item (eg one image for when the current page is page-item-2, another for when it's page-item-3, and so on). I understand how to style ALL the pages with the same current page image, but how would I specify different current page images for different pages?

Shawn, I see you have done this using the class .current_page_item within different divs (#menu1, #menu2, and so on). How did you create these divs in the php?

Is there a way to specify a class for individual pages using list_pages? Or can I combine is_page with specific page-item-XXX to create a div for each individual page?

Sorry if this is a dumb question. There seems so little out there on this subject.

Perhaps it's because there's a really simple solution (without using body tags). I really hope so!

Jimmy