A work skin for AO3 to create a fake journaling app for fanfics using css and html, based on How to Mimic Email Windows by La_Temperanza.
Light Mode
Dark Mode
- Follow Steps 1-4 of the AO3 Tutorial A Step-by-Step Guide to Work Skins. At step 3 "Write the CSS", put the contents of the .css file for the mode you want to use into the CSS box.
Tip: Use the both.css file contents if you think you might want to use both light mode and dark mode in a single or multiple fics. This will prevent you from needing to create multiple work skins.
-
To insert the journal app window into your fic:
- Make sure your fic is on html mode.
- Copy and paste the contents of the .html file for the mode you want to use into the body of your fic where you want the app to appear.
-
Profit.
- To keep paragraphs in your journal app surround them by
<p> </p>, i.e.
<p>This is my first paragraph.</p>
<p>This is my second paragraph</p>-
To add images use
<img src="direct_image_link">. -
The "(optional)" description in the tags and mood are intended to be used for characters who wouldn't complete that information. Add whatever tags and moods you think the character would use.
-
You can use emoji in any and all fields! In tags, in the mood section, or even in entries. Just insert them as you would normally.
-
I highly recommend underlining "tags" in the tags section using
<u> </u>, i.e.
<p class="optionalmeta"><b>tags:</b> <u>tag 1</u>, <u>tag 2/u>, <u>tag 3</u></p>This makes them look like they are clickable within the "app" without needing any fancy coding.
☆ None! Literally. I added the Unlicense just to make this clear. Do whatever with this.
☆ Credit (or not) if you want to.
☆ Edit at will (or not).
☆ Feel free to comment on the AO3 post below with links to fics where this has been used (not required).
If you run into problems or have questions, you can open an issue here, or you can head over to the AO3 post and ask in the comments.
