I’m not trying to complain here; there are some nice things about the Discord board. But I just didn’t care for any of the theme options. Posts were too narrow, there was too much unnecessary padding/whitespace, too much clutter, too many distracting hover effects, etc.
So, I decided to start from the “Discord-classic” theme, and then add my own style sheet to make it better. I figured I’d share, in case anyone else has similar aesthetic preferences. (And if many people end up liking it, maybe it could be added to the theme options.) Here’s what I’m using:
.topic-list td { padding: 0px 10px; font-weight: bold } /* Remove extra padding in thread list; bold thread titles */
.topic-list .topic-list-item .main-link a { padding: 0px 0px } /* Remove padding on links in thread list (so clickable area fits in reduced-padding list item) */
.topic-excerpt { display: none } /* Remove excerpt text after pinned posts in thread list */
.topic-body { margin-bottom: 5px; width: 90% } /* Increase width of posts */
div.timeline-container { display: none } /* Remove clutter (was positioned wrong anyway with wider posts) */
.topic-body .topic-meta-data { padding: 0px 10px } /* Remove extra padding around usernames */
.post-menu-area { margin: 0px } /* Remove exta space at bottom of posts */
.post-menu-area .actions button { padding: 6px 12px !important } /* Remove extra padding around "Reply" buttons */
.post-menu-area nav.post-controls .show-replies { padding: 0px 10px; height: auto} /* Remove extra height and padding on "Replies" drop-down */
p {margin-block-start: 0.5em; margin-block-end: 0em } /* Reduce spacing between paragraphs in posts */
.names span { font-size: 12pt } /* Increase size of usernames in posts */
.topic-body .post-menu-area { opacity: 1 } /* Remove annoying fade-in affect when hovering over "Reply" */
nav.post-controls .show-replies { color: #222222 } /* Darker text color on "Replies" drop-down, without needing to hover */
I’m using the Tampermonkey browser extension to insert the style sheet, by adding the following user script.
// ==UserScript==
// @name SDMB
// @match *://boards.straightdope.com/*
// ==/UserScript==
(function() {
'use strict';
var style = document.createElement('style');
style.innerHTML = '.topic-list td { padding: 0px 10px; font-weight: bold }' + /* Remove extra padding in thread list; bold thread titles */
'.topic-list .topic-list-item .main-link a { padding: 0px 0px }' + /* Remove padding on links in thread list (so clickable area fits in reduced-padding list item) */
'.topic-excerpt { display: none }' + /* Remove excerpt text after pinned posts in thread list */
'.topic-body { margin-bottom: 5px; width: 90% }' + /* Increase width of posts */
'div.timeline-container { display: none }' + /* Remove clutter (was positioned wrong anyway with wider posts) */
'.topic-body .topic-meta-data { padding: 0px 10px }' + /* Remove extra padding around usernames */
'.post-menu-area { margin: 0px }' + /* Remove exta space at bottom of posts */
'.post-menu-area .actions button { padding: 6px 12px !important }' + /* Remove extra padding around "Reply" buttons */
'.post-menu-area nav.post-controls .show-replies { padding: 0px 10px; height: auto}' + /* Remove extra height and padding on "Replies" drop-down */
'p {margin-block-start: 0.5em; margin-block-end: 0em }' + /* Reduce spacing between paragraphs in posts */
'.names span { font-size: 12pt }' + /* Increase size of usernames in posts */
'.topic-body .post-menu-area { opacity: 1 }' + /* Remove annoying fade-in affect when hovering over "Reply" */
'nav.post-controls .show-replies { color: #222222 }' /* Darker text color on "Replies" drop-down, without needing to hover */
document.head.appendChild(style);
})();
Again, I’ve only tested it as an add-on to the “Discord-classic” theme. I don’t know how it looks if you have a different theme set. (Note that you can change themes by opening your user profile, and going to “Preferences” and then “Interface”.)
The way I’m doing it is by using the Tampermonkey browser extension to run a custom script which inserts my style sheet on every page of the SDMB. Anyone who wants to do this would have to install Tampermonkey, but then you can just paste in my code above. There are probably other browser extensions out there that also let you add your own stylesheet to any website – I just already had Tampermonkey installed.
It’d be nice if Discourse lets you specify your own style sheet somewhere, but I don’t know if that’s possible. It looks like it just offers a list of pre-defined choices. I assume that if enough people liked my modifications, the board admins could add them to the list of choices.
After looking at those four screen-shots, I must say I DO like your style sheet.
Where do I nominate or vote for it as a new theme?
And can a dark variant be created?
I like it too, but tim314’s (can I call you Pi?) installation instructions came across to me like, “first take the banana vacuum cleaner kumquat purple barnacle …” and I faded after that. Maybe I’ll take a better look at once I’ve had some sleep.
I tried to create a dark mode by adding the same styles on top of the “Straight Dope Dark” theme (with one exception – where the code above says “color: #222222” I had to change it to “color: #F8F8F8”). Here are the results:
I’m hoping that if these changes are popular, a board admin – which is @AdminModTubaDiva I guess? – can make them a standard option. That’d make it a lot easier for people.
But if that isn’t possible, I can try to write up some more detailed instructions for how I did it.
I like the more compact look, but losing the scroll bar on the thread view would be a deal breaker for me. As long as we’re stuck with no paging, that scroll bar is the only good way to jump to a specific place.
