How to use images for page menu items?
I'm trying to use images for page menu items, so that I can use a client specified font that most pc's don't have. And I'm having trouble with how to tell ata to grab certain images for each page button on the menu bar.
From another thread (http://forum.bytesforall.com/showthread.php?t=10531) I learned to create a WP custom menu, and to assign a class to each menu item. But I can't get the image assigned to the menu item. I've tried using the class name for the menu item as in: Code:
#pmabout {background: url(http://www.lorensquires.com/workwithlorensouth/wp-content/uploads/about-button.jpg);} Code:
#menu-item-117 {background: url(http://www.lorensquires.com/workwithlorensouth/wp-content/uploads/about-button.jpg);} yes the file exists. ata version 3.6.4 WP version 3.1 Thanks, Loren |
You are using an ID name... not a CLASS name. If you put pmabout for a class name on the menu you should use .pmabout for the CSS selector.
|
Thanks for the assistance. But now I've got two page menus, one on top of the other.
How to I disable the text menu, and keep the image menu? In other words, how does ata know that I want to use a custom wp menu, and not its standard page menu? Loren |
What is the url?
|
|
A couple of things you could do is use a background image without the text and style the text with typekit or something of that sort. Or you could use code something like the following in the Navigation Label box for the menu item.
HTML Code:
<img src="http://www.lorensquires.com/workwithlorensouth.com/wp-content/uploads/about-button.jpg" /> |
I think this took care of the multiple menus.
Would I now use the css selector for the class that is set for each image in order to take care of borders, padding, and margins? Thanks, Loren |
This is not meant to be exactly what you would use but as a quick example of what can be done.
HTML Code:
#menu1 li.menu-item a:hover { |
Hi so I didnt get that clear
question was how to make (img A)Home (img B) free time (img C) about ----------------------------------------------------- futball volleyball (img D) squash a reference can be http://wordpress.org/extend/plugins/...u/screenshots/ can it be done ? explain carefull I am not php diehard :))) but I would really love this I found this maybe it can help Each of the dropdown items has a unique class - such as .page-item-215. You should be able to use those classes to add an icon as a background image to each individual item. But be warned that your changes will be over-written the next time you upgrade WordPress. For this reason, it is recommended that you consider creating a child theme for your customisations. |
I would put the images in the navigation box for the menu item.
|
Quote:
thx for answer and affort |
In the WordPress menu builder you just put the html code for an image in the navigation box.
|
ok i will try it
no it didnt work ... there was only a clasic text label in menu and after click on new page was the small image displayed I need it to be before the label in menu fe.: you make max image size 30x30px and one box where to add relative path and that is but the default WP menu builder doesnt alow that it alows to make pages or links |
I also found this
http://www.kryogenix.org/code/browser/lir/ and this code Code:
h1#newrepl { HTML Code:
<li class="page_item page-item-4"> I assume that in this way I can put image inside a menu item not to all as background then maybe if the pics would be 30x30px and I will use for the menu item span - 35px than It can work plus I have question how to set Width of Menus? ATO>menu1>Width of Sub Menus butt ATO>menu1>Width of Menus is missing ... :( |
What I was talking about is putting image code such as <img src="path-to-image" /> in the navigation label for the menu item in question. |
Quote:
|
Here is a screenshot of what I mean. Is that what you are looking for?
|
HTML Code:
Network <br><center><img src="wp-content/.../netwoek.gif" > </center> thx it really works is there a way how on hover channge the image ? my font is white and on hover is black so I would like to do the same with image on hoower change it but this is not so crucial :) thx |
For change of image you would set a class for the menu item and use CSS. This same idea can be used for single images as well but for some reason I can't remember it seemed like putting the image was simpler. Anyway here is a screenshot of where to put the class in your menu item. And here is a screenshot of how to set WP to show the class box if you don't see one.
|
3 Attachment(s)
thx got another ... I made it as you descirbed .... before (not CSS usage)
and the <img .... > works only on homepage not on oll other sides :( |
1 Attachment(s)
Hi Larry,
I hope you don't mind if I hijack this post. I'm trying to do the same thing as I believe that it will solve my design issues. I'm copying a site to WordPress and it is suppose to look exactly like the site up now. Images were used for the menu items and they want to continue with that. (I know it isn't good for SEO) I'm trying to use the WordPress menu system. I've put in: Code:
<img src="http://www.sandynorton.net/Testsite/wp-content/uploads/buttons/home_up2.jpg" /> I've included what the image should look like. Quote:
|
When I use that image path I get nothing.
|
I have egg on my face. I verified that so many times. What I realized was I had 2 sites with the same sub-directory but different domain under the hostng company. I FTP to the wrong one. So sorry, it works fine now. As they say..stupid is as studpid does. Fits me tonight.
Thanks Larry. |
Quote:
First of all, thank you for all your posts regarding images in the menu!! Very helpful. My question is directly related to your post here. I have added the class box to my menu items (wp menu), and added the class in the ATA css inserts. What I'm finding is that I have to put the whole navigation text (where my image is called) into a DIV in order for all of the css to work. For example, it will bump up my font size, but I could not get the color to change without putting the whole thing in a DIV. Is this simply due to the default widget styling within ATA? I don't want my other widget items to have yellow font, so using the DIV in the full navigation box in the WP menu is totally fine. I just didn't want to be missing out on an alternate way to accomplish this. ____ jason. |
with out a url showing the issue it is really hard to guess what you have done.
|
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.
HTML Code:
#rmenu2 li a:hover { 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
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 { |
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
HTML Code:
div#menu1 li a { |
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 |
Quote:
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;"> 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? |
All times are GMT -6. The time now is 08:30 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.