Mastodon CSS Tweaks

Mastodon admins can visit Preferences > Administration > Server Settings > Appearance, or simply https://your.instance.url/settings/preferences/appearance, and apply custom CSS rules that are applied site-wide—to the web interface, at least.

I like everything about version 4 of Mastodon, except the wider post content—one of those optimal-use-of-screen-real-estate vs. readability things—and how it affects whitespace.

Here’s some rules that address that, for me, and make Mastodon v4 look a bit more like earlier versions:

.status__prepend,
.notification__message {
  padding-left: 42px;
}

.status__info,
.detailed-status__display-name {
  margin-bottom: 8px;
  margin-right: 10px;
}

.status__content,
.status-card,
.status .attachment-list,
.status .audio-player,
.status .media-gallery,
.media-gallery,
.status .video-player,
.detailed-status__meta,
.status__content__read-more-button {
  margin-left: 56px;
  margin-right: 10px;
}

.status__action-bar,
.detailed-status__action-bar {
  padding-left: 56px;
  padding-right: 10px;
}

.status .attachment-list,
.status .audio-player,
.status .media-gallery,
.media-gallery,
.status .video-player {
  width: initial;
}

img[alt=":verified:"] {
  display: none;
}

Now, you might find that this leads to a too narrow content width on mobile screens; if so, you could stick the relevant rules behind a media query.

That last rule merely hides “fake blue check” emoji.

The custom CSS is loaded through https://your.instance.url/custom.css. If your instance sits behind Cloudflare or a similar CDN, you may have to purge the cache for that URL!