Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

How to use images for page menu items?


  #26  
Old Aug 24, 2011, 11:10 AM
jrobie23's Avatar
jrobie23
 
63 posts · Feb 2011
Boulder, CO
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/
  #27  
Old Oct 9, 2011, 12:02 PM
joe hark
 
168 posts · Feb 2009
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.
  #28  
Old Oct 9, 2011, 05:38 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #29  
Old Oct 9, 2011, 06:48 PM
joe hark
 
168 posts · Feb 2009
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.
  #30  
Old Oct 9, 2011, 06:57 PM
joe hark
 
168 posts · Feb 2009
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.
  #31  
Old Oct 9, 2011, 07:20 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
You need to start your path with http://
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #32  
Old Oct 9, 2011, 07:41 PM
joe hark
 
168 posts · Feb 2009
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
  #33  
Old Oct 9, 2011, 07:43 PM
joe hark
 
168 posts · Feb 2009
BTW - nothing says thank$ like $.

So I just sent you $ome.
  #34  
Old Oct 9, 2011, 08:19 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Last edited by juggledad; Nov 23, 2011 at 08:20 AM.
  #35  
Old Oct 9, 2011, 08:32 PM
joe hark
 
168 posts · Feb 2009
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?
  #36  
Old Oct 9, 2011, 09:15 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #37  
Old Oct 9, 2011, 09:55 PM
joe hark
 
168 posts · Feb 2009
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.
  #38  
Old Oct 10, 2011, 06:29 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #39  
Old Nov 9, 2011, 12:34 PM
kdawes01's Avatar
kdawes01
 
102 posts · May 2009
Missoula, MT
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
__________________
Ken | The Web Mechanic
Many thanks to Flynn for the amazing Atahualpa. Please consider a donation!
  #40  
Old Nov 18, 2011, 11:01 PM
mimi's Avatar
mimi
 
70 posts · Feb 2009
over there...
Quote:
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:

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?
  #41  
Old Nov 19, 2011, 04:32 AM
mimi's Avatar
mimi
 
70 posts · Feb 2009
over there...
In case someone is interested, I didn't want to start a new thread.

Might be easier to explain the problem with a link.
  #42  
Old Nov 23, 2011, 08:12 AM
Katmoody
 
36 posts · Jun 2011
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!
  #43  
Old Nov 23, 2011, 08:28 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Nov 23, 2011 at 10:28 AM.
  #44  
Old Nov 23, 2011, 10:16 AM
Katmoody
 
36 posts · Jun 2011
Quote:
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.
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!

Last edited by juggledad; Nov 23, 2011 at 10:28 AM.
  #45  
Old Nov 23, 2011, 12:43 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
yes, you would have to use the unique class for each menu item
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Adding Social Images to Page Menu (As Menu Items) justle Page & Category Menu Bars 2 Jan 27, 2011 12:00 AM
[SOLVED] Background color:hover not working for 'category' items in menu 1 (page menu akg Center area post/pages 4 Sep 27, 2010 08:08 AM
[SOLVED] Page Menu Bar - Strange Space Occurring Between Menu Items NealSchaffer Page & Category Menu Bars 2 Jun 20, 2009 10:18 AM
How to use background images for menu items instead of text daxryan Page & Category Menu Bars 2 Feb 27, 2009 04:29 PM


All times are GMT -6. The time now is 04:31 PM.


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