#ao3 css
Explore tagged Tumblr posts
pinkaxolotl85 · 1 year ago
Text
Tumblr media
Cut together from multiple videos because my internet kept dying in the wee hours.
Displays only the main index and bookmark index due to them being fully complete, the bookmark main page and chapter main index are also complete, just less interesting to show off. Also showing only the light skin (Epipelagic) since that's easier to work with due to my astigmatism, multiple dark modes will be released alongside it.
Works wholly within the AO3 system, bar some alignment that's accomplished with a stylus compatibility layer because AO3 still doesn't accept calc(). This is only needed on PC and will be included during the installation steps for you. (And, honestly, it still looks fine if you decide not to add it.)
Basically, what you see here is what you get. An AO3 rebuilt entirely from the ground up.
Edit: It's also WCAG AA and AAA compliant.
274 notes · View notes
renirae · 2 months ago
Text
not my usual post AGAIN, but yesterday I coded an ao3 site skin and I think a lot of people would find it helpful!!
previews:
Tumblr media Tumblr media
(an attempt at) reversi previews:
Tumblr media Tumblr media
(I don't think this looks as good but I wanted to try haha, the colours should be quite easy to change though if you can think of a better colour scheme!!)
-
code: https://pastebin.com/ftzunr6V
reversi code: https://pastebin.com/v0Aqa6jT (note: 90% of this is just the base reversi code! anything below the .caution part of the code is where the tag separation code starts!)
ao3's tutorial for applying site skins: https://archiveofourown.org/faq/skins-and-archive-interface?language_id=en#createsiteskin
-
credit to @ao3skin for the idea and base, which I found on this post!!
also HUGE thank you to 10BillionDreams on Reddit, who helped me a LOT with troubleshooting!!
48 notes · View notes
bone-byrd · 1 month ago
Text
Tumblr media Tumblr media Tumblr media
I coded a fully interactive phone into Ao3 and it feels like my head has been bashed in at Terminal Velocity
This bad boy -Plays a song -Has multiple text convos for you to read -Lets you send messages -Gives you multiple dialogue options -Changes notif display based on what you've already clicked
Check it out!
36 notes · View notes
pelagic-ao3 · 11 months ago
Text
Tumblr media
Filter & Filter Dropdowns Showcase
Not shown: dropdowns now activate on hover
100 notes · View notes
fantasticcolordaze · 10 months ago
Text
ao3 skin 2 based on tumblr poll results, space themed, gifs are used for header and other things
Tumblr media Tumblr media
50 notes · View notes
gifbot · 6 months ago
Text
But can it run Doom with a GAMEPAD??
Tumblr media
In celebration of the HTML Tryhard 2025 fest on AO3, I gave Doom on AO3 a little HTML facelift!
Now you can imagine you (and all your friends) are making Doomguy spin endlessly at 4 frames per second on a PlayStation controller! It's still impossible to play correctly, but now it's impossible to play correctly in style.
33 notes · View notes
howtohidethat · 2 months ago
Text
Tumblr media
This is a good time to talk about proper tags.
It's important to add the ship tags for things like this because even in this complaint post, the tags have achieved their purpose. It's enabled the user to filter those fics out.
The key point here, is tags are both inclusion AND exclusion based. While one person may be using a tag to find all the "Wibbly Pairing" fics, another person may never want to ever see "Wibbly Pairing" even as a mention in the fic, so they will appreciate that tag being there so they can filter it out. They are using the tags, but to exclude fics.
When you ask "Why would you include their ship tag?" you need to understand that they are including the ship tag because the fic contains the ship. That is proper tagging etiquette. Some people would not want to see it. The tag enables the exclusion filters provided by AO3 to work properly.
Accordingly, you can also use the tags for the other pairing to filter those out as well.
Muting authors who do tag properly is fine, but you may find better results by excluding or muting the actual tags you dislike. Authors who tag things properly are a jewel of fandom and deserve appreciation!
14 notes · View notes
sadista-sensible · 6 months ago
Text
Brave Lovers [AO3 skin]
Hi there! I made a Kyle/Cartman themed skin for all the Kyman shippers out there, it includes custom icons as well, I hope you like it!
Tumblr media Tumblr media Tumblr media
Here's the code:
EDIT: Just fixed the announcement issue!
41 notes · View notes
zerafinacss · 2 months ago
Text
AO3 Site Skin: neos
It's finally here! After working on it for months and almost giving up at times, neos is finally ready for release!
What is neos?
A site skin that gives AO3 a slightly modernized, semi-flat look. It also fixes some bugs and usability issues. The following color schemes are available (and more may follow):
Powder & pink
Dusky dark purple
Tumblr blue (inspired by the low-contrast classic palette)
Preview Images: Desktop
Tumblr media Tumblr media Tumblr media
Preview Images: Mobile
Tumblr media Tumblr media Tumblr media
Instructions for adding the site skin are here on AO3
379 notes · View notes
pinkaxolotl85 · 1 year ago
Text
Eosphorus.
The white outlining does not appear outside recordings, and the exclude search bar extending line is also red outside of recordings. So this theme isn't left in the dark forever, its development is being tracked and displayed in a reblog link.
Tumblr media Tumblr media
Custom Icons that run along the side:
Tumblr media
Everything full functional within AO3.
IF PEOPLE DON'T KNOW, EOSPHORUS HAS HAD TO BE CANCELLED (for now) DUE TO AO3'S NEGLECT OF THEIR SKIN SYSTEM.
263 notes · View notes
ao3css · 1 year ago
Note
Hello! First of all, thank you very much for all your help!
I wanted to ask you how to change the shape of the profile picture, like a heart for example? In general it is square and I saw that in some skins it is circular
This is so cute! here's what you can do:
.icon { mask-image: url(https://64.media.tumblr.com/9ba116de84c2a4025308efe00c868ba9/34dd23f1e72d362f-9b/s250x400/37485c4039f765ab39f104b464dfec3c6dfda3fd.pnj); mask-repeat: no-repeat; mask-size: 100%; }
or:
.icon{ -webkit-mask-image: url(https://64.media.tumblr.com/9ba116de84c2a4025308efe00c868ba9/34dd23f1e72d362f-9b/s250x400/37485c4039f765ab39f104b464dfec3c6dfda3fd.pnj); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; }
(Both do the exact same thing, but some browsers need the -webkit- version)
Any transparent image (the one below is the one used in the code above) can be used as a mask. (Rounded corners can be done with the border-radius property)
Tumblr media
40 notes · View notes
bone-byrd · 1 month ago
Text
I AM PUSHING AO3 AS FAR AS IT CAN GO I’ve been coding pretty much all day. Don’t wanna spoil too much of the upcoming chapter but have this little sneak peek!
Maybe eventually I could share how to do this, if anyone is interested. Warning though it’s…. Really complicated and because I’m the one making it, a bit convoluted and not optimized LMAO
Oh and uhhh ignore the pufferfish cursor o7
17 notes · View notes
pelagic-ao3 · 10 months ago
Text
How the new additional tag system works.
(This will be different on mobile, where hovering is not a common function.)
46 notes · View notes
fantasticcolordaze · 7 months ago
Text
Tumblr media
Code to personalise fandoms, browse, search and about
#header .actions a[href="/menu/fandoms"],
#header .actions a[href="/menu/browse"],
#header .actions a[href="/menu/search"],
#header .actions a[href="/menu/about"] {
color: #fff;
text-transform: uppercase;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
#header .actions a[href="/menu/fandoms"]::before {
content: "📚 ";
}
#header .actions a[href="/menu/browse"]::before {
content: "👀 ";
}
#header .actions a[href="/menu/search"]::before {
content: "🔍 ";
}
#header .actions a[href="/menu/about"]::before {
content: "ℹ️ ";
}
39 notes · View notes
konn493 · 9 months ago
Text
I did an AO3 skin for the tags. BUT! I need help.
Outside de works looks fine:
Tumblr media
But inside...idk what I'm doing wrong
Tumblr media
Link to the skin if someone can help me <3
17 notes · View notes
anitalianfrie · 8 months ago
Text
i was wondering if anybody knew how to put the sample code for a css skin into the ao3 fic without it turning it in the thing i'm coding? I reworked an old skin for instagram and i wanted to share it, but i can't find a way for it to reamin text and not become an istagram post
3 notes · View notes