Help Needed: How to Override Theme Colors with CSS


(Anna) #1

Jumping over to Support from here (as I figure it’s more appropriate)…


Hello!

Quick background to help you understand what I’m attempting to do:

I’m putting together a Discourse forum that’s intended to house multiple brands, each with their own unique visual identity. One brand is very fun, light, and playful; another is darker, more serious, and tech-y; etc.

Each brand is represented by a “parent” category, and has 4-5 “child” categories beneath it to create the typical structure of a “forum”. I’ve been using category-specific styling via CSS to accomplish this.

My question: What’s the CSS I can use to override the default theme colors to establish category-specific theme colors (while the rest of the site uses the default “theme colors”)? Also, is there a place I can find the default styling for things like links so I can make all links default to being bold text or uppercase, too?


(Brady) #2

Not sure if it’s possible to customize per category but perhaps this could be done via JS and CSS combined. With JS you could check the URL and then if it’s a certain category, you could inject that category’s stylesheet you want.

As for changing the default styling, you can do this from /admin/customize/css_html.

Also, I’d be very interested to see how this turns out. Please post your Discourse link here at some point :slight_smile:


(Anna) #3

Will do! Our registration is currently invite only, but the closer we get to going public, I’ll start posting up some images in one of the more appropriate categories.

Thanks for the suggestion – I haven’t had to do any kind of JS yet (all CSS at this point), so I’ll ask around the studio to see if anyone’s a bit more familiar with how to write up something like that to see if it works.

As for updating the default color theme: The complication I’m facing is that the rest of the site needs to have a color theme that’s much darker, but the particular brand category I’m working on currently is the really bright and fun one. If I go and change the default color theme to the darker colors to suit our landing page and other brand (which I’ve already saved), then that totally screws with this particular brand’s forum font colors and everything else tied to those colors. :sob: