Actions

Work Header

Tide: a flat and clean skin for Ao3

Work Text:

Hello, I bring a new minimal clean skin.

Tide is a skin I made for myself. Because I need the absolute void of nothingness to feel somewhat content. idk. Less elements the better for me or I get antsy.

But it's somewhat elegant, and more modern than the actual default ao3 skin so it might be of interest to someone else! Hence I'll publish it. With a dark version as well because I know people like dark modes. (I'm definitely not a dark mode kind of girl, it gives me so much headache, idk)

And Ao3 gives me the absolute control of making it look exactly like I want it to look and I understood so many things while trying to make my dyslexia friendly skin so I could improve a lot on my previous attempt of a minimal skin.

Some features of the Tide skin

You'll notice that most of these features are done for the only reason that I like them this way. As I said, this is 100% self indulgent skin made for myself but I think some people might like it as well. I'll try to make a small guide (later) to change some stuff so that you can personalize the skin to your tastes, but it will take a bit of time because I need to clean the code up and comment it all the same way I did with the dyslexia skin.

  • Everything is as clean as I could make it. I removed stuff and visual clutter everywhere I found it.
  • a restricted width of the layout. This is something I learned from doing the dyslexia skin: smaller width help A LOT with reading.
  • I put very delicate color gradients everywhere. Not for any reason in particular except that: I LIKE THEM.
  • I played a lot with how to display tags in a way that they can be different from links and other parts of the website. Hopefully they will be more readable than the wall of text of the default skin!
  • I slimmed down the header because I wanted it clean.
    • to be completely honest my version doesn't even have the searchbar (because I find that particular search here on ao3 incredibly useless if not at times damaging. The search work or search tag menu option are both way better) but I felt that I couldn't really publish it like this. (I explain how to remove it at the bottom of this post)
  • I changed the works stats into icons. Not for any other reason other than the fact that I want less wordy stats.

Previews

tide-light-01
tide-light-02
tide-light-03
tide-light-mode-mobile
tide-dark-01
tide-dark-03
tide-dark-02
tide-dark-mode-mobile

Install the skin

Ok, this is a tiny bit longer than your usual 'install skin' tutorial, because it has a separate skin for mobile and also one for iPad/tablet (but the iPad one is optional). But I wanted to make the best experience possible for reading on mobile as well and this is the simplest way to do it. So, you will create 3 different skin and connect them through the parent option. I'll explain every single step!!

Don't worry if you mess it up at ANY point. You can go back to the default ao3 skin by going down to the bottom of the page and click on 'choose skin'.

The Main skin

  • Make sure you're logged in your account on AO3
  • go to my dashboard and then click on Skins (in the menu on the right)
  • click on the button create new skin, yes, a second one.
  • Make sure Type is Site Skin
  • Add a Title to your skin. Those titles should be unique across the site so, something like 'YOURUSERNAME-minimal' should do fine.
  • This is the main skin, the one that has all the colors and everything.
  • Select and Copy ALL the code you'll find in here:
  • Paste the code in the field 'CSS'
  • click SUBMIT
  • now the next step

Ipad/tablet Fix

You can skip this if you do not read on tablet. If you skip it the site will work anyway on iPad by the way, it just makes the reading experience a bit better.

  • go back to to my dashboard and then click on Skins (in the menu on the right)
  • click on the button create new skin
  • Make sure Type is Site Skin
  • Add a Title to your skin, making sure you write that it's the iPad fix! Those titles should be unique across the site so, something like 'YOURUSERNAME-ipad-fix' should do fine. Remember it!
  • Select and Copy ALL the code you'll find in here (the code is the same whether you are going to use light mode or dark mode)
  • Paste the code in the field 'CSS'
  • Click on Advanced 'Show'
  • You know the part where there's "Media" and a lot of options? Scroll down the list until you find only screen and (max-width: 62em), it should be one of the last in the list and check it!
  • click SUBMIT

Mobile Fix

Now the final skin!! This makes a lot of changes in the menu and other stuff so that it is properly paginated on mobile!

  • go back to my dashboard and then click on Skins (in the menu on the right)
  • click on the button create new skin. Yes a third one!
  • Make sure Type is Site Skin
  • Add a Title to your skin, making sure you write that it's the mobile fix! Those titles should be unique across the site so, something like 'YOURUSERNAME-mobile-fix' should do fine. Remember it!
  • Select and Copy ALL the code you'll find in here (the code is the same wether you are going to use light mode or dark mode)
  • Paste the code in the field 'CSS'
  • Click on Advanced 'Show'
  • You know the part where there's "Media" and a lot of options? Scroll down the list until you find only screen and (max-width: 42em), it should be one of the last in the list and check it!
  • Then, the most important part: you need to connect the other two skins you just saved!
  • There's a part in the 'advanced section' where you have Parent Skins. Click on the button "Add parent skin". It should add a field called 'Parent #1' where you can type stuff.
  • type the name of the main skin you used before 'YOURUSERNAME-minimal' and select it.
  • Now click on "add parent skin" again and add a second skin!
    • type the name of the iPad fix skin you used before 'YOURUSERNAME-ipad-fix' and select it.
  • click SUBMIT
  • Now click on USE
  • AND you should be grand.

Check on the mobile if it looks good! The titles should be properly formatted and readable with the icons below the title:

tide-right-01

And not like this all shrinked down and unreadable:

tide-wrong-02

If it looks like this it means that something went wrong on the mobile fix installation. Please check these things:

  • That you actually installed a second skin for the mobile-fix following the steps I talked about earlier
  • That you didn't misplace accidentally the two different codes for the mobile fix and the actual skin! They are two different codes and you might get them confused! (I did it tons of times myself!) (actually three with the iPad skin! I know it's confusing! Sorry!)
  • That the mobile-fix skin is set as only screen and (max-width: 42em) in the Media Advanced option.
  • and the iPad-fix one is set as only screen and (max-width: 62em) in the Media Advanced option.
  • That the actual skin (and the iPad skin) are set as a parent in the mobile-fix skin. They need to be linked!
  • That you are using the mobile-fix skin and not the base skin.

How to remove the searchbar in the header.

  • go back to my dashboard and then click on Skins (in the menu on the right)
  • Search the skin you named 'YOURUSERNAME-minimal' (the main one basically) and click on edit
  • add at the bottom of the whole CSS this code:
  #header .search {
  display: none !important;
}

  • And then Update