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 for Category Menu Items (http://forum.bytesforall.com/showthread.php?t=6734)

joan Apr 15, 2010 09:46 AM

Background Image for Category Menu Items
 
Hi Juggledad
Can you please help? I've applied nearly every combination I can see in the forums but I cannot get a background image to show on my Category Menus (or page menu either).

The latest code which I put in "Add HTML/CSS Inserts" is:

`/*background for menu bar*/
div#menu1 ul#rmenu li a {font-weight: bold !important;background-color: transparent;
background-image: url(http://ibooknewzealand.com/images/logos/greenButton.jpg) repeat;}

div#menu2 ul#rmenu li a {font-weight: bold !important; z-index: 4;}
#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-color: transparent!important;
background-image: url(http://ibooknewzealand.com/images/logos/greenButton.jpg) repeat!important;
}`

I'm using wp 2.9.2 & Ata 3.4.6. Hopefully it will be easy for you to spot the problem.
Kind regards, Joan.

juggledad Apr 15, 2010 10:22 AM

Here is my handy little cheat sheet for dealing with the two menu's and the parts. Put this at the end of your css and you can see graphically, what effects what. It should be enough to get you going.
HTML Code:

/* ================================================ */
/* Page menu background                            */
/* ================================================ */
div#menu1 {
        height: 40px; 
        margin-top:0px;
        background: #blue;
}
/* ================================================ */
/* Page Menu item's background and border          */
/* ================================================ */
div#menu1 ul.rMenu {
        background: #red;
        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: #yellow !important;
        color: #000000 !important;
}
/* ================================================ */
/* 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;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */


kal Apr 16, 2010 05:37 PM

Pin this! :D

joan Apr 19, 2010 03:30 AM

I agree Kal... Thanks so very much Juggledad ! This works beautifully and I'd also suggest that you make this a "sticky post".
Kind regards, Joan


All times are GMT -6. The time now is 07:29 AM.

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