Help! which element styles li current page bkg style? (wordpress/weaver ii theme)

HTML & CSS
1

hi folks,

i’ve spent over two weeks trying to figure this out. got some help from the weaver ii theme forum peeps, but i just can’t seem to get over one last hurdle – i have everything working as desired except the li background item for the current page. since it is not a link <a> item, i just can’t figure out which element to style ://. (i know. lame.)

AT REST LI ICON WORKS -

.homepage a {background-image:url(http://www.threeriversfitness.com/wp-content/uploads/2013/01/homeLight.png); background-repeat:no-repeat; background-position: 10px 18px; background-size: 15px 14px;}

HOVER LI ICON WORKS // CURRENT LI ICON DOES NOT WORK-

li.homepage a:hover, [COLOR="#B222222"]li.homepage .current_page_item [/COLOR]{background-image:url(http://www.threeriversfitness.com/wp-content/uploads/2013/01/homeDark.png); background-repeat:no-repeat; background-position: 10px 19px; background-size: 15px 14px;}

the current page should match the hover state darker icon at a slightly lower position. additional styling will bring the text in line with the dropped icon. but right now i just need to corral that dang element!! (and believe me, i’ve tried so many of 'em in there i can’t even see straight any more.)

here’s the url so you can see it in action: http://www.dev.threeriversfitness.com/welcome/

on a related note, when i view source or use browser dev tools i see declarations with a ‘>’ stuck between elements like so:

.menu_bar .current_page_item > a, .menu_bar .current-menu-item > a

what does that mean and how do i handle it when trying to write new rules for that strign of elements/classes in the actual style declaraton?

thanks so much in advance for your patience and assistance. :slight_smile:

2

mtouchette, I’m not exactly sure what is not working for you. The “Home” menu item does seem to be styled.

There is a bit of a problem with the positioning of the main menu that you might be interested in, however.

At the present time, the list items are being positioned on two different stylesheets as follows:

/welcome/, Line 217:


.menu_bar li {
    left: 50%;
}

weaver-ii/style.min.css?ver=1.2.4, Line 17:


.menu_bar li {
    float: left;
    position: relative;
}

That arrangement is causing the main menu to extend past the right edge of the page.

I suggest that you delete the first item on /welcome/ entirely and change the second item to:

weaver-ii/style.min.css?ver=1.2.4, Line 17:


.menu_bar li {
    display:inline-block;
 }

and see how that works.

The child selector, the “>” symbol, is explained very nicely in this reference: http://reference.sitepoint.com/css/childselector

If you can provide a better explanation of how you would like the first menu item to be styled (explain what is not happening for you) we should be able to help with that. It seems to be working in Firefox but I could easily be misunderstanding your wishes. :slight_smile:

3

hi ronpat,

thanks for responding, and so quickly. :slight_smile:

yes, i know about the menu being positione badly. it’s not that way on the live site and i didn’t think it worth tracking down on the dev environment.

and you are correct everytihng is working … except … the little house icon when the home page is the current page should be darker and down by 1 or 2 pixels as it is in the hover state.

in other words, the hover state and currant page tabs should be identical. right now when you click the icon image reverts to the <a> state image. does that make more sense?

4

You aren’t getting the dark house when the page is current because you have the CSS a little wrong. Remember that the current class is on the LI, not the A, so instead of this:

li.homepage a:hover, li.homepage [COLOR="#FF0000"].current_page_item[/COLOR] {
background-image: url(http://www.threeriversfitness.com/wp-content/uploads/2013/01/homeDark.png);
background-repeat: no-repeat;
background-position: 10px 1[COLOR="#FF0000"]9[/COLOR]px;
background-size: 15px 14px;
}

you need this:

li.homepage a:hover, li.homepage[COLOR="#FF0000"].current_page_item[/COLOR] {
background-image: url(http://www.threeriversfitness.com/wp-content/uploads/2013/01/homeDark.png);
background-repeat: no-repeat;
background-position: 10px 1[COLOR="#FF0000"]8[/COLOR]px;
background-size: 15px 14px;
}

I’ve just closed up the gap between the classnames, so that the class is on the LI, rather than on its child. I’ve also changed the y-position to 18 instead of 19 to stop the appearance of a jump. I suspect that was a typo?

This is a perfect place for a “sprite” image, with each image state in one image. Then you get an instant hover effect, rather than a delay as the hover image loads.

5

hi ralph,

that’s it? closing up the gap? i swear i tried that…i think. that was part of my problem, i think. i tried so much i was going i circles.

the 1px idfference actually wasn’t a typo. the final version has the tab and its contents drop (and stay) down. see http://threeriversfitness.com if you’re curious.

i will try the sprite thing soon’s i get my head wrapped around what is what. :slight_smile: i know of sprites and understand the general concept, but have never done it. now that the live site is done, i am going back into the dev environment to leisurely refine some things – and learn some new stuff along the way!

thanks so much for your help. i’m hopping over to make the change right now!

6

oops, that didn’t work. now i have a double image and it put the bullet image behind the background tint so it got screened back; which is exactly what happened when i did it in my trials. but since you changed that Y-axis location at least now i know the darker image is being dispalyed. before i thought it wasn’t even switching.:slight_smile:

i’ve left it in there so you can see what happened.

7

Oops, I made a mistake. I forgot to add the “a” (see in red). Sorry!

li.homepage a:hover, li.homepage.current_page_item [COLOR="#FF0000"]a[/COLOR] {
background-image: url(http://www.threeriversfitness.com/wp-content/uploads/2013/01/homeDark.png);
background-repeat: no-repeat;
background-position: 10px 18px;
background-size: 15px 14px;
}
8

yes! yes! oh… doing my best meg ryan harry met sally impression here

that’s it. i can sleep now and tidy up the rest tomorrow.

thank you again!

9

I assume you’re just faking gratitude, but I’m glad that helped, anyway. :lol:

10

haha, good reply. i assure you, the gratitude was/is totally authentic, only the dramatization was fake.

i make every effort to solve problems via discovery before posting for help as i find that a more effective learning strategy. but, i never would have gotten that on my own since i was no longer considering the element as having <a> relevance.

thank you again, again. :slight_smile: