Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] Background image for current page item? (http://forum.bytesforall.com/showthread.php?t=13877)

crashley1784 Apr 22, 2011 10:51 AM

[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 :)

lmilesw Apr 22, 2011 01:29 PM

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

crashley1784 Apr 22, 2011 06:07 PM

That worked like a charm! Thank you so much!


All times are GMT -6. The time now is 04:19 AM.

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