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 »

Background image in 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 Feb 10, 2011, 07:13 PM
inkdork's Avatar
inkdork
 
41 posts · Sep 2010
Lancaster, CA
I am trying to get a small image to show up as a "bullet" in my menu items. I have serached the forums and tried everything listed here (http://forum.bytesforall.com/showthread.php?t=452) as well as some solutions listed in other threads. Nothing changes in my menu with any of them.

http://thedawgsavers.com/ is the site. Any help would be appreciated. Thanks.
  #2  
Old Feb 10, 2011, 07:51 PM
inkdork's Avatar
inkdork
 
41 posts · Sep 2010
Lancaster, CA
After some playing with Juggledad's code, I have the image showing up... but having some issues with the spacing around it. This is what I have now.

Code:
/* ================================================ */
/* Page menu background                             */
/* ================================================ */
div#menu1 { 
	height:40px;  
	margin-top:0px; 
	background: #white; 
}
/* ================================================ */
/* Page Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
	background: #white;
	border: none 0px; 
}
/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */
ul.rMenu li a:link, 
ul.rMenu li a:hover, 
ul.rMenu li a:active, 
ul.rMenu li a:visited, 
ul.rMenu li {
	background: url('http://thedawgsavers.com/wp-content/themes/atahualpa364/images/dogsilo.jpg') !important;
        background-repeat:no-repeat !important;
        color: #000000 !important;
        height: 30px;
}
/* ================================================ */
/* Category menu background                         */
/* ================================================ */
div#menu2 { 
	height: 40px;  
	margin-top:0px; 
	background: #green; 
}
/* ================================================ */
/* Category Menu item's background and border       */
/* ================================================ */
div#menu2 ul.rMenu {
	background: #orange;
	border: none 0px; 
}
/* ================================================== */
/* Category Menu item                                 */
/* ================================================== */
#menu2 ul.rMenu li a:link, 
#menu2 ul.rMenu li a:hover, 
#menu2 ul.rMenu li a:active, 
#menu2 ul.rMenu li a:visited, 
#menu2 ul.rMenu li {
	background: #purple !important;
	color: #000000 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
As you can see at the link, I have the border hanging down over an area where the page background is showing through... how do I get rid of that or fill it in with white?

Also, I am having trouble with spacing the text for the menu items over so its not overlapping the image.

I'm going to keep working on this, hopefully I'll sort it out but if not, looking forward to some help.

Thanks.
  #3  
Old Feb 10, 2011, 11:25 PM
inkdork's Avatar
inkdork
 
41 posts · Sep 2010
Lancaster, CA
I went back to check something and my images have vanished... no changes were made in between. Any suggestions as to what I did wrong?
  #4  
Old Feb 11, 2011, 04:18 AM
juggledad's Avatar
juggledad
 
22,104 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
You are in luck - there was a new addition in 3.6.4 - the text of a menu is now surrounded by a <span>...</span> so you can add a margin like this
HTML Code:
ul.rMenu li a span {
         margin-left: 30px;
}

when I copied your code, the images showed up for me.
__________________
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 Feb 20, 2011, 09:18 AM
jrobie23's Avatar
jrobie23
 
63 posts · Feb 2011
Boulder, CO
would you also use that span to center the text vertically? My icon is a smidge larger than my text, and I'd like to have it show up in the middle of the graphic.

http://kancmotorlodge.totalscopemarketing.com/
  #6  
Old Feb 20, 2011, 11:22 AM
juggledad's Avatar
juggledad
 
22,104 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
jrobie23 - the <span> is in the header menu, not the page widget. I'd use firebug in firefox to see what you could adjust
__________________
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
[SOLVED] Limiting menu background to menu items Farinet Page & Category Menu Bars 4 Dec 27, 2010 05:56 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
background-image for Sub-menu items / ul.children Fux Page & Category Menu Bars 7 Jul 18, 2010 02:22 AM
Background Image for Category Menu Items joan Page & Category Menu Bars 3 Apr 19, 2010 03:30 AM
[SOLVED] Background image of child items not the same as parent noahinBR Header configuration & styling 2 Feb 4, 2010 12:43 PM


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


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