Work Skins
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:
-
Homestuck Work Skin (extended) by unpredictableArtist (wovenstarlight)
Fandoms: Homestuck
26 Jul 2015
Tags
Summary
An extended version of the default available Homestuck Work Skin for AO3, with more characters, colors, and a mockup of the pesterlog. Code linked in the notes.
Series
- Part 1 of work skins
-
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
-
Tags
Summary
A companion to Repository. A comprehensive guide to coding focused solely on emulating Twitter posts for fun or for archiving Twitter fics, up to and including:
- Quote Retweets
- Embedded Images
- Twitter PollsSeries
-
I do believe in magic by I_have_a_Mycroft_of_my_very_own
Fandoms: The Lord of the Rings - All Media Types, The Hobbit - All Media Types, The Silmarillion and other histories of Middle-Earth - J. R. R. Tolkien
21 Jun 2020
Tags
Summary
In which Bard's a wizard and he remembers that magical communication is a thing
Or
In which Thranduil experiences a winter like never before
Series
- Part 22 of Barduil
- Part 1 of Scale of a dragon, tooth of a wolf
-
My S-Ranks: System Windows by unpredictableArtist (wovenstarlight)
Fandoms: 내가 키운 S급들 - 근서 | S-Classes that I Raised - Geunseo
01 Sep 2020
Tags
Summary
A work skin for system windows. Designed for S-Class, but can be adapted to work with other fandoms. Works on both mobile and desktop, with the creator's style enabled or disabled. UPDATE 19/9/20202: Code is linked in the fic notes.
Series
- Part 3 of work skins
-
Tags
Summary
A work skin for mimicking Discord messages. Works on both mobile and desktop, with the creator's style enabled or disabled. Code is linked in the fic notes.
Series
- Part 2 of work skins
-
ORV System Work Skin by unpredictableArtist (wovenstarlight)
Fandoms: 전지적 독자 시점 - 싱숑 | Omniscient Reader - Sing-Shong
27 Jul 2021
Tags
Summary
A work skin for ORV system windows. Works on both mobile and desktop, and looks fine with the creator's style enabled or disabled.
Series
- Part 4 of work skins
-
Fonts, and colors, and work skins, oh my! by Charles_Rockafellor
Fandoms: css - Fandom, Work Skins - Fandom
24 Jan 2021
Tags
Summary
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)!
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 1 of How to
-
Tutorial Work Skin de Redes Sociais: WhatsApp by etc e tal (sweetsweetdays)
Fandoms: No Fandom
06 May 2021
Tags
Summary
Tutorial para work skin do whatsapp, acessível a leitores de tela.
Series
- Part 1 of Tutoriais de Work Skins
-
Tutorial Work Skin de Redes Sociais: Twitter (Tweets+DMs) by etc e tal (sweetsweetdays)
Fandoms: No Fandom
14 May 2021
Tags
Summary
Tutorial para work skin de Twitter (tweets+DMs), acessível a leitores de tela.
Series
- Part 2 of Tutoriais de Work Skins
-
Social Media Work Skin Template: Whatsapp by etc e tal (sweetsweetdays)
Fandoms: No Fandom
15 May 2021
Tags
Summary
A tutorial for a screen reader friendly WhatsApp mockup work skin.
Series
- Part 1 of Work Skins Tutorials
-
Skin for Twitter + Tabloid Magazine Article by Sour_Idealist Nonfiction (Sour_Idealist)
Fandoms: Ao3 Skins - Fandom, No Fandom, Guides and Meta
12 Jul 2021
Tags
Summary
A skin, with use instructions, which creates the appearance of a trashy-looking magazine article and a variety of Twitter interactions. Screenreader-compatible and designed to function with creator's style disabled as well as enabled.
-
Ao3 Intertitles (For All Your Silent Movie Fandom Needs) by Kitsune_Scribe
Fandoms: Archive of Our Own, No Fandom, Fandom - Fandom
30 Dec 2021
Tags
Summary
So you've decided you want to write a fic of a silent film. (And didn't immediately choose to just write it like a normal fic about silent film characters.) Here's how I make intertitles!
Bookmarks which have used it as a tag:
Pages Navigation
-
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 for mimicking Discord messages. Works on both mobile and desktop, with the creator's style enabled or disabled. Code is linked in the fic notes.
Series
- Part 2 of work skins
-
Repository: A Collection of Work Skins and Guides by gadaursan
Fandom: Original Work, SK8 the Infinity (Anime)
03 Apr 2021
Summary
All work skin guides and code written by me.
- Words:
- 15,768
- Works:
- 3
- Bookmarks:
- 95
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
22 Aug 2018
- Words:
- 60,825
- Works:
- 18
- Bookmarks:
- 2221
-
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.
-
Fonts, and colors, and work skins, oh my! by Charles_Rockafellor
Fandoms: css - Fandom, Work Skins - Fandom
24 Jan 2021
Tags
Summary
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)!
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 1 of How to
-
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 replicates the appearance of the game "Disco Elysium." Includes HTML, CSS, and a brief tutorial.
-
How to make a fanfic header Ao3 Style inside your own fanfic by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
26 Sep 2020
Tags
Summary
Live example and tutorial on how to insert a fanfic header + fic tags + summary in your fanfic. In perfect ao3 style.
If you need your own fic to go extra meta.Series
- Part 3 of CSS code scripts for Ao3
-
Tags
Summary
A work skin created for fics designed to emulate a screenplay. This is by someone who has no experience in screenwriting or coding...so take that as you will.
-
Tags
Summary
A work skin meant to mimic the LIME chat that keeps your fic readable even when work skins are off.
19 Mar 21: added an extra chapter about how to format your fic to help out those that aren't as familiar with using work skins or HTML
Series
- Part 1 of work skins
-
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 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
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
22 Aug 2018
- Words:
- 60,825
- Works:
- 18
- Bookmarks:
- 2221
-
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!
-
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.
-
How to make a News Website Article skin on Ao3 by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
26 Dec 2019
Tags
Summary
Live example and tutorial for a news article extract that include website header, fake social media buttons, title and author of the article.
Series
- Part 1 of CSS code scripts for Ao3
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
22 Aug 2018
- Words:
- 60,825
- Works:
- 18
- Bookmarks:
- 2221
-
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
An AO3 workskin for WhatsApp group chats.