WordPress.org

1. Shaun Brown
   Member
   Posted 1 year ago #

   Hello,
   Im utilizing the post_class tag to style different categories and tags, however I've run into a specific problem I cant seem to find in the codex...

   What I want to be able to do is have the tag check first to see if the post has already been placed into a specific category or tag, IF SO - use that category or tags styling, IF NOT - then use a default CSS styling instead.

   I tried creating a style just for .post, but what that obviously does is force the post to simultaneosly have (2) styles at the same time which is not what I want.

   Im not the biggest expert yet at PHP so Im not sure where to start in order to create some sort of an "argument" or "filter" that will accommodate my needs. Any help is highly appreciated.

   Best,
   SB

2. Otto
   Tech Ninja
   Posted 1 year ago #

   No PHP is needed. The key word is "specificity". You have to override those styles in the other class by being more specific.

   Let's say I had HTML that looked like this:

   <div class="post post-cat">
   whatever
   </div>
   
   <div class="post post-other">
   whatever2
   </div>

   Now, obviously, anything I use with .post applies to both. But I can override those .post CSS by being more specific about what I'm styling.

   .post {
   color:red;
   }
   
   div.post-cat {
   color:blue;
   }

   The addition of the div makes it more specific and that only applies to the .post-cat. But yes, you do have to override the ones that you want to apply there. The .post should only contain things you want to apply to all .post's, and then override them for more specific cases.

   Google for "css specificity" and you'll find a lot of info on the topic.

3. Shaun Brown
   Member
   Posted 1 year ago #

   Otto, Thanks for the super quick response.

   So what if "every" post has a containing div, and thats what Im trying to change via styles in my css with post_class?

   Because how I have it right now is, Im giving my featured posts a specific category > the posts with those specific featured category names have their own CSS styles, ie. .category-featuredblog, .category-featuredworks, etc. So depending on what category I choose I have a different background image thats instantiated in that containing div according to my new css rules Ive created.

   But for the default post ie. .post, I guess Im missing the point of what I should be amending in my css since I already have specific rules for each category + .post?

   I'll give that css specificity a google search though like you recommended, hopefully that will be the answer.

4. Shaun Brown
   Member
   Posted 1 year ago #

   Well, I tried making my category styles as specific as possible, all the way up to the body tag, somehow it still didnt make a difference. The posts that are using the category styles are still being combined with the .post styles... It sure would be awesome if it really is just a simple CSS error Im making though, to my knowledge everything looks correct though.

   This is what the html output looks like:

   <div class="post-571 post type-post hentry category-latestblog" id="post-571">

   This is what my CSS looks like with more specificity added:

   body div#main_wrapper div.category-latestworks{
   background: url(images/main_latest_feat.png) no-repeat;
   width: 550px;
   height: 280px;
   padding: 10px 10px 10px 50px;
   margin-bottom: 20px;
   text-align: left;
   }

   body div#main_wrapper div.category-latestblog {
   background: url(images/main_blog_feat.png) no-repeat;
   width: 550px;
   height: 280px;
   padding: 10px 10px 10px 50px;
   margin-bottom: 10px;
   text-align: left;
   }

   .post {
   width: 550px;
   height: 280px;
   background-color: #D6D6D6;
   padding: 10px;
   margin-bottom: 20px;
   margin-left: 40px;
   text-align: left;
   }

   Thanks again.
   -SB

5. Otto
   Tech Ninja
   Posted 1 year ago #

   The posts that are using the category styles are still being combined with the .post styles.

   Yes, and they're always going to be. That's just how CSS works. You just have to override the styles that you want in the more specific classes.

   In other words, you only put the common stuff, the stuff that all of them share, into .post. Into the more specific ones, you put the things that make them different, even if that overrides something in the generic post.

6. Shaun Brown
   Member
   Posted 1 year ago #

   Yes, and they're always going to be. That's just how CSS works. You just have to override the styles that you want in the more specific classes.

   I was able to acheive this, but I ended up with some unwanted artifacts...The correct background images become instantiated as I wanted for those particular categories but then the margins from .post get combined together and throw the entire layout off which is not so good.

   The thing is I DONT want my background images from .category-featuredblog or .category-featuredworks to be lumped together with the default class .post. So basically it seems like I need a filter of some sort to tell the post_class tag to not output the ".post" class in the html if a specific category is chosen basically. Does that make sense? Because I dont want to "combine" the two rules in any way at all, I want them to be totally separate depending on what category, tag, or nothing for that matter is chosen when the post is published.

   Is this possible?

   PS - I found a simple fix to this but it unfortunately involves using more images which is what I was trying to not rely on since the default post class really doesn't need a background image to achieve the effect I was going for, but it does seem to work.

   *What I did was create a base layer image that doesn't have any additional graphics that help it indicate that its for a specific category and used that for the .post class. So now when the category classes get used it doesn't have conflicting margins, etc.

