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 page menu? (http://forum.bytesforall.com/showthread.php?t=1981)

blueprairie Jun 8, 2009 02:42 PM

Background image for page menu?
 
I'd like to use a background image behind my page nav, is there a way to do this via the admin tool or should I just enter it directly on the style sheet? Any other advice on doing this?

Thanks!

Flynn Jun 10, 2009 09:35 AM

There's no option for that but instead of editing files you should put it into HTML/CSS Inserts -> CSS Inserts:

ul#rmenu2 {
background: url(/path/to/image.gif);
}

DogBot Jun 11, 2009 01:04 PM

Cool..Now how do you do the same for the actual buttons? better yet what if I want no background or color at all?

Thank you

DogBot Jun 11, 2009 01:35 PM

I figured it out!
Put it into HTML/CSS Inserts -> CSS Inserts:

ul.rMenu li
{
background: url(your_image_path.gif);
}

blueprairie Jul 1, 2009 04:52 PM

How do I remove the formatting on the menu bar as set in Page Menu Bar?

blueprairie Jul 1, 2009 07:10 PM

Is there an easy way to set a rollover image for the active link?

Flynn Jul 3, 2009 08:34 PM

Try something like

div#menu1 li.current_page_item a:link,
div#menu1 li.current_page_item a:active,
div#menu1 li.current_page_item a:visited {
background: url(/path/to/image.gif);
}

div#menu1 li.current_page_item a:hover {
background: url(/path/to/image.gif);
}

You may have to use !important or set "background-color", too, because background-color is set, not "background"

fanbus Oct 25, 2009 11:46 AM

Hi

I'm trying to create a menu with background images (http:fanbus.ca) and I'm having a lil trouble getting the hover to work. Right now its going to the default colour, not the hover image.


div#menu1 li.current_page_item a:link,
div#menu1 li.current_page_item a:active,
div#menu1 li.current_page_item a:visited {
background: url(http://fanbus.ca/bcsportslogos/menu2.jpg);
}

div#menu1 li.current_page_item a:hover {
background: url(http://fanbus.ca/bcsportslogos/menu.jpg);
}
div#menu1 ul.rMenu {
background:transparent url(http://fanbus.ca/bcsportslogos/menu.jpg) repeat-x scroll top left;
}
div#menu1 ul.rMenu li {
background:transparent;
margin: -1px 0 -1px -1px;
}

I'd like the background image to extend the width of the site, not just the width of the menu objects.
Also, I'd like the drop-down to be a solid color with a bit of opacity and transparency.

Cheers

measure2x Nov 11, 2009 06:30 PM

I've been trying this, too, with mostly success. Here's my code so far:

Quote:

ul#rmenu2 {
background: url(/wp-content/themes/atahualpa/images/background/menu-background.jpg) !important;
}

div#menu1 li.current_page_item a:link,
div#menu1 li.current_page_item a:active,
div#menu1 li.current_page_item a:visited {
background: transparent url(/wp-content/themes/atahualpa/images/background/menu-background.jpg) !important;
}

div#menu1 li.current_page_item a:hover {
background: transparent url(/wp-content/themes/atahualpa/images/background/menu-back-hover.jpg) !important;
}

ul.rMenu li
{
background: url(/wp-content/themes/atahualpa/images/background/menu-background.jpg);
}
Just one problem left: the hover for the in-active page reverts to the color selected in the the Page Menu Bar area. I'm sure I just have to tweak the code somewhere, but I just can't see it.

Any help? Thanks!!!!!!!
(take a look: www.sandhillwebsitedesign.com)

measure2x Nov 15, 2009 05:27 PM

I just picked a color for the rollover that gives the illusion of a gradient image. Just can't get the rollover image to work :(

ssoszka Dec 1, 2009 10:02 PM

Ok, now I'm working with the same issues with out much luck here is my hodge-podge collection of code I've picked up in several posts:

}
ul#rmenu2 {
background: url(/wp-content/themes/atahualpa332/images/menubkg.gif) repeat; !important}
ul.rMenu li
{background: url(/wp-content/themes/atahualpa332/images/menubkg.gif) repeat;
}
div#menu1 li.current_page_item a:link,
div#menu1 li.current_page_item a:active,
div#menu1 li.current_page_item a:visited {
background: url(/wp-content/themes/atahualpa332/images/menubkg.gif) repeat;
}
div#menu1 li.current_page_item a:hover {
background: url(/wp-content/themes/atahualpa332/images/menuhvr.gif);
}

Ok, that listed, here is what I am trying to achieve:
* Have a image based background in the page menu, based off of "menubkg.gif (which is a 35px x 2px graphic that I want have repeat across the page menu - this also means I must increase the height of the page menu.

* Next I want to suppress the page menu background color. so my graphic shows up in all situations except "hover". But only on the main page menu, I want something there for the secondary menus

*I want to have "menuhvr.gif appear when the mouse is hovering over the page menu items.

*Finally, I want set the font to bold

Ok, its a tall order, but if anyone has some advice please help.

-Shawn


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

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