elise

🍎 Apple PNGs

🍎 Apple PNGs

I made another skin and boom—here it is！if u wanna use it, here is the code

based on this pretty skin

A '(Guest)' pfp

⋆｡𓆝 𓆟 𓆞·｡ 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🦪🪸

my ao3 skins masterlist

Tutorial how to activate the skin :

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 ↓

Yes, that’s something that can be easily done with a site skin!

I have added the code to permanently replace "beta" with "omega" or anything else you like to my utility snippets file (in the "Hide/Modify AO3 Header Elements" section).

A '(Guest)' pfp

⋆｡𓆝 𓆟 𓆞·｡ 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🦪🪸

my ao3 skins masterlist

Tutorial how to activate the skin :

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 ↓

If you want your AO3 to have a textured background (or any other image), first you need to find the background that you want to use. For this demonstration, I went to pixabay and searched for a seamless texture, and I grabbed this one, which I then modified in gimp.

The word seamless is important when you're looking for an image because the background image is going to repeat in order to cover the whole page*. As a result of that repeat, we want the sides to line up so that it appears to be one consistent texture across the site.

Once I've uploaded this texture to an image hosting site (like tumblr), I can insert it into my site skin code as the background.

Right click on the image and select copy image address from the menu that pops up. That will grab the image's URL. You can then insert that url into this code:

#outer { background: url("yourimageurl.png"); }

If you click on the ? next to CSS in the skin creation form, you can learn all of the code that AO3 allows, and if you scroll down far enough you'll see that images need to be in the formats jpg, gif, or png

Tumblr often hosts images in an pnj format, but if you erase the j and replace it with a g it works in a site skin.

If you save and use your site skin at this point, the only change from default will be the background image you've set. The rest of the site will look the same.

As someone who only does CSS for the purpose of building AO3 site skins, the way I go about it is

decide on an aesthetic

source (or create or modify) the images i want to use

choose the colours (that will probably change several times, but you've got to start somewhere)

Pick a page and start styling it.

I usually start from the homepage and branch out from there. The way that I find the names of everything that I'm trying to change is by using my browser. On a desktop/laptop, your browser has a feature called Inspect that you can access by right-clicking on the webpage. It'll show you the code used by the site and then you can find what you want to modify.

I use resources like W3Schools to learn whatever code I'm trying to do - from drop capital letters to border images to making an image look the way I want it to inside a particular area. I also do a lot of googling for things like "CSS border gradient".

To give you a much deeper dive, I've just reposted a work that I used to have on my other AO3 account. Thank you AO3 for emailing me a copy of my fics when I delete them. Above and beyond, truly 💗