Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   Page Menu Background & Hover Image how to do this... (http://forum.bytesforall.com/showthread.php?t=4697)

ssoszka Dec 3, 2009 09:41 AM

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 {
padding-top: 8px; padding-bottom: 5px;
margin: 10px 0 0 0;
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#menu2 li.current_page_item a:hover {
background: url(/wp-content/themes/atahualpa332/images/menuhvr.gif);
}
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!!!

ssoszka Dec 7, 2009 12:46 PM

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....

juggledad Dec 8, 2009 05:09 AM

try this CSS Insert (you will want to change teh #yellow and #blue to the url for your images
HTML Code:

/* ================================================== */
/*  Menu item                                    */
/* ================================================== */
ul.rMenu li a:link,
ul.rMenu li a:active,
ul.rMenu li a:visited,
ul.rMenu li {
        background: #yellow !important;
        color: #000000 !important;
}
ul.rMenu li a:hover {
        background: #blue !important;
        color: #000000 !important;
}


ssoszka Dec 8, 2009 07:52 PM

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!!!!

Wimbledon Dec 8, 2009 11:54 PM

Quote:

Originally Posted by ssoszka (Post 20476)
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!!!!

Add these qualities to your CSS insert and play with the numbers and it should work:

Code:

margin-right: 35px;
margin-left: 35px;


juggledad Dec 9, 2009 05:42 AM

HTML Code:

/* ================================================== */
/*  menu background                              */
/* ================================================== */
div#menu1 {
        height: 40px; 
        margin-top:0px;
        background: #blue;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */


HTML Code:

/* ================================================== */
/* CSS for setting menu padding                      */
/* ================================================== */
ul.rMenu li {
        padding-top: 0px;
        margin: 7px 20px 7px 40px;
}
ul.rMenu-ver li {
        padding-top: 0px;
        margin-top: 7px 5px 0px 0px;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */


ssoszka Dec 10, 2009 10:12 AM

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

juggledad Dec 10, 2009 03:22 PM

Quote:

How can I adjust the menu background to match the size of the menu items.
Play with the numbers in the CSS

Quote:

Also, how to do I eliminate the background and hover images for the submenus. I want to use a solid color for that.
you can use this to start playing with
HTML Code:

/* ================================================ */
/* 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: #ffffff !important;
        color: #2912E7 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */


ssoszka Jan 7, 2010 11:50 AM

Quote:

Originally Posted by juggledad (Post 20640)
Play with the numbers in the CSS


you can use this to start playing with
HTML Code:

/* ================================================ */
/* 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: #ffffff !important;
        color: #2912E7 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */


Ok, but where would I insert this? I tried the various locations within the CSS insert menu but nothing worked.

juggledad Jan 7, 2010 12:55 PM

this would be put at ATO->Add HTML/CSS Inserts->CSS Inserts

ssoszka Jan 7, 2010 07:58 PM

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;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++

Jimmmy Feb 18, 2010 11:19 AM

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 03:33 PM.

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