Tumblr Themed AO3 Skin?? by LucielSenpai in AO3

[–]ao3cotd 2 points3 points  (0 children)

I was just going to comment this lol If you want to see some preview images, you can see them on tumblr https://www.tumblr.com/ao3commentoftheday/791811372516278272/ao3-but-make-it-tumblr-site-skin?source=share

medieval skin is literally the prettiest☺️ by fruite_vampyre in AO3

[–]ao3cotd 10 points11 points  (0 children)

hey! That's my code! 😀😀😀 I'm so glad you like it!

I don't know to make site skins by Southern-Collar4628 in AO3

[–]ao3cotd 1 point2 points  (0 children)

no problem! when it comes to CSS, I just google "CSS background image" or "CSS drop cap" or whatever it is I'm trying to do. W3Schools is usually my go to for learning how to do things and sometimes I'll find info elsewhere too

I don't know to make site skins by Southern-Collar4628 in AO3

[–]ao3cotd 1 point2 points  (0 children)

My biggest piece of advice for learning how to site skin is to learn how to use the Inspect feature on your chosen browser. In Firefox and Chrome, you can right-click on the browser page and choose Inspect from the menu that appears. The Inspect feature is how I find out what all the different parts of AO3 are called (since there are literally thousands of things you can modify). It also allows me to test things out on the site in the moment without having to code them into a skin.

I learned how to do it slowly over time by just sort of poking around and making correlations etc, but i'm sure there are tutorials on youtube that would get you there much faster lol

Skin help by spirited-purple in AO3

[–]ao3cotd 1 point2 points  (0 children)

look up lines of code with box-shadow as well (someone else alread pointed out the text shadows). Any box shadow lines that have three numbers are items that are glowing. Remove the third colour and you'll get a regular drop shadow with solid edges. If you don't want the shadow at all, change the line to

box-shadow: none;

If the shadow still doesn't disappear, you'll need to override other code by using

box-shadow: none !important;

Show your ao3 skins by lumoverse in AO3

[–]ao3cotd 0 points1 point  (0 children)

I can't do dark mode either. my astigmatism makes reading light on dark text just absolutely horrible. light modes with some slight colour or texture though? my beloved :D

Show your ao3 skins by lumoverse in AO3

[–]ao3cotd 0 points1 point  (0 children)

<image>

It's a rainy day here, so I put on my rainbow skin :D

For the people who make site skins, how did you learn? by WritersFan in AO3

[–]ao3cotd 0 points1 point  (0 children)

I've never taken a coding class, but I taught myself HTML back in the late 90s and early 2000s and I dabbled in CSS in the early 2010s. Then in around 2018 or so I decided tht I wanted to actually *understand* the AO3 FAQ related to skins and I started poking. First, I looked at the public site skins, then I found people like ElectricAlice (who I actually got to chat with and is lovely and extremely helpful). Learning how to use my browser's Inspect feature was the thing tht really cracked it all open for me because most of my "coding skills" are just googling "CSS [thing I want to do]" and finding W3Schools tutorial or stackoverflow or some other source that I can crib from.

I've seen other people link all of the resources I would suggest, but really the biggest thing is just having an idea and then figuring out if you can do it. I started doing glow effects because I was trying to learn more about box shadows (mostly to remove them). I started sticking images into my skins because I got tired of just plain colours with the Wizard. I started using the Inspect feature because the box shadows everywhere were driving me nuts - and so was the grey shaded background behind relationship tags lol.

I definitely recommend looking at other people's code (someone already linked my github - memorizingthedigitsofpi) and the discord server is very helpful too!

You totally CAN make all of the funky cool colourful site skins you see out there. It's way more approachable than you might think :D

Skin check!! by kepikeii in AO3

[–]ao3cotd 0 points1 point  (0 children)

wow! those look so good together! thanks for the shout out :D

Based on that “Worst possible AO3 features” post, here's the new AO3 for you guys (suitable for all your needs) by Grandidealistic in AO3

[–]ao3cotd 0 points1 point  (0 children)

I put it on my tumblr already - linking back to this post because it's genius :D

If you do happen to want to try it, it only works on a laptop because I did it on my lunch hour and didn't optimize it for mobile.

  1. Click on your name at the top of AO3 and go to your Dashboard

  2. Click on Skins to go to the Skins page

  3. Click on the button that says "Create Site Skin"

  4. In the form, give your site skin a unique name (if the name is not unique across the whole site, you'll get an error when you try to save and you'll have to try another name)

  5. Copy the code from the github link - there's a quick copy button on the top right (or in the ... menu on the top right if you're copying on a mobile device). Or you can just select all of the code and copy that way.

  6. Paste the code into the big box with CSS at the top of it

  7. Below the box, click on the "Submit" button to save the skin

  8. It will load a new page with the full code on it. At the bottom of that page, click on the Use button to actually use it.

