Myspace Mode
Revision as of 19:23, 22 September 2024 by Jonny (talk | contribs) (Created page with "Up to: Part Of::Mastodon/Hacking, Part Of::Features {{Project |Description=Custom Account CSS |Part Of=Mastodon/Hacking |Parts= |Contributors=Lina, Jonny |Has Git Repository=https://github.com/NeuromatchAcademy/mastodon |Completion Status=Completed |Active Status=Completed |Approval Status=Approved }} Pull request: Has Pull Request::https://github.com/NeuromatchAcademy/mastodon/pull/63 You can customize the CSS on your profile page! == Steps == * Go to y...")
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