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)
-   -   Background image in menu items (http://forum.bytesforall.com/showthread.php?t=12739)

inkdork Feb 10, 2011 07:13 PM

Background image in menu items
 
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.

inkdork Feb 10, 2011 07:51 PM

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.

inkdork Feb 10, 2011 11:25 PM

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?

juggledad Feb 11, 2011 04:18 AM

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.

jrobie23 Feb 20, 2011 09:18 AM

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/

juggledad Feb 20, 2011 11:22 AM

jrobie23 - the <span> is in the header menu, not the page widget. I'd use firebug in firefox to see what you could adjust


All times are GMT -6. The time now is 08:45 AM.

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