Alternate Styling for Discourse

unhandled

(Brian Gillespie) #1

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; }


Please remove the thought police from the forum
An eye friendly background color
Please redesign some of this forum
Is there a way to remove Participants and Likes columns completely?
Please redesign some of this forum
Hello... and what I don't like about discourse
(Pascal Golay) #2

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 Gillespie) #3

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 Derks) #4

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 Becker) #5

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 Gillespie) #6

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 Becker) #7

OK. Thanks.


#8

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 Golay) #9

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


#10

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 Gillespie) #11

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 Gillespie) #12

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.


#13

That’s a nice attitude…
If you expect things to grow on us then we’ll expect things to grow on you too :wink:
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 Gillespie) #14

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.


#15

And for that I give you a heart!


#16

Can you add your styles here please?

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 Derks) #17

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


#18

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


#19

Yes. I am running stylish in Firefox:
https://addons.mozilla.org/en-US/firefox/addon/stylish/


#20

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