Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Image background for menu bar AND different background for current page menu button


  #1  
Old Jun 1, 2011, 12:48 PM
kippiper
 
135 posts · Jun 2009
Hi guys!

I am having a tough time wrapping my brain around Juggledad's code for a menu background.

I want the first image (menu-bg.jpg) to be the background image for the menu bar and for the pages not open.

Then I want the second image (menu-bg-off.jpg) to be the background image for the menu button of the page currently on.

Make sense?

Here's my code. What am I missing?

Thanks in advance for your help!

KIP

HTML Code:
/* ================================================ */
/* Page menu background                             */
/* ================================================ */
div#menu1 { 
	height: 40px;  
	margin-top:0px; 
	background:url(http://wp-content/themes/atahualpa/images/menu/menu-bg.jpg); 
}
/* ================================================ */
/* Page Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
	background:url(http://wp-content/themes/atahualpa/images/menu/menu-bg.jpg);
	border: none 0px; 
}
/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */
ul.rMenu li a:link, 
ul.rMenu li a:visited, 
ul.rMenu li a:hover, 
ul.rMenu li a:active, 
ul.rMenu li {
	background:url(http://wp-content/themes/atahualpa/images/menu/menu-bg-off.jpg) !important;
}
  #2  
Old Jun 1, 2011, 01:15 PM
kippiper
 
135 posts · Jun 2009
Oh and I would like the hover to change to the second image when hovering over the menu button.

Thanks!

KIP
  #3  
Old Jun 1, 2011, 02:20 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
well for one thing this
HTML Code:
background:url(http://wp-content/themes/atahualpa/images/menu/menu-bg.jpg);
is not a valid address. If you include http:// then you need the rest
of the address, like
HTML Code:
background:url(http://MYDOMAIN.COM/wp-content/themes/atahualpa/images/menu/menu-bg.jpg);
you can try
HTML Code:
background:url(/wp-content/themes/atahualpa/images/menu/menu-bg.jpg);
second, if you want to address the current menu item, you have to look at the classes. what ever page is active will have the class 'current_page_item' so you can use
HTML Code:
li.current_page_item {........}
you might want to qualify it more or add the !important attribute to it.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Jun 1, 2011, 02:46 PM
kippiper
 
135 posts · Jun 2009
Oh my! Silly me on the URL! Thanks for catching that.

As for the class thing, I'm unclear on how to configure this. I tried it in the code (shown below). I get the background image but don't get the hover/active image.

I admit it! I'm lost!

Thanks!!!

KIP

HTML Code:
/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */
ul.rMenu li a:link, 
ul.rMenu li a:visited, 
ul.rMenu li.current_page_item a:hover, 
ul.rMenu li.current_page_item a:active, 
ul.rMenu li {
	background:url(/wp-content/themes/atahualpa/images/menu/menu-bg-off.jpg) !important;
}
  #5  
Old Jun 1, 2011, 02:47 PM
kippiper
 
135 posts · Jun 2009
Oh and the URL I am working with is:

http://dev.phoenixtechnicalgroup.com
  #6  
Old Jun 1, 2011, 03:41 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
have you tried looking at using FireBug in Firefox? That way you can see the CSS for the objects.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Jun 1, 2011, 03:48 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
p.s. if you are using 3.6.7 make sure you apply the three BUGFIX's
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Jun 2, 2011, 03:58 PM
kippiper
 
135 posts · Jun 2009
Hi there!

Okay, I applied all of the bug fixes.

Second, this is how I changed the code:

HTML Code:
/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */
ul.rMenu li.current_page_item {menu-item-19
	background:url(/wp-content/themes/atahualpa/images/menu/menu-bg-off.jpg) !important;
	float: left;
	margin-left: 5px;
	margin-right: 5px;
	padding-top: 7px;
	padding-bottom: 0px;

}

And when you go to http://dev.phoenixtechnicalgroup.com, you will now see that all of the words have a solid black background. And nowhere does the alternate background image appear.

I admit I have very little CSS and PHP experience, so that's where your help is so good!

What should I try next?

Thanks!!!

KIP
  #9  
Old Jun 2, 2011, 04:13 PM
aQuickStudy's Avatar
aQuickStudy
 
43 posts · Mar 2010
To start with, get rid of "menu-item-19" within your parentheses. Then what happens? (I don't have time to test it myself, sorry, but that's a step in the right direction.)
  #10  
Old Jun 2, 2011, 04:26 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
ul.rMenu li.current_page_item {menu-item-19 is incorrect.

A css statement is made of two parts, the selector and the rules.
The rules are enclosed by {}
Each rule ends with a semicolon (';')
so you have a rule
HTML Code:
menu-item-19 background:url(/wp-content/themes/atahualpa/images/menu/menu-bg-off.jpg) !important;
since there is no property 'menu-item-19', the rest of the text up to the semicolon is ignored.

The menu CSS is the most complex in the styling, there are over 400 lines of CSS dealing with the menus. It is based on the Ruthsarian's rMenu http://webhost.bridgew.edu/etribou/layouts/

If you have very little CSS experience, I suggest going thru the tutorials at w3schools.com/css to gain a better understanding...or maybe hire some one to help you out.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Jun 2, 2011, 04:30 PM
kippiper
 
135 posts · Jun 2009
Whew! Perhaps more than I want to take on at this time. I set that for a future task to learn.

Thanks for your help!
  #12  
Old Jan 11, 2013, 08:45 AM
guiliannkamga
 
1 posts · Jan 2013
Hi everyone,

how can get a different Background for each menu or category in Atahualpa?

Thanks for your help!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Home page button keep original background color on current hubbiida Page & Category Menu Bars 1 Nov 20, 2010 04:35 PM
How can I have NO color in page Menu Bar and/or use an image for background? duramatters Page & Category Menu Bars 1 Aug 19, 2010 09:05 PM
background image for the Page Menu Bar shirley1 Page & Category Menu Bars 2 Jun 23, 2010 07:18 PM
[SOLVED] Change current page menu bar background color Wimbledon Page & Category Menu Bars 7 Apr 4, 2010 12:33 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:33 AM.


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