The end of Clown Vomit, or, simplified category styles

(Sam Saffron) #73

I was playing around with the suggestion by @danwad :

.topic-list>tbody>tr:nth-child(odd) {
    background-color: inherit;
.badge-wrapper {
    background-color: #f1f1f1;
    display: inline-block;
    border-radius: 2px;
    position: relative;

.badge-category-parent {
   position: absolute;
   padding: 0;
   margin: 0;
   top: 0;
   bottom: 0;
   // old style badges
   // width: 100%;
   width: 4px;
   //opacity: 0.5;
   z-index: 1;

.badge-category {
  padding: 4px 5px 1px 7px;
  position: relative;
  z-index: 2;

.topic-list>tbody>tr td{
    border-bottom: 1px solid #fafafa;

.badge-category[href] {
  color: #333;

Discourse Meta - The Official Support Forum for Discourse (in new browser)


  • We are not properly respecting badge foreground color which is settable from the UI, this should be fixed.
  • You can easily get the old style badges by setting width to 100% and fudging with padding.
  • Zebra striping is tiresome on the eyes and uses up lots of color
  • I find #222 a bit strong as the foreground color #333 works better for me
  • Our default colors are both too strong and too far apart imo, some color like black are just too strong.
  • We should move to a relative / absolute positioning thing by default cause amending styling becomes way easier. (a single css rule can bring back defaults)
  • I did not tackle the subcategory thing yet.
  • I think the “sea of avatars” is a far stronger “clown vomit thingy” than carefully picked category colors.

At opacity 0.5


(mountain) #74


The previous category ‘button’ styles were fine, to me. It was the avatars that were creating the clown-vomit spread. However, that can easily be fixed by applying some kind of css image filter. That way it blends in with the layout colors so it’s not entirely garish.

Category colors have a reason, as a visual cue so a user doesn’t have to read (one of the very few instances where I’m okay with that). As for the colorful effect, that can easily be changed by the admin-user’s selection of colors. Hell, could even do background tiles instead, subtle shade differences. As long as each are identifiable by a mere glance without making the brain boggle from everything else, then all is well.

1 Like

(Jeff Atwood) #75

This is intentional though. The people are the purpose and focus of the discussion. Who is in the room matters intensely. Categories… ehhhh, who really cares what category a topic is in? This is some card catalog academic semantic nonsense. When is a bug not a bug, when it is a feature or support…

What matters most of all is if the discussion is interesting, and this is largely a function of the people in the discussion.

I agree with this, we also wanted to use grey to indicate cold mapping and tiger striping with grey makes that completely impossible. We have a lot less columns now so I think the striping is less important than it used to be.

1 Like

(Sam Saffron) #76

I think the subtle border does the job here, as opposed to full-on striping

Agree that the people are way more important than categories, but as we have it they are visually more important than the topic title, are 5 avatars too much or too little? it’s a hard call to make. Are usernames effective enough or not?


(cpradio) #80

Category drop down needs a little love in this version, but I like. It helps identify the color with the category, which makes it easier to scan than the prior rendering. :smile:


(Lowell Heddings) #81

We’re 77 posts deep in yet another hotly debated topic about what a column should look like, and it strikes me that maybe it is time to just make these things configurable.

It’s clear that every forum owner will have vastly different ideas of how they want their forum to work, what columns should show up, and how it should all look. And that is a good thing.

And there is no scenario in which you are going to make everybody happy.

WordPress solves this by having template tags for everything under the sun, and themes that you can edit to look like anything. So everybody can be happy. I read somewhere that 23% of the sites on the Internet use WordPress. If true, the configurability and flexibility probably has a lot to do with it. I know for me, it does.

So yeah, the default theme needs to be awesome and make sense and it should be discussed for sure. But at the end of the day, it should just be the starting point that nobody really uses as-is. Unfortunately right now, these discussions really matter to everyone because they are about to be stuck with something they aren’t sure that they like.


A more robust ecosystem for creating, sharing and modifying themes
Embed with just link to the Topic?
(TechnoBear) #82

As a moderator, I care, because some of our categories attract a lot more Spam/nonsense than others, and I want to keep an eye on them.

As a member, I care, because there are some categories in which I have zero interest.

And speaking personally, I find it much easier to scan down the list of “latest” topics and pick out categories by colour, rather than by name. I can only distinguish one seven-letter word from another by reading it (slow process), whereas I can easily distinguish colour blocks. Minimalist bars make this really difficult.


(Mittineague) #83

Back when we first looked at moving from vB to Discourse we looked at existing Discourse sites.
A frequent comment was “they all look the same”.

Though I imagine many sites will use the default styles, IMHO you’ve touched upon something very important. The easier it is too configure differences the better chance of Discourse becoming more widely adopted.


(Dave McClure) #84

I completely agree. I created this topic to discuss this further if you or anyone else have more thoughts on the matter.


(Sam Saffron) #85

Thing is … it already is configurable, I just did that … category can look exactly as it did in the past with a few css rule changes.

It’s not that “people are stuck with it”, its more that “people have no idea what CSS is when installing Discourse”

What you are asking for is for it to be more easily configurable. I agree and so does @codinghorror here.

I think we should ship with 2-3 themes out of the box and allow people to pick the one they want.


(cpradio) #86

That may be part of it, but I think others just find it daunting when they are accustom to things such as Wordpress which make it dead simple.

Unless you know a lot about how Discourse works, it is hard to figure out what you can tie into using JavaScript/CSS. The minimal theme you made is a prime example of that. I’m not really sure anyone else could have developed that within a reasonable timeframe.

I know you’ll get there eventually and that the solution isn’t easy so I don’t mind what we have now too much, but this may be a reason to have a more “cluttered” (for lack of a better word) default, and just list a few CSS styles that would help minimize it. So those less familiar can keep extraneous data and those who want more minimal have a quick guide on how to get there (by copying and pasting a few lines of CSS/JavaScript).

I know that doesn’t sound ideal.


(Jacob Chapel) #87

Wordpress and other solutions didn’t just start with hundreds of themes and easy customizability. In fact the effort to customize them is not easy, it only seems easier due to the years of experience and knowledge that has been documented.

Discourse is still very new, it is still being created as we use it. Things like customization have not been totally fleshed out, but we are in a great position to be able to contribute to that process early on.

Given some more time, we will have easier customization options, and a way for those with more knowledge and skill to make themes and changes that those of us that just want to install something can.

We should learn from previous projects like Wordpress, but not blindly emulate them just because they seem successful. So I enjoy the Discourse teams caution in some areas, because a hasty badly thought out feature to appease “customers” can hurt Discourse in the long run.

Edit: I wanted to add that of all the forums software I have used, Discourse is the easiest to customize yourself. What it is lacking currently is the marketplace-like features, or ease of installing someone else’s themes. Though through plugins, that is pretty straight forward but again not as easy. Having heavily customized vBulletin over the years, being able to use modern development practices is a dream. I gave up updating my forum when it was still vBulletin, now I actually look forward to finding new things to enhance on my forum since it is running Discourse.


(mountain) #88

I agree with that 100%.

However, it does not mean we cannot learn from WordPress’ history.

Good artists copy. great artists steal.


(Jeff Atwood) #89

Open source doesn’t really work like that, though. It takes the time it takes.

Unless I can interest you in a $1k/month enterprise hosting plan? :wink:

1 Like

(Jeff Atwood) #90

Really? Off the top of your head, and without looking, tell me what color these categories are here:

  • Extensibility
  • Bug
  • Feature
  • Marketplace
  • Support
  • Howto

Tell me honestly how many you got right. I’m curious. :wink:



So I’ll try it without looking:



I don’t follow this, but I think it was orange.

Never looked at this category, no idea about the color.



edit: not bad at all.^^

1 Like

(Jeff Atwood) #92

Well, 50% success.

I’d bet most people can barely keep more than 3-4 colors straight for category meaning, and it gets really hairy to track 12 categories by color alone. Hell, even picking 12 distinct colors for categories is quite difficult!

Which means @technobear either has the best color memory in the world… or that most people are really better off focusing on the words in the category with the color as an occasional nice to have for the few essential categories that you enjoy and remember.

And that, in addition to de-clown-vomiting the design, is precisely what this new default category design does: lets the words carry.

1 Like

(mountain) #93

Don’t know what you mean by that. Of course it takes time. I used the original it was forked from and before that, I used greymatter (cgi). WordPress took years to get where it is now. But all those years and how they got there is what matters; not the code itself.

The point I was making is no matter what WordPress has done, it is very valuable to study what made it a success. Take the pure elements and transform it for Discourse. That is ‘stealing’.


(TechnoBear) #94

Honestly? All six - although Marketplace was pretty much a guess, as it’s not one I read.

Perhaps I’m just unusual; reading is more difficult than it used to be, so I’ve learned to pay more attention to other clues. But given the number of folk who liked that post, I doubt if I’m alone.


(Dave McClure) #95

I agree.

But its still useful to have enough color to be able to distinguish the topics that belong to different categories when looking at a list of topics. This doesn’t require memory at all.

The squares do a better job of this than the slim bar did in Sam’s minimal design.

This is also why I kind of think that my ideal coloring strategy for subcategories would be this:

  • just show the parent category color
  • except when filtering by the parent category, in which case, show the color of the subcategory

Since in practice I rarely filter by category, I chose to go completely with the first case for our forum, since it was easier just to change the color of the subcategories to match their parent.

1 Like