Page Menu Background & Hover Image how to do this...
I've seen a lot folks asking various questions about this. I've managed to piece-meal a partial solution, but its got a few problems.
What I need help with: * How to insert menu different button images for a static state and a hover state - and how to get them to be the correct size. * Also how do I set the margin between the menu buttons - I want them wider. PLEASE HELP - I AM ALMOST DONE WITH MY WEB SITE - JUST THE MENU AND THEN I'M GOOD TO GO!! My site: DrSoszka.com. I'm trying to emulate the page menu used at: Mercola.com I've got a background image in place and its about 90% correct, it does seem to be smaller around the buttons. I had added padding for the top and bottom to make the image fit correctly, but the buttons are the same height as they in the default template. Here's code I've put in the CSS Insert section (Please suggest corrections as appropriate): ul#rmenu2 {This is pulled from various posts - I don't know CSS well enough to see why my site doesn't look quite right. I've achieve about 80% of my goal and I'm looking to finish it off and be done with formating the site. Please help!!! |
Wow, no one has anything to say or any help to offer??? I'm puzzled, normally people are all over posts like mine, just like cat hair on a velvet sofa....
Buehler..., Buehler..., Buehler.... |
try this CSS Insert (you will want to change teh #yellow and #blue to the url for your images
HTML Code:
/* ================================================== */ |
Thanks, that works almost perfect. I just have two tiny problems.
1. The menu bar with the items is too small is there any way to make its background fit the repeating background? 2. How can I space the menu items a little wider? I have a image for the hover but its not showing fully. Thanks for your help!!!! |
Quote:
Code:
margin-right: 35px; |
HTML Code:
/* ================================================== */ HTML Code:
/* ================================================== */ |
Thanks, that works pretty well. The area that the menu that actually has the menu items is slightly larger than the background. How can I adjust the menu background to match the size of the menu items. DrSoszka.com
also, it looks like the hover image doesn't fit correctly, so I had a idea of breaking it into three parts: a left corner, right corner, and then an adjustable middle section with a small 2px wide graphic that repeats - much like amazon.com uses. Is that possible? Also, how to do I eliminate the background and hover images for the submenus. I want to use a solid color for that. Thanks for all the help so far!!! -Shawn |
Quote:
Quote:
HTML Code:
/* ================================================ */ |
Quote:
|
this would be put at ATO->Add HTML/CSS Inserts->CSS Inserts
|
I did so, with no results, no changes.
Here's is my complete code for all my CSS inserts as it relates to my menus: ================================================== ============== td#right, div#right-sidebar, div.post { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } /* ================================================== */ /* Menu item */ /* ================================================== */ ul.rMenu li a:link, ul.rMenu li a:active, ul.rMenu li a:visited, ul.rMenu li { background: url(/wp-content/themes/atahualpa332/images/menubkg.gif) repeat; } ul#rmenu2 { background: url(/wp-content/themes/atahualpa332/images/menubkg.gif) repeat !important;} ul.rMenu li a:hover { background: url(/wp-content/themes/atahualpa332/images/MenuHvr.gif) !important; } div#menu1 { height: 60px; margin-top:10px; /* ================================================== */ /* CSS for setting menu padding */ /* ================================================== */ ul.rMenu li { padding-top: 0px; margin: 7px 80px 7px 40px; } ul.rMenu-ver li { padding-top: 0px; margin-top: 7px 5px 0px 0px; } /* ++++++++++++++++++++++++++++++++++++++++++++++++++ */ ================================================ */ /* Here is how to change the child menu items */ /* ================================================ */ li.current_page_item ul.rMenu-ver li a:link, li.current_page_item ul.rMenu-ver li a:active, li.current_page_item ul.rMenu-ver li a:visited, li.current_page_item ul.rMenu-ver li a:hover, li.current_page_item ul.rMenu-ver li, li.current_page_item ul.rMenu-ver { background: #C7DBEB !important; color: #092D55 !important; } /* ++++++++++++++++++++++++++++++++++++++++++++++++++ |
Hi,
I would like to assign an image to each individual current page item (eg one image for when the current page is page-item-2, another for when it's page-item-3, and so on). I understand how to style ALL the pages with the same current page image, but how would I specify different current page images for different pages? Shawn, I see you have done this using the class .current_page_item within different divs (#menu1, #menu2, and so on). How did you create these divs in the php? Is there a way to specify a class for individual pages using list_pages? Or can I combine is_page with specific page-item-XXX to create a div for each individual page? Sorry if this is a dumb question. There seems so little out there on this subject. Perhaps it's because there's a really simple solution (without using body tags). I really hope so! Jimmy |
All times are GMT -6. The time now is 05:55 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.