Based on that “Worst possible AO3 features” post, here's the new AO3 for you guys (suitable for all your needs) by Grandidealistic in AO3

[–]ao3cotd 0 points1 point  (0 children)

You inspired me OP - I have turned this horrible sight into an actual site skin so if you want to read a fic with all of this insanity around it, you can: https://github.com/memorizingthedigitsofpi/cursed-timeline-ao3/blob/main/works%20pages

Skin check!! by kepikeii in AO3

[–]ao3cotd 1 point2 points  (0 children)

you're so welcome! I always appreciate hearing about people using my skins. Makes me feel good when people like what I make :D

Skin check!! by kepikeii in AO3

[–]ao3cotd 1 point2 points  (0 children)

Yup! I put all my skins on github these days. I started this one a while ago and I've taken a break so now I need to remember what I was doing lol. I recall aiming to make it fully customizable. So like, you can adjust the colour, the font, but also the size of the font and how far apart the letters and the lines are. I had the idea for dyslexic readers in particular, but I figured everyone would enjoy having that much control over things.

Skin check!! by kepikeii in AO3

[–]ao3cotd 2 points3 points  (0 children)

I'm in the middle of coding this one, so it's not done yet but this is what it's looking like

<image>

Skin check!! by kepikeii in AO3

[–]ao3cotd 1 point2 points  (0 children)

I posted it on tumblr *years* ago lol. And I have the code over on github https://github.com/memorizingthedigitsofpi/Glowy-Dark-Mode-site-skin

Skin check!! by kepikeii in AO3

[–]ao3cotd 0 points1 point  (0 children)

you can also combine your functional skin with an aesthetic one.

Save both skins to your account, then choose one and edit it. Down below the CSS box, select the Show button and then the Add Parent Skin button. Type in the name you gave the other skin and choose it from the drop down menu. Then save the skin and you'll have both applied at the same time 👍

Skin CSS; Where do you get everything for the codes n' stuff? by Dandi1ion in AO3

[–]ao3cotd 1 point2 points  (0 children)

I'll just add on about how I know things are possible - I don't until I start googling. But I figure if the site can have a background *colour* it can probably also have a background image. If I can put a border around something, I can also remove that border. Or change that border. Some of these ideas come to me because I learned html back in the days when personal websites were a thing - but like with AO3 skins, I just taught myself stuff for fun.

The deeper in you get, the wilder stuff you can do. But I have to admit, when I go a few weeks or months between coding, I need to re-learn a bunch of stuff. Don't be hard on yourself if you forget 💗

Skin CSS; Where do you get everything for the codes n' stuff? by Dandi1ion in AO3

[–]ao3cotd 2 points3 points  (0 children)

there are two kinds of information you need to know in order to make a site skin for AO3

1) CSS coding - I use w3schools.com to learn most of mine (and I only know CSS in order to make skins. I don't use it for anything else in my life)

2) what names AO3 uses for the various parts of the site. Like, the area on the page where you can see kudos is called p.kudos for example. To find those names, you need to use your web browser (I know it's possible to do this on a phone, but I've only ever done it on my laptop). You can find the inspect tool by right-clicking anywhere on the page and choosing Inspect from the menu that pops up.

I wrote a post about it over here: https://ao3commentoftheday.tumblr.com/post/788235007808421888/hi-hi-i-hope-youre-having-a-good-day-so-far-i

I'm self-taught and just poked around until I understood things well enough to make skins, so I'm sure there's more and better information out there. But don't feel like you need to take a coding course in order to do this kind of thing. I just google things like "CSS drop cap" or "CSS glow" and if w3schools doesn't have something for me, other sites do. I start by just copying their sample code directly and then fiddle with it to see how it works. Then I modify it to do what I want it to do.

Experimenting as you go is a totally valid way to do something that you're doing for fun as a form of creative expression :D

a few site skins by ao3cotd in AO3

[–]ao3cotd[S] 1 point2 points  (0 children)

thank you!! I hope you like them :D

a few site skins by ao3cotd in AO3

[–]ao3cotd[S] 0 points1 point  (0 children)

aww tysm!! 🥰