Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

How to use images for page menu items?


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old May 23, 2011, 03:45 PM
pierrebk4
 
9 posts · Jan 2011
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);}
And I've tried the menu item as in:
Code:
#menu-item-117 {background: url(http://www.lorensquires.com/workwithlorensouth/wp-content/uploads/about-button.jpg);}
Any help would be greatly appreciated.

yes the file exists.
ata version 3.6.4
WP version 3.1

Thanks,

Loren
  #2  
Old May 23, 2011, 04:19 PM
lmilesw's Avatar
lmilesw
 
10,069 posts · Jul 2009
Central New York State USA
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.
__________________
~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.
  #3  
Old May 23, 2011, 05:38 PM
pierrebk4
 
9 posts · Jan 2011
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
  #4  
Old May 23, 2011, 05:41 PM
juggledad's Avatar
juggledad
 
22,043 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
What is the url?
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #5  
Old May 23, 2011, 05:49 PM
pierrebk4
 
9 posts · Jan 2011
oops sorry,

http://workwithlorensouth.com/

Thanks,

Loren
  #6  
Old May 23, 2011, 06:26 PM
lmilesw's Avatar
lmilesw
 
10,069 posts · Jul 2009
Central New York State USA
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" />
__________________
~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.
  #7  
Old May 23, 2011, 07:22 PM
pierrebk4
 
9 posts · Jan 2011
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
  #8  
Old May 23, 2011, 08:41 PM
lmilesw's Avatar
lmilesw
 
10,069 posts · Jul 2009
Central New York State USA
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 {
    border: 1px solid black;
}
#menu1 li {
    margin-right: 3px;
}
#menu1 li.current-menu-item a {
    border: 1px solid black;
}
__________________
~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.
  #9  
Old May 24, 2011, 02:56 PM
thekjub9
 
41 posts · May 2011
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.

Last edited by thekjub9; May 24, 2011 at 03:00 PM.
  #10  
Old May 24, 2011, 03:42 PM
lmilesw's Avatar
lmilesw
 
10,069 posts · Jul 2009
Central New York State USA
I would put the images in the navigation box for the menu item.
__________________
~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.
  #11  
Old May 24, 2011, 04:48 PM
thekjub9
 
41 posts · May 2011
Quote:
Originally Posted by lmilesw
I would put the images in the navigation box for the menu item.
? in the next upgrade ? or how ??
thx for answer and affort
  #12  
Old May 24, 2011, 07:00 PM
lmilesw's Avatar
lmilesw
 
10,069 posts · Jul 2009
Central New York State USA
In the WordPress menu builder you just put the html code for an image in the navigation box.
__________________
~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.
  #13  
Old May 25, 2011, 09:35 AM
thekjub9
 
41 posts · May 2011
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

Last edited by thekjub9; May 25, 2011 at 09:46 AM.
  #14  
Old May 25, 2011, 10:10 AM
thekjub9
 
41 posts · May 2011
I also found this
http://www.kryogenix.org/code/browser/lir/

and this code
Code:
h1#newrepl {
    padding: 35px 0 0 0;
    overflow: hidden;
    background-image: url("hello_world.gif"); 
    background-repeat: no-repeat;
    height: 0px !important; /* for most browsers */
    height /**/:35px; /* for IE5.5's bad box model */
}
than found that my atahualpa menu has classes

HTML Code:
<li class="page_item page-item-4">
and so maybe you can help me further
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 ...
  #15  
Old May 25, 2011, 10:36 AM
lmilesw's Avatar
lmilesw
 
10,069 posts · Jul 2009
Central New York State USA
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.
__________________
~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.
  #16  
Old May 25, 2011, 04:20 PM
thekjub9
 
41 posts · May 2011
Quote:
Originally Posted by lmilesw
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.
can you show me in code examples where shall I put it ? and tell me how to make it that in next ubgrade I wont lost this ? pls
  #17  
Old May 25, 2011, 06:47 PM
lmilesw's Avatar
lmilesw
 
10,069 posts · Jul 2009
Central New York State USA
Here is a screenshot of what I mean. Is that what you are looking for?
__________________
~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.
  #18  
Old May 29, 2011, 04:01 AM
thekjub9
 
41 posts · May 2011
HTML Code:
Network <br><center><img src="wp-content/.../netwoek.gif" > </center>
inside the menu item name as on the screenshot thx

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
  #19  
Old May 29, 2011, 07:45 AM
lmilesw's Avatar
lmilesw
 
10,069 posts · Jul 2009
Central New York State USA
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.
__________________
~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.
  #20  
Old May 30, 2011, 10:27 AM
thekjub9
 
41 posts · May 2011
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
Attached Thumbnails
Click image for larger version

Name:	ScreenShot034.jpg
Views:	272
Size:	27.0 KB
ID:	1381  Click image for larger version

Name:	ScreenShot036.jpg
Views:	273
Size:	9.5 KB
ID:	1382  Click image for larger version

Name:	ScreenShot037.jpg
Views:	288
Size:	15.4 KB
ID:	1383  
  #21  
Old May 31, 2011, 06:12 PM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
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" />
Nothing is showing. I used the color coded menuing and just made everything transparent. Haven't really added any specific CSS yet.

I've included what the image should look like.

Quote:
Originally Posted by lmilesw
In the WordPress menu builder you just put the html code for an image in the navigation box.
Attached Thumbnails
Click image for larger version

Name:	home_up2.jpg
Views:	241
Size:	1.3 KB
ID:	1388  
__________________
Sleenie
"Plan your work for today and everyday...then work your plan"

Last edited by sleenie; May 31, 2011 at 06:15 PM.
  #22  
Old May 31, 2011, 07:19 PM
lmilesw's Avatar
lmilesw
 
10,069 posts · Jul 2009
Central New York State USA
When I use that image path I get nothing.
__________________
~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.
  #23  
Old May 31, 2011, 08:50 PM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
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.
__________________
Sleenie
"Plan your work for today and everyday...then work your plan"
  #24  
Old Aug 24, 2011, 10:21 AM
jrobie23's Avatar
jrobie23
 
63 posts · Feb 2011
Boulder, CO
Quote:
Originally Posted by lmilesw
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.
Hi Larry,

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.
  #25  
Old Aug 24, 2011, 10:26 AM
juggledad's Avatar
juggledad
 
22,043 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
with out a url showing the issue it is really hard to guess what you have done.
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
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 12:17 AM.


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