ao3.life

css - Fandomfan fiction

Fandom · 45 works

34 css - Fandom stories are open to everyone here, 74% of them complete. The average one runs about 2,800 words. Read any of them in your browser, save it as an EPUB, or listen to it.

Work Skins - Fandom+1

Fonts, and colors, and work skins, oh my!

by Charles_Rockafellor

Explains: ● how to make a work skin; ● how to colorize text and circle words and highlight backgrounds (examples in head-note), and change and resize your fonts; ● the CSS code for diacritics to render properly, e.g.: “ầ” & “ồ” (with diacritics not superimposed), or “ị” (with underdot directly beneath, not kerned to the left), without breaking words such as “gầu” or “vịt” (using a monotype font for these letters would create gaps to each side of the ầ or the ị). Head-note has corrected examples; ● site skin addenda to block / shrink tags, and block authors / works.Full code is included.If you're interested in CSS effects in your summary, then please see How to Override the Archive's Automated Chapter Headers and Bleed Gold.I read and appreciate (and try to reply to) all of your comments (they are always welcome)!𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️

General 12k words 1 ch Complete 491 kudos

Background - Freeform · Backgrounds · CSS · Coding· +16 more

Unspecified Fandom+4

CSS in Testing

by InfinitysWraith

This is a flaming dumpster filled with CSS and HTML experiments. It's not instructional, but I post the code and my own explanations for both our sakes. Feel free to steal the code or ask me questions- I don't know what I'm doing. :)(Pics are mine though)I'm not going to say I take requests, but I'm always looking for inspiration.

General 18k words 16 / ? ch In progress 191 kudos

Background Overlays · CSS · Changing Ao3's Preset Headers: Author Notes/Chapter Titles/Fic Titles/Summaries/etc. · Changing the Appearance of Text· +21 more

css - Fandom+20

How to create your work

by Goddess_of_the_arena

This is a little guide that I decided to write for all the fellow writers here who want to change the color of their text, be it for a single word of a full paragraph. I wanted to add my own work skins to the public list, but the site doesn't allow it anymore for whatever reason, so the next best thing is to write this guide for you all!Now with three more color codes added for your skins!

General 2.4k words 2 ch Complete 177 kudos

tutorial · Font color · Gradient color text · Fanwork Research & Reference Guides· +11 more

css - Fandom+1

Targeting specific AO3

by Charles_Rockafellor

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! ❤️

General 19k words 1 ch Complete 33 kudos

CSS · QRL · roadmap · What's where· +20 more

HTML - Fandom+4

How to target specific

by hearker (heark)

This is a guide to help you precisely target elements in your work skins using CSS selectors. It doesn't focus on styling or adding cool effects!! This guide teaches you how to identify and select the exact elements you want to style. CHAPTER 1 - Work TitleCHAPTER 2 - Author NameCHAPTER 3 - SummaryCHAPTER 4 - Notes Part 1CHAPTER 5 - Notes Part 2CHAPTER 6 - GiftsCHAPTER 7 - Inspired ByCHAPTER 8 - Chapter TitleCHAPTER 9 - SeriesCHAPTER 10 - Selecting Multiple HeadingsCHAPTER 11 - Body Text Note: This guide contains custom CSS. It's not necessary for the guide, it's only cosmetic. If you want to disable it, click "Hide Creator's Style" at the top.

General 1.7k words 11 / ? ch In progress 33 kudos

Fanwork Research & Reference Guides · Work Skins · Work Skin · tutorial· +6 more

HTML - Fandom+7

How to create a work

by Goddess_of_the_arena

This guide will help you create your own work skins to add highlighted text and text boxes to your stories.CHAPTER 1 contains the instructions (and codes) to highlight text and to mix highlight text with color 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 contains the instructions to make a text box in your work, with ready-to-use codes for you. There is also the code to make the background of the textbox in rainbow colors. You can also make your text look like the green-on-black text in the Matrix movies.IMPORTANT: Today 18 July 2024 I added to chapter 2 the correct codes to make Deadpool's thought boxes, both the code for the yellow thought box and the code for the white thought box.

General 2.8k words 2 ch Complete 29 kudos

highlights · CSS · Work Skins · Work Skin· +18 more

