Hi guys!

I am having a tough time wrapping my brain around Juggledad's code for a menu background.

I want the first image (menu-bg.jpg) to be the background image for the menu bar and for the pages not open.

Then I want the second image (menu-bg-off.jpg) to be the background image for the menu button of the page currently on.

Make sense?

Here's my code. What am I missing?

Thanks in advance for your help!

KIP

/* ================================================ */
/* Page menu background                             */
/* ================================================ */
div#menu1 { 
	height: 40px;  
	margin-top:0px; 
	background:url(http://wp-content/themes/atahualpa/images/menu/menu-bg.jpg); 
}
/* ================================================ */
/* Page Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
	background:url(http://wp-content/themes/atahualpa/images/menu/menu-bg.jpg);
	border: none 0px; 
}
/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */
ul.rMenu li a:link, 
ul.rMenu li a:visited, 
ul.rMenu li a:hover, 
ul.rMenu li a:active, 
ul.rMenu li {
	background:url(http://wp-content/themes/atahualpa/images/menu/menu-bg-off.jpg) !important;
}

Oh and I would like the hover to change to the second image when hovering over the menu button.

Thanks!

KIP

well for one thing this

background:url(http://wp-content/themes/atahualpa/images/menu/menu-bg.jpg);

is not a valid address. If you include http:// then you need the rest
of the address, like

background:url(http://MYDOMAIN.COM/wp-content/themes/atahualpa/images/menu/menu-bg.jpg);

you can try

background:url(/wp-content/themes/atahualpa/images/menu/menu-bg.jpg);

second, if you want to address the current menu item, you have to look at the classes. what ever page is active will have the class 'current_page_item' so you can use

li.current_page_item {........}

you might want to qualify it more or add the !important attribute to it.

Oh my! Silly me on the URL! Thanks for catching that.

As for the class thing, I'm unclear on how to configure this. I tried it in the code (shown below). I get the background image but don't get the hover/active image.

I admit it! I'm lost!

Thanks!!!

KIP

/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */
ul.rMenu li a:link, 
ul.rMenu li a:visited, 
ul.rMenu li.current_page_item a:hover, 
ul.rMenu li.current_page_item a:active, 
ul.rMenu li {
	background:url(/wp-content/themes/atahualpa/images/menu/menu-bg-off.jpg) !important;
}

Oh and the URL I am working with is:

http://dev.phoenixtechnicalgroup.com

have you tried looking at using FireBug in Firefox? That way you can see the CSS for the objects.

p.s. if you are using 3.6.7 make sure you apply the three BUGFIX's

Hi there!

Okay, I applied all of the bug fixes.

Second, this is how I changed the code:

/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */
ul.rMenu li.current_page_item {menu-item-19
	background:url(/wp-content/themes/atahualpa/images/menu/menu-bg-off.jpg) !important;
	float: left;
	margin-left: 5px;
	margin-right: 5px;
	padding-top: 7px;
	padding-bottom: 0px;

}

And when you go to http://dev.phoenixtechnicalgroup.com, you will now see that all of the words have a solid black background. And nowhere does the alternate background image appear.

I admit I have very little CSS and PHP experience, so that's where your help is so good!

What should I try next?

Thanks!!!

KIP

To start with, get rid of "menu-item-19" within your parentheses. Then what happens? (I don't have time to test it myself, sorry, but that's a step in the right direction.)

ul.rMenu li.current_page_item {menu-item-19 is incorrect.

A css statement is made of two parts, the selector and the rules.
The rules are enclosed by {}
Each rule ends with a semicolon (';')
so you have a rule

menu-item-19 background:url(/wp-content/themes/atahualpa/images/menu/menu-bg-off.jpg) !important;

since there is no property 'menu-item-19', the rest of the text up to the semicolon is ignored.

The menu CSS is the most complex in the styling, there are over 400 lines of CSS dealing with the menus. It is based on the Ruthsarian's rMenu http://webhost.bridgew.edu/etribou/layouts/

If you have very little CSS experience, I suggest going thru the tutorials at w3schools.com/css to gain a better understanding...or maybe hire some one to help you out.

Whew! Perhaps more than I want to take on at this time. I set that for a future task to learn.

Thanks for your help!

Hi everyone,

how can get a different Background for each menu or category in Atahualpa?

Thanks for your help!