16 Bookmarks by ghostinthecode (SaltwaterSpectre)
List of Bookmarks
-
Tags
Summary
For everyone who wants to use a language in their fic, and provide a translation, making it friendly for mobile and desktop, and something that's fairly easy without needing every possible translation included in the workskin itself, here you go.
-
Tags
Summary
This is a tutorial/live example on how to make large images fit on mobile browsers but remain normal size on desktop browsers.
Series
- Part 18 of AO3 Work Skins/Tutorials
-
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
- Part 1 of Simbeline's Work Skins
- Language:
- English
- Words:
- 1,201
- Chapters:
- 2/2
- Collections:
- 4
- Comments:
- 41
- Kudos:
- 405
- Bookmarks:
- 490
- Hits:
- 15,550
Bookmarked by ghostinthecode (SaltwaterSpectre)
16 Dec 2022
-
Workskin for showing and hiding spoilers by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
29 Aug 2021
Tags
Summary
A very simple workskin to hide/show spoilers in your works by having your users clicking on a button!
Series
- Part 9 of CSS code scripts for Ao3
- Language:
- English
- Words:
- 319
- Chapters:
- 1/1
- Collections:
- 5
- Comments:
- 19
- Kudos:
- 167
- Bookmarks:
- 148
- Hits:
- 10,443
Bookmarked by ghostinthecode (SaltwaterSpectre)
16 Dec 2022
-
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
-
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
-
How to Make Invisible Text (That Can Be Highlighted) by La_Temperanza
Fandoms: No Fandom
21 Oct 2015
Tags
Summary
This is a live example how to make invisible text that can only be seen by highlighting the text. Tutorial is included in text, and you can always leave comments about questions you may have.
MOBILE USERS: Sadly, this probably won't work for you, since highlighting in a mobile browser is different than web. I've tried correcting this, but have yet to find a solution.
Series
- Part 4 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 493
- Chapters:
- 1/?
- Collections:
- 4
- Comments:
- 21
- Kudos:
- 203
- Bookmarks:
- 157
- Hits:
- 25,981
Bookmarked by ghostinthecode (SaltwaterSpectre)
19 Feb 2022
-
Tags
Summary
This is a tutorial/live example on how to align images to the left or right of the screen and have text wrap around them.
Series
- Part 13 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 2,891
- Chapters:
- 1/1
- Collections:
- 4
- Comments:
- 10
- Kudos:
- 174
- Bookmarks:
- 177
- Hits:
- 15,290
Bookmarked by ghostinthecode (SaltwaterSpectre)
19 Feb 2022
-
Tags
Summary
This is a live example of my AO3 skin that allows the author to recreate the look of sticky notes (aka Post-Its) in their fic. To learn more about it, you can find the tutorial here.
Series
- Part 8 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 34
- Chapters:
- 1/1
- Collections:
- 6
- Comments:
- 22
- Kudos:
- 346
- Bookmarks:
- 291
- Hits:
- 25,129
Bookmarked by ghostinthecode (SaltwaterSpectre)
19 Feb 2022
-
Tags
Summary
This is a live example of my AO3 skin that allows the author to recreate the look of lined notebook paper in their work. To learn more about it, you can find the tutorial here.
Series
- Part 7 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
-
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
- Language:
- English
- Words:
- 2,551
- Chapters:
- 1/1
- Collections:
- 7
- Comments:
- 58
- Kudos:
- 661
- Bookmarks:
- 755
- Hits:
- 42,844
Bookmarked by ghostinthecode (SaltwaterSpectre)
19 Feb 2022
-
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
- Part 11 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 33,325
- Chapters:
- 11/11
- Collections:
- 4
- Comments:
- 54
- Kudos:
- 361
- Bookmarks:
- 407
- Hits:
- 28,644
Bookmarked by ghostinthecode (SaltwaterSpectre)
19 Feb 2022
-
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
- Language:
- English
- Words:
- 999
- Chapters:
- 1/1
- Collections:
- 8
- Comments:
- 115
- Kudos:
- 841
- Bookmarks:
- 1,089
- Hits:
- 47,318
Bookmarked by ghostinthecode (SaltwaterSpectre)
19 Feb 2022
-
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
- Language:
- English
- Words:
- 6,494
- Chapters:
- 12/?
- Collections:
- 7
- Comments:
- 100
- Kudos:
- 909
- Bookmarks:
- 1,093
- Hits:
- 47,873
Bookmarked by ghostinthecode (SaltwaterSpectre)
19 Feb 2022
Bookmarker's Tags:
Bookmarker's Notes
<3 <3 <3
-
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
- Language:
- English
- Words:
- 4,500
- Chapters:
- 2/2
- Collections:
- 7
- Comments:
- 385
- Kudos:
- 4,568
- Bookmarks:
- 4,455
- Hits:
- 200,810
Bookmarked by ghostinthecode (SaltwaterSpectre)
07 May 2017
Bookmarker's Tags:
Bookmarker's Notes
Beautiful, amazing resource. Great tutorial, can't wait to USE IT!