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)
-   -   How to use images for page menu items? (http://forum.bytesforall.com/showthread.php?t=14300)

jrobie23 Aug 24, 2011 11:10 AM

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/

joe hark Oct 9, 2011 12:02 PM

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.

lmilesw Oct 9, 2011 05:38 PM

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
HTML Code:

#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.

joe hark Oct 9, 2011 06:48 PM

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.

joe hark Oct 9, 2011 06:57 PM

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.

lmilesw Oct 9, 2011 07:20 PM

You need to start your path with http://

joe hark Oct 9, 2011 07:41 PM

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

joe hark Oct 9, 2011 07:43 PM

BTW - nothing says thank$ like $.

So I just sent you $ome.

lmilesw Oct 9, 2011 08:19 PM

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
HTML Code:

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


joe hark Oct 9, 2011 08:32 PM

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?

lmilesw Oct 9, 2011 09:15 PM

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.

joe hark Oct 9, 2011 09:55 PM

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.

lmilesw Oct 10, 2011 06:29 AM

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

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


kdawes01 Nov 9, 2011 12:34 PM

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

mimi Nov 18, 2011 11:01 PM

Quote:

Originally Posted by kdawes01 (Post 75368)
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:

Code:

<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?

mimi Nov 19, 2011 04:32 AM

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

Might be easier to explain the problem with a link.

Katmoody Nov 23, 2011 08:12 AM

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!

juggledad Nov 23, 2011 08:28 AM

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

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


Katmoody Nov 23, 2011 10:16 AM

Quote:

Originally Posted by juggledad (Post 76404)
here is an example that shows one image for the curent page and another image for what ever menu item you hover on.
HTML Code:

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!

juggledad Nov 23, 2011 12:43 PM

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


All times are GMT -6. The time now is 10:06 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.