Tutorial
This tag belongs to the Additional Tags Category.
Parent tags (more general):
This tag has not been marked common and can't be filtered on (yet).
Works which have used it as a tag:
Pages Navigation
-
[кулинария] Колокольчик и хризантема by fandom Abe-no Seimei 2024 (Seimei_1100), Сикигами (MeijiRomantist)
Fandoms: 陰陽師 - 夢枕獏 | Onmyouji Series - Yumemakura Baku
04 Aug 2024
Tags
Summary
Колокольчик - для Сэймэя, хризантема - для Хиромасы. Два оригинальных муссовых пирожных с подробным рецептом.
-
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
-
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 Professionally Rub Feet by 43times24plusone
Fandoms: Lalaloopsy, Papa Louie (Video Games)
07 Sep 2024
Tags
Summary
Sunny Side Up and Berry Jars 'N' Jam show the viewers how to rub a Paleteria worker's feet after she had a rough day serving all these customers of hers. (#ALFW02)
Series
- Part 2 of 43's Lalaloopsy Fan Works (Season 10)
- Language:
- English
- Words:
- 871
- Chapters:
- 1/1
- Kudos:
- 2
- Hits:
- 32
-
Brainy's guide to your first object show by Anonymous
Fandoms: Object Cringe (Web Series)
24 Sep 2024
Tags
Summary
Brainy teaches from experience how to prepare for your first competition. what to and what not to do to ensure a smooth first time competing.
Series
- Part 6 of anon's object cringe fanfiction lol
-
How to create your work skin to change the background color and text style of your story by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, Work Skins - Fandom, AO3 help - Fandom
22 Feb 2025
Tags
Summary
This tutorial contains the steps to change the background color and text style of your story and also to make every chapter have a different background color or text style.
This tutorial contains ready-to-use codes.
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 to apply the background color and/or the text style to the whole work.
CHAPTER 2 is to give every chapter a different background color and/or text style.
CHAPTER 3 is to have a default background color or text style while still giving every chapter a different effect.
CHAPTER 4 is to combine gradient background and gradient text in your work.Series
- Part 7 of CSS GUIDES
- Part 7 of Goddess_of_the_arena's CSS Playground
-
PawPunk's Awesome and Cool Class-Swap AU Tutorial by PawPunk
Fandoms: Dungeons & Dragons (Roleplaying Game), No Fandom
09 Dec 2024
Tags
Summary
Do you like my hit fanfics "The Bad Kids, If", "The Witchhunters, If", and the longer class-swap AU fics they spawned? Haha! Silly me! Of course you do, they're awesome and cool. But! Have you ever lain awake thinking "wow, I wish I could write my OWN super awesome and sexy class-swap AU"? Well, say goodbye to those sleepless nights! This is my official guide on the steps I use to generate my class-swap AUs.
-
Finished, Dropped or something else? How to make custom tags for story titles by Curvo
Fandoms: No Fandom
12 Dec 2024
Tags
Summary
A short guide on how to add tags next to fanfiction titles, so you know which stories you have already read or dropped when browsing for new ones to read.
-
Tags
Summary
Don't read this. just a test
- Language:
- English
- Words:
- 11
- Chapters:
- 3/3
- Hits:
- 16
-
Tags
Summary
My very regimented and autistic method for tagging fics. I wish I was writing this for you guys but to be honest I am posting it so I don't forget it.
This guide discusses sensitive topics, but doesn't contain any depictions of them, as it's just a tagging guide, not a true fic. More steps may be added as I think of more things I need to tag.
-
The Time Is Nao by bbs_hyperfixation
Fandoms: แค่เพื่อนครับเพื่อน | Bad Buddy: the Series (TV)
27 Dec 2024
Tags
Summary
Enjoy making your own pop-up Nong Nao card! You can modify the design to make whatever holiday you'd like to celebrate!
-
Tags
Summary
Mango Tiki Wiki and her Papa Louie OC friend, Laura, show how to dress up a pair of simple flip flops to make them more fashionable. (#DLFW19)
Series
- Part 19 of 43's Lalaloopsy Fan Works (Season 13)
-
Tags
Summary
While Merlin and Gwaine are out in the woods, they unexpectedly get taken. Gwaine panics, Merlin takes this as an opportunity to rest. Once awakened, he realised his magic won’t do, but maybe his — and Gwaine’s — charm would do the trick.
Or: Merlin and Gwaine are kidnapped by some haphazard criminals, and flirt their way out. Ft. Bickering
-
How to make a sandwich from scratch by 4CrowsInATrenchcoat, Y0uJustL0stTheGame for 4CrowsInATrenchcoat
Fandoms: Original Work, How to make a
09 Jan 2025
Tags
Summary
Me explaining how to make a sandwich, but...
-
How to Make Honkai: Star Rail Chat Messages by html_hell (jihnari)
Fandoms: 崩坏：星穹铁道 | Honkai: Star Rail (Video Game), No Fandom
13 Jan 2025
Tags
Summary
This is a tutorial on how to mimic HSR chat messages on AO3.
-
Mystery Work
Part of Testing ground
Summary
This is part of an ongoing challenge and will be revealed soon!
-
How to target specific elements of your work (for work skins) by hearker (heark)
Fandoms: HTML - Fandom, Work Skins - Fandom, AO3 help - Fandom, No Fandom, css - Fandom
15 Aug 2025
Tags
Summary
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 Title
CHAPTER 2 - Author Name
CHAPTER 3 - Summary
CHAPTER 4 - Notes Part 1
CHAPTER 5 - Notes Part 2
CHAPTER 6 - Gifts
CHAPTER 7 - Inspired By
CHAPTER 8 - Chapter Title
CHAPTER 9 - Series
CHAPTER 10 - Selecting Multiple Headings
CHAPTER 11 - Body Text
CHAPTER 12 - Preface GroupNote: 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.
-
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
Assorted HTML Projects I have been working on. Some of them are still WIPs, but I figured I'd share anyway.
Things currently contained:
a CD
a Polaroid
a scrolling phone conversation
a receipt
some floppy disks
a VHS tape
a library card
a post card
many many hours of labor interspersed with screaming
a cassetteSeries
- Part 1 of Misuse of Company Time
- Part 6 of HTML Hatecrimes
-
Tags
Summary
"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.
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Tags
Summary
Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.
Series
-
Tags
Summary
Based on phyripo's guide, with some usability improvements made to reblogs and photoset creation.
-
Tags
Summary
Have you ever wanted to put a Tumblr post in your fic? Even if you haven't, you now can!
This is a tutorial on how to mimic different Tumblr post types using a work skin, without using screenshots.
-
Tags
Summary
Primarily just where I share work skin code and discuss ways to improve the Ao3 experience, including:
- Twitter and Instagram like posts
- Non iOS messaging systems
- Avatar and image formatting for script formats.
- Search engine interfaces
- Documentation on AO3 Site SkinsSeries
-
How to Override the Archive's Automated Chapter Headers by C Ryan Smith (AiedailEclipsed)
Fandoms: No Fandom
25 Nov 2018
Tags
Summary
This is a tutorial/live example on how to override the Archive's automated chapter heading system and define your own (eg remove "Chapter 1: Chapter Title" and insert "Act 1, Verse 1" instead).
-
Tags
Summary
a work skin that mimics the program Discord (for chatfics or fics that feature use of it!)
made this skin over a couple days; it won't look good on mobile or with creator's style disabled but the html is pretty easy to customise!
(Note: some folks in the comments have been kind enough to share some fixes for a few of the problems!)If you use it, crediting and linking back here so other people can find it is appreciated :)
EDIT: I haven't updated this in quite some time so I'm giving blanket permission for people to share their own fixed and improved versions of the code! Just link back here so people can find some help for how to use it. happy writing!
-
How to Mimic Letters, Fliers, and Stationery Without Using Images by La_Temperanza
Fandoms: No Fandom
27 Jul 2017
Tags
Summary
This is a tutorial/live example on how to mimic the look of letters, fliers, and stationery (as well as other forms of written media) without using images. For all your epistolary fic needs.
Series
- Part 17 of AO3 Work Skins/Tutorials
-
Tags
Summary
This is a tutorial/live example on how to create a "Choose Your Own Adventure" fic. While this has been explained before (see here), this particular tutorial shows you how to use a work skin to hide the next parts from the reader until they click through to get to them.
Series
- Part 16 of AO3 Work Skins/Tutorials
-
Tags
Summary
This is a live example of how an author can create linked footnotes in their work with only a little bit of HTML and no workskins required. This is best viewed by clicking "Entire Work". While I've included the actual coding in bold and italic once you click "Hide Creator's Style", there's a more detailed explanation here.
EDIT 6/28/17: The third chapter now shows how to use anchor links as an index/table of contents.
Series
- Part 6 of AO3 Work Skins/Tutorials
-
How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile) by La_Temperanza
Fandoms: No Fandom
22 May 2017
Tags
Summary
This a tutorial/live example on how to have text change or appear once a cursor is hovering over it. Helpful for pop-up spoilers, language translations, quick author's notes, etc.
Series
- Part 15 of AO3 Work Skins/Tutorials
-
Tags
Summary
Bored with the default page dividers? This is a tutorial/live example on how customize your page dividers with no images needed (though I do show you how you could use images if you wanted to do such a thing).
Series
- Part 9 of AO3 Work Skins/Tutorials
-
How to Make iOS Text Messages on AO3 by CodenameCarrot, La_Temperanza
Fandoms: No Fandom
10 Apr 2016
Tags
Summary
This is a tutorial/live example on how to mimic iOS text messages on AO3 without the need to use images. There's also a chapter on how to have emojis displayed on AO3 as well.
Series
- Part 3 of AO3 Work Skins/Tutorials
-
Tags
Summary
This is a tutorial/live example on how to mimic email windows on AO3 without the need to use images.
Series
- Part 12 of AO3 Work Skins/Tutorials
-
How to Mimic Author's Notes and Kudos/Comment Buttons by La_Temperanza
Fandoms: No Fandom
20 May 2017
Tags
Summary
Anonymous on tumblr: do you have a skin that would mimic the author’s notes and review/kudos buttons section from the end of a fic? the desired effect being that the fic could go on after the “end” of the fic, so after the author’s notes and review/kudos buttons
Here's a tutorial/live example to do just that, with some of the buttons actually functioning. I'll explain more inside!
Series
- Part 14 of AO3 Work Skins/Tutorials
-
How to Make iOS Text Messages on AO3 by CodenameCarrot, La_Temperanza
Fandoms: No Fandom
10 Apr 2016
Tags
Summary
This is a tutorial/live example on how to mimic iOS text messages on AO3 without the need to use images. There's also a chapter on how to have emojis displayed on AO3 as well.
Series
- Part 3 of AO3 Work Skins/Tutorials
-
Tags
Summary
This is a tutorial/live example on how to create a "Choose Your Own Adventure" fic. While this has been explained before (see here), this particular tutorial shows you how to use a work skin to hide the next parts from the reader until they click through to get to them.
Series
- Part 16 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 1,769
- Chapters:
- 1/1
- Collections:
- 7
- Comments:
- 77
- Kudos:
- 1,173
- Bookmarks:
- 1,025
- Hits:
- 50,852
Bookmarked by Elf (Elf_Herself)
27 Oct 2019
Bookmarker's Tags:
Bookmarker's Notes
Guide to coding Choose Your Own Adventure stories on AO3. Most excellent.
-
Tags
Summary
Embedding tutorial
-
Tags
Summary
Embedding tutorial
-
How to Make iOS Text Messages on AO3 by CodenameCarrot, La_Temperanza
Fandoms: No Fandom
10 Apr 2016
Tags
Summary
This is a tutorial/live example on how to mimic iOS text messages on AO3 without the need to use images. There's also a chapter on how to have emojis displayed on AO3 as well.
Series
- Part 3 of AO3 Work Skins/Tutorials
-
Tags
Summary
This is a tutorial/live example on how to create a "Choose Your Own Adventure" fic. While this has been explained before (see here), this particular tutorial shows you how to use a work skin to hide the next parts from the reader until they click through to get to them.
Series
- Part 16 of AO3 Work Skins/Tutorials