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 & Category Menu Bars »

[SOLVED] Background image for current page item?


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 Apr 22, 2011, 10:51 AM
crashley1784
 
79 posts · May 2009
[SOLVED] Background image for current page item?

Hello again,
I'm working on a menu bar in which each individual link has its own background image (the "home" link has its own bg image, the "ads" link has its own background image, etc.)

I've got that all working correctly.
What I CAN'T figure out is how to configure the "current page item" function to work with the individual background images.

So, for example, if a user is on the home page, I want the hover state of the home button to be displayed. If they're on the ads page, I want the hover state of the ads image to be displayed.

This is what I have currently, but it's not working (obviously):
Code:
div#menu1 ul.rMenu li.page-item-2 current_page_item a {
background: url(http://www.laurenacooper.com/lostpets/wp-content/themes/atahualpa/images/home_button.png) -100px 0 no-repeat;
height: 150px;
width: 100px;
}
div#menu1 ul.rMenu li.page-item-4 current_page_item a {
background: url(http://www.laurenacooper.com/lostpets/wp-content/themes/atahualpa/images/home_button.png) -100px 0 no-repeat;
height: 150px;
width: 100px;
}
Link to site: http://www.laurenacooper.com/lostpets

I know I probably just have the code syntax incorrect. Any help is greatly appreciated
  #2  
Old Apr 22, 2011, 01:29 PM
lmilesw's Avatar
lmilesw
 
10,077 posts · Jul 2009
Central New York State USA
It took me a bit but try this.

HTML Code:
div#menu1 ul.rMenu li.page-item-2.current_page_item a {
background: url(http://www.laurenacooper.com/lostpets/wp-content/themes/atahualpa/images/home_button.png) -100px 0 no-repeat !important;
height: 150px;
width: 100px;
}
div#menu1 ul.rMenu li.page-item-4.current_page_item a {
background: url(http://www.laurenacooper.com/lostpets/wp-content/themes/atahualpa/images/home_button.png) -100px 0 no-repeat !important;
height: 150px;
width: 100px;
}
It comes down to no space between the last two classes and an !important at the end of the image path. You can also leave out the div#menu1 ul.rMenu li. on each line if you like
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Apr 22, 2011, 06:07 PM
crashley1784
 
79 posts · May 2009
That worked like a charm! Thank you so much!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] menu item background image not showing in IE peterkinvara Page & Category Menu Bars 8 Mar 16, 2011 03:57 AM
[SOLVED] change current category menu item text color cway Page & Category Menu Bars 3 Oct 29, 2010 08:39 AM
Page menu (pages-widget): Current page item in post unelma Sidebars & Widgets 5 Jun 7, 2010 03:11 PM
[SOLVED] Item Padding inside Expaned Page Menus & Color of Items on current page. joshsweiss Page & Category Menu Bars 7 Feb 23, 2010 06:31 AM
[SOLVED] Change Current Menu Item's Background to Transparent rnimchuk Header configuration & styling 2 Sep 15, 2009 05:12 AM


All times are GMT -6. The time now is 10:14 PM.


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