AO3 Skin based on @reignpage jjk fanfic "Crash Landing On That D!ck!" MDNI
A '(Guest)' pfp! I tried to put an image for account without pfp too but it broke my coding lmao
╰┈➤ thank you nan11 they had been helping me throughout the last touch working on this skin, if not then i don't think the skin would be as polished as this(they spend approximately 2 days patiently guide me).
╰┈➤ Disclaimers : This is my first AO3 skin so the coding are unorganized, first time attempted coding too, kinda nervous. I do not plan to make another skin. pngs & icons are from Pinterest and Tumblr, no AI used on this skin. All fics mentioned does not belong to me, nor the beautiful dividers that i used on this post, credit to @uzmacchiato and @enchanthings for the dividers. I made this skin on mobile, so if other versions(iPad, laptop, etc.) are messed up, i can't help you with that😔 i'm broke. I followed this css in the beginning of my coding.
・✿ side note : i include all 5 love interests main colors, most are more hidden, except To-Ji his color is green the same as the masterlist aesthetic so he automatically more prominent than others. There's a few easter eggs thrown around in this skin that CLOTD readers might notice.
Tutorial how to install the skin + the link to the skin codes below ↓
Tutorial how to activate the skin :
Copy the code provided in this GitHub, there is a copy button at the top right(•••) of the code box.
Sign to your AO3 account, after that go to "Dashboard".
On your "Dashboard", tap on a section called "Skins".
On the "Skins" page, tap on the button labelled "Create Site Skin".
Give your site skin a unique title, i usually use 2-4 word for the skins that i saved, for example i named this CLOTD skin "EdenX Pheromones"(don't ask😹). IF YOUR SKIN NAME IS NOT UNIQUE, YOU CAN'T SAVE THE SKIN.
Paste the codes you copied from my GitHub into the "CSS" box.
When you're done, scroll to the bottom of the page and click a button labelled "Submit". This will save your site skin and take you to a new page where you can see the title of your skin as well as all of the code.
Click "My Site Skin" and you can see the skin are added, press "Use" to activate it.
If you don't want to have the blobfish and dodo bird border(i put them for shits and giggles anyway lol), erase this specific code :
So I created an ao3 skin and I would like to share it for anyone who wants to use it 💞
Here’s the code >>>
•Wizard Settings
Can be overridden by custom CSS :
Background color:
#FCEBFC
Text color:
#AF7E98
Header color:
#B34A81
Accent color:
#EABEE4
•CSS:
:root {
--background-color: #f9e3f2;
--text-color: #4d494a;
--form-background: #fdeff5;
}
body {
font-family: sans-serif;
}
.wrapper {
background-color: white;
border: 2px solid #f3c2e3;
}
#header {
padding: 10px;
margin-bottom: 15px;
}
#header a {
text-decoration: none;
}
#header a:hover {
text-decoration: underline;
}
#header ul.navigation.actions.user.signed-in {
display: flex;
justify-content: flex-end;
padding: 10px;
}
#main {
padding: 20px;
}
.heading {
padding: 8px;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"],
input[type="date"],
textarea,
select {
border: 1px solid #f3c2e3;
padding: 8px;
margin: 5px 0;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}
.button,
input[type="submit"],
button {
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 4px;
margin-bottom: 5px;
}
.button:hover,
input[type="submit"]:hover,
button:hover {
background-color: #e687b0;
}
#new_work_form .actions .button {
border: none;
padding: 10px 20px;
margin: 5px 5px 5px 0;
cursor: pointer;
border-radius: 4px;
}
.actions .button.current {
border: none;
padding: 10px 20px;
margin: 5px 5px 5px 0;
cursor: pointer;
border-radius: 4px;
}
#work_search_form .submit .button {
border: none;
padding: 10px 20px;
margin: 5px 0;
cursor: pointer;
border-radius: 4px;
}
#work_search_form .submit .button:hover {
background-color: #e687b0;
}
I decided to write it down for easier access🌸
I’ll leave a Reddit link below ⬇️ that explains how to use the code if it’s your first time easily. Credit to @tired-library-ghost on Reddit for this amazing explanation ❤️
HOw did u make your ao3 dashboard look like that 👀 so sorry if this is a dumb question, i just dont know anything abt customizing ao3
ps. i will be reading your spn fics :)))
pps. hope ur having a good week :)
Omg I’m actually so glad you asked this so I can have a post saying how I’ve answered it before but just in comments and it gets tiring to say over and over so hopefully a post will do!! Also thank you for reading my fics and I hope you are having a good week too!!
tangentwithtanner
titsay
2087
