Myspace Mode
Up to: Mastodon/Hacking, Features
| Myspace Mode | |
|---|---|
| Description | Custom Account CSS |
| Part Of | Mastodon/Hacking |
| Contributors | Lina, Jonny |
| Has Git Repository | https://github.com/NeuromatchAcademy/mastodon |
| Completion Status | Completed |
| Active Status | Completed |
| Approval Status | Approved |
Pull request: https://github.com/NeuromatchAcademy/mastodon/pull/63
You can customize the CSS on your profile page!
Steps
- Go to your profile settings page (/settings/profile)
- Edit the CSS in the "Account CSS" section on the bottom
- Go to your profile page and observe in horror and delight
wow, that's truly awful!
Common CSS Targets
Usually, just right click, inspect element to find the thing you want to modify. In firefox, you can right click an element to find its css selector:
Other common targets you may want to customize:
#mastodon- the whole page.account__header- the top part of a profile.account__header__bio- the area that contains your bio
Limitations
Because we have to sanitize the CSS to make it safe, you can't do anything that could pose a security or privacy risk like
- Loading custom fonts (you can use system fonts, though!)
- Loading images from URLs
- Change css variables
Troubleshooting
Account CSS should come after other CSS declarations, so it should override them, but if it doesn't that means there is some other conflicting CSS rule. You can...
- Make your CSS selector more specific, at least as specific as the rule that's overriding yours (use the inspect element window and look at the declared styles to see which that is)
- Use a bunch of
!importantmarkers at the end of every rule. this aint carnegie hall kid nobody's gonna judge your CSS.