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! |
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); } |
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 |
I figured it out!
Put it into HTML/CSS Inserts -> CSS Inserts: ul.rMenu li { background: url(your_image_path.gif); } |
How do I remove the formatting on the menu bar as set in Page Menu Bar?
|
Is there an easy way to set a rollover image for the active link?
|
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" |
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 |
I've been trying this, too, with mostly success. Here's my code so far:
Quote:
Any help? Thanks!!!!!!! (take a look: www.sandhillwebsitedesign.com) |
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 :(
|
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 02:53 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.