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)
-   -   [SOLVED] Use images in Menu bar for Pages (http://forum.bytesforall.com/showthread.php?t=14908)

ChaseMann Jul 18, 2011 02:29 PM

[SOLVED] Use images in Menu bar for Pages
 
Hi guys, I found a few threads in the forum that sort of answered my question on how to use images in the menu bar for the page names, but not quite a full and succinct tutorial.

I'm trying to duplicate the menu bar that the client already has on this website:
http://thewellingtonsd.com

Here's what I have so far:
http://thewellingtonsd.com/blog/

I gave my pages classes in the menu admin area (can't seem to find the thread that suggested I do this though). Then I used CSS to style the classes with the images.

Here is the CSS I put into ATO-Add HTML/CSS inserts
HTML Code:

/*Page Menu Images*/
div#menu1 ul.rMenu li a:active, div#menu2 ul.rMenu li a:active {
padding: 6px 5px 0 5px; text-decoration:underline !important;
}

div#menu1 ul.rMenu li.current-menu-item a:link, div#menu1 ul.rMenu li.current-menu-item a:active, div#menu1 ul.rMenu li.current-menu-item a:hover, div#menu1 ul.rMenu li.current-menu-item a:visited, div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:hover, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover {
    background-color: transparent;
    border-bottom: 1px solid;
    color: #000000;
    padding-bottom: 0;
}

div#menu2 ul.rMenu li.current-menu-item a:link, div#menu2 ul.rMenu li.current-menu-item a:active, div#menu2 ul.rMenu li.current-menu-item a:hover, div#menu2 ul.rMenu li.current-menu-item a:visited, div#menu2 ul.rMenu li.current_page_item a:link, div#menu2 ul.rMenu li.current_page_item a:active, div#menu2 ul.rMenu li.current_page_item a:hover, div#menu2 ul.rMenu li.current_page_item a:visited, div#menu2 ul.rMenu li a:hover {
    background-color: transparent;
    border-bottom: 1px solid;
    color: #000000;
    padding-bottom: 0;
}

.menu-home {background:url("http://thewellingtonsd.com/images/home-n2.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-home a:hover, .menu-home a:active {background:url("http://thewellingtonsd.com/images/home-n2-o.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-about {background:url("http://thewellingtonsd.com/images/about-n2.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-about a:hover, a:active {background:url("http://thewellingtonsd.com/images/about-n2-o.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-contact {background:url("http://thewellingtonsd.com/images/contact-n2.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-contact a:hover, a:active {background:url("http://thewellingtonsd.com/images/contact-n2-o.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-reviews {background:url("http://thewellingtonsd.com/images/reviews-n2.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-reviews a:hover, a:active {background:url("http://thewellingtonsd.com/images/reviews-n2-o.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-parties {background:url("http://thewellingtonsd.com/images/parties-n2.gif") no-repeat left top !important;
background-color: none; width: 104px !important;
}

.menu-parties a:hover, a:active {background:url("http://thewellingtonsd.com/images/parties-n2-o.gif") no-repeat left top !important;
background-color: none; width: 104px !important;
}

.menu-wellhome {background:url("http://thewellingtonsd.com/images/well-home-n2.gif") no-repeat left top !important;
background-color: none; width: 130px !important;
}

.menu-wellhome a:hover, a:active {background:url("http://thewellingtonsd.com/images/well-home-n2-o.gif") no-repeat left top !important;
background-color: none; width: 124px !important;
}


So how do I get rid of the ATO default "active" page over-lay and the text from covering my images?
:confused:

lmilesw Jul 18, 2011 06:19 PM

I have done this by putting the image code in the navigation label box when using the WordPress menu system.

ChaseMann Jul 19, 2011 09:38 AM

Hi Larry, thanks for the response, but can you clarify what you mean by "image code"?

I tried putting all the CSS, just the background:url(...) line, and just the actual image file name, but none of that worked.

Thanks.

lmilesw Jul 19, 2011 11:29 AM

You wouldn't put the CSS there just a image wrapped in a div for styling.
HTML Code:

<div id="hometab"><img src="path to image" /></div>

ChaseMann Jul 20, 2011 07:46 PM

Thanks Larry, I was able to keep my roll-over images by keeping my images in my CSS and then using your trick of putting the <div id="menu-home"><img src="http://thewellingtonsd.com/images/60-trans.gif" /></div> in the WordPress Menu navigation label field ... but I used transparent images so you could see through the button to my images in my CSS. ;)

I also was getting a weird background highlight box around the current page, so I added some more CSS for another trick I had learned here to put an underline instead of a highlight box under page menu items and I made the underline the same color as the background so it wouldn't actually show. (I edited the code above with the added CSS).


All times are GMT -6. The time now is 10:33 AM.

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