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
Image background for menu bar AND different background for current page menu button

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 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 08:16 AM.


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