====== Customize your interface: How-to ======

It is possible with help of a browser extension to customize the appearance of the Mastodon web interface. Here we give a quick how-to how to use this with Mastodon, incl. three popular examples. Please follow the steps one by one. See **__[[styles|this page]]__** for the various styles you can copy and paste.\\ \\ 

  * Before you're going to start, first check-out our //themes//. Maybe they meet your requirements sufficiently. See your //[[https://todon.eu/settings/preferences/appearance|Todon.eu preferences]]// or your //[[https://todon.nl/settings/preferences/appearance|Todon.nl preferences]]//.\\ \\ 

  * We are going to use the //Stylus// browser extension. This one is available for **__[[https://addons.mozilla.org/firefox/addon/styl-us|Firefox]]__** and **__[[https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne|Chrome]]__** (and derived browsers). Click on one of the two links and follow the installation instructions. This how-to is made with Firefox, but it should be the same in Chrome.\\ \\  

  * {{ :todon:stylus1.png?400|image 1}} When installed find the icon of //Stylus//, right-click and click on the //'Manage styles'//. See image 1 ➡️\\ \\ 

  * {{ :todon:stylus2.png?400|image 2}} On the page with //'Installed Styles'// click on //'Write new styles'//. See image 2 ➡️\\ \\ 

  * {{ :todon:stylus3.png?400|image 3}} Click on the pull-down-menu //'Everything'// and click on the option //'URLs on the domain'// See image 3 ➡️\\ \\ 

  * {{ :todon:stylus4.png?400|image 4}} Enter //todon.eu// or //todon.nl// in the field at the left of 'URLs on the domain'. For convenience you enter the same domain in the field at the top left (below //'Add style'//). See image 4 ➡️

  * {{ :todon:stylus5.png?400|image 5}} In the large text field on the right you copy and paste the CSS code you find on **__[[styles|this page]]__**. See image 5 ➡️\\ \\ 

  * {{ :todon:stylus6.png?400|image 6}} Click the yellow button //'Save'// and you're done! You should be able to see the changes immediately on your Mastodon server. See image 6 ➡️\\ \\