jaz-michael king

Mastodon 4.3 Custom CSS

I like to add a little flavour to Mastodon, and the 4.3 update has changed a few things. Editing the CSS in the Mastodon Administration screen impacts all the themes, dark and light etc., so if you have other users besides yourself it’s important to only make changes that work under any theme conditions.

Below are some server-level CSS customisations I use on toot.wales – jump to the Moderation Interface section to see the changes for the moderator and admin staff.

Suggestions? Improvements? Mention me @jaz@toot.wales

Navigation Menu

This will change your column navigation to your colour of choice, add bold for the active item, and your colour on hover.

.column-link.active {
    color: #e95a4e;
    font-weight: bold;
}

.column-link:focus, .column-link:hover {color: #e95a4e;}

Post Button

We are toot.wales or “Tŵt Cymru”, we don’t post, we tŵt 😊

screenshot of the Mastodon compose UI
.compose-form__actions .button { color: rgba(255,255,255,0); }
.compose-form__actions .button::before {
  content: "YOUR TEXT HERE";
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(255,255,255,1);
  transform: translate3d(-50%, -50%, 0);
}

Media Border if No Alt Text

We strongly encourage the use of alternative text on media, and our staff do not boost posts with media that doesn’t have alternative text added. To highlight the issue, we add a border to media that has no alt text.

.media-gallery__item-thumbnail img:not([alt]),
.audio-player__canvas:not([title]),
.video-player video:not([title]), 
.media-gallery__gifv video:not([title]),
.media-gallery__item-thumbnail img[alt=""], .audio-player__canvas[title=""], .video-player video[title=""], .media-gallery__gifv video[title=""]
 {
box-sizing: border-box;
border: 3px solid pink;
border-image: repeating-linear-gradient(
    -55deg,
    #000,
    #000 20px,
    #ffb101 20px,
    #ffb101 40px
  ) 10;
}

Community Identity / Your Logo Here

We run a community for Wales and the Welsh, at home and abroad. We like our Members to be sure they are on the right server, and to reinforce our community approach. This code adds a community logo to the top left column. Be sure to DM yourself the image so it’s on the local server! Set the margin-top to the height of your uploaded image.

.compose-panel {background: url(https://example.social/path/to/your/logo.png) no-repeat !important;}
.search {margin-top:80px;}

Underlined Links

@mentions and are clear and visible as hyperlinks thanks to the symbols used, but regular links not so much. I like to underline hyperlinks so they are easily picked out.

a.status-link:not(.mention) {text-decoration: underline;}

Status Separators

It’s not super clear where one post ends and another begins, this adds a slightly darker line between posts.

.notification-group, .notification-ungrouped, .status {border-bottom: 1px solid #b8b8ff;}

Moderation Interface

I have once in a while been on a busy, repetitive multi-report review and accidentally actioned the reporter instead of the reportee. I add the text “Reported by: ” as a visual reminder of which of the two usernames in a report are which. I also add a “Added Message: ” note to remind me what all the “None” lines are about.

.report-card__summary__item__reported-by::before {content: "Reported by: ";}
.report-card__summary__item__assigned, .report-card__summary__item__assigned .username, .report-card__summary__item__reported-by, .report-card__summary__item__reported-by .username {white-space: normal;}
.one-line::before {content: "Added Message: ";}

The accounts view doesn’t help me quickly see which accounts have already been actioned, so I add a background to accounts that are already suspended. This also helps in the trending moderation screen to highlight disallowed sources.

.batch-table__row.batch-table__row--muted {background: #eaeaea;}