Examples for Custom CSS

#1

I have a couple of questions about customizing Mastodon via the “Custom CSS” box that’s now in the admin panel.

  1. Are there any examples floating out there for custom CSS designed for this box? I’ve searched and I’ve found all the issues leading up to implementing it, and older examples where you customize the build/dockerfile, but no actual examples using the admin section field with class names of common elements.
  2. I’ve tried to use to Style Editor inside Firefox and Chrome’s debugging tools, but I can’t get any styles to apply (even a “body { background: blue !important; }”. On other sides that works instantly, so I suspect it has something to do with the fact that the web UI is a React app and the way the Javascript/CSS rendering order work together. In any case, is there a way to try out and adjust styles within a browser’s debugging tools?
  3. What element does the little cute Mastodon in the compose panel belong to. “drawer__inner__mastodon” is where the zig-zag SVG under the cut little guy lives, but I can’t find the element that contains his background image.
#2

Not that I know of, you might get a better response asking around on Mastodon. I know niu.moe uses it.

React and CSS have basically nothing to do with each other. Apply a background on the body wouldn’t have any effect because the background is applied to the .ui element. This should be easy to see from the web inspector.

the elephant is an img, not a CSS style:

image

#3

Cool thanks for your help. After spending several hours experimenting in the web inspector and style editor in my browser, I have come up with the following tutorial:

https://penguindreams.org/blog/using-custom-css-with-mastodon/

It also hosts the CSS for the theme I created for my instance. Hopefully it will be a good starting point for other people looking for customization examples.

2 Likes