### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [8월 21, 2016, 11:39오후 UTC](https://meta.discourse.org/t/any-live-examples-of-category-specific-css-styling/48964/1 "2016-08-21T23:39:06Z")
Continuing the discussion from [Category specific css](https://meta.discourse.org/t/category-specific-css/9332/6):
> [@downey](#):
>
> Ah, nice. Hadn’t seen that category-foo-bar class on \. Thanks!
Did you ever try this? I’d love to look at some live examples of category-specific styling. I think that’s a pretty cool feature that is quite underused (in large part due to obscurity), and I’m wondering if there’s anything more we could do to accommodate such a feature in our upcoming Native Themes:
> [@Native theme support](https://meta.discourse.org/t/native-theme-support/47494):
>
> At the moment Discourse supports 3 mechanisms for amending the “theme” of a Discourse instance: Plugins Plugins can amend both backend and frontend code. They are the most advanced level of customisation. Advantages: Can change backend or frontend Straightforward to distribute, live on Github Disadvantages: Tricky to install as it requires a container rebuild High risk as it is allowed to amend backend code Hard to isolate to a single site In a multisite environment admin on master site m…
---
### Author:  [@downey](https://meta.discourse.org/u/downey)
#### Post date: [8월 22, 2016, 12:24오전 UTC](https://meta.discourse.org/t/any-live-examples-of-category-specific-css-styling/48964/2 "2016-08-22T00:24:42Z")
> [@erlend\_sh](#):
>
> Did you ever try this? I’d love to look at some live examples of category-specific styling.
I put a little bit in place with the status widget images at [Development - OpenMRS Talk](https://talk.openmrs.org/c/dev) while I was still working on that site. Basically put the HTML in the customizations and used the CSS to show/hide based on category.
---
### Author:  [@Tom\_Newsom](https://meta.discourse.org/u/Tom_Newsom)
#### Post date: [8월 22, 2016, 8:33오전 UTC](https://meta.discourse.org/t/any-live-examples-of-category-specific-css-styling/48964/3 "2016-08-22T08:33:51Z")
[https://discourse.southlondonmakerspace.org/c/tools](https://discourse.southlondonmakerspace.org/c/tools)
In combination with the Topic Previews plugin.
EDIT: I’ve just noticed it’s clipping the bottom few px off the excerpt text \>\_\<
---
### Author:  [@pinbot](https://meta.discourse.org/u/pinbot)
#### Post date: [9월 1, 2016, 9:07오후 UTC](https://meta.discourse.org/t/any-live-examples-of-category-specific-css-styling/48964/4 "2016-09-01T21:07:51Z")
How did you achieve that ? I noticed it yesterday . Can your share the css with us ?
---
### Author:  [@Tom\_Newsom](https://meta.discourse.org/u/Tom_Newsom)
#### Post date: [9월 1, 2016, 9:38오후 UTC](https://meta.discourse.org/t/any-live-examples-of-category-specific-css-styling/48964/5 "2016-09-01T21:38:03Z")
You posted directly below it yesterday 😃
> [@Cards design for topics?](https://meta.discourse.org/t/cards-design-for-topics/48107/3):
>
> I had a quick go at this (combined with Topic Previews plugin) CSS: // Display topic list rows as cards .topic-list-item { display: inline-block; max-width: 350px; box-shadow: 2px 2px 2px 2px #888888; margin: 10px; } // Hide extraneous topic list columns .posters, th.posts, td.posts, .views, .activity, { display:none; } You can embellish from there. (change the post excerpt maxlength setting to get longer excerpts) Getting Author Info to display properly is …
---
### Author:  [@pinbot](https://meta.discourse.org/u/pinbot)
#### Post date: [9월 2, 2016, 6:34오전 UTC](https://meta.discourse.org/t/any-live-examples-of-category-specific-css-styling/48964/6 "2016-09-02T06:34:22Z")
whoops , going through a lot ux customization’s some of which does not work with the latest discourse update . 😫 I have got all messed up in my head will take it slow from here . Reading around i realized later that discourse updates break the css customization sometimes and it is better to disable the updates if you want to keep the customization’s.
---
### Author:  [@LilTrashPanda](https://meta.discourse.org/u/LilTrashPanda)
#### Post date: [10월 14, 2016, 12:03오전 UTC](https://meta.discourse.org/t/any-live-examples-of-category-specific-css-styling/48964/7 "2016-10-14T00:03:46Z")
Happy to see this particular subject come back up! Since I’m a beginner at CSS and I’m still learning how to get everything to work in Discourse (as there are quite a few tabs that make things a bit confusing for me), I was wondering what was meant by:
> [@zogstrip](#):
>
> You can already do this if you’re an administrator. Just prefix your rules with the appropriate category class.
In the CSS tab under Admin / Customize / CSS/HTML / CSS, I’ve tried
`category-categoryname.category-list{...`
`.categoryname-category-list{...`
`.category-list-categoryname{...`
…and nothing seems to make the category-specific CSS stick. What’s the proper way to prefix this?
**How I’m Using It:**
I’m in the process of creating a forum that’ll be handling multiple brands, with each brand as a “Parent” category with 4-5 “child” categories beneath it. Since each brand has a very unique visual language, the “Parent” category and each of their “child” categories for each need to look very different from one another.
Ultimately, having some kind of “theme” browser for Discourse would be amazing! I’m able to best edit CSS and HTML when I have it all exposed to me and I can tweak things and see them live update, so things are a bit slow-going for me with my Discourse customization as it’s a lot of _right-click_, _inspect_, _kind of locate what I’m looking for_, _put it in the CSS editor_, “Nope, wrong thing…”, _repeat_. 😰
If I’m able to figure out the proper prefix for category-specific CSS-styling, I’d be more than happy to share a live example when our forums go live! 😉
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [10월 14, 2016, 12:10오전 UTC](https://meta.discourse.org/t/any-live-examples-of-category-specific-css-styling/48964/8 "2016-10-14T00:10:09Z")
This will work:
```SCSS
body.category-ux {
/* specific CSS here */
.post-stream {
color: red
}
}
```
---
### Author:  [@LilTrashPanda](https://meta.discourse.org/u/LilTrashPanda)
#### Post date: [10월 14, 2016, 3:32오전 UTC](https://meta.discourse.org/t/any-live-examples-of-category-specific-css-styling/48964/9 "2016-10-14T03:32:06Z")
**YOU ARE MY HERO!** 😭
Apologies for the derailment. I’ll make sure to return to link it when we go live!
---
### Author:  [@Nick29](https://meta.discourse.org/u/Nick29)
#### Post date: [12월 19, 2016, 5:32오후 UTC](https://meta.discourse.org/t/any-live-examples-of-category-specific-css-styling/48964/10 "2016-12-19T17:32:37Z")
@downey would you be able to share the css for not displaying the category logo thumbnail on the Open MRS “all categories” page - if that makes sense?
On an individual category page i’ve changed the category logo image to act as a banner, but this makes the thumbnail much too large. Can’t figure out how to select the thumbnail independently of the actual image in css? (Sorry i’m not great at CSS)
---
### Author:  [@downey](https://meta.discourse.org/u/downey)
#### Post date: [12월 19, 2016, 6:27오후 UTC](https://meta.discourse.org/t/any-live-examples-of-category-specific-css-styling/48964/11 "2016-12-19T18:27:04Z")
Unfortunately I don’t have access to that site any more. However, I can say that it used a fairly basic implementation of the CSS `:not` pseudo-class. More examples here:
> **[:not() CSS pseudo-class - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:not)**
>
> The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
If you run into problems, I’m sure we can help you diagnose them here.
---
### Author:  [@Nick29](https://meta.discourse.org/u/Nick29)
#### Post date: [12월 21, 2016, 11:04오전 UTC](https://meta.discourse.org/t/any-live-examples-of-category-specific-css-styling/48964/12 "2016-12-21T11:04:46Z")
Thanks, will give it a go
---
### Author:  [@PackElend](https://meta.discourse.org/u/PackElend)
#### Post date: [7월 2, 2019, 10:32오전 UTC](https://meta.discourse.org/t/any-live-examples-of-category-specific-css-styling/48964/13 "2019-07-02T10:32:54Z")
> [@Tom\_Newsom](#):
>
> In combination with the Topic Previews plugin.
why did you remove the Topic Previews plugin? The tools page screenshot looks so nice compared to the current page layout.