Skins Tutorials: How to

(Closed, Unmoderated)

Recent bookmarks

  • Public Bookmark *

    All the Emoji by

    Fandoms: No Fandom  

    17 Apr 2016

    Tags
    Summary

    As of April 2016, The database that stores works on A03 does not allow emoji. If you try to add an emoji it will end your story there. Any words after the emoji? Poof. Gone. This is a known, if poorly advertised, issue with the archive.

    There are some workarounds; you can find them in: How to Make iOS Text messages on A03. But here? Here is for ALL THE EMOJI*.

    10 chapters of emoji tables, each with the HTML for putting the emoji into your work and the CSS for putting it into your workskin. Copy-Paste baby. Copy-Paste.

    *Does not contain the 2016 Unicode release. You'll have to come up with the code for pickle yourselves.

    (Note, because this is 10 chapters of emoji tables, here is a link to the Index Tables (chapter 1) to speed up load times and reduce confusion if you have preferences set to "entire work.")

    Series
    Language:
    English
    Words:
    33,325
    Chapters:
    11/11
    Collections:
    4
    Comments:
    54
    Kudos:
    357
    Bookmarks:
    406
    Hits:
    28,229
    Bookmarked by kiarcheo

    28 Nov 2025

    Bookmarker's Tags:
    Bookmarker's Collections:
    Bookmarker's Notes

    All the Emoji by CodenameCarrot
    Fandoms: No Fandom

     

    As of April 2016, The database that stores works on A03 does not allow emoji. If you try to add an emoji it will end your story there. Any words after the emoji? Poof. Gone. This is a known, if poorly advertised, issue with the archive.

    There are some workarounds; you can find them in: How to Make iOS Text messages on A03. But here? Here is for ALL THE EMOJI*.

    10 chapters of emoji tables, each with the HTML for putting the emoji into your work and the CSS for putting it into your workskin. Copy-Paste baby. Copy-Paste.

    *Does not contain the 2016 Unicode release. You'll have to come up with the code for pickle yourselves.

    (Note, because this is 10 chapters of emoji tables, here is a link to the Index Tables (chapter 1) to speed up load times and reduce confusion if you have preferences set to "entire work.")

     

    https://archiveofourown.org/works/6580324?view_full_work=true

  • Public Bookmark *

    How to create your work skins to have colored text by

    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
    Language:
    English
    Words:
    6,207
    Chapters:
    4/4
    Collections:
    1
    Comments:
    180
    Kudos:
    442
    Bookmarks:
    302
    Hits:
    13,111
    Bookmarked by kiarcheo

    23 Nov 2025

    Bookmarker's Tags:
    Bookmarker's Collections:
    Bookmarker's Notes

    How to create your work skins to have colored text by Goddess_of_the_arena

    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.

    https://archiveofourown.org/works/51309787?view_full_work=true

  • Public Bookmark *

    P̶e̶r̶s̶o̶n̶a̶l̶ Experiment with HTML and CSS by

    Fandoms: No Fandom  

    26 Jan 2026

    Tags
    Summary

    This is a personal experiment with HTML. It is a very limited list with what I find useful.
    Update: Somehow I find more and more stuff useful, so this list is not that limited (and not that private) anymore. I'll improve it with time and according to my needs and interests.

    So far that's posted:
    Part One: Basics
    Part Two: Lines
    Part Three: Footnotes and Links
    Part Four: Columns and Skins
    Part Five: Pictures
    Part Six: Videos (and gifs)
    Part Seven: Choose Your Own Adventure
    Part Eight: Chapter Title
    Part Nine: The Title, the Username, and Links
    Part Ten: Kudos Message
    Part Eleven: Newspaper Article
    Part Twelve: Content Notes and Spoiler (NEW: Opacity and hover translations)
    Part Thirteen: Playground for Jinx (glitch text, color, table)
    Part Fourteen: Text generator
    Part Fifteen: Boxes (still in progress)
    Part Sixteen: Vertical Text
    Part Seventeen: Transition (NEW)
    Part Eighteen: Automated Animation (NEWEST)

    Language:
    English
    Words:
    14,992
    Chapters:
    20/?
    Collections:
    7
    Comments:
    197
    Kudos:
    968
    Bookmarks:
    912
    Hits:
    37,097
    Bookmarked by kiarcheo

    25 Sep 2025

    Bookmarker's Tags:
    Bookmarker's Collections:
    Bookmarker's Notes

    P̶e̶r̶s̶o̶n̶a̶l̶ Experiment with HTML and CSS by MohnblumenKind
    Fandoms: No Fandom

    Summary

    This is a personal experiment with HTML. It is a very limited list with what I find useful.
    Update: Somehow I find more and more stuff useful, so this list is not that limited (and not that private) anymore. I'll improve it with time and according to my needs. I just realized, this will never be "complete" and there is no final number of chapters.

    So far that's posted:
    Part One: Basics
    Part Two: Lines
    Part Three: Footnotes and Links
    Part Four: Columns and Skins
    Part Five: Pictures
    Part Six: Videos (and gifs)
    Part Seven: Choose Your Own Adventure
    Part Eight: Chapter Title
    Part Nine: The Title, the Username, and Links
    Part Ten: Kudos Message (NEW)
    Part Eleven: Newspaper Article
    Part Twelve: Content Notes and Spoiler
    Part Thirteen: Playground for Jinx (glitch text, color, table)
    Part Fourteen: Text generator
    Part Fifteen: Boxes (still in progress)
    Part Sixteen: Vertical Text (NEWEST)

    https://archiveofourown.org/works/15685086?view_full_work=true

  • Public Bookmark *

    A Complete Guide to 'Limited HTML' on AO3 by

    Fandoms: No Fandom  

    31 Oct 2025

    Tags
    Summary

    There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide

    It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time to update.

    The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.

    There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)

    Oh. And I added a bunny army. You could learn how to add one too.

     /)/)  /)/)  /)/)
 (..)  (..)  (..)     
