Alternate Styling for Discourse

brian · June 14, 2013, 10:39pm

Continuing the discussion from Ok, I had a look and can say:

Some have been wishing for a more minimal, more compact display for Discourse. @sam suggested that we try out the Stylish plug-in for Google Chrome to see if we can make something that works better for us.

Here’s my first attempt at something that I personally wouldn’t use, but may work for those of you who wish for something more minimal. Currently it only styles the topic list, not the discussion.

Download Stylish and then create a new style called Discourse Compact, and apply it to only URLs on the domain “discourse.mcneel.com”.

Then paste this code and click Save:

/* Narrower width */
#list-area {width: 600px; }

/* Hide 'Participants Column' */
#topic-list th:nth-child(0n+6) {display: none}
td.posters { display:none;}

/* Hide 'Likes' Column */
#topic-list td:nth-child(0n+6) {display: none}
#topic-list th:nth-child(0n+8) {display: none;}

/* Shrink fonts */
#topic-list td { font-size: 8pt; }
.badge-posts { font-size: 8pt; }
#topic-list .main-link { font-size: 8pt; }
td.category a { font-size: 8pt; padding: 2px 4px; }
#topic-list .topic-excerpt { font-size: 10px; }

/* Subdued Category Labels */
.badge-category { background-color:#f5f5f5 !important; color:#555 !important; font-weight: normal !important; }

pascal · June 14, 2013, 10:49pm

That’s actually pretty good, thanks, & you can toggle the view to normal as well, which is good. If only Chrome wold run in Rhino’s web browser window with a compact look like this. Next I’m trying to figure out how to hide Views as well.

-Pascal

brian · June 14, 2013, 10:59pm

This is a work in progress, but here’s a compact discussion view, too.

/* Discourse Compact Topic */
h1 a { font-size: 80% }

.topic-body p, .topic-body code { font-size: 8pt; line-height: 10pt; }
.topic-body .quote blockquote { font-size: 8pt; line-height: 10pt; }
.topic-body { width: 300px; }
.read-icon { left: 360px !important; }

.btn { font-size:8pt; padding: 3px 5px; }

#suggested-topics .topics { width: 500px; }

.btn-group p { font-size: 8pt; }

.gutter a { font-size: 8pt !important; }

.topic-meta-data { width: 65px; }
.topic-meta-data .contents { width: 60px; margin-left: 10px; }
.topic-meta-data img { width:45px; height: 45px; }

Willem · June 14, 2013, 11:17pm

Thanks Brian,

I already tried to get something working but my knowledge of css is close to 0.
This is a good starter!

-Willem

margaret · June 17, 2013, 7:43pm

How do you figure out what to put in this? For example, here’s a couple of things that I would like to change:

Hide “Activity” columns.
Make a bigger color difference between read
and unread topics.

brian · June 17, 2013, 8:59pm

By inspecting the CSS using the Chrome debugging tools, and playing around with Stylish until it does what I want. In the case of hiding columns, it uses a pretty esoteric selector nth-child().

margaret · June 17, 2013, 10:04pm

OK. Thanks.

Holo · June 17, 2013, 11:05pm

Can you post some images please?
So I don’t have to install a new reader and plugins for it, just to see what you are talking about.

-J

pascal · June 17, 2013, 11:09pm

Notice it does not fix using ‘favorite’ as a verb… =)

Holo · June 17, 2013, 11:21pm

Applause! THAT is a nice step in the right direction.
Please remove the circles around Category so it doesn’t get more attention than the topic, and condence the “posts, views, activity” bit, and we are on the way to sucsess! (And swap the heart for a hitchikin thumb in the air)

I also think that Topic should get more space, so longer topics could be read on one line.

This is coming along nicely. I vote for making this the default, standard flavor.

-J

brian · June 17, 2013, 11:27pm

No way. Never. I much prefer the current default - hearts and all, with participant avatars. But you’re welcome to use Stylish to have it your own way until there are per-user styling controls.

