WordPress.org

Ready to get started?Download WordPress

Forums

How can I target a specific Category page for CSS? (20 posts)

  1. Dlime
    Member
    Posted 1 year ago #

    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:

    http://www.animericashow.com/

    Thanks!

  2. s_ha_dum
    Member
    Posted 1 year ago #

    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}
  3. Dlime
    Member
    Posted 1 year ago #

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

    The page I'm trying to customize is this:

    Here

  4. s_ha_dum
    Member
    Posted 1 year ago #

    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.

  5. Dlime
    Member
    Posted 1 year ago #

    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?

  6. Dlime
    Member
    Posted 1 year ago #

    Didn't work... I don't know why it lists' "custom-background" in the class? That's strange to me.

  7. s_ha_dum
    Member
    Posted 1 year ago #

    `.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; }

  8. Dlime
    Member
    Posted 1 year ago #

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

  9. Dlime
    Member
    Posted 1 year ago #

    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.

  10. Dlime
    Member
    Posted 1 year ago #

    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?

  11. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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' ...

  12. s_ha_dum
    Member
    Posted 1 year ago #

    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; }
  13. Dlime
    Member
    Posted 1 year ago #

    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?

  14. Dlime
    Member
    Posted 1 year ago #

    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?

  15. Dlime
    Member
    Posted 1 year ago #

    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!

  16. Dlime
    Member
    Posted 1 year ago #

    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.

  17. s_ha_dum
    Member
    Posted 1 year ago #

    I used your syntax suggestion and played with that... turns out it need BOTH of those id's. Weird.

    It isn't weird. It is the nature of CSS. If you don't get the results you expect from a rule, chances are that another rule is overriding it. You have to increase specificity until your new rule gets priority. That is basically what you did by combining the selectors and adding the !important hack. Had you not worked that out, that is what I would have suggested. So, good for you.

  18. Dlime
    Member
    Posted 1 year ago #

    Thanks S_ha_dum,

    It's good to figure things out and move on. Thanks for your help.

    Did you get that message I asked right about yours?

  19. s_ha_dum
    Member
    Posted 1 year ago #

    So is it possible that I would be able to ADD a <div> into this specific page as well?

    I didn't see it before, but yes, you can add a div. You would need to edit the template that is generating that page, or create a template for it.

  20. Dlime
    Member
    Posted 1 year ago #

    S_ha_Dum, you seem to be fairly responsive with support. Will you see if you have any ideas for a separate problem I'm having?

    http://wordpress.org/support/topic/footer-and-sidebar-dont-show-on-single-posts?replies=1

Topic Closed

This topic has been closed to new replies.

About this Topic