Browse Source

Posted mastofe-userstyle

Siina Mashek 2 months ago
2 changed files with 53 additions and 0 deletions
  1. +53
  2. BIN

+ 53
- 0
content/blog/ View File

@@ -0,0 +1,53 @@
title: "Mastodon FE Userstyle"
date: 2020-07-16T08:44:42+03:00
![Screenshot of Mastodon FE userstyle. All columns are resized to remove the need for a horizontal scrollbar.](

For the last few years I have been maintaining a "variable-width" edit to the Mastodon front-end (including masto-fe/glitch-soc front-end) in the form of a [userstyles][] script, which can be loaded by the Firefox/Chrome extension [Stylus][]. While I have it on their (shitty) website, I've decided to add it here so that I don't have to bother with their awful website anymore.

Installation instructions are slightly involved if you don't use the userstyles website:

* Navigate to your instance / front-end
* Click the extension's icon
* Click "Write style for:"
* Copy the CSS below into the "Code 1" box
* Below the "Code 1" box, remove "getting-started" so it applies to all masto-fe pages
* On the top left, press "Save"

All should be good!

I mainly use it for snugging the columns to my 1280x1024 monitor without having a horizontal scrollbar, but should help use up extra space on wider monitors. On my 1080p monitor, it works fine with 4-5 columns before the default front-end sizes kick in.

/* Adjusts to remove horizontal scrollbar
in smaller window size (e.g. 1280x1024) */
@media (min-width: 800px) {
.wide .drawer {
min-width: 280px;

/* Adjusts to use up space in larger
window size (e.g. 1920x1080) */
@media (min-width: 1024px) {
width: 25%;
max-width: 25%;
.wide .drawer,
.wide .column,
.wide .columns-area:not(.columns-area--mobile) .column {
max-width: 100%;
flex: auto;

Comments via [Fediverse post][fedi]


static/images/mastofe-userstyle.jpg View File

Before After
Width: 640  |  Height: 512  |  Size: 90 KiB