brian · June 17, 2013, 11:38pm

Here’s a better version of Compact Discourse, all in one, that seems to work pretty well at 650 pixels.

/* Narrower width */
#list-area {width: 600px; }

/* Hide 'Participants Column' */
#topic-list th:nth-child(0n+6) {display: none}
td.posters { display:none;}

/* Hide 'Likes' Column */
#topic-list td:nth-child(0n+6) {display: none}
#topic-list th:nth-child(0n+8) {display: none;}

/* Shrink fonts */
#topic-list td { font-size: 8pt; }
.badge-posts { font-size: 8pt; }
#topic-list .main-link { font-size: 8pt; }
td.category a { font-size: 8pt; padding: 2px 4px; }
#topic-list .topic-excerpt { font-size: 10px; }

/* Subdued Category Labels */
.badge-category { background-color:#f5f5f5 !important; color:#555 !important; font-weight: normal !important; border: 0px; background-color:transparent !important;}

/* Container Size */
.container { width: 600px; margin-left:0; margin-right:0; }

/* Topic Controls */
h1 a { font-size: 80% }

.topic-body p, .topic-body code { font-size: 8pt; line-height: 10pt; }
.topic-body .quote blockquote { font-size: 8pt; line-height: 10pt; }
.topic-body { width: 500px; }
.topic-meta-data { width: 65px; }
.topic-meta-data .contents { width: 60px; margin-left: 10px; }
.topic-meta-data img { width:45px; height: 45px; }
.read-icon { left: 560px !important; }
.gutter a { font-size: 8pt !important; }

#suggested-topics .topics { width: 560px; }

.btn { font-size:8pt; padding: 3px 5px; }
.btn-group p { font-size: 8pt; }

Editor preview doesn’t look so hot, but you probably want that off, anyway.

Holo · June 17, 2013, 11:52pm

That’s a nice attitude…
If you expect things to grow on us then we’ll expect things to grow on you too
Let’s just say I’ll read that as “not now”, ok? I like what you are working on so much that I might install Crome with plugins just to test this. I look forward to custom settings, I am really glad you will include that.

-J

brian · June 18, 2013, 12:03am

You’ve got me beat in the gentleman department. I’d love for us both to have our own way, but until then, I’d like to leave the site with all the bells and whistles enabled for everyone. Some of us have grown fond of the heart button and each others pictures.

Holo · June 18, 2013, 12:07am

And for that I give you a heart!

Holo · June 18, 2013, 9:36am

Can you add your styles here please?
http://userstyles.org/styles/browse/mcneel

That is where the plugin looks for alternative styles.

Ok, added it and I like it. I would like to have less space between the topics too, so more lines are fitted in the view. And I would like to have the blue “balls” to the left of the text so i don’t have a wiggely line of blue info in the middle of my sight, they obstruct the readability.

Thanks for listening to us @brian

Willem · June 18, 2013, 1:27pm

Hi Brian,

Thanks for this by an css illiterate. an issue with this setup is that the images get scaled
in width but not in height. I tried to ‘fix’ it but did not have any luck.
No problem though I’m not running an alternative style right now anyway.

-Willem

SamPage · June 18, 2013, 1:38pm

There is a Stylish plug-in for Firefox as well.

tobias · June 18, 2013, 1:41pm

Yes. I am running stylish in Firefox:

4dsynergy · June 18, 2013, 4:08pm

Hi,
Can’t Mcneel remove most of the icons? I really find them useless and distracting, avatars are wasted space let’s be mature and remove avatars from this forum.
Please also remove:
Participants, posts, likes, views and activity, this is all useless.
Having to open each thread in a window where we scroll down is hardly effective. If you really want to make this forum rock please remove all this needless fluff. I don’t see why we have to have all those icons under each reply as well. I appreciate your hard work on this and I hope you guys take this seriously, as I still think discourse is not an improvement in usability over the newsgroup.

Thanks I hope this place can be made nice and user-friendly.
RM