7. Otto
   Tech Ninja
   Posted 1 year ago #

   The thing is I DONT want my background images from .category-featuredblog or .category-featuredworks to be lumped together with the default class .post. So basically it seems like I need a filter of some sort to tell the post_class tag to not output the ".post" class in the html if a specific category is chosen basically. Does that make sense? Because I dont want to "combine" the two rules in any way at all, I want them to be totally separate depending on what category, tag, or nothing for that matter is chosen when the post is published.

   Yes, I understand what you're saying, but I think you're looking at it wrong. CSS is supposed to work this way, and it makes it easier if you go with the flow.

   The idea here is that you really don't want them to be separate. For example, with a background image, the one you would define in .post would be the default for all post background images, but then in the post-tag or whatever, you'd override it with a different image. On the one with the post-tag, it wouldn't be "layered", as there can be only one actual background image, and it would be the post-tag one. You're overriding the default of .post with whatever is in the .post-tag.

8. Shaun Brown
   Member
   Posted 1 year ago #

   Dang well thats the part thats trippin me up cuz I swear to you they are layered together, because the margins from .post were being combined with the background image of .category-xxxx, instead of just using the declarations from .category-xxxx only...

   I even checked in Firebug by removing the .post class while observing the two classes becoming combined and as soon as .post was removed from the html output it looked correct.

   So does this mean that my category rules were still not written specific enough then to completely override the .post class? Im a bit baffled by that since I made it specific all the way up to the body tag.

9. Otto
   Tech Ninja
   Posted 1 year ago #

   the margins from .post were being combined with the background image of .category-xxxx, instead of just using the rules from just .category-xxxx only.

   Correct, which means that you need to override the margins in .category-xxxx. Just add a margin rule there to change the margins to what you want them to be.

   See, both sets of rules you have here are changing the styles on the same element. When there's a conflict, like when you have margins in both sets of rules, then the winning one will be in the more specific set.

   Like this:
   

   .post {
   margin: 1px 2px 3px 4px;
   color: red;
   }
   
   div.post-tag {
   margin: 5px 6px 7px 8px;
   }

   With this set of CSS, the margins for a <div class="post post-tag"> will end up being 5678. The color will still be red, because I didn't override that rule. If I added color: blue to the second set of rules, then the post-tag div would be blue.

   You can't "erase" the rules from .post, but you can override them individually with new rules.

10. Mark / t31os
    Moderator
    Posted 1 year ago #

    Hi Shaun,

    I'll agree with Otto here, it's all about using the right amount of specificity with your CSS.

    Example follows below.

    Default post:
    

    .post {
    /* Stuff that applies to all */
    border: 1px solid #ccc;
    background: #fff;
    padding: 10px;
    }

    Category specific (example cat Fruits):
    

    .post.category-fruits {
    background: #ccc;
    border-color: #fff;
    }

    Tag specific (example tag People):
    

    .post.tag-people {
    padding: 20px
    border-color: #fff;
    }

    When it's both the category fruits and tag people.
    

    .post.category-fruits.tag-people {
    border: #900;
    background: #000;
    color: #ccc;
    }

    NOTE: In the examples the class names do not have a space between them, this is intentional, classes joined together indicate the style applies to an element with all the classes (using a space would indicate a parent > subitem relationship).

    Hope that helps clear things up a little...

11. Shaun Brown
    Member
    Posted 1 year ago #

    Holy crap, I didnt realize it was that easy! lol.
    Thanks for all the help guys :)
    Ive honestly never run into an issue like this in the 4 yrs Ive been writing html/css, I guess I just never needed to do something like this before with my CSS so it was totally foreign to me.

    I think i was focusing too much on making sure my selectors/id's/etc. were more specific rather then also observing what declarations I have in the rule I want to be the dominant one. As soon as I specified what the margins should be in the category classes it fixed my problem, I suppose thats what I get for workin into the wee hours of the night and not taking a break to look at the basics of my code! doh! ...lol.

    Thanks again fellas.

    Best,
    Shaun

12. Mark / t31os
    Moderator
    Posted 1 year ago #

    You're most welcome.. :)

Topic Closed

This topic has been closed to new replies.