Customizing CSS

faq-material

(Denis Heraud) #1

I’m somewhat new at customizing some parts of Discourse by modifying CSS, so is there a good primer out there that would teach me how to look up what part of the Discourse interface I’m looking at and what needs to be modified in order to change it?

For example, I’m trying to hide Full Names from anonymous users on our semi-private forum

Capture16

When I Inspect the code this is what I see:

Capture17

However, I’ve tried modifying the CSS a bunch of different ways but can’t get the Names to hide, for example:

.anon .second .full-name {
    display: none;
}

Any care to help me out with this? What class should I be targetting?

P.S.: This code is based on discussion in this post:


(Brendan Schlagel) #2

I think you’re on the right track! Honestly I’ve just done the same thing you’re doing, right click > inspect, browse the elements in inspector. Often takes a bit of trial and error with CSS rules to figure out exactly what to override and how to target.

And selectors can be tricky — in this case for example you want .second.full-name (with no space) since .second .full-name will target elements with class .full-name nested inside .second rather than ones w/ both classes on the same element.


(Denis Heraud) #3

That fixed it!! And you just taught me something to top it off!

Thank you sir, you are a scholar and a gentleman! :slight_smile: