Work Text:
This is how buttons look on default skin:
This is how buttons look on reversi:
And this is how buttons look on Snow Blue:
Where is the code
The Repository is here. The code for the skin is 'flat-buttons.css'
How to add a skin to your AO3 account
- Make sure you're logged in your account on AO3
- go to my dashboard and then click on Skins (in the menu on the right)
- click on the button create new skin
- Make sure Type is Site Skin
- Add a Title to your skin
- Select and *Copy ALL the code you'll find in here*
- Paste the code in the field 'CSS'
- click SUBMIT
- scroll to the bottom on the page and click on "USE"
Now you have a new skin! It is now linked to your account, so every time you log into ao3 from whatever device you'll have it already set!
How to add parent skins
If you, for example, use reversi as a skin, you can have flat buttons too.
- Make sure you're logged in your account on AO3
- go to my dashboard and then click on Skins (in the menu on the right)
- find the skin you just created and click on Edit (the skin is probably the top one)
- Scroll down and click on advanced, show
- Then scroll down and click on Add parent skin
- type your skin in the autocomplete and select it! (Reversi? Snow Blue? Another skin you've created to block works? )
- click on update
How to have colored buttons
The skin uses the default colors of the parent skin you are using (so, chances are, that they are gray-ish)
If you want to add colored buttons you just copy-paste this code at the beginning of the css of your skin:
button, .actions a, .actions a:link, .action, input[type="submit"], .actions a:visited {
color: #ffffff; /*this is the color of the text*/
background-color: #900900; /*this is the background color*/
}
Substitute the #ffffff and #6badb3 with the HEX color of your choice!
Make sure to choose 2 colors that provide a decent contrast for reading!
You can find a hex color picker simply on a google search.
How to have change the color of the buttons when you hover them with the mouse
Just copy-paste this code at the beginning of the css of your skin:
button:hover, .actions a:hover, .action:hover, input[type="submit"]:hover {
color: #ffffff; /*this is the color of the text*/
background-color: #2795e9; /*this is the background color*/
}
Substitute the #ffffff and #2795e9 with the HEX color of your choice!
How to remove the skin
- Make sure you're logged in your account on AO3
- go to 'my dashboard' and then click on 'Skins' (n the menu' on the right)
- click on 'revert to default skin'