More discourse on Discourse styling

Continuing the discussion from Alternate Styling for Discourse:

A quick commentary after two weeks of Discoursing… I am quite used to the system now, and I think I have experienced most of its advantages, disadvantages, quirks and weaknesses…

The essential issue for me is the difference between the completely serial aspect of Discourse (and for that matter most other web forums) as compared to the massively parallel experience of a nntp newsreader.

In a nntp newsreader you can see everything all at once, and there is no need to scroll or change views or screens. That is what I miss the most, and I feel that a web format is a definite step backwards in efficiency.

In Discourse, I have to read all the way to the bottom of a topic to get it marked read (after waiting a couple of secs and crossing my fingers), then go on to the next topic via either the links at the bottom, top or back up to category view. So you are in a constant scrolling experience, and you only have a tunnel vision view of things for the most part. This is exactly in line with the smartphone/tablet mentality where you can only see/use one app/one screen at a time, and where you’re constantly finger swiping through stuff. And that does appear to be the direction we’re heading…

OK, I know I can’t change the way our communications culture is evolving, so I need to learn to live with all this. The advantage of Discourse as I see it is that it CAN be modified - hopefully with the help of its creators as well as people like Steve and Brian - and I think it can be bent into something that will be a good compromise for all concerned. That’s not going to happen by itself, and @brian @stevebaer although I know you guys both would rather be typing on V6, I feel this is sufficiently important to warrant some work, and probably sooner than later…

All that being said - repeated, actually, many others have stated similar things - I have one other suggestion… In analyzing the Topics page as to why it’s so “spaced out” I came to one simple conclusion: it’s the avatars that are the main problem.

Let’s see:

  • The category title (text) is only 10 pixels high (and the type is big)
  • The category title button (like “Rhino for Windows”), is 20 pixels high
  • The avatars are 25 pixels square
  • There are 6 pixels of space around the avatars
  • Total for a topic header: 37 pixels

In the attached mockup I reduced the 37 pixels to 24 - you’d be able to see 50% more topics on one page. Of course, if you make the avatars smaller, they’re going to become unreadable. So maybe in that case you need to eliminate them… :smiling_imp: The second image does that…

Well those are my entries for a “compact view.”


Try again… Here is the second image…


I “love” that idea (I still feel very manly and mature klicking a loveheart… How difficult can it be to alter an icon???)

I think it would be VERY easy to implement a NG style tree. Just use the “second image” name scenario (with avatars too/instead if you like), and add a + button to reveal the html tree of the other commenters, just like we had in NNTP. Then when you click on one of those hypertext links you are transported to the topic and to the that comment.

That would be a huge step in the right direction for me.
(With bold text links to indicate unread comments)

That should not be an impossible hack.

I’m liking the second one. I presume it would load faster on mobile devices with a 3G-only signal too? I also like the alternate grey bands to help delineate things. That level of grey would also be about right for denoting quotes within threads as well.

Hi Mitch,

Those are all good suggestions, I would like to introduce an extra shift:
Categories are in my experience primary sifting items. When going through the list of topics, I always check on the category of a topic to have the right context and mindset of reading the topic subject. Especially when subjects are non-descriptive like so:

Match Properties

The interpretation of the subject is much different when posted under “Rhino for Windows” than when it is under “Scripting” or “grasshopper”

I propose to set the categories as a hierarchical primary before each topic. That way the category (and more important it’s color) is in my peripheral view putting topics in a context without the need to eye to the right checking the category.


I support this 100%
reading category before topic makes a lot of sense!

Hi Jørgen

I guess your wording should be
category before topic


What? I don’t know what you are talking about… :wink:

Here’s a style you can add with Stylish to make a compact list view. I find it too compact, but whatever.

Someday maybe we’ll have user-configurable styles on Discourse and we’ll make one that is compact for you to select. For now, we’ll probably stick with the styling the Discourse team comes up - hacking the styling is still pretty difficult.

This is a lot harder for us to do - it’s not just styling, it’s actually hacking on Discourse code, so don’t hold your breath on this request.

I wish I was an uber user, I would have edited your post myself!

Hi Brian, the entire point with open source IS the ability to hack the code and not only alter stylesheets… :wink:

@Willem I am actually not a huge fan of the ability to edit posts.

I agree with Holo, Mitch and Willem. I have been working at this for a week(?) now and I am still disoriented. I really want this to work so I’m not biased against it.

I not only like the categories first idea, but I can’t figure out how to see a list of just the unread posts for just Rhino for windows. I wish I could click the column headers when I’m on the “New” page so that I could sort the categories, (or sort any column).

I would really love to be able to expand threads. There seems to be an irrational fear of this among the Discourse creators. If it was an option, what would be the problem??

I think that somehow the whole thing is over engineered. There are millions of variables, showing very clever coding and including some wonderful, thoughtful ideas; but the result is too complex, and doesn’t help a neophyte to see its logic.


1 Like

Yes, I understand that what you say is technically possible.

But still, our goal is to: improve our communication with our users and spend less time focusing on technology that isn’t core to our business. We don’t want to spend a ton of time hacking Discourse at this point because doing so makes it a lot harder for us to upgrade when they make changes (and they make tons of changes each day).

The Discourse team wants to make this work well for us and for other customers, and they’re really actively engaged in helping make that happen. They may disagree with some of our suggestions, and may not do all of them.

All in all, I think Discourse is working well - yes, it could be better, and it will be. But it is already as active as our Newsgroup was, and is including more people that couldn’t use the Newsgroup before.

That’s not too bad, I did up the type size to 14. The avatars don’t work well, though…

What do you mean by

What would make them work better? Bigger and more recognizable?

No, not really… The problem is they need to be big enough to be recognizable and that size limit has been reached already. Making them smaller won’t be of any help - they’ll just be a bunch of visual fuzz - but at the current size they’re all jammed together, that’s not very nice or readable either. Frankly, in a “compact” view I would just eliminate them I guess, especially if I had the name of the OP and/or the last poster…

OTOH, I have looked at the non-stylish version on my iPad, and it looks/works pretty well there - looks like it was designed for that type of media…


@brian do you have a list or template of all the things you can actually edit with Stylish? If I open some of the proposed schemes for editing like the one below, there are just a few categories… is that really all we can change?

Compact Discourse List View
by Brian Gillespie, 6/24/2013

.topic-list-item td { padding: 0px !important; vertical-align: top !important; }

/* Star Column */
.topic-list-item .star { font-size:10px !important; padding-left:10px;}

/* Link Column */
.topic-list-item .main-link { font-size: 14px !important; }
.topic-list-item .main-link .badge { font-size: 8px !important; padding: 2px 3px; }
.topic-list-item .main-link .topic-excerpt { font-size: 14px !important; font-style:italic; }

/* Category Column */
.topic-list-item .category .badge-category { padding: 2px 4px; margin: 0px; font-size:9px; }

/* Avatars */
.topic-list-item .posters .avatar { width: 14px; height: 14px; margin: 0px; border:2px !important; }

/* Posts, Likes, Views, Activity */
.topic-list-item .num, .topic-list-item .badge-posts { font-size:10px !important; }

No, I don’t have a list, and no, that isn’t the only set of things you can modify. But getting more information involves digging.

In Google Chrome, right click an element you want to change, then click Inspect Element. This will show the details of the CSS rules tht styled the object, among other things. Use that information to figure out a new rule to apply with stylish. You may or may not get what you expect without adding “!important” to the rule.

Good luck!