styling buttons on AO3
For those of you who are interested in creating site skins (or modifying ones that others have created), here's how you can modify AO3's buttons to suit your needs.
Tutorial under the cut. It is aimed at absolute beginners with no knowledge of CSS, and I am exhaustive in my explanations. If you're interested in learning how to skin, this should be a helpful start!
(I just cover button styling, I don't explain how to create a new skin)
CSS for beginners
When you're creating CSS code, you can change how items look either individually or in groups. You can also change an item in one way or more than one way.
If you're styling one item with one change, that block of code will look like this:
name of the item { change that you want to make; }
If you're changing more than one item, list them off with a comma between each item. If you're making more than one change, list them off each on their own line. Each change must always end in a semicolon, whether you're making one change or multiple changes.
The { indicates where the changes are going to start. The } indicates where the changes end. Each of these little blocks of code work independently, so you can put them into a site skin in whatever order you want, as long as the block itself stays together.
The most common changes that you'll want to make to a button are probably
background colour / background image
border / thickness of the border / shape of the border
font / font size / font colour / font style
whether or not there's a shadow
Code (part 1)
This code is what the Default skin uses for buttons on AO3. I made the brackets red so that it will hopefully be easier to see where the list of items you can change ends and the list of changes starts.
.actions a, .actions a:link, .action, .action:link, .actions button, .actions input, input[type="submit"], button, .actions label { background: #eee; color: #444; font-size: 100%; border: 1px solid #bbb; box-shadow: none; }
The actual site code has a lot more specifics than this, but I trimmed those other parts of the code off. We don't want to change any of that, so we don't need to include it.
Backgrounds
To change the background colour on buttons, use a hex colour picker (like this one for example) or a gradient creator (like this one) to help you get the colour(s) you're looking for.
background: #2596be;
will change the buttons to blue. If I'd rather have a gradient background for my buttons, I could do something like
background: linear-gradient(90deg,rgba(250, 218, 97, 1) 0%, rgba(255, 145, 136, 1) 50%, rgba(255, 90, 205, 1) 100%);
which will change the background to a yellow-peach-pink gradient. You can rotate the gradient to be left-right or top-bottom etc. by changing the number of degrees of rotation the gradient has.
If you want to use an image as the button background, your code would look like:
background: url("linktotheimage.jpg");
Here, you're indicating with url that the source of the image is a website. Then you're putting that web link into quotation marks to capture it all. Images used in site skins should be .jpg or .png or .gif
If you want your background colour to be semi-transparent, then I recommend using the RGB value instead of the hex value. For the blue I used earlier, the code would be
background: rgba(37, 150, 190, 0.5);
The first three numbers are the red, green, and blue components of the colour and the last number is the amount of transparency. 1 is fully opaque and 0 is fully transparent, so use decimals to indicate what you're looking for.
Borders
When you're styling a border, there are typically three things you're looking at
border: 1px solid #bbb;
The first is how thick it is. A 1px border is 1 pixel thick. You can make it thicker by increasing that number.
Next, we have the word solid. This is talking about what the line looks like. Borders can be solid, dotted, dashed and several other styles. You can change that look by changing that word.
The last indicator there is the colour, which we've already seen.
If you don't want a border, you can use the terms either none or hidden. None will remove the border entirely. Hidden will keep the space that the border occupies while not showing it. You can also do that by indicating the border should be transparent (which is how you can then add an image to a border, but I won't be doing that in this tutorial). You can choose any of these that you like, or you can stick with styling like the above.
border: none; border: hidden; border: transparent;
Another part of the border that you can modify is the radius of the corners. That changes how rounded they are/are not.
border-radius: 0px;
Will give you square corners. The larger the number you put there, the more rounded they will become. If you want your buttons to have rounded ends, you can insert something like
border-radius: 20px;
(if you increase the size of the button, you might need to increase this number to get a fully curved end)
Another fun thing you can do is give each corner its own radius. That's how you can make more interesting shapes. The order that the corners are modified in is: top left, top right, bottom right, bottom left. So imagine yourself starting at the top left of the box and moving around it clockwise. Code to modify all four corners can look like this:
border-radius: 15px 0px 5px 0px;
You can experiment with changing each of the numbers to see how curved you want your buttons to be.
Fonts
AO3 has default fonts, but if you want you can change them to something else. In order to do so, you'll need to know the name of the font you want to use and that font will need to be installed on the device you want to use the skin on.
If your phone doesn't have Comic Sans on it, then you won't be able to use that as the font in your skin.
To deal with the fact that different devices have different fonts installed, you can do two things. 1) Use websafe fonts 2) provide more than one font for the skin to use.
To set the font to something other than the default, use the font-family property and use the exact name of the font(s). If the font name is more than one word, put the name in quotation marks. List the fonts in the order that you'd like them to be prioritized and put a comma between each item.
font-family: "Century Gothic", Arial, sans-serif;
My first choice of font here is Century Gothic. If the device I'm on doesn't have that font installed, then it should use Arial. If it also doesn't have Arial installed, then it should use any sans-serif font.
You can set the font size using several different measurements, but I tend to use either percentage or point.
font-size: 120%
This code will make the font 120% the size of whatever the site's default size is. If I want the font to be smaller instead, I can use a percentage smaller than 100%.
If you'd rather, you can also use a point size.
font-size: 24pt;
The reason why I prefer the percentage is because it will scale with your device, so if your computer and your phone have different default font sizes, it'll adjust based on that. Using the point size will set it at that size no matter the device.
To change the font colour, you just need to use a hex code (like above).
color: #2a2a2a;
(Note to people who learned English outside of the US - do not put a u in colour when you're coding)
Other changes you can make to a font are about the style of the font itself. For example:
font-weight: bold; font-style: italic; font-variant: small-caps;
Box Shadows
AO3 uses a box shadows in a lot of areas in their skins, including buttons.
By default, box shadows appear on the outside of the item you're putting the shadow on, and they're visible along the bottom border and the right border. You can adjust this, but if you just use
box-shadow: 3px 3px #ccc;
Then you'll have a grey box shadow that is 3px wide along the bottom border and the right border. The first number is right/left and the second number is top/bottom. To put the shadow on the top and the left, use negative numbers:
box-shadow: -3px -3px #ccc;
If you want the shadow to be on the inside of the box instead of the outside, add inset to the end of the line. When you're working with an inset box shadow, the position is the opposite of a regular box shadow.
box-shadow: 3px 3px #ccc inset;
This code will give you a 3px shadow on the left side and the top of the inside of the button. To get it on the bottom and the right, you'll need to change those to negative numbers.
Bonus: making things glow
You can make the shadow softer by adding a third number to the list, which is the width of the blur effect you add.
box-shadow: 3px 3px 8px #ccc;
By adding 8px in that third position, I've softened that dark grey shadow and spread it out more. This is the same technique that you can use to make a glow effect.
box-shadow: 0px 0px 10px #2596be;
By setting the first two numbers at zero, I'm positioning the shadow directly behind the button instead of shifting it to one side or another. Then the 10px glow of blue will appear equally on all sides of the button.
Code (part 2)
This is the code that can change the styling of buttons when your mouse is hovering over them. Once again, this is what AO3 has set as the default (with extraneous code removed)
.actions a:hover, .actions button:hover, .actions input:hover, .actions a:focus, .actions button:focus, .actions input:focus, label.action:hover, .action:hover, .action:focus { color: #900; border-top: 1px solid #999; border-left: 1px solid #999; box-shadow: inset 2px 2px 2px #bbb; }
Code (part 3)
This code modifies what buttons look like when they indicate what page you're on - so if you're on page 3 of your favourite tag, the number 3 in the list of pages will look different, for example.
.actions a:active, .current, a.current, a:link.current, .current a:visited { color: #111; background: #ccc; border-color: #fff; box-shadow: inset 1px 1px 3px #333; }
Code (part 4)
I'm separating this out because I've had people request in the past that these buttons be style differently. The first code block modifies the button in your inbox that shows you that you have not yet replied to a comment. The second code block modifies the button in your inbox that shows that you have replied to a comment.
span.unread, .actions span.defaulted { background: #ccc; color: #900; border: 1px solid #bbb; }
.replied, span.claimed { background: #ccc; color: #008000; border: 1px solid #bbb; }
