Whale & Orca AO3 Skin: Serene Antipathy
โ๏ฝก๐ ๐ ๐ยท๏ฝก Disclaimers : I only use my handphone when making this skin and not an expert so i apologize if there's some places that look odd and some texts are hard to read. Images and pngs are from Tumblr and Pinterest, i tried to pick carefully so there's no AI used. I used this, this and followed very little bits of this CSS codes. I take no request. Dividers by @huraxy-dividers @pixopix
๐ฆนห๐ผหโง Orca and Whaleโespecially Humpback Whaleโare known to have deep hatred towards one another. Ironically i love them both, and i want to make a skin in reverence for those beautiful creatures where they seem to coexist with each other. Blue is my favorite color and i have been in love with ocean so i'm a little bewildered how i didn't make blue/sea theme skin until now lol! Easily this is my personal favorite skin out of all the others that i made.
light mode version๐ฆช๐ชธ
Tutorial how to activate the skin + the code :
Copy the code i provided in this GitHub, there is a copy button at the top right(โขโขโข) of the code box. And here if you prefer Google doc.
โ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. 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 the Whale and Orca background image in the right border makes the texts unreadable to you when reading a fic, you can make it smaller by simply find this code โ
background: url("https://64.media.tumblr.com/66648fa986ffb5b846dc3f1e7b5a753c/a8076d81adbcf39c-6e/s2048x3072/9af7446585958b4619360f8cb3a8008b947d03b5.png"),
url("https://64.media.tumblr.com/c36b1ea9236635f6e8b5e582f8e3f590/953e5b6cb1116e5a-2a/s2048x3072/c5c322a8ff07cbc8a6902d1c9acaead850d97f82.png");
background-size: 10%, 3%;
background-position: right, left;
background-repeat: repeat-y, repeat-y;
And in background-size, change 10% to 5%(or any size that you want).
izzy806
theartofmadeline
pixelskylines
gummygunk
turnnoffyourmind
gracieabrams
