[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*/ So how do I get rid of the ATO default "active" page over-lay and the text from covering my images?:confused: |
I have done this by putting the image code in the navigation label box when using the WordPress menu system.
|
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. |
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> |
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 04:43 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.