Greetings, the name's Core!
The creator and host of a game called 'Maze Teamwork Game' in the main harbor of Pony Town (PT).
I often join games that catches my interest such as original games being advertised in PT. Other than that, I like to play:
Build Battle
Fashion Roulette
Find The Skin (FTS)
'Never lose hope nor give up, and persevere even if it may seem hopeless at times.'
*Reads Manga*
-Lego Monkie Kid and Undertale fan-
{Murder Drones and The Amazing Digital Circus enjoyer}
[A very busy person]
Note: I do not do commissions unless I specifically made a post that I do
For every action, there is a reaction. And that would be one angel urging to get revenge while struck with grief. Will that angel lock in? Or will that angel break down? Or will that angel maybe-
Chapter: 15 (click here to go to the AO3 link)
Yes, it's written on AO3
Chapter Summary:
Gift baskets and confrontation.
Spoiler:
Abel finds Emily, St Peter and Sir Pentious making gift baskets early in the morning. A lockdown was announced. Abel tries to stop Emily from leaving. Emily is now in Hell and planned to help Charlie and Vaggie to confront Vox.
For every action, there is a reaction. And that would be one angel urging to get revenge while struck with grief. Will that angel lock in? Or will that angel break down? Or will that angel maybe-
Chapter: 14 (click here to go to the AO3 link)
Yes, it's written on AO3
Chapter Summary:
The seven stages of grief.
Spoiler:
Adam and Lute have a conversation about not being able to move on and how his previous relationships still hurts him. Adam nearly attempts to end it all. Abel saves him.
Too much chocolate makes the toons hyperactive... This caused a few minor issues such as the toons accidentally breaking things and themselves when they bump into stuff due to their increased speed boost.
(Based of the mother scolding son and dad meme that I saw.)
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.
For every action, there is a reaction. And that would be one angel urging to get revenge while struck with grief. Will that angel lock in? Or will that angel break down? Or will that angel maybe-
Chapter: 13 (click here to go to the AO3 link)
Yes, it's written on AO3
Chapter Summary:
Decisions are made. The fire continues to ignite. And choices yet to be chosen.
Spoiler:
Sir Pentious is now welcomed to freely roam Heaven. Abel had been promoted to lieutenant. Both things which Adam wasn't happy with.
How To Change Text When the Cursor is Hovering Over by La_Temperanza
Another Changing Text On Hover by mackerel_cheese
Linked Footnotes by La_Temperanza
Making Complex Shapes / Hover-Over Effects / Choose Your Own Adventure / Changing Ao3’s Preset Headers: Author Notes, Chapter Titles, Fic Titles etc / Invisible Links+Link Aesthetic / Interactive Elements / Animation/ Retroactively Appearing Text by InfinitysWraith
Page Dividers by Linwelin
Email
Nonspecific email window by La_Temperanza
Basic Gmail by sunsetcurbed
More Gmail by DemigodOfAgni
Texting
You don’t need to code iOS, because 221b_ee made a generator for it
inspired by iOS by CodenameCarrot and La_Temperanza
Another version of iOS iMessage by Azdaema Codes
Retro iOS by Azdaema Codes
iOS, Android by gadaursan
iOS, Signal, and WhatsApp by lordvoldemortsskins
WhatsApp by ran_a_dom
WhatsApp by etc e tal
kakaotalk by beherrscht
LINE by noliteobdurare
LINE chat by ran_a_dom
Social Media
Facebook Messenger by ran_a_dom
Facebook post by BluebeardsWife
Tumblr by phyripo
Tweaks to that by Aposeopesis
Instagram by gadaursan
Instagram DMs by xslytherclawx
More Instagram DMs, including light and dark modes, by monarch_v
Incredibly comprehensive Twitter by gadaursan
Display case of gadaursan’s work by Fluffycorn_njst
More Twitter by starskin
Update by starskin
Yet More Twitter by etc e tal
Twitter, Reddit, and LiveJournal by aerynevenstar
Examples
Twitter mockup inspired by aerynevenstar by TheBrookesNook
Reddit by spookedcroon
Update by jinsake
More Reddit by knave_of_swords
Yet more Reddit (2020 version) by timstokerlovebot
SnapChat by Azdaema Codes
More SnapChat by starskin
Twitch Chat by Ultraviollett
4Chan by anonymous (cw: slurs and discussion of pedophilia in the live example)
Amazing Discord by unpredictableArtist
Slack derivation by me
Another Discord by Heterochromia_Mars
Tweaks by junietuesday25
Unspecified forum by fencesit
BlueSky post by anon
YouTube comments by LupaMoe
Blog post by intherainex
LiveJournal by sesuntaMew
bubble by me
Writing
Notebook Lined Paper by La_Temperanza
Post-It Notes by La_Temperanza
Letters and Stationery by La_Temperanza
With parchment backgrounds by allollipoppins (you can leave off the MDZS symbols)
Online newspaper article by ElectricAlice
Example
Simplified newspaper by Anubis_2701
Newspaper Article by lordvoldemortsskin
More documents by hangingfire
Online journal by enigmalea
Screenplay by astronought
Script or screenplay by Ninjabunny99
Screenplay on an actual piece of paper by junietuesday25
Shooting Script by Walzer
Calendar by Linwelin
AO3
AO3, including comment section by lordvoldemortsskin
AO3 header by ElectricAlice
Comment and Kudos buttons by La_Temperanza
Complete fic-within-a-fic by cheju
Gift fic email by rileys_words
Fandom Specific
Disco Elysium by SarunoHadaki
Blaseball by facingthenorthwind
Fire Emblem by gadaursan
Tweaks by Clover_Zero
Deadpool’s Thinking Boxes by La_Temperanza
Homestuck extended by unpredictableArtist
Star Trek PADD by duskyspirit
Example
Incredibly expansive Among Us by Umbry2000
Another Among Us by mystyrust
S-Class by unpredictableArtist
IDOLiSH7 Rabbit Chat by associate
A3! LIME by associate
Runescape by fennfics
Nameless: the one thing you must recall by sqbr
Minecraft by Ultraviollett
Final Fantasy XIV Linkshell by Pent
Honkai Star Rail by Pent
Rain Code by faish
Ace Attorney by QuailFence
Other
Wikipedia by styletests
Scoreboard by revanchist
Google search by gadaursan
Yelp reviews by kiwiana
Amazon reviews by kiwiana
Silent film intertitles by Kitsune_Scribe
Zoom chat by mystyrust
Replika AI chatbot by FaeriMagic
Cards Against Humanity by L56895
Most can be found in the collections (also check the bookmarks) A Guide to Coding and Fanworks, AO3 Useful Workskins, and/or AO3 Social Media Workskins. If you’ve written a skin, add it to these collections!
So I thought this was commonly known internet navigation (but apparently it might just be those of us who have been using the internet since the 90’s who still know it). Or so it seems based on… a grumpy comment I got.
When you see an arrow like this:
It means you click it to expand out a hidden section.
It’s an accordion section/menu! It’s useful in web design to hide information that may be overwhelming under specific headers so people can only see what they need.
Here I’m using it for people who need the content warnings to be able to check, but for those who don’t need them and don’t want to be spoiled to just move right past without accidentally reading anything.
It’s still the user’s responsibility to click the arrow and read things as they need! But it is all warned. (And, yes, the all encompassing issues are already a tag on the fic, I’m just providing additonal warnings per chapter.)
hi! i was wondering if you could explain how to change the button colors on ao3 without changing the button colors for the fandoms browser about taskbar thing
Sure I'll try my best! If you mean an all button type code, except for the fandom drop-down (this also doesn't include the dashboard, since that's another code) I'll try my best to explain. (I am still a beginner myself so always double check.)
the code I pointed out in the example will appear as this:
So if anyone just tries to use buttons only, now you know why only specific buttons change colours
I wasn't sure if you specifically only wanted certain button, so I covered all of them just in case. For colouring only some buttons you can simply remove the additional code.
Through trial and error, Arthur has found an effective way to carry Delilah back home so she can sleep comfortably in a bed, rather than on her office desk.