*(  ) *(  ) *(  )

    Series
    Language:
    English
    Words:
    28,034
    Chapters:
    15/15
    Collections:
    8
    Comments:
    1,347
    Kudos:
    6,973
    Bookmarks:
    8,277
    Hits:
    427,503
    Bookmarked by kiarcheo

    25 Sep 2025

    Bookmarker's Tags:
    Bookmarker's Collections:
    Bookmarker's Notes

    A Complete Guide to 'Limited HTML' on AO3 by CodenameCarrot
    Fandoms: No Fandom

    Summary

    There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide

    It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time update this and take a crack at finishing it. (Links and Images are in, the new Audio and Video tags are not.)

    The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.

    There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)

    Oh. And I added a bunny army. You could learn how to add one too.

    https://archiveofourown.org/works/5191202?view_full_work=true

  • Public Bookmark *

    Twitter Work Skin: Tweets & Profile (newest layout) by

    Fandoms: No Fandom  

    10 Feb 2026

    Tags
    Summary

    This is a tutorial on how to create Twitter / X templates for AO3, includes both Tweets and profile card.
    - Scalable so it's also accessible to mobile users.
    - Tweets (chapter 1): text, tags, quote tweet, photo(s), replies, verified checkmark.
    - Profile card (chapter 2): displays a user's profile as shown on Twitter.
    - Please let me know if there are bugs and/or requests.

    Ao3 Twitter Template Generator now available! (Made possible by the amazing Anlanther): Now you only have to fill in your text and copy-paste the generated code!

    Language:
    English
    Words:
    2,851
    Chapters:
    4/5
    Collections:
    4
    Comments:
    188
    Kudos:
    960
    Bookmarks:
    947
    Hits:
    39,750
    Bookmarked by kiarcheo

    25 Sep 2025

    Bookmarker's Tags:
    Bookmarker's Collections:
    Bookmarker's Notes

    Twitter Work Skin: Tweets & Profile (newest layout) by starskin
    Fandoms: No Fandom

    Summary

    This is a tutorial on how to create Twitter / X templates for AO3, includes both Tweets and profile card.
    - Scalable so it's also accessible to mobile users.
    - Tweets (chapter 1): text, tags, quote tweet, photo(s), replies, verified checkmark.
    - Profile card (chapter 2): displays a user's profile as shown on Twitter.
    - Please let me know if there are bugs and/or requests.

     

    https://archiveofourown.org/works/26754208?view_full_work=true