CSS Help
This tag belongs to the Unsorted Tag Category.
This tag has not been marked common and can't be filtered on (yet).
Bookmarks which have used it as a tag:
Pages Navigation
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom Deadpool (Comics), Deadpool - All Media Types, No Fandom, Star Trek, Star Trek: Starfleet Academy (TV 2026), Undertale (Video Game)
07 Feb 2026
- Words:
- 93,843
- Works:
- 21
- Bookmarks:
- 4,819
-
Tags
Summary
This is a tutorial/live example on how to mimic social media in an AO3 work, specifically Twitter, Reddit, and LiveJournal.
-
- Words:
- 19,151
- Works:
- 14
- Bookmarks:
- 386
-
Tags
Summary
Newspaper work skin with responsive columns so it works on desktop AND mobile baby!
Series
- Part 2 of Works Skins
-
How to Block Tags With Site Skins (And Get Real Specific About It) by Stellar_Eclipse
Fandoms: No Fandom
25 Jun 2025
Tags
Summary
Just some info I've gathered over the past couple of weeks, about how to:
1. Block tags using Site Skins, block only fics that contain both tag A and tag B, and block fics with a tag that contains a certain phrase, unless they are a specific whitelisted tag
2. Highlight the tags in pretty colors! Or bold, or hide them!
3. Block mega-crossovers with a million different fandoms
4. Select for/block fics that are completed/rated something/have a certain category/don't have summaries
5. Block everything that doesn't have a certain tag, or one of a list of tags
6. Block orphan_account and tag block by author
7. Block only tags of specific types (fandoms, relationships, freeforms, etc.)
8. Block fics focused on a list of characters, and/or fics without any tags of a specific type
9. Block every pairing with two characters in it—case insensitive, any order, no matter how many other people are also in the tag
10. Block by number of tagsSeries
- Part 1 of Site Skins and CSS Quackery
-
Tags
Summary
This skin will make the comments of your favorite commenters all pretty with colors and images!
5 different styles that can be modified to your tastes.
Series
- Part 14 of CSS code scripts for Ao3
-
Permablocking Specific Tags - Site Skin by Eli0t
Fandoms: Fandom - Fandom, AO3, No Fandom
10 Aug 2023
Tags
Summary
It finally exists. You can block any tag you want forever! You no longer need 3rd party extensions for this!
Series
- Part 1 of AO3 Skins
- Part 1 of :has() selector
-
Tags
Summary
Popup tooltips that work well on both desktop (hover) and mobile (tap open and close). Constrained width, so best for short tooltips or translations for a couple words at the most.
Series
- Part 1 of Simbeline's Work Skins
-
Tags
Summary
Including translations for your story is a hassle, so I'm working to find an easy solution! Join me in this journey!
- PC and Mobile Friendly
- For both SHORT and LONG translations/notes
- Inline edits (no editing your work skin for every translation) -
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom Deadpool (Comics), Deadpool - All Media Types, No Fandom, Star Trek, Star Trek: Starfleet Academy (TV 2026), Undertale (Video Game)
07 Feb 2026
- Words:
- 93,843
- Works:
- 21
- Bookmarks:
- 4,819
-
Targeting specific AO3 work sections (not site) with CSS effects by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: css - Fandom, AO3
26 Jan 2025
Tags
Summary
Want to apply CSS effects (e.g.: some background color, image, or .gif) to entire sections automatically from your work skin (without having to waste precious character count within said sections)?
Wish you could adjust the font, color, highlight, alignment, etc. of the section headers themselves? Perhaps even extend the work beyond the boundaries, covering that wasted space to the sides, and even the site page header and footer regions?
No clue where to even start? Tired of trying to find which part of the work is which from peeking at other works' work skin rules, or mucking about with trial and error?
🤣 Don't Panic. 😉
Here you'll find how to aim your work skin rules at any section of your work (or combination thereof) that you want — and yes, even how to expand those effects to outside of the work area ! (Even... comments )
I read, appreciate, and reply to all of your comments — they're always welcome! ❤️
Series
- Part 8 of How to
-
Tags
Summary
A simple workskin to mimic a calendar.
Series
- Part 2 of Linwëlin's Workskins
-
Anonymous Works and How to Hide Them (or make them more prominent) by Eli0t
Fandoms: Fandom - Fandom, AO3, No Fandom
02 Feb 2023
Tags
Summary
Do you dislike seeing anonymous works in your search results? Or want a warning when you are about to click one? Your site skin can do that!
Series
- Part 4 of AO3 Skins
-
Tags
Summary
ao3 skins based on tumblr poll results
1. Red and blue and white text
2. Space Theme
3. Dark Colors theme
4. Simple Halloween theme -
How to create a work skin to highlight your text and create text boxes by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, AO3 help - Fandom, Work Skins - Fandom
25 Dec 2024
Tags
Summary
This guide will help you create your own work skins to add highlighted text and text boxes to your stories.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 highlight text (also in gradient colors!) and mixing highlight text with colored text and new fonts. You can also give the text the appearance of having been redacted by making it appear as a block of solid black.
CHAPTER 2 Text boxes, Deadpool's thought boxes and green-on-black text in the Matrix movies, making the border, text and background of your text box be in gradient colors, making the border dotted or dashed and using pictures and gifs as a border image. You can also put the text box inside a paragraph.
CHAPTER 3 creating a text box inside another text box, with also a ready-to-use code.
CHAPTER 4 putting two text boxes side by side to create the effect of journal (or book) pages.Series
- Part 3 of CSS GUIDES
- Part 3 of Goddess_of_the_arena's CSS Playground
-
How to create your work skins to have colored text by Goddess_of_the_arena
Fandoms: AO3 help - Fandom
22 Feb 2025
Tags
Summary
This is a guide to make text in color, be it for a single word, a full paragraph, several paragraphs in a row, or even the whole chapter, also in different sizes. The tutorial also contains ready-to-use codes for you to add to your work skins.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is for pure colored text.
CHAPTER 2 is for text in gradient color, both linear gradient and radial gradient.
CHAPTER 3 contains the steps to combine gradient background with gradient text. It also contains the links to each of the other guides of my CSS GUIDES series
CHAPTER 4 contains the links to eight sites where you can create your gradients and get the ready-to-copy code to paste in the CSS code of the workskin.Series
- Part 1 of CSS GUIDES
- Part 1 of Goddess_of_the_arena's CSS Playground
-
How to create a work skin to have different fonts and colors in your works by Goddess_of_the_arena
Fandoms: css - Fandom, HTML - Fandom, Work Skins - Fandom, AO3 help - Fandom
30 May 2024
Tags
Summary
This is a tutorial on how to use different fonts on Ao3, how to make them in different sizes and how to make them colored as well.
It also contains two ready-to-use codes to give your fonts a gradient effect. There are both the code for the linear gradient effect and the code for the radial gradient effect.
CHAPTER 2 contains the visual examples of every font that you find in chapter 1.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.Series
- Part 2 of CSS GUIDES
- Part 2 of Goddess_of_the_arena's CSS Playground
-
How to create a work skin for glitch effect, mirror text, vertical text, upside down text and colored blockquote by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, AO3 help - Fandom, Work Skins - Fandom
22 May 2025
Tags
Summary
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is for the text with glitching effect similar to the Zalgo font, also in color, with different fonts and highlighted.
CHAPTER 2 is for the mirror effect, vertical text and upside down text, also in color, with different fonts and highlighted.
CHAPTER 3 is to create a negative mirror text effect (here in black and white) with the text side by side.
CHAPTER 4 is to give your blockquote a colored side border, top border or bottom border (also in gradient colors or using an image), a colored background (also in gradient colors) and different margin values.Series
- Part 4 of CSS GUIDES
- Part 4 of Goddess_of_the_arena's CSS Playground
-
How to create a work skin to add underline and create line dividers by Goddess_of_the_arena
Fandoms: css - Fandom, HTML - Fandom, AO3 help - Fandom, Work Skins - Fandom
02 Sep 2024
Tags
Summary
This tutorial contains the steps and ready to use codes to add underline to your text and create text dividers.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is for underline, also mixing colored text with colored underline and in gradient colors.
CHAPTER 2 is for line dividers, also in gradient colors, with emoticon/emoji and with colored emoticons and neon effect emoticon/emoji.Series
- Part 5 of CSS GUIDES
- Part 5 of Goddess_of_the_arena's CSS Playground
-
How to create a work skin to have shadowed text, 3D text, bordered text and neon text by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, AO3 help - Fandom, Work Skins - Fandom
13 Jan 2025
Tags
Summary
This tutorial will give you the necessary steps to add shadowed text, bordered text, 3D text and neon text to your works, with ready-to-use codes available for you.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is for the shadowed text.
CHAPTER 2 is for the bordered text and 3D text.
CHAPTER 3 is for the neon text.Series
- Part 6 of CSS GUIDES
- Part 6 of Goddess_of_the_arena's CSS Playground