HTML - Fandomfan fiction

Fandom · 41 works

23 HTML - Fandom stories are open to everyone here, 78% of them complete. The average one runs about 1,700 words. Read any of them in your browser, save it as an EPUB, or listen to it.

Works

Some results are potentially explicit

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

HTML - Fandom

Digital Clock Tutorial

by One_of_Them (greenbean_paste)

"We do this not because it is easy, but because we thought it would be easy"A completely normal tutorial for making a digital timer on ao3.

General 1.5k words 2 ch Complete 73 kudos

Author/Sleep (toxic relationship) · CSS · HTML · HTML Tryhard· +1 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

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

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

AO3 Skin - Fandom+3

How to create a site skin to have gradient text

by Goddess_of_the_arena

This work will explain you which codes to add to your site skin to have certain parts of the site appear in gradient text. It also contains the codes to make each level of the dashboard and of the "sort and filter" column have a different gradient color.The second and third chapter each contain a complete site skin with gradient text ready for you to copy-paste.You can also find twenty ready-made codes for gradients in my work "Gradients for you" here.

General 2.2k words 3 ch Complete 6 kudos

CSS · Colored Text · Fanwork Research & Reference Guides · Gradient color text· +7 more

AO3 help - Fandom+3

Neon text site skin

by Goddess_of_the_arena

This site skin will give neon text to the greetings, the dashboard, the "sort and filter" column, the summary and the tags.The relationship tags have a golden halo, the character tags have a blue halo and the freeform tags have a green halo. When you hover over them, the relationship tags change to orange text with white background, the character tags turn to blue text with white background and the freeform tags turn to dark green text with white background. The codes to make the tags change color when you hover over them are in bold and highlighted in different colors in chapter 1.The greetings are in font Lucida Calligraphy.Also, each level of the dashboard has a different neon color.CHAPTER 2 contains the neon siteskin with the colors in a different order and adds emoticons to the sides of each level of the dashboard and each element of the greetings.CHAPTER 3 adds the codes to give each level of the "Sort and filter" column a different neon color and add little emoticon at the sides of each level.CHAPTER 4 contains the neon siteskin with complete black background for the whole site for those who prefer the dark mode.

General 3.6k words 4 ch Complete 6 kudos

CSS · Dark Mode Site Skin · Fanwork Research & Reference Guides · HTML· +6 more

AO3 help - Fandom+3

Wild West site skin

by Goddess_of_the_arena

This work contains a complete Wild West-style site skin, with a gradient yellowish background, brown text and amazing Wild West-themed emoji at the sides of the greetings, of each level of the dashboard and each level of the "Sort and filter" column.The site skin comes in two versions: the version in chapter 1 uses the standard Ao3 font (so there is no "font-family" line in the codes), while the version in chapter 2 uses the custom font Gashroad.I added the link for the free download of the Gashroad font in the notes at the head of chapter 2.Both versions of the site skin also change the Ao3 logo in the upper left side of the page with the image of a smiling cowboy face emoji. Also, when you hover over them, the relationship tags change to yellow background and red text, the character tags change to blue background with white text and the freeform tags change to white background and dark green text.

General 1.5k words 2 ch Complete 6 kudos

Ao3 skins · Fanwork Research & Reference Guides · Site Skins · ao3 help· +1 more

HTML - Fandom+1

HTML Test and a bit of prose

by anneblacks

Just working stuff out with the Rich Text format--keeping this up so I remember what's what and how to do things, so some excerpts from a fic and some casual Marelliana poetry.

General 154 words 1 / ? ch In progress 6 kudos

Alternate Universe - Soulmates · Poetry

HTML - Fandom+1

Confessing my love...

by EggsOnAPan

Pseudo ASCII image using text color with the one and only Nina Iseri!

General 2.9k words 1 ch Complete 5 kudos

CSS · Coding · HTML · HTML Tryhard· +3 more