Ao3-Skins+2

Css in Testing: Second in the Series

by InfinitysWraith

𝔚𝔢𝔩𝔠𝔬𝔪𝔢 𝔱𝔬 𝔭𝔞𝔯𝔱 𝔱𝔴𝔬 𝔬𝔣 𝔴𝔥𝔞𝔱 𝔦𝔰 𝔫𝔬𝔴 𝔞𝔭𝔭𝔞𝔯𝔢𝔫𝔱𝔩𝔶 𝔞 𝔰𝔢𝔯𝔦𝔢𝔰 𝔟𝔢𝔠𝔞𝔲𝔰𝔢 ℑ 𝔟𝔯𝔬𝔨𝔢 𝔰𝔬𝔪𝔢𝔱𝔥𝔦𝔫𝔤 𝔦𝔫 𝔪𝔶 𝔩𝔞𝔰𝔱 𝔚𝔬𝔯𝔨 𝔖𝔨𝔦𝔫 𝔞𝔫𝔡 𝔠𝔞𝔫'𝔱 𝔞𝔡𝔡 𝔞𝔫𝔶𝔱𝔥𝔦𝔫𝔤 𝔪𝔬𝔯𝔢 𝔱𝔬 𝔦𝔱 :)𝔜𝔬𝔲'𝔯𝔢 𝔴𝔢𝔩𝔠𝔬𝔪𝔢 𝔱𝔬 𝔞𝔰𝔨 𝔮𝔲𝔢𝔰𝔱𝔦𝔬𝔫𝔰, 𝔰𝔱𝔢𝔞𝔩 𝔠𝔬𝔡𝔢 𝔬𝔯 𝔬𝔣𝔣𝔢𝔯 𝔪𝔢 𝔦𝔫𝔰𝔭𝔦𝔯𝔞𝔱𝔦𝔬𝔫. 𝔍𝔲𝔰𝔱 𝔡𝔬𝔫'𝔱 𝔱𝔞𝔨𝔢 𝔪𝔶 𝔞𝔯𝔱𝔴𝔬𝔯𝔨 𝔴𝔦𝔱𝔥𝔬𝔲𝔱 𝔞𝔱 𝔩𝔢𝔞𝔰𝔱 𝔩𝔦𝔫𝔨𝔦𝔫𝔤 𝔪𝔢 𝔶𝔬𝔲𝔯 𝔣𝔦𝔠 ;)ℑ𝔣 𝔶𝔬𝔲 𝔥𝔞𝔳𝔢𝔫'𝔱 𝔞𝔩𝔯𝔢𝔞𝔡𝔶, 𝔱𝔞𝔨𝔢 𝔞 𝔩𝔬𝔬𝔨 𝔞𝔱 𝓟𝓪𝓻𝓽 𝓞𝓷𝓮 𝔣𝔬𝔯 𝔪𝔬𝔯𝔢 𝔭𝔯𝔬𝔧𝔢𝔠𝔱𝔰.

General 7.2k words 3 / ? ch In progress 29 kudos

CSS · Coding · Fanwork Research & Reference Guides · HTML· +6 more

css - Fandom+5

How to create a work

by Goddess_of_the_arena

I recently found out how to use different fonts on Ao3, how to make them in different sizes and how to make them colored as well, so I wrote this guide, seeing that my guide to have colored text seems to be useful to many fellow writers. I hope this guide can be of help to you all as well! ^-^I also added the explanation and 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.

General 1.8k words 2 ch Complete 25 kudos

A guide for creating and using work skins · coding to change the font · coding to modify the font type size and color · Add new fonts with a gradient effect· +14 more

Work Skins - Fandom+1

Notification test

by EggsOnAPan

Test for notification/dropdown menu

General 3 words 1 ch Complete 13 kudos

CSS · Dropdown Menu · HTML · Notification

HTML - Fandom+1

RNG in site skins

by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)

