Do two separate CSS definitions, one for page_item and then one for current_page_item. I think that the space is so you can assign multiple classes to a single element, so this should give you the desired effect.
Thread Starter
Andrew
(@andrew)
Thanks for replying so quickly, Avenir.
Unfortunately, I tried formating both page_item and current_page_item, and nothing happened. Any ideas?
Has anyone been able to style the “current_page_item” with CSS?
I am trying to highlight the current page link in a menu bar but I am not having any luck getting the CSS implemented correctly.
li.page_item { formatting code here } and li.current_page_item { formatting code here } do not seem to work. And, as far as I know from my CSS experience, defining:
#nav li.page_item current_page_item
OR
#nav li.page_item li.current_page_item
is not the correct way to handle things.
Big thanks for any help. The Dynamic Menu Highlighting article does not seem to be compatible with WP 1.5+’s PAGES feature.
you posted a while ago, so i hope you’ve been able to solve your problem. but i just wanted to say, i got it working by listing them seperatly:
li.page_item {
background:blue;
}
li.current_page_item {
background:red;
}
if you want to style two classes together you need to use commas between classes:
li.current_page_item, li.page_item {
padding:5px;
}
did that work for you?
i am a complete moron! when I was trying code (just like your suggestion) I was not giving the class the correct inheritance. li.current_page_item was not working and prompted my post. After a few days of stepping away from the code, and seeing your reply, it clicked!
I needed to use div#sidebar div#nav li.current_page_item a to reference it correctly.
Thanks for help!
Wow, this is pretty much exactly what I’m looking for. I’ve written my own theme from scratch so I don’t have those classes automaticly set 🙁 Where do they come from? Kubrik? I mean, what does the templates look like?
Thanks
li.page_item {
color: cyan;
font-size: 8pt;
}
li.current_page_item {
font-size: 12pt;
color: #D90000;
}
i use the code above in my stylesheet – and it works so far. but it only changes the font-size but not the color. 🙁 any idea, what i do wrong?
tia,
pati
Hey all,
Man, what a vexxing problem! But thanks to this post, and a little more css-brewed patience, I finally got it.
This seems to work:
#nav a:link, #nav a:active, #nav a:hover{
/*NOTE: no color specification */
text-decoration:none;
}
#nav a:hover{
color:#D90000;
}
.page_item a{
color:#333333;
}
.current_page_item a{
color: #D90000;
}
I have had to hack this one many times on a couple sites, but hack no more will I!!!
Cheers,
pf
