Support » Fixing WordPress » How can I target a specific Category page for CSS?

  • I understand that I need the page-id to do this, but it’s simply not working… I feel like I’ve exhausted all my options…

    The body has the tag: <body <?php body_class(); ?>>

    So that’s not the issue. Can someone please take a look at this and show me how it’s done? The site is:

    Cover By Cover: Birdy The Mighty Decode

    Thanks!

Viewing 15 replies - 1 through 15 (of 19 total)
  • Open a page on you site in a browser. Hit CTRL+u. Find the “<body” tag. For example, on this page it looks like this: <body class="archive category category-elfen-lied-movie category-14 custom-background"> You can see your category identified is two different ways. Now use those in your style rules.

    .category-elfen-lied-movie p {color:red}

    So I don’t necessarily need the WHOLE class? Just the category page itself?

    The page I’m trying to customize is this:

    Here

    You need the whole class name. In the example I posted there are five class names. Otherwise, I don’t really know what you need since I don’t really know what you are trying to do. On the page you just posted there are 5 classes also– <body class="archive category category-all category-15 custom-background">. .category will target all category archives.

    I’m trying to style the page that I’ve assigned that category too. The category is ALL. So I’ve given it a page in my custom “menu” so that instead of viewers seeing it as a category, they see it as just a list of all the videos. I’ve tried so many different classes and id’s to style it.. none seem to work. So let me know try this one.

    So it would be something like…

    .archive .category .category-all .category-15 .custom-background #content .entry-title
    { font-size: 20px; }

    right?

    Didn’t work… I don’t know why it lists’ “custom-background” in the class? That’s strange to me.

    `.archive .category .category-all .category-15 .custom-background #content .entry-title
    { font-size: 20px; }`

    No, that is not going to work. That is “.entry-title”, inside “#content”, inside “.custom-background”, inside “category-15”, and so on. That is not what you want. You probably want something more like: .category #content .entry-title { font-size: 20px; }

    That’s what I thought, but wouldn’t that target every category? How would that target my specific page?

    HEY THAT WORKED… but it changed the settings for ALL my categories! But it at least responded that time… I just want it for that page though. I think I can probably figure it out from here maybe.

    It is NOT letting me target a specific category. I’ve tried other categories in my list, and it will ONLY let me stylize .category and no specific category inside it, like .category-15

    Ideas? Anyone?

    Didn’t work…

    the used css syntax is wrong – no spaces allowed between css classes of the same element;

    try:

    .archive.category.category-all.category-15.custom-background #content .entry-title
    { font-size: 20px; }

    or simply:

    .category-all #content .entry-title
    { font-size: 20px; }

    and don’t forget to clear the browser cache – ‘CTRL F5’ or ‘reload’ …

    I’ve tried other categories in my list, and it will ONLY let me stylize .category and no specific category inside it, like .category-15

    .category is not ‘inside’ .category-15. Look at the body classes again. Those are all on the same level. Try:

    .category-15 #content .entry-title { font-size: 20px; }

    I tried all three of those before and again now… nothing. Wouldn’t .category-15 be “inside” .category? It’s letting me stylize .category but not .category-15 or category-all.

    Is there something “not allowing” me to target a specific category? Could it be something with the twentyten theme?

    Have you tried your suggestions with the “firebug” or developer tools in chrome or firefox? For me it doesn’t even read it… grey’s it out. But obviously I’ve edited the stylesheet as well and reloaded it and refreshed the cash too. Nada.

    Should I consider doing a completely new stylesheet for this page?

    BAHAHAHA I figured it out! Holy Crap… days later.

    .category.category-all.category-15 #content .entry-title
    { font-size: 20px !important; }

    I used your syntax suggestion and played with that… turns out it need BOTH of those id’s. Weird. Thanks guys for your help, wouldn’t have been able to get it on my own. Much appreciated!

    One more thing guys. So is it possible that I would be able to ADD a <div> into this specific page as well? I need to add a customized title at the top.

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘How can I target a specific Category page for CSS?’ is closed to new replies.