The end of Clown Vomit, or, simplified category styles


(Kris) #63

Agree that the markup isn’t ideal - it’s kind of hacked together at the moment; especially because we have two different styles. I think once we settle on the specifics it can be re-written entirely.


(Daniel) #64


Categories in hamburger are misaligned
#65

This one is way better than the bar style!


(cpradio) #66

I think I like the squares better than the bars. It gives enough color to quickly scan with, but doesn’t overwhelm the topic list either.


(Alessio Fattorini) #67

No bad, really… no bad! I prefer


(Joe Seyfried) #68

Since I feel somehow responsible for the whole thing (since I mentioned clown b**f elsewhere), and see how other folks like their colorful Discourse instances back, I would really suggest to start including more than one default style with Discourse. Creating the both look with css+html customisations is totally feasible.

One other nice alternative would be to create a (wordpress-ish?) theme store/website/place where you can easily browse several styles, the first ones supported by the Discourse team, and hopefully numerous others coming later… The current customisations were all discussed here, but are distributed in several places and pose a major obstacle for new Discourse users.


A more robust ecosystem for creating, sharing and modifying themes
(Jeff Atwood) #69

I don’t know if I really care for the square as a default.

  • square creates a “bulleted list” effect, which isn’t desired in most circumstances, versus the “delimiter” effect of the bar

  • makes the color even more prominent on the topic list, which is unwanted

It is nicer on the hamburger as a bulleted list, but the hamburger has other problems and is due for a redesign anyway. Simple alignment on hamburger would work wonders.

Anyway, for those who want squares, probably easy to flatten and widen the bar via CSS to taste.


(Gerhard Schlager) #70

I really like the idea of using a light background color for the categories as proposed by @danwad.
I guess by removing the zebra stripes and replacing them with horizontal lines like in Sam’s personal “minimal” topic list design this could look quite good.


(Sam Saffron) #71

I much prefer this design than the bar all by its lonesome. It creates a visual grouping, I also think we should make sure our markup easily supports this kind of styling out of the box.


(Gerhard Schlager) #72

BTW: I like the way the category dropdown looks after those changes.

Unfortunately, now the category “breadcrumb” looks out of place:


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

Notes:

  • 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

Precisely.

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.


(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.


(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.