Would other AO3 skinners be interested in some form of Discord? There seems to be quite a few of us out here but no single place where all our developments and knowledge can be pooled or questions about AO3's jank answered.
So,,,, interact for interest check?
---
A community for pooling CSS knowledge for AO3. | 1 members
It is made. All knowledge levels welcome since it's meant to share built themes, help during the building process, and pool any knowledge we make along the way whether it's your first theme or 50th.
For my qualifications I've been admin for, and modded for multiple servers in the past. From here out there's open spaces for moderators if you're interested and if this server sees growth.
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.
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
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.
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:
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)
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.
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.
hello! the previews of your neo site skin is so pretty!! but i was wondering, if its okay to ask, how did you manage to combine the Archive of our Own, the nav bar and user nav bar into one? im trying to make my own site skin and i wanna combine those three together :cs_sad:
Hi!
Here is one way to get everything in the header in one line. It will look a bit odd on narrower screens though.
I have coded it differently for the neos skin and there will also be tablet and mobile versions. But that code is not quite ready for sharing yet (too messy and buggy).
I was wondering, do you know if there is a way to change which links pop up when you hover over your name in ao3? Like where it says Hi, [username] and it gives My Dashboard, My Subscriptions, etc. Cuz I’d find more use out of having My Inbox and Stats over My Subscriptions and My History and would so put in the effort to change mine if that is actual changeable code.
Even if you can’t help me, thank you for all the help you give your tumblr following 🫶
I'm sure I've heard of people doing that, but it's beyond my capabilities.
There is a userscript for Tampermonkey, etc, which will add all links from your dashboard to the menu for you. The link includes instructions for how to remove links if you don't want them, but you will have to edit the code.
The Hesperus (beta) main work index is now fully themed and re-written! An example above and a display of it for an actual fic of mine on desktop and mobile below.
All tags have been edited into a 'pill form' to make it easier to tell apart relationships, characters, and additional tags. No more long blocks separated only with commas!
The new icons are all custom made. Archive warnings have been minimised and turned into icons alongside the tags. Text for the lower stats has also been iconified! (All editable if you so wish.)
includes these icons and the others. CSS skin for 25x25, 50x50 and 100x100 versions below!
25x25 50x50 100x100
as a side note, I am not 100% sure that my css replaces all of these icons, some of them IDEK what they are for (the hand ones by example) but I did search for and replace every instance of the original icon sheet being used so hopefully that got them all, otherwise it will show the original icons so it shouldn't cause any problems. But please let me know if you do find some that are missing.
*I included a 100x100 version, but please keep in mind that this loads a larger file, it could affect your data/WIFI usage so I would not recommend using that resolution if you have low internet speeds/limited internet, use 50x50 or even 25x25.