〽  ♪  ♫Do you want to build a site skin...?  Come on, let's go RNG⁠ ⁠!    ♫  ♪ 1950s TV announcer voice cuts in: Is that you whom I see, staring wistfully at flashy websites with eye-bleeding '90s randomization, never knowing what the next site in the webring might bring?  Or how about you — yes, you, right there, reading this — do you yearn to expand the limitations of work skin RNG past the 500K char count, and you're not sure of where to turn?  Well, do I have a deal for YOU! Yes, my friends, you, too, can have the random surprise package of your dreams, with this handy-dandy never-before-seen unlimited time offer of one RNG Site Skin introductory proof of concept for the low, low, low price of a kudos and a comment (not that I'd complain about shares, subs, and bookmarks 😉)! How whoa can you go?   *  Reader participation required. Bonus: Target n-tuple works with totally different rules from one single skin. Cautionary tale: not 8 new RNG sources in DOM, only page source!

General 3.7k words 1 ch Complete 13 kudos

CSS · CSS abuse · Fanwork Research & Reference Guides · HTML· +8 more

AO3+3

SITE SKIN: Blue Icons

by Gay_4_Space

Modifies most of the red site icons into blue ones.The only ones unaffected are the main logo in the header and the fem-slash one.

General 646 words 1 ch Complete 10 kudos

Coding · ao3 - Freeform · code · site skin

AO3 CSS+2

Inside, Outside, Upside-down

by Charles_Rockafellor

I threw this together overnight (and have tweaked it some since then).  Just applying a few little CSS party tricks that I've learned or developed along the way... 😉My tricks aren't revealed in the narration, but since this is a How To series, you should be able to ferret them out by now — and if not, then take it as your homework challenge! ❤️Use your 1337 haX0r Wiz zen skillz. Click for keynote  Best viewed on a COMPUTER browser with a MOUSE, not a 'phone where some effects will be missed or simply not optimized (though there are a couple of surprises that appear on iPhone [not Android] rather than desktop browsers). ⚠️ CAUTION, beware of audio from invisible video; see notes. ⚠️ Cf. notes in work skin for issues w.r.t. different approaches used in this work.

General 420 words 5 / ? ch In progress 9 kudos

CSS · CSS abuse · Fanwork Research & Reference Guides · HTML· +3 more

css - Fandom+3

Gradients for you

by Goddess_of_the_arena

This little piece contains twenty new gradient effects, each with an example and the code for the gradient effect, that can be copy-pasted in the code for the gradient colored text, or in the code for the text box, or the code for the line divider.You can find the tutorial for colored text here, the tutorial for text boxes here and the tutorial for line dividers here.All you need to do to use the codes in this piece is to copy the chosen gradient and paste it in the line background for the colored text and for the line divider, while you need to paste it in the line background-color for the text box.

General 1.6k words 2 ch Complete 8 kudos

CSS · HTML · Ready to use codes · gradient codes· +1 more

HTML - Fandom+2

Personal Repository: my colors

by LittlePotato_reader

HTML Color Names. There are a total of 140 colors with names in the HTML. All of them work in AO3!!!! (obviously).chapters1. HTML Color Names.2. HTML Color Groups.3. box-shadow. [exploring/experimenting with the Workskin]4. #rrggbb = #rgb

General 897 words 4 ch Complete 8 kudos

CSS · CSS Testing · HTML · html testing· +1 more

AO3 Abuse+2

Google Docs Site Skin (v1.0 desktop only)

by HumorousBrine

A skin that lets your AO3 look like Google Docs. Why? Because it's funny. It's not perfect, but quite functional (I think) and ready for use. Seeking users to use this skin in real contexts and give feedback. Will update with later versions; the latest version will be the first chapter, while earlier versions are kept for posterity. Feel free to use and modify the code with credit.

General 3.2k words 1 ch Complete 7 kudos

CSS · Site Skins

AO3 help - Fandom+4

How to add emoticon and emoji to your story title, username, chapter title, notes and summary

by Goddess_of_the_arena

This guide will give you the codes to add cute emoticon (also in color!) and emoji to your story title, to your username, to the chapter title, to the summary and to the notes.It contains ready-to-use codes. You can also see right away the effect of every code in the work.Chapter 2 will explain how to add different emoticon/emoji to every chapter title.Also, check out heark/hearker's guide here to know how to target the elements of a story (title, username, summary, notes and more)!

General 852 words 2 ch Complete 7 kudos

CSS · Fanwork Research & Reference Guides · HTML · how to· +3 more