# My custom style-sheet to make the new board less annoying **URL:** \ **Category:** Site Feedback\ **Created:** [June 28, 2020, 6:33pm UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549 "2020-06-28T18:33:25Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![tim314](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/tim314/32/3468_2.png) [@tim314](https://boards.straightdope.com/u/tim314)\ **Post date:** [June 28, 2020, 6:33pm UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/1 "2020-06-28T18:33:25Z")
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 */ ``` ---
**Author:** ![tim314](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/tim314/32/3468_2.png) [@tim314](https://boards.straightdope.com/u/tim314)\ **Post date:** [June 28, 2020, 6:33pm UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/2 "2020-06-28T18:33:32Z")
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”.) ---
**Author:** ![IvoryTowerDenizen](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/ivorytowerdenizen/32/17937_2.png) [@IvoryTowerDenizen](https://boards.straightdope.com/u/IvoryTowerDenizen)\ **Post date:** [June 28, 2020, 10:48pm UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/3 "2020-06-28T22:48:29Z")
Discourse- you may want to change what your script is called. Discord is a different platform. ---
**Author:** ![beowulff](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/beowulff/32/542_2.png) [@beowulff](https://boards.straightdope.com/u/beowulff)\ **Post date:** [June 29, 2020, 12:19am UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/4 "2020-06-29T00:19:03Z")
How do you install a new theme? ---
**Author:** ![kaylasdad99](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/kaylasdad99/32/3398_2.png) [@kaylasdad99](https://boards.straightdope.com/u/kaylasdad99)\ **Post date:** [June 29, 2020, 12:30am UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/5 "2020-06-29T00:30:59Z")
I’m confident enough in my manhood to admit that this means nothing to me. Think you could throw us a screenshot of how it makes the page look? ---
**Author:** ![tim314](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/tim314/32/3468_2.png) [@tim314](https://boards.straightdope.com/u/tim314)\ **Post date:** [June 29, 2020, 1:07am UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/6 "2020-06-29T01:07:26Z")
> Discourse- you may want to change what your script is called. > > Discord is a different platform. Whoops, it should say these changes are applied on top of the “Discourse-classic” theme. ---
**Author:** ![tim314](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/tim314/32/3468_2.png) [@tim314](https://boards.straightdope.com/u/tim314)\ **Post date:** [June 29, 2020, 1:51am UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/7 "2020-06-29T01:51:53Z")
> [@kaylasdad99](#): > > Think you could throw us a screenshot of how it makes the page look? Sure 🙂 **Forum View - Before:** [https://i.imgur.com/0gNNr0w.png](https://i.imgur.com/0gNNr0w.png) **Forum View - After:** [https://i.imgur.com/NcIOg1R.png](https://i.imgur.com/NcIOg1R.png) **Thread View - Before:** [https://i.imgur.com/KMsUvs9.png](https://i.imgur.com/KMsUvs9.png) **Thread View - After:** [https://i.imgur.com/i6oQ9fV.png](https://i.imgur.com/i6oQ9fV.png) ---
**Author:** ![tim314](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/tim314/32/3468_2.png) [@tim314](https://boards.straightdope.com/u/tim314)\ **Post date:** [June 29, 2020, 2:02am UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/8 "2020-06-29T02:02:17Z")
> [@beowulff](#): > > How do you install a new theme? 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. ---
**Author:** ![Grestarian](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/grestarian/32/3227_2.png) [@Grestarian](https://boards.straightdope.com/u/Grestarian)\ **Post date:** [June 29, 2020, 2:30am UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/9 "2020-06-29T02:30:37Z")
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? –G! ---
**Author:** ![Snowboarder\_Bo](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/snowboarder_bo/32/229_2.png) [@Snowboarder\_Bo](https://boards.straightdope.com/u/Snowboarder_Bo)\ **Post date:** [June 29, 2020, 2:39am UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/10 "2020-06-29T02:39:14Z")
Same here; that looks much better than even the Silent Sam or whatever. Is there a way to make something like that available like the other board looks are available? So we can use it right from the Discourse options? ---
**Author:** ![Jack\_Batty](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/jack_batty/32/3201_2.png) [@Jack\_Batty](https://boards.straightdope.com/u/Jack_Batty)\ **Post date:** [June 29, 2020, 2:51am UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/11 "2020-06-29T02:51:20Z")
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. ---
**Author:** ![tim314](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/tim314/32/3468_2.png) [@tim314](https://boards.straightdope.com/u/tim314)\ **Post date:** [June 29, 2020, 3:11am UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/12 "2020-06-29T03:11:13Z")
> [@Grestarian](#): > > And can a dark variant be created? 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: **Forum View - Before:** [https://i.imgur.com/bqmLEF2.png](https://i.imgur.com/bqmLEF2.png) **Forum View - After:** [https://i.imgur.com/rixlZTv.png](https://i.imgur.com/rixlZTv.png) **Thread View - Before:** [https://i.imgur.com/8jPYzl3.png](https://i.imgur.com/8jPYzl3.png) **Thread View - After:** [https://i.imgur.com/KB64TG7.png](https://i.imgur.com/KB64TG7.png) ---
**Author:** ![tim314](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/tim314/32/3468_2.png) [@tim314](https://boards.straightdope.com/u/tim314)\ **Post date:** [June 29, 2020, 3:22am UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/13 "2020-06-29T03:22:51Z")
> [@Jack\_Batty](#): > > 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’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. ---
**Author:** ![PlaceboTarget](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/placebotarget/32/1073_2.png) [@PlaceboTarget](https://boards.straightdope.com/u/PlaceboTarget)\ **Post date:** [June 29, 2020, 3:35am UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/14 "2020-06-29T03:35:42Z")
Indeed, your versions look more compact, a feature that many users here crave for. ---
**Author:** ![kaylasdad99](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/kaylasdad99/32/3398_2.png) [@kaylasdad99](https://boards.straightdope.com/u/kaylasdad99)\ **Post date:** [June 29, 2020, 4:12am UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/15 "2020-06-29T04:12:14Z")
> [@tim314](#): > > > [@kaylasdad99](#): > > > > Think you could throw us a screenshot of how it makes the page look? > > Sure 🙂 > > **Forum View - Before:** [https://i.imgur.com/0gNNr0w.png](https://i.imgur.com/0gNNr0w.png) > **Forum View - After:** [https://i.imgur.com/NcIOg1R.png](https://i.imgur.com/NcIOg1R.png) > > **Thread View - Before:** [https://i.imgur.com/KMsUvs9.png](https://i.imgur.com/KMsUvs9.png) > **Thread View - After:** [https://i.imgur.com/i6oQ9fV.png](https://i.imgur.com/i6oQ9fV.png) Mahalo. ---
**Author:** ![BippityBoppityBoo](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/bippityboppityboo/32/5745_2.png) [@BippityBoppityBoo](https://boards.straightdope.com/u/BippityBoppityBoo)\ **Post date:** [June 29, 2020, 6:36am UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/16 "2020-06-29T06:36:14Z")
Man, o’man, I love the look of yours! I vote for making yours a choice. Thanks for sharing. ---
**Author:** ![TroutMan](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/troutman/32/6721_2.png) [@TroutMan](https://boards.straightdope.com/u/TroutMan)\ **Post date:** [June 29, 2020, 2:23pm UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/17 "2020-06-29T14:23:25Z")
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. ---
**Author:** ![PlaceboTarget](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/placebotarget/32/1073_2.png) [@PlaceboTarget](https://boards.straightdope.com/u/PlaceboTarget)\ **Post date:** [June 29, 2020, 2:31pm UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/18 "2020-06-29T14:31:34Z")
Some people use the key commands. ---
**Author:** ![Cugel](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/cugel/32/1199_2.png) [@Cugel](https://boards.straightdope.com/u/Cugel)\ **Post date:** [July 1, 2020, 5:44am UTC](https://boards.straightdope.com/t/my-custom-style-sheet-to-make-the-new-board-less-annoying/913549/19 "2020-07-01T05:44:58Z")
I like the wider view, is there way to remove all of the empty side panels? AFAICT it works with greasemonkey, at least the ancient version I’m using.