Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

Page Menu Background & Hover Image how to do this...


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Dec 3, 2009, 09:41 AM
ssoszka
 
75 posts · Apr 2009
Oregon, USA
Send a message via Skype™ to ssoszka
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!!!

Last edited by ssoszka; Dec 4, 2009 at 02:26 PM.
  #2  
Old Dec 7, 2009, 12:46 PM
ssoszka
 
75 posts · Apr 2009
Oregon, USA
Send a message via Skype™ to ssoszka
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....
  #3  
Old Dec 8, 2009, 05:09 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Dec 8, 2009, 07:52 PM
ssoszka
 
75 posts · Apr 2009
Oregon, USA
Send a message via Skype™ to ssoszka
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!!!!
  #5  
Old Dec 8, 2009, 11:54 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
Quote:
Originally Posted by ssoszka
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;
  #6  
Old Dec 9, 2009, 05:42 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Dec 10, 2009, 10:12 AM
ssoszka
 
75 posts · Apr 2009
Oregon, USA
Send a message via Skype™ to ssoszka
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
  #8  
Old Dec 10, 2009, 03:22 PM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Jan 7, 2010, 11:50 AM
ssoszka
 
75 posts · Apr 2009
Oregon, USA
Send a message via Skype™ to ssoszka
Quote:
Originally Posted by juggledad
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.
  #10  
Old Jan 7, 2010, 12:55 PM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
this would be put at ATO->Add HTML/CSS Inserts->CSS Inserts
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Jan 7, 2010, 07:58 PM
ssoszka
 
75 posts · Apr 2009
Oregon, USA
Send a message via Skype™ to ssoszka
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;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++
  #12  
Old Feb 18, 2010, 11:19 AM
Jimmmy
 
2 posts · Feb 2010
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

Bookmarks

Tags
page menu background, page menu bar, page menu bar image

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Applying page menu background with hover opacity krystyna Page & Category Menu Bars 6 Mar 2, 2010 12:14 AM
Background image for page menu? blueprairie Page & Category Menu Bars 10 Dec 1, 2009 10:02 PM
Background image & form in only 1 cell of a header extra widget cell? kippiper Header configuration & styling 8 Nov 22, 2009 06:58 AM
[SOLVED] How to override default link & hover colors in RSS widget? ericmacknight Sidebars & Widgets 2 Oct 31, 2009 05:17 AM
image not showing in background of page menu bar rinoa3108 Page & Category Menu Bars 5 Jul 30, 2009 07:37 AM


All times are GMT -6. The time now is 12:22 PM.


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