#css snippets

[zerafinacss]

✨ Utility Add-Ons for AO3 Site Skins

I added a file to my GitHub where I compiled various code snippets for hiding, replacing, repositioning, or modifying specific elements on AO3.

It currently contains the following:

Hide specific buttons

Hide/modify AO3 header elements

Hide statistics

Hide/modify specific tags

Hide miscellaneous elements (muted users notice, kudos list, non-English works, etc.)

Display download button for only one format

Position blurb icons in a row under the fandom tags

Miscellaneous (add a heart to romantic/sexual relationship tags, black out images in works or gif icons, etc.)

You can add the snippets to your site skins by copying and pasting the parts you want to use.

Here is the file:

site-skin-add-ons/utility-snippets.css at main · ZerafinaCSS/site-skin-add-ons

Code that can be added to the AO3 default site skin or other skins. - ZerafinaCSS/site-skin-add-ons

General instructions on how to add and combine site skins are here.

[divinector]

Drop Down Menu On Hover

[codenewbies]

Dark Neumorphism Button UI

[codingflicks]

Star Rating Widget

[webdesignclub]

CSS is the underlying language that gives websites its look. Although CSS is a straightforward language and easy to learn, it can be difficult to harness in some cases. Nothing to fear, there are workarounds that you can find online, and here are but just 10 handy ones - Web Design & Web Development

[zerafinacss]

It just occurred to me that you can make the entire AO3 site grayscale with just one CSS declaration.

Find the code in my utility snippets file on GitHub, under "Miscellaneous". But be warned that this also affects all images.

[zerafinacss]

ao3 changed their 'beta' near the logo to 'omega' for april 1st. is it possible to make a site skin that keeps it 'omega' year round? it was way to funny

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).

Edit: Since AO3 has exited open beta, the "beta" after the Website heading is completely gone now. But the code still works if you want to add it or "omega" or whatever you like back!

[zerafinacss]

hello! do you know if it's possible to change the font size for a skin but only on mobile? thank you! <3

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

Click Update