1 - 20 of 67 Works in A Guide to Coding and Fanworks

Pages Navigation

Listing Works

  1. Tags
    Summary

    A guide/resource/tutorial/testing ground for HTML and CSS on AO3.


    1. HTML Basics – Manipulating text and page formatting with HTML.
    2. Links & Embeds - How to add links, images, and GIFs.
    3. Page Dividers - How to customise page dividers.
    4. Titles - How to customise work, chapter, username and link titles.
    5. Fonts - How to customise fonts.

    Language:
    English
    Words:
    6,056
    Chapters:
    6/?
    Collections:
    3
    Comments:
    9
    Kudos:
    48
    Bookmarks:
    56
    Hits:
    754
  2. 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. 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: Choose Your Own Adventure
    Part Seven: Chapter Title
    Part Eight: The Title, the Username and Links
    Part Nine: Boxes (still in progress)
    Part Ten: Newspaper Article

    Language:
    English
    Words:
    7,994
    Chapters:
    11/?
    Collections:
    5
    Comments:
    54
    Kudos:
    246
    Bookmarks:
    308
    Hits:
    7688
  3. Tags
    Summary

    I tried to replicate the Replika aesthetic as much as I could within the confines of AO3's limited HTML/CSS pool.
    May be updated in the future when necessary.

    Language:
    English
    Words:
    3,081
    Chapters:
    3/3
    Collections:
    4
    Kudos:
    7
    Bookmarks:
    4
    Hits:
    794
  4. Tags
    Summary

    A clean dyslexia skin for Ao3.
    I made this following the British Dyslexia Association Style Guide and then tweaked with requests and ideas dyslexic readers brought forth.
    There's a guide inside on how to further tweak everything from font to size to color so that you can customize it for your needs.

    Dark mode available in chapter 3!

    Series
    Language:
    English
    Words:
    6,444
    Chapters:
    4/4
    Collections:
    4
    Comments:
    167
    Kudos:
    448
    Bookmarks:
    287
    Hits:
    17755
  5. Tags
    Summary

    A work skin that replicates the appearance of the game "Disco Elysium." Includes HTML, CSS, and a brief tutorial.

    Language:
    English
    Words:
    751
    Chapters:
    1/1
    Collections:
    3
    Comments:
    10
    Kudos:
    112
    Bookmarks:
    33
    Hits:
    1888
  6. Tags
    Summary

    An AO3 workskin for WhatsApp group chats.

    Language:
    English
    Words:
    6,283
    Chapters:
    6/6
    Collections:
    3
    Comments:
    7
    Kudos:
    39
    Bookmarks:
    31
    Hits:
    1180
  7. Tags
    Summary

    A very simple workskin to hide/show spoilers in your works by having your users clicking on a button!

    Series
    Language:
    English
    Words:
    319
    Chapters:
    1/1
    Collections:
    5
    Comments:
    13
    Kudos:
    54
    Bookmarks:
    41
    Hits:
    1876
  8. Tags
    Summary

    A Reddit template for use on AO3.

    Language:
    English
    Words:
    2,841
    Chapters:
    4/4
    Collections:
    2
    Comments:
    11
    Kudos:
    105
    Bookmarks:
    71
    Hits:
    1817
  9. Tags
    Summary

    This is the code and guide for my Star Trek PADD work skin. Let me know if you have any questions!

    Language:
    English
    Words:
    366
    Chapters:
    1/1
    Collections:
    1
    Comments:
    11
    Kudos:
    35
    Bookmarks:
    16
    Hits:
    456
  10. Tags
    Summary

    A site skin for Ao3 that clean and minimal and somewhat more modern than the default skin.
    Available both in dark and light mode.

    Series
    Language:
    English
    Words:
    1,329
    Chapters:
    1/1
    Collections:
    3
    Comments:
    136
    Kudos:
    190
    Bookmarks:
    73
    Hits:
    7938
  11. Tags
    Summary

    This is me trying out aerynevenstar's workskin for the tweet format. So big thanks to them!
    I also end up tweeking a bit of the CSS to fit my personal preferences.

    Language:
    English
    Words:
    471
    Chapters:
    2/2
    Collections:
    4
    Comments:
    3
    Kudos:
    41
    Bookmarks:
    26
    Hits:
    1480
  12. Tags
    Summary

    Here is the CSS/HTML for a simple sports scoreboard to use in your AO3 works.

    Language:
    English
    Words:
    244
    Chapters:
    1/1
    Collections:
    5
    Kudos:
    22
    Bookmarks:
    13
    Hits:
    911
  13. Tags
    Summary

    A bunch of Ao3 Skins with flag pride colors!

    Happy pride month!

    Series
    Language:
    English
    Words:
    6,008
    Chapters:
    16/16
    Collections:
    5
    Comments:
    91
    Kudos:
    732
    Bookmarks:
    334
    Hits:
    18880
  14. Tags
    Summary

    Documentation/Examples for the CSS workskin and HTML code for a Wikipedia article inspired layout to use in your mixed media works.

    Created with help from Nautilusopus and DarthTofu.

    Language:
    English
    Words:
    1,939
    Chapters:
    4/4
    Collections:
    5
    Comments:
    6
    Kudos:
    65
    Bookmarks:
    77
    Hits:
    1730
  15. Tags
    Summary

    A skin that makes the text rainbow and multicolored.
    Sot of Beeline style.

    Series
    Language:
    English
    Words:
    846
    Chapters:
    1/1
    Collections:
    5
    Comments:
    6
    Kudos:
    60
    Bookmarks:
    29
    Hits:
    4399
  16. Tags
    Summary

    Based on gadaursan's "Fire Emblem Support Scripting" work skin, a HTML and CSS to format screenplay and scripts (or dialog-only/dialog-heavy works), but with some edits: 1) adjusted the images for smaller screens, 2) added a text box/speech bubble, 3) In version 3, added character's name.

    Language:
    English
    Words:
    1,232
    Chapters:
    3/3
    Collections:
    4
    Comments:
    17
    Kudos:
    28
    Bookmarks:
    27
    Hits:
    1268
  17. 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
    Language:
    English
    Words:
    330
    Chapters:
    1/1
    Collections:
    3
    Comments:
    17
    Kudos:
    80
    Bookmarks:
    104
    Hits:
    1865
  18. Tags
    Summary

    Use this code to create a link to a specific passage or scene in the middle of a chapter.

    Language:
    English
    Words:
    158
    Chapters:
    1/1
    Collections:
    3
    Comments:
    14
    Kudos:
    60
    Bookmarks:
    38
    Hits:
    2917
  19. Tags
    Summary

    Explains:
     ● how to make a work skin;
     ● how to view fics' work skin rules;
     ● 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;
     ● even a quick way (code included) to simply make a Site Skin so that you can read everything in your font of preference!

    Full code is included.

    I read, appreciate, and reply to all of your comments — they're always welcome!

    𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️

    Series
    Language:
    English
    Words:
    17,488
    Chapters:
    1/1
    Collections:
    6
    Comments:
    153
    Kudos:
    190
    Bookmarks:
    207
    Hits:
    14648
  20. Tags
    Summary

    Live example and tutorial on how to include a Yelp product review in your work.

    Series
    Language:
    English
    Words:
    1,975
    Chapters:
    1/1
    Collections:
    4
    Comments:
    10
    Kudos:
    24
    Bookmarks:
    18
    Hits:
    959

Filters

Filter results:
Submit

Include

?
Include Ratings
Include Warnings
Include Categories
Include Fandoms
Include Characters
Include Relationships
Include Additional Tags

Exclude

?
Exclude Ratings
Exclude Warnings
Exclude Categories
Exclude Fandoms
Exclude Characters
Exclude Relationships
Exclude Additional Tags

More Options

Crossovers
Completion Status
Word Count
Date Updated
Submit

Clear Filters

Pages Navigation