AO3 Skins and Stuff

The AO3 link will take you to the instructions, the tumblr link to the post I made about it here.

Skins that change the appearance of the entire website:

neos (AO3 | tumblr)

Skins that change parts of the website:

Replace the AO3 Icons (AO3 | tumblr)

Replace the AO3 Icons 2.0 (AO3 | tumblr)

Stats Icons With Hover Text (AO3 | tumblr)

Replace the Content Icons With Text Labels (AO3 | tumblr)

Color-Coded Tag Boxes (AO3 | tumblr)

Customize the Buttons (AO3 | tumblr)

Utility Add-Ons (AO3 | tumblr)

Hi! Unfortunately, I don't know of a way to display more than ten tags in the filter form on the right. It's not possible to do that with a site skin. :/

The only advice I can offer is to keep a list of all your tags somewhere. Alternatively, you could use browser bookmarks to save your ao3 bookmark page when filtered by certain tags (tags that aren't in your top ten, for example).

Hi! You can exclude your own page by putting #inner:not(:has(.region.own)) before each blocked tag.

Example:

Here is the code that I modified from memorizingthedigitsofpi's medieval skin

} .works-show.region div.wrapper { border: none; box-shadow: none; background: url("https://64.media.tumblr.com/d185c34072552f7956a5f2363aa609b7/fff769c58a686039-27/s1280x1920/4f084db169eb41fd339e1f656250c0b63888266b.png"); background-repeat: repeat; }

if there is anything that could help please let me know : ) tyyy

Hi! It looks like your skin is affected by an AO3 update that has caused issues with some other skins too. Try replacing this line:

.works-show.region div.wrapper { With this:

Hi! Unless you manually change the settings, your site skin will automatically be appended to both the desktop and mobile versions of the default AO3 skin. (You can view the default skin here, for example; the mobile skin is "(26) media narrow"). So you may not need to adjust anything for mobile if your skin isn't too complicated and doesn't have many layout changes.

If you do want to use media queries, AO3 offers the option to create a mobile skin and attach it to your regular skin using the parenting method. Most people who use this method don't create an entirely new skin for mobile. They just add some code to adjust things that don't work well on mobile in their main skin.

Create a mobile skin:

Create a site skin and put in the CSS code you want to use

Click on Advanced Show

Select Parent Only (this is optional, so that you can't accidentally use it by itself) and under Choose @media select only screen and (max-width: 42em)

Click Submit

Add the mobile skin to your main skin:

Go to your skins settings

Click on Advanced Show

Click Add parent skin, type in the name of your mobile skin and select it from the dropdown

Click Submit/Update

Hi! As far as I know, AO3 has removed the option to create custom kudos messages for workskins. You can only customize them with site skins. However, only you (and anyone else who applies your specific site skin, if you choose to share it) would be able to see it.

That being said, it is possible to add a gif to the kudos messages. Just be aware that you have to host it on an image hosting site like Squidge Images.

I'm modifying the code for the kudos message I previously shared to include a replaceable image. It can be a gif, but other formats work as well. You just have to replace the image url with your own.

#header nav:has(> .primary) {

order: 2;

flex: 1;

min-width: 50vw;

max-width: 100vw;

background-color: #333333 !important;

}

i would say i am 99% sure it must be working and i found the right element definer(?), through firefox. but nope, still the same.

Hello again! Without seeing your entire current code, I can only guess what might be wrong. You could try removing the background from #header .primary and defining it for #header:

Hi! I'm not sure if you've got me mixed up with someone else, because I don't know what you mean by 'your site wizard'. However, I do know how to remove those elements. The simplest way I can think of is to hide the last section of your dashboard entirely. Just remember that it's hidden, in case you ever receive a gift.

I haven't tested it extensively, so please let me know if there are any issues.

Here is the code:

Hi! You can replace the message by using a site skin, but only you will be able to see the new message. Everyone else will still see the default message. Here is the code:

One option is to simply use the Site Skin Wizard. There is a field for the work margin width, where you can enter a number such as 10 (= 10% of the page width).

If you want to add the code to an existing skin, you can use this snippet:

#workskin { margin: auto; /* reset margin (just a precaution) */ max-width: 90%; /* change text width here */ }

Hi! Yes, you can create a skin that changes the font size on mobile and add it as a parent to your main skin. Here are the instructions:

Create a mobile skin for changing font size

Go to Create New Skin

Give it a unique title, such as "Change Mobile Font Size [Your Username]"

Add this to the CSS field: body { font-size: 120%; }

Change the percentage to your preferred size (example: 120% makes the font size 120% of your browser's default font size)

Click Advanced Show

Select Parent Only and under Choose@media select only screen and (max-width: 42em)

Click Submit

Add it to your main skin

Go to the main skin you want to use and click Edit

Click Advanced Show

Click Add parent skin, type in the name of the mobile skin you just created and select it from the dropdown

Hi! Yes, that's possible! I assume you're looking for a more comprehensive option than the site skin wizard, where you can change the font for most of AO3, but some parts, like the headings, remain the same.

You can copy the part of the code for changing the fonts from my neos base skin and add it to your own skin. Look for the "FONTS" section, located relatively at the top, or use your browser's search function to search for "font-family" (without the quotation marks).

There are three parts for changing the fonts: The first one is for the main font, the second one is for headings, and the third one is for monospace fonts. Each section has a list of fonts right after "font-family", for example:

font-family: Verdana, Helvetica, "Trebuchet MS", "Lucida Sans", Arial, sans-serif, "GNU Unifont";