A hack to reduce whitespace and scrolling

About This Message Board
1

Using the browser extension Stylish, I created a basic style to reduce whitespace and the need for so much scrolling. This could be a little tricky to set up if you are not technically inclined. It essentially hacks the CSS in your browser to compress the gaps between posts. For better or worse, it hides the Reply bar at the bottom of each post. If needed, you can quickly disable/enable the style from Stylish to show/hide the Reply bar.

This is a Before and After picture which demonstrates the impact of the style:

This is the definition of the style:

nav.post-controls {
display: none !important
}

section.post-menu-area {
display: none !important
}

.topic-body {
margin-bottom: 10px !important
}

Here is where you can get the Stylish extension:
https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en

2

Trying

3

First, thanks so much @AnalogSignal! I noticed it removes the reply and edit buttons from each post - is that intentional? I get that they take up a lot of space, but this non-visual designer assumes there must be a way to compress them without removing them, and still have a palatable appearance. In addition to sucking at visual design, I also kinda hate CSS, but I might play around with it if I get some minutes later today.

4

OK, call me tech-illiterate, but I’ve downloaded Stylish. [ETA: I guess technically I’ve added the Stylish extension.] Now what??

5

I did try to reduce the size of the Reply bar but couldn’t get it to work so I just hid it. It is a brute force approach but it is simple enough to toggle Stylish on and off.

Of course, if you have a way of improving this, it would be more than welcome.

6

There are YouTube videos that explain how to use Stylish. I may also try to write out the other steps more clearly if I have time.

7

Yeah, I ended up disabling it because I use those buttons.

Not promising anything! I confessed to my limitations above.

8

Could you link to a good one? I’ve checked out a few, and the ones I’ve seen don’t explain anything worth shit. And while sucking in that respect, they play crappy music at me for good measure.

9

I’m not sure how good this is but I watched this one to refresh my memory:

10

This is awesome! But I think your Youtube link is to a Stylus tutorial, not Stylish. I’m a tech idiot and was able to get it running quick without any videos. Spoiler alert:

IT WORKS!

I made some screenshots from Firefox, but I’m not allowed to put them in a reply (is this because of my Guest status?) I’ll try to describe. Again, this is for Firefox:

First install the extension, then in the Add-ons Manager, click the three horizontal dots next to the Stylish on-off toggle.

Then click Options in the dropdown. A new browser tab opens up. In the left panel, click Write New Style. Then in the big box on the right side, paste in the code provided by AnalogSignal above. Give it a name and hit Save. I ignored some warnings about the code – they caused me no problems.

Finally, in the upper RH corner of your browser (usually – I guess), click on your new add-on button. Toggle on and off by clicking “Stylish On” or “Stylish Off”. You may need to refresh the page.

Worked like a charm. A real improvement – thanks, AnalogSignal!

11

I’m glad you got it to work. I also really appreciate you providing instructions! I suffer from RSI so my ability to type these days is limited.

Yes, but Stylus is a clone of Stylish so it is 98% the same.

12

Thanks, masonite!! I’m using Chrome, so things weren’t exactly the same, but close enough that I could follow. And now no more white space within/between posts!

And yeah, there’s a button that lets me toggle it on/off like you say. Same in Chrome as in Firefox.

Cool beans!!