Any live examples of category-specific CSS styling?

Continuing the discussion from Category specific css:

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:

2 Likes

I put a little bit in place with the status widget images at Development - OpenMRS Talk 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.

3 Likes

In combination with the Topic Previews plugin.

EDIT: I’ve just noticed it’s clipping the bottom few px off the excerpt text >_<

8 Likes

How did you achieve that ? I noticed it yesterday . Can your share the css with us ?

You posted directly below it yesterday :smiley:

2 Likes

whoops , going through a lot ux customization’s some of which does not work with the latest discourse update . :tired_face: 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.

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:

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. :cold_sweat:

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! :wink:

1 Like

This will work:

body.category-ux {
  /* specific CSS here */
  .post-stream {
    color: red
    }
}
8 Likes

YOU ARE MY HERO! :sob:

Apologies for the derailment. I’ll make sure to return to link it when we go live!

5 Likes

@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)

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:

If you run into problems, I’m sure we can help you diagnose them here.

2 Likes

Thanks, will give it a go

why did you remove the Topic Previews plugin? The tools page screenshot looks so nice compared to the current page layout.