![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
fuck_yeahI don't know how well this'll go over, but this 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.
Live Example/Tutorial
Live Example/Tutorial
Work Skin Dump
May. 23rd, 2017 08:43 pmfuck_yeah- How to Wrap Text around Images (A work skin isn't actually needed to do this, but I show how a skin can help format the look)
- How to Mimic Author's Notes and Kudos/Comment Buttons
- How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile)
- How to Mimic Author's Notes and Kudos/Comment Buttons
- How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile)
Work Skin Dump
May. 1st, 2016 08:21 amfuck_yeahI realized I haven't spammed this community with any new work skins lately, so here, for anyone who's interested:
- How to Make Linked Footnotes (not really a work skin, but a fun bit of coding)
- How to Make a Rounded Playlist
- How to Make Invisible Text (for spoilers and such)
- How to Mimic Undertale Fonts
- How to Make Customized Page Dividers
- How to Make iOS Text Messages
- How to Make Linked Footnotes (not really a work skin, but a fun bit of coding)
- How to Make a Rounded Playlist
- How to Make Invisible Text (for spoilers and such)
- How to Mimic Undertale Fonts
- How to Make Customized Page Dividers
- How to Make iOS Text Messages
SMS workskin?
Feb. 10th, 2016 12:28 amtropicsbearHello, I was wondering if anyone knows a workskin that displays SMS text in message bubbles? I remember I read a fic where the workskin made it look like they were iPhone SMS bubbles but I can't find the fic again and Google hasn't given me any tutorials/codes on how to make a workskin like that.
Any help would be much appreciated!
Any help would be much appreciated!
fuck_yeahHopefully it's actually okay to cross-post two tutorials here instead of actually posting the CSS here, but I've just discovered this community and was hoping to share the work skins I've created so far.
1. Deadpool's Boxes -- work skin emulating the yellow and white box in the Deadpool comics.
2. Sticky Notes -- work skin emulating sticky notes (aka "Post-Its")
I hope these are helpful and expect me to post more skins soon! :)
1. Deadpool's Boxes -- work skin emulating the yellow and white box in the Deadpool comics.
2. Sticky Notes -- work skin emulating sticky notes (aka "Post-Its")
I hope these are helpful and expect me to post more skins soon! :)
Work Skin: scripts
Oct. 11th, 2011 05:16 pmsamjohnssonCesy poked me to share this over here, so here it is!
One of the formats of writing that's seeing more publication on the Archive is that of script writing. Unfortunately, if you're not that code-savvy, formatting it will rely on a lot of nbsp; entries (which make kittens cry salty tears of misery) and manual line breaks (puppies wail in anguish). Fear not! For I have heard your suffering, and lo have I written some code for you to use as a Work Skin.
Most measurements are in percentages to scale properly, for screen width and for font size (it will break at much larger font sizes). I have used the
These are all designed to be used with the <p> tag and would look like:
<p class="dialogue">words</p>
The charnameinline style is designed to be used with <span> tags (<span class="charnameinline">name</span>) and is designed for character first reference.
On to the code!
This code will work with any site that allows for CSS. If you want to use it on your personal site, strip out every instance of
One of the formats of writing that's seeing more publication on the Archive is that of script writing. Unfortunately, if you're not that code-savvy, formatting it will rely on a lot of nbsp; entries (which make kittens cry salty tears of misery) and manual line breaks (puppies wail in anguish). Fear not! For I have heard your suffering, and lo have I written some code for you to use as a Work Skin.
Most measurements are in percentages to scale properly, for screen width and for font size (it will break at much larger font sizes). I have used the
font-variant: small-caps; property to mimic the upcase format style calls for (CSS3 does not yet have a font-variant: all-caps;.) These are all designed to be used with the <p> tag and would look like:
<p class="dialogue">words</p>
The charnameinline style is designed to be used with <span> tags (<span class="charnameinline">name</span>) and is designed for character first reference.
On to the code!
This code will work with any site that allows for CSS. If you want to use it on your personal site, strip out every instance of
#workskin (and drop me a line to ask how to attach it to your site code). If you're using it on Tumblr or FF.N...well, I have no idea. I will play with making it work on DW, though don't hold your breath, since DW does weird things to HTML.
