CSS behavior changed after software update

ux
#1

I updated Discourse two days ago to 2.7.0beta4 and started noticing the change in custom CSS behavior. I previously had the following CSS code (simplified) to hide certain tags from users who are not staff:

:not(.staff){
    .topic-list{
        .category-marketplace{
            a[data-tag-name="wagon"]
            {
                display: none!important;
            }
        }
        
    } 
}

I have recently noticed the tags are also hidden from staff. I am curious if this has to do with the update. If so, how can I make the adjustment? Thank you!

1 Like
#2

That should still work, I tested it on my development site and it works as expected… is that the only CSS that has stopped working?

4 Likes
#3

Yes that’s the only thing I noticed that is behaving differently. Not sure why it is hiding the tags from staff since I clearly see <body class="staff navigation-categories categories-list"> when I visit my site as a staff.

1 Like
#4

Did you figure this out?

1 Like
#5

No I have not. I tried rewriting the CSS code a few ways (e.g. html:not(.staff) , body:not(.staff) , or grouping the elements within one line) but the code still hides the selected elements for staff.

1 Like
#7

Hmm… can you try putting this CSS at the bottom of the file containing your other CSS? I wonder if there’s a clash with some other CSS somewhere, and this could confirm it.

body:not(.staff) .topic-list-item a[data-tag-name="wagon"] { 
  display: none !important; 
}

If you have a public site, also feel free to post the link here and I can take a closer look to see if there’s anything obvious.

2 Likes
#8

Thank you! The site is: Marketplace - Leasehackr Forum

I basically wanted certain tags within the Marketplace category and its sub-categories to be hidden from those who are not staff.

Thank you for looking into this!

1 Like
#9

Sorry for the delayed response here, did you figure out what the issue was? I do see that certain tags are hidden from non-staff when looking at your site now.

#10

I haven’t worked out a solution yet. The tags are still hidden for .staff in addition to non-staff. Thanks!

#11

I think there might be two problems here, the first being that you should add body before :not, otherwise :not can be any div without the class.

The second problem is that these styles are clashing with each other:

:not(.staff) .topic-list .category-marketplace a[data-tag-name="wagon"] {
  display: none !important;
}

:not(.primary-group-dealers) .topic-list .category-marketplace a[data-tag-name="wagon"] {
  display: none !important;
}

:not(.primary-group-brokers) .topic-list .category-marketplace a[data-tag-name="wagon"] {
  display: none !important;
}

The first style will hide the wagon tag if you’re not staff… but the second and third styles will hide the wagon tag if your primary group is also not dealers/brokers. You’d need to be all 3 to avoid display: none;.

I think instead you’d want to combine the 3 like this:

body:not(.staff):not(.primary-group-dealers):not(.primary-group-brokers)  .topic-list .category-marketplace a[data-tag-name="wagon"] {
  display: none;
}

The first way, with the 3 separate styles acts as a “not and”:

not staff and primary-group-dealers and primary-group-brokers

The second way, with the chained :not acts as an “or”:

not staff or primary-group-dealers or primary-group-brokers

3 Likes
#12

That fixes the issue! Thank you so much!

1 Like