Hi juggledad,

as you may have guessed, this is the same one I just responded to you about on your other post.

http://ridgeviewtechnology.net/wilsontireco/

Please see http://buildinghosting.com/account-manager/

I want the ATA horizontal menu (now text links to pages) to look like the Portal Home button in the page that I have inserted into the center column as an iFrame.

In even simpler language, I want thos ATA generated text links to use the graphic such as "Portal Home."

I greatly appreciate all the promising advice above but it is totally confusing to me. I am not able even to find the starting point for making this happen. The advice above assumes I know where all those things are.

May I ask for a step-by-step that says some like:

1) go to file (or Dashboard screen) blank blank
2) edit line so and so
3) save.

That isn't an easy step by step but here is a try.

• Upload background image for the menu item to the media library or the Atahualpa images folder
• Add "something" like the following in CSS Inserts

#rmenu2 li a:hover {
    background: url("path_to_image/bb_ga.gif") repeat-x scroll left top transparent !important;
}

The bb_ga.gif image is what is in that example but I am not sure where you can download it.

You will probably have to fiddle with the CSS a bit to get everything right.

First of all, thanks for the response. These forums are the second biggest reason, second only to the product itself, that ATA is such a hit.

The image file is already on the server, in the folder with the account manager. I don't think I need to provide a new path. Linking to the existing file should be sufficient.

But where exactly (in which folder / file of ATA) and where (which line) in that file, do I insert the code you provided?

It's the fiddling with the CSS that intimidates me the most.

I pasted the following code

#rmenu2 li a:hover {
background: url("www.buildinghosting.com/clients/templates/NewDefault/img/bb_ga.gif") repeat-x scroll left top transparent !important;
}

into the CSS Inserts but nothing is changed.

Further instruction will be appreciated.

You need to start your path with http://

I'm almost there (which counts in horseshoes and hand grenades).

Your good advice (thanks once more) has it working as hover. But once clicked it reverts to the ATA default.

Can you tell me the next step to make it work for the active link?

Regards, Joe

BTW - nothing says thank$ like $.

So I just sent you $ome.

Here is the brute force method. I just grabbed all the CSS via Firebug. So just use this instead of the #rmenu2 li a:hover

div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:hover, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover {
background: url("http://www.buildinghosting.com/clients/templates/NewDefault/img/bb_ga.gif") repeat-x scroll left top transparent !important;
}

please look. I pasted the new code in place of the previous.

But all I now have is gray hovers.

What's I do wrong?

Want me to PM access codes so you can look in the Dashbaord?

I copied and pasted the path without the http:// by mistake. Just add that back in. The code posted in my last message has been updated.

Thank you confirming that you too make an occasional mistake. At times the things you and JuggleDad do a downright scary in their excellence.

Can't have that all the time. That how people got accused of being witches and warlocks. With Halloween coming, that could be dangerous.

But thanks again. It worked and is exactly what I wanted.

Also if you want to see the whole background image for the menu you could add the following to CSS Inserts

div#menu1 li a {
    padding: 11px !important;
}

Actually, if you are using the WordPress 3.0+ menus, you can just put an <img /> tag in the Navigation Label area... You'll likely need some css in the Atahualpa HTML/css area and you won't automatically have hover effects, but it works!

Ken

Originally Posted by kdawes01

Actually, if you are using the WordPress 3.0+ menus, you can just put an <img /> tag in the Navigation Label area... You'll likely need some css in the Atahualpa HTML/css area and you won't automatically have hover effects, but it works!

Ken

I have been working on this locally (WP3 Menus) recently, and it seems that there is a margin or padding above and below texts in ATA menu bars, so the image makes the menu bar taller.

I have tried the following in Custom > Navigation Label:

<img src="http://local_website.com/images/picture.png" style="width: 20px; height: 15px; padding: 0; margin: 0;">

I t does not help, the margin and padding is ignored. If you reduce the value for height and width, the image simply shrinks.

There is also another annoying issue (been pulling my hair on this one... ! );
If you create a Custom Link with sub pages below it, like Home for instance, they ALL become selected, as in selected / state (they all get the Background color: Hover), although you can still click on any sub pages, then the behaviour reverts to normal.
This problem is only there for Custom Links.

Any ideas?

In case someone is interested, I didn't want to start a new thread.

Might be easier to explain the problem with a link.

I was thinking about trying this with editing my menu and have the buttons ready to go - but have a question - is there a way to change the menu image upon hover/click. Larry was talking about replacing the image information in the menu builder section and I like that idea ... could I specify which image to use on click or on hover?

Thanks a bunch - when I have money you guys get first dibs, seriously!

here is an example that shows one image for the curent page and another image for what ever menu item you hover on.

div#menu1 ul.rMenu li.current_page_item a:link, 
div#menu1 ul.rMenu li.current_page_item a:active, 
div#menu1 ul.rMenu li.current_page_item a:visited {
background: url(./wp-content/themes/atahualpa371/images/logo.png) repeat-x scroll left top transparent !important;
}

div#menu1 ul.rMenu li.current_page_item a:hover, 
div#menu1 ul.rMenu li a:hover {
background: url(./wp-content/themes/atahualpa371/images/logo.gif) repeat-x scroll left top transparent !important;
}

Originally Posted by juggledad

here is an example that shows one image for the curent page and another image for what ever menu item you hover on.

div#menu1 ul.rMenu li.current_page_item a:link, 
div#menu1 ul.rMenu li.current_page_item a:active, 
div#menu1 ul.rMenu li.current_page_item a:visited {
background: url(./wp-content/themes/atahualpa371/images/logo.png) repeat-x scroll left top transparent !important;
}

div#menu1 ul.rMenu li.current_page_item a:hover, 
div#menu1 ul.rMenu li a:hover {
background: url(./wp-content/themes/atahualpa371/images/logo.gif) repeat-x scroll left top transparent !important;
}

Thanks! That is kind of what I was thinking ... but if I have an image for each of the navigation menu buttons - would I have to specify them each separately via CSS?

You rock by the way! Thanks!

yes, you would have to use the unique class for each menu item