Dive Deep into Creativity: Discover, Share, Inspire
Ao3 Skins - Blog Posts
Just posted a new chapter for my KuzuHina fanfic The Broken Cup!
Feels a bit weird to post a chapter with nothing but text messages, but I'm having fun with the formatting. I hope you like it!
Hello! Have a second, shorter chapter for my Dangan Ronpa 2 KuzuHina fic: The Broken Cup.
This is also my first attempt to use a work skin on AO3. I definitely recommend CodenameCarrot and La_Temperanza's very helpful tutorial if you want to try something similar for your own stories.
So... I learn how to use skins on ao3 n I did this.
I Made An AO3 Skin!
To make it easier to copy, here's a doc for the code
Feel free to use and modify it however you like!
Special thanks to @ao3commentoftheday for inspiring this skin. Follow them for more awesome AO3 skins!
AO3 Skins for Multilingual People
Idk nothing about coding but after long hours of trying to make my own site skin i figured how to block all works written in languages one doesn't speak
.blurb:not(:has(dd[lang$="en"])) { display: none; } .blurb:has(dd[lang$="es"]), .blurb:has(a[href*="/skins/" i]), .blurb:has(a[href*="/collections/" i]), .blurb:has(a[href*="/series/" i]) { display: block; }
So basically,
.blurb:not(:has(dd[lang$="en"])) { display: none; }
This will block all works that are not in the language selected, in this case english (en)
And
.blurb:has(dd[lang$="es"]) { display: block; }
This will show previously blocked works that are in the language selected, in this case spanish (es)
If you speak more than two languages just copy and paste the last part as many times as u need and change the language.
Note that this will only block the view of this works but will NOT filtered it so it may tell you there are more works than shown
If someone knows about coding and wants to make corrections pls do!
hii i was wondering what ur process was for making skins ?? i am trying to make my own but ngl the process is annoying. i have a separate tab open js to see how the changes will look… 💀i need helpp 🙏🏾🙏🏾
Tbh the process is annoying and very fiddly, but there a definitely ways to make the actual writing it part easier!
I use an add-on called Stylus that lets you write CSS in a pretty way, will show you most syntax errors automatically, and will update the site live as you write it. It takes nearly all the difficulty out of actually writing the theme.
I normally split my screen between AO3 and Stylus like this:
(But note that Stylus is an actually well-maintained system, so if you're planning to copy-paste the code back into the AO3, then check your theme regularly, because Stylus will accept it just fine but AO3 may find reason to throw a tantrum.)
The next thing I suggest is uBlock Origin. Its core functionality is as an Ad-Blocker, so I recommend it on that alone lmao. Google recently updated its entire service just to ban Origin on Chromium, so I heavily advise not only Firefox in general, but Firefox for AO3 theme writing.
Origin, using its element picker feature, actually lets you more accurately, well, pick the elements you want to target. It will show exactly what you're selecting, and will let you move up and down the element hierarchy to get what you want. 85% of the time it'll do better than what you'll get with inspect element.
These two together really simplify the process.
Aiiiughm if you want more tips I can give you more but purely process-wise, this be it.
ao3 skin that i made!! (copy code under "keep reading")
it's a messy combination of pieces of code from other people's skins and my own changes
the header image is NOT MINE! it is "Pattern Galaxy Space Planets Vibrant Linear Universe" by Arncil on Redbubble, which i just used as an example for an image you could use!
here are some of the skins that i can remember using as part of this, but i've been building it for years so forgive me if i forget some:
Shortening long tag fields by Xparrot (on ao3)
Slim Shaded by AO3 (on ao3)
Lily Garden by tealtiam (on Tumblr)
AO3 Tag category coloring! by ao3css (on Tumblr)
come back here to my tips or leave a comment if you need some help customizing the code!
Background color: #26303C
Text color: #CBC6C3
Header color: #46626D
Accent color: #993F33
steps to create a new skin using this code:
log into ao3 account
go to dashboard >> skins
click "create site skin"
make sure TYPE is "site skin"
add a unique title
copy all code below
paste into field 'CSS'
click on "use wizard" at the top
copy and paste the four colors written above into their corresponding boxes
click SUBMIT
click USE
how to customize this skin:
FONT SIZE: at the very top of the code, change the "90%" to be bigger or smaller to change the font size within a fic
MAIN COLORS: to change the main colors, select "use wizard" when editing the skin and replace any of the four hex codes under "Background color:", "Text color:", "Header color:", and "Accent color:"
SECONDARY COLORS: find all hex codes within the code and change those numbers as you like! i changed all colors to match with the color palette of the header photo that i chose to make it feel cohesive
TAG COLORS: towards the end, the "relationship", "character", and "freeform" tags alternate three colors to make them easy to separate. in this skin they are all very similar, so you can change those to be whatever colors you like!
HEADER PHOTO: find the link towards the end of the code right before the warning tags and replace it with a link to any photo you like! it loops, so you don't have to worry about sizing or anything
FONT: i'm unsure how exactly to do this, but the in-fic font is currently set to Georgia Serif, so i suppose just go find that and replace it with your preferred font!
BORDER STYLES: wherever you see the code "border-style:", replace the word that comes after it with one of these options: none, solid, dashed, dotted, double, groove, ridge, inset, outset, or hidden
WARNING TAGS: at the very end of the code is a list of words or phrases that, when they appear in the tags of a fic, are highlighted in a contrasting color so that they are easy to avoid if necessary. you can add or remove those tags however you like, or change the warning color!
COPY AND PASTE ALL CODE BELOW
#workskin { font-size: 90%; } li.blurb .tags { max-height: 7.5em; overflow-y: auto; } #header { min-height: 0; } #header a, #header fieldset, #header ul.primary, #header ul.primary .current { border: 0; background: 0; } h1 a img { height: 50px; border: 0; } #header .landmark { clear: none; } #header ul.primary { background: rgba(0,0,0,0.65); border-bottom: 1px solid rgba(0,0,0,0.75); } #header ul.primary, #header ul.primary .current, ul.primary.actions a, #header ul.primary .current { color: #CBC6C3; } #header ul.primary .current, #header #search input, #header #search input:focus { background: rgba(0,0,0,0.25); color: #CBC6C3; box-shadow: inset 0 0 3px #131A2A; border-color: #131A2A; } .actions, .actions input { text-transform: lowercase; } blockquote.userstuff { font-family: "Mido", "AUdimat", "Ostrich Sans Rounded","Lucida Grande", sans-serif !important; position: relative; background: rgba(0,0,0,0.1); padding: 2%; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 0 2px rgba(0,0,0,0.4); } blockquote.userstuff:after { content: "\201D"; right: 0; top: auto; left: auto; } body, .userstuff { font-family: Mido, Georgia, serif; } .heading, .userstuff h3, .userstuff h4 { font-family: "CabinSketch", Georgia,serif; } #main .heading { color: #CBC6C3; } #inner .group, #inner .heading, fieldset, .verbose legend, table, table th, col.name, span.unread, span.replied { outline: none; background: transparent; border-color: #131A2A; border-style: double; box-shadow: none; border-radius: 2em; border-bottom-right-radius: 0; border-top-left-radius: 0; } #inner .group .group .group, col.name { border-style: double; border-color: #CBC6C3; box-shadow: 0 0 2px #000; } #inner .bookmark .user.module, #inner .wrapper { border: 0; border-radius: 0; border-top: 3px double #bbb; box-shadow: none; } .filters { font-size: 90%; } .toggled form, .dynamic form, .secondary, .dropdown { background: #fff url("/images/skins/textures/tiles/white-handmade-paper.jpg"); } a.tag, a.tag:visited, a.tag:link { display: inline-block; padding: 1px 3px; margin: 2px 0px; border: 2px solid #46626D; border-radius: 5px; } .commas li:after { content: ""; } h5.fandoms.heading { color: transparent; } .favorite a.tag { border: none; } .tags li.relationships:nth-of-type(3n+1) a.tag { background-color: #1d3954; } .tags li.relationships:nth-of-type(3n+2) a.tag { background-color: #264663; } .tags li.relationships:nth-of-type(3n+3) a.tag { background-color: #305475; } .tags li.characters:nth-of-type(3n+1) a.tag { background-color: #214154; } .tags li.characters:nth-of-type(3n+2) a.tag { background-color: #294c61; } .tags li.characters:nth-of-type(3n+3) a.tag { background-color: #31576e; } .tags li.freeforms:nth-of-type(3n+1) a.tag { background-color: #234e54; } .tags li.freeforms:nth-of-type(3n+2) a.tag { background-color: #2a585e; } .tags li.freeforms:nth-of-type(3n+3) a.tag { background-color: #316269; } .tags li.freeforms a.tag:hover, .tags li.characters a.tag:hover, .tags li.relationships a.tag:hover { background-color: #26303C; color: white; } #header .logo { display: none; } #header ul.primary { box-shadow: none; padding-top: 30px; padding-bottom: 30px; background: #FCC191 url(https://i.pinimg.com/564x/8c/bc/ae/8cbcae1760dc88ae8730566337a5d2eb.jpg); background-attachment: fixed; } li.blurb a.tag[href*="suicid"], [href*="suicide"], [href*="Suicide"], [href*="rape"], [href*="Rape"], [href*="consentual"], [href*="Consentual"], [href*="non-con"], [href*="consent issues"], [href*="Kidnapping"], [href*="kidnapping"], [href*="Canibalism"], [href*="cannibalism"], [href*="Cannibalism"], [href*="Dove"], [href*="dead dove do not eat"], [href*="murder"], [href*="Murder"], [href*="harm"], [href*="self harm"], [href*="Harm"], [href*="Torture"], [href*="abduction"], [href*="asphyxiation"], [href*="blood"], [href*="Blood"], [href*="death"], [href*="Death"], [href*="gore"], [href*="Gore"], [href*="incest"], [href*="Incest"], [href*="trauma"], [href*="Trauma"], [href*="torture"] { color: #000000; font-weight: bold; background-color: #993F33; }