tkymficrecs

[tkymficrecs]

Experimenting with work-skins on AO3 day 1.

Boy, did I spend way more hours on this than I meant to considering I have actual deadlines to meet.

notes under the cut-off:

Textures as backgrounds was a game-changer ngl (really it's just a background-image: url("link") !important) - credit to La_Temperanza on AO3, check out her tutorial on formatting letters and stationary here!

However, I so wish that AO3 allowed fonts. Not because web-safe fonts are bad, but there's so few. Just using the cursive (as seen in Joel's letter) might accidentally translate to a goofy ass front on microsoft devices. So a few more options, or the option to embed fonts one day would be *chefs kiss*

I have no idea when or if I'll use the Sibyl's Diner check, or F's computer (rewriting, I'm thinking of different ways of opening the story. I don't like the current one lol) but I just think they're neat so they get to stay.

Coding is like, surprisingly easy. Did I have a few hiccups with the texture urls? yes. But did I win in the end? Yes.

[tkymficrecs]

dark flat ao3 skin v2.0

1. log in and go HERE

2. click button "Create Site Skin"

3. name it whatever

4. copy/paste code from below in "CSS" field

5. "Submit"

6. make sure you clicked button "Use" HERE in the list of skins

7. change it as you like

CSS:

outer .region,

footer .group,

.post fieldset fieldset, fieldset fieldset { background: none; }

body, .group, .group .group, .region, .flash, fieldset, fieldset fieldset ul, form dl, textarea,

main .verbose legend,

.verbose fieldset, .notice, ul.notes, input, textarea, table, th, td:hover, tr:hover, .symbol .question:hover,

modal,

.ui-sortable li, .required .autocomplete, .autocomplete .notice, .system .intro, .comment_error, .kudos_error, div.dynamic, .dynamic form,

ui-datepicker-div,

.ui-datepicker table { color: #eee; border-color: #151619; outline: #111; box-shadow: none; }

form .notice, form ul.notes { box-shadow: none; }

workskin {

font-size: 1.2em; margin: auto; padding: 0 0.25em; max-width: 60em; overflow-x: auto; overflow-y: hidden; position: relative; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label { border-radius: 0; }

header ul.primary,

outer #footer,

.toggled form { background: #1a1b1f; }

header .primary {

background: none; padding: 10px 0; width: 100%; box-shadow: none; }

fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff { background: #1a1b1f !important; }

.user.navigation.actions>li { margin-top: 0.3em !important; }

header .menu,

small_login {

border: 1px solid #1f2126; box-shadow: none; padding: 0; }

.tags.group, .more.group { margin-top: 0.6em; }

header .actions a:hover,

header .actions a:focus,

header .dropdown:hover a,

header .open a,

header .menu,

small_login,

.group.listbox, fieldset fieldset.listbox, form blockquote.userstuff, input:focus, textarea:focus, li.relationships a, .group.listbox .index, .dashboard fieldset fieldset.listbox .index,

dashboard a:hover,

th,

dashboard .secondary,

.secondary, .thread .even, .system .tweet_list li, .ui-datepicker tr:hover { background: #151619; }

.userstuff p { text-align: justify; margin: 1.286em auto; padding: 0; line-height: 1.5; }

.tags.commas { margin: 1.5em auto; }

header .dropdown .menu a:hover,

header .dropdown .menu a:focus,

.splash .favorite li:nth-of-type(odd) a, .ui-datepicker td:hover,

tos_prompt .heading,

tos_prompt [disabled] {

background: #22262a; }

outer,

.javascript, .statistics .index li:nth-of-type(even),

tos_prompt,

.announcement input[type="submit"] { background: #151619; }

.filters .submit input { border: 1px solid #202227; background-color: #202227; height: 110%; margin: 1em 0; min-height: 2.286em; padding-left: 0; padding-right: 0; text-align: center; white-space: normal; }

header ul.primary,

footer,

dashboard ul,

dl.meta, .group.listbox, fieldset fieldset.listbox,

main li.blurb,

form blockquote.userstuff, div.comment, li.comment, .toggled form, form dl dt, form.single fieldset,

inner .module .heading,

.bookmark .status span, .splash .news li, .filters .group dt.bookmarker { border-color: #1a1b1f; }

.work.navigation.actions { width: 100%; }

dl.meta { border: none; }

.splash .news li { padding: 1em; }

fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff { padding: 1em; }

.logged-in .splash>.module { width: 100% !important; }

dl.meta { max-width: 75em; margin: auto; clear: right; padding: 2em 1.75em; position: relative; overflow: hidden; }

.group.listbox, fieldset fieldset.listbox,

main li.blurb,

.wrapper,

dashboard .secondary,

.secondary, form blockquote.userstuff, .thread .comment, .toggled form { box-shadow: none; }

dashboard .current,

.actions a:active,

outer .current,

a.current, .current a:visited, span.unread, .replied, span.claimed, dl.index dd, .own, .draft, .draft .unread, .child, .unwrangled, .unreviewed, .ui-sortable li:hover { background: #1a1b1f; border-color: #1f2126; }

greeting .menu {

right: 0; border: 1px solid #1f2126; box-shadow: none; }

select { background-color: #202227; color: #fff; border: 1px solid #202227; min-height: 3em; border-radius: 0; padding: 0 0.6em; }

input:focus, select:focus, textarea:focus { background: #202227; }

body, .toggled form, .dynamic form, .secondary, .dropdown { background: #202227; color: #fff; margin: 0; padding: 0; }

footer a:hover,

footer a:focus,

.autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover, .listbox .heading a.tag:visited:hover, .symbol .question, .qtip-content { background: #a7a7a7; color: #111; }

.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus { background: #a7a7a7; color: #111; }

header #greeting img,

header .heading a,

header .heading a:visited,

header .user a:hover,

header .user a:focus,

header fieldset,

header form,

header p,

dashboard a:hover,

.actions a:hover, .actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .splash .module h3, .splash .browse li a:before, .required, .error, .comment_error, .kudos_error, a.cloud7, a.cloud8,

tos_prompt .heading {

color: #a7a7a7; }

header .menu li {

border-bottom: 1px solid #2c2c2c; margin: 0; text-align: left; }

greeting .icon,

dashboard,

dashboard.own,

.error, .comment_error, .kudos_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, .qtip-content { border-color: #151619; }

dashboard.own {

border: none; }

form.filters dl { margin-left: 0; margin-right: 0; }

.filters .expander:focus { outline: none; }

.filters .expander { padding: 0.45em 0 0.45em 14px; }

.filters .group dt.search, .filters .range dt { padding: 1.25em 0 0.4em 0; }

a.tag { border-bottom: 1px dotted !important; }

a, a:link, a.tag,

header a,

header a:visited,

header .primary .open a,

header .primary .dropdown:hover a,

header .primary .dropdown a:focus,

header #search input:focus,

header #search input:hover,

dashboard a,

dashboard span,

dashboard .current,

.heading, .group .heading, .filters dt a:hover { color: #fff; }

header .dropdown .menu a {

padding: .75em .5em .75em; }

header #search .text {

background: #151619 !important; border-radius: 0; margin: 0.2857em 0.429em; }

a:visited, .actions a:visited, .action a:link, .action a:visited, .listbox .heading a:visited, span.series .divider { color: #999; }

a:active, a:focus, button:focus { outline: none; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label,

header .actions a {

background: #23252a; border-color: #23252a; color: #eee; box-shadow: none; text-shadow: none; }

.actions a:hover, .actions input:hover,

dashboard a:hover,

.actions a:focus, .actions input:focus,

dashboard a:focus {

color: #fff; border-color: #101214; box-shadow: none; background-color: #101214; }

.actions a:active, .current, a.current, .current a:visited { color: #fff; background: #101214; border-color: #101214; box-shadow: none; }

.delete a, span.delete { box-shadow: none; }

ul.required-tags, .bookmark .status span, .blurb .icon { opacity: 0.9; border: 0; }

outer .group .heading,

header .actions a,

fieldset.listbox .heading, .userstuff .heading, .heading, .userstuff h2 { text-shadow: none; color: #fff; background: none; }

header .actions a,

fieldset fieldset, .mce-container button, .filters .expander { box-shadow: none; }

fieldset fieldset.listbox { outline: none; }

form dd.required { color: #eee; }

.mce-container input:focus { background: #F3EFEC; }

.announcement .userstuff a, .announcement .userstuff a:link, .announcement .userstuff a:visited:hover { color: #fff; }

a, a:link, a:visited:hover { color: #fff; text-decoration: none; }

.announcement .userstuff a:visited { color: #666; }

.announcement .userstuff a:hover, .announcement .userstuff a:focus { color: #999; }

.event.announcement .userstuff a, .filters .expander { color: #eee; }

form.verbose legend, .verbose form legend { background: #151619; }

.listbox li.blurb { box-shadow: none; background: #1a1b1f; }

li.blurb, fieldset, form dl { border: none; }

li.blurb, .blurb .blurb { display: block; position: relative; clear: left; padding: 1em 1.4em; overflow: visible; background: #1a1b1f; }

dashboard ul {

float: none; display: block; padding: 0.26em 0; text-align: right; position: relative; background: none; }

user-fandoms {

padding: 1.4em 0; background: #1a1b1f; }

.listbox .index { padding: 0.6em 0; }

.bookmark div.user { background-color: #151619; }

.bookmark dl.stats { margin-bottom: 1.5em; margin-top: 1.5em; }

.dashboard .own, .comment span.unreviewed { background: #1a1b1f; opacity: 1.0; }

.own, .draft, .draft .wrapper, .unread, .child, .unwrangled, .unreviewed { background: #1a1b1f; opacity: 0.95; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label { padding: 0.5em 1em; border-radius: 0; }

header {

margin: 0 0 3em; }

.tags.group, .more.group { padding: 0.6em; }

dashboard a,

dashboard span {

line-height: 2.2; padding: 0 0.5em; }

.listbox>.heading, .listbox .heading a:visited { margin-left: .6em; }

.listbox, fieldset fieldset.listbox { border: 1px solid #1a1b1f; margin: 0.5em auto; box-shadow: none; }

.reading .user { margin-top: 1.5em; padding-top: 0.5em; border-top: 1px solid #23252a !important; }

.comment .userstuff { background-color: #1a1b1f !important; }

input, textarea { box-shadow: none; background: #151619; padding: 0.4em; }

.filters .indicator:before { background: #404248; color: #aaa; display: inline-block; border: 1px solid #404248; margin-right: 0.25em; background-image: none; }

.filters [type="checkbox"]+.indicator:before { padding: 0 0.25em; border-radius: 2px; }

.filters [type="checkbox"]:checked+.indicator:before { background: #970000; color: #ffffff; background-image: none; }

.filters input:checked+.indicator:before { border-color: #1a1b1f; }

.filters input:checked+.indicator+span { font-weight: 500; }

.filters .exclude [type="checkbox"]:checked+.indicator:before { background: #970000; color: #ffffff; background-image: none; }

.filters [type="radio"]:checked+.indicator:before { background: #970000; background-image: none; }

ui-datepicker-div,

.ui-datepicker table { background: #1a1b1f; }

.ui-datepicker td { border: 1px solid #23252a; }

.notice, .comment_notice, .kudos_notice, ul.notes, .caution, .error, .comment_error, .kudos_error, .alert.flash { background: #2e3138; border: 1px solid #2e3138; margin: 0.6em auto; padding: 1em; box-shadow: none; border-radius: 0; }

.listbox .index { padding: 0.6em; box-shadow: none; }

dl.meta { max-width: 75em; background: #1a1b1f; margin-top: 1em; }

dl.index dd { background: #151619 !important; }

form.search input[type="text"] { border-top-color: #151619; background-color: #202227; padding: 0.45em 0.45em; border-radius: 0; }

modal {

background: #1a1b1f; border: 10px solid #1a1b1f; margin: 3% 0; max-width: 800px; min-width: 200px; padding-bottom: 44px; position: relative; text-align: left; width: 80%; z-index: 501; }

.post .meta dd ul li { display: block; padding-bottom: 0.6em; }

workskin {

font-size: 1.2em; max-width: 52em; }

div.comment, li.comment { padding: 0.6em; background: #1a1b1f !important; }

[tkymficrecs]

When your Character...

Gets into: A Fight ⚜ ...Another Fight ⚜ ...Yet Another Fight

Hates Someone ⚜ Kisses Someone ⚜ Falls in Love

Calls Someone they Love ⚜ Dies / Cheats Death ⚜ Drowns

is...

A Child ⚜ Interacting with a Baby/Child ⚜ A Genius ⚜ A Lawyer

Beautiful ⚜ Dangerous ⚜ Drunk ⚜ Injured ⚜ Shy

needs...

A Magical Item ⚜ An Aphrodisiac ⚜ A Fictional Poison

To be Killed Off ⚜ To Become Likable ⚜ To Clean a Wound

To Find the Right Word, but Can't ⚜ To Say No ⚜ A Drink

loves...

Astronomy ⚜ Baking ⚜ Cooking ⚜ Cocktails ⚜ Food ⚜ Oils

Dancing ⚜ Fashion ⚜ Gems ⚜ Mythology ⚜ Numbers

Roses ⚜ Sweets ⚜ To Fight ⚜ Wine ⚜ Wine-Tasting ⚜ Yoga

has/experiences...

Allergies ⚜ Amnesia ⚜ Bereavement ⚜ Bites & Stings ⚜ Bruises

Caffeine ⚜ CO Poisoning ⚜ Color Blindness ⚜ Food Poisoning

Injuries ⚜ Jet Lag ⚜ Mutism ⚜ Pain ⚜ Poisoning

More Pain & Violence ⚜ Viruses ⚜ Wounds

[these are just quick references. more research may be needed to write your story...]

[tkymficrecs]

Hi! Love your blog btw!

How long should a novel be? I'm not sure if I should split my story into more than one book or just one that's pretty lengthy

Should Story Be Split Into Two Books?

There is not a "one size fits all" number for book length. Book length depends on the target audience, genre, and other factors. Even within those factors there can be a range. Here are some common ranges for different factors:

Middle Grade novels - 25,000 - 40,000 words Young Adult novels - 45,000 - 80,000 words New Adult: 60,000 - 85,000 words Adult 65,000 - 110,000

Literary novels - 80,000 to 110,000 words Romance novels - 50,000 to 90,000 words Fantasy novels - 70,000 to 150,000 words Sci-Fi novels - 70,000 to 150,000 words Mystery novels - 70,000 to 90,000 words

So, if you've written a 225,000 word fantasy novel, you may want to look into dividing that into two books.

However, your story and its genre play a role, too. While it's common to split bigger sci-fi and fantasy stories into multiple books, you generally wouldn't split a mystery story or contemporary romance story into two or more books. You could write multiple connected stories featuring your mystery or romance protagonist, but each book would typically tell it's own complete story. For example, Sherlock Holmes books follow the same protagonist and main characters through the solving of different mysteries. There are elements that carry over from one story to the next, but the series isn't one big story chopped into smaller pieces.

As for the story itself, take a look at the events of the story. Can you see a possible beginning, middle, and end for each potential story? In other words, can you look at the first say half or third of your story and see a climax and denouement that's followed by a new inciting incident? This would be a clue that you could break this story down into multiple stories. Even if you don't see those things in your story already, you can spend some time considering whether or not you can build them in naturally.

And, one last thing to consider is how far over the top end of the range your story is. For example, if your story fits the other criteria and is about twice the length of the middle or end range for your target audience/genre, that might be a good indicator that this story needs to be split. However, let's say you're only 30k over the top end of the range. This is a situation where you can probably cut down 10-15k through editing and polishing, and then just let it be a little over the top end of the range. It's not that books can never be over the top end of the range, it's just that they typically are.

Happy writing!

•••••••••••••••••••••••••••••••••

I’ve been writing seriously for over 30 years and love to share what I’ve learned. Have a writing question? My inbox is always open!

♦ Questions that violate my ask policies will be deleted! ♦ Please see my master list of top posts before asking ♦ Learn more about WQA here

[tkymficrecs]

AO3 work skin tutorial: how to add a spoiler cover

someone recently asked me to clarify how the spoiler cover was coded in my work skin sandbox fic. it's kinda hard to chat about code, so I'll just make a post about it!

for my work skin, this is how the spoiler cover looks like:

I use the following css (you can view a more readable and copy-able version of it on pastebin, sans the comments. code starts at line 54 as of this writing).

(sorry, I never mastered tumblr's editor and it won't let me format code here via markdown ticks or the pre/code html tags. so I decided to just take a screenshot rather than risk it looking mangled on tumblr using the chat style/npf_chat class)

the gist of this is that the spoiler class makes your text look like a dark black rectangle per line.

spoiler:hover specifies the behavior when you hover over the text, spoiler:active is when you click on it.

so when the user hovers or clicks on the spoilered text, we reset the background and color back to normal.

you can now use our new spoiler class like so:

which will look like this on AO3:

this will not affect text size. so if you want to set font-size:28px then you'll just have a big blackout box.

the same goes for smaller text. of course, if the words within a sentence are smaller than those around it, the blackout will cover the height of the largest font in the text block.

and that's it!

related: AO3 user La_Temperanza has a lot of great workskin tutorials and I highly recommend this tutorial as another resource.

[tkymficrecs]

You know when you want chat bubbles in your fic on AO3. And you know that probably thousands of other fics already have them. So instead of reinventing the wheel and coding them up yourself, even if you technically know how to, you ask someone if you could have a copy of their workskin, or you find one of the probably hundreds of guides to that exact thing that are right there on AO3, or you copy some code off, like, Anywhere On The Internet that has something that looks like what you want or—

No, I didn't do that. I got into a CSS hyperfocus and spent hours writing them from scratch, of course I did, wouldn't be me otherwise.

(Minor spoiler warning for Scorn and the Saint-Maker [link to AO3], but then again, there's not really anything here you wouldn't expect from me OR THEM, we just haven't got to that part of the story yet)

(I'm happy with them though, I think they're very pretty, and above all the markup they demand is (1) as simple as I could make it, (2) logical enough that I could also quickly hack up a script that'll convert a reasonably-formatted bit of text from Google Docs into it; and (3) makes it so that things are readable and understandable as a chat conversation without creator styles on.)

[tkymficrecs]

hi, hello! i'm sassaffrassa on ao3 and i was wondering what CSS you used in your workskin for *Wolf, Fox, Hound?* i've trying something similar and got one that works part way, but it doesn't look nearly as good as yours, and wondered if you might share 😅

Oh, you mean with the Hen Llinge hover translations? Yeah, for sure! Here’s the whole work skin incl. my little arrow dinkus: https://pastebin.com/v5ei7Gye

The HTML set-up works exactly the same way as in La_Temperanza’s How To Change Text on AO3 When the Cursor is Hovering Over It, plus em tags for italics. You might’ve found this one yourself; it was the basis for mine and it’s great except for two things:

It hard-codes the background color & text color of the links to white and dark gray respectively, which is just awful for anyone whose archive-wide skin isn’t white, such as Reversi users.

It’s 2024 and this is a fic, not a webpage! Text underlines are distracting!

To fix this, I removed the color: #2a2a2a; rule from each of the hovertext rules and had each set background-color to transparent and border-bottom to none, and the actual linky part of my code starts with this to get rid of underlines:

a { text-decoration: none; border-bottom: none; }

(You might be able to nix the border-bottom: none declarations in each of the hovertext rules for redundancy if you want? It’s been ages since I last fiddled with this skin and I don’t remember which parts were overkill.)

La_Temperanza mentions CSS entities at the bottom of their work. Note that apostrophes MUST be converted to CSS entities (\2019) or they’ll break the code. When I made the skin there was some fuckery with accented characters, which sometimes needed to be made into entities to show up and sometimes didn’t. I also discovered a goofy bug where sometimes if you have a CSS entity in there, the back half of your text goes missing; fix this by converting the characters after the entity into entities themselves one by one until it shows up properly, sometimes including the spaces. Full list of character entities can be found here.

hope that helps & let me know if this doesn’t make it do what you want it to!

[tkymficrecs]

Hello! I hope I don't bother you again. I have two questions for you (I think there are more). I'm writing a zosan fanfic and I came up with the idea of ​​putting "titles" in what happens in the "chapters" separated by the divider, like the titles of anime episodes (very One Piece with spoilers about what happens in the episode), I would like to know what do you think of this idea? I have images of what these titles would look like if you want them for better visualization. 2- Is there a skin work on ao3 that imitates these "titles", as if they were chapter titles of a book (but without having to have several chapters as I want to make a oneshot)?

hello! yes, I think that sounds like a neat idea. you should go for it!!

I don't watch one piece so I hope I'm visualizing it right. if I got it wrong, feel free to send me a picture.

anyway. are you trying to do something like this?

if this is what you're going for, you can try this code out! I also created a pastebin for this one, so you can just copy paste to your own workskin.

so here, we're creating the lined-title css class. you can just add it to your <p> tags in the html when you want to apply them. e.g.

<p class="lined-title">TITLE</p>

feel free to play around with border-style and the border-color (or any other attribute). you'll want border-style:solid if you just want one single line, for example.

you can also check AO3's FAQ on what colors and fonts you can use. fun fact: border-style:double is the same css they use to add those double lines in the FAQ!

note that this will span the entire width of the page. so if you have a short title, it'll look like this on desktop:

if you don't want it to span the whole page, we could try this instead (also included in the pastebin link):

which will result in this:

however, we can't manipulate the spacing between the text and the lines in this one. on the other hand, it has text-decoration-style:wavy which the first option doesn't have!

for custom scene dividers, you can also check out these guides:

How to Make Customized Page Dividers by La_Temperanza

Dividers & how to style them by skinofthesoul

Rainbow Paragraph Divider by benwvatt

bonus: inspect element

also, are you familiar with inspect element yet? if you are, great! you can just skip this. otherwise, if you're still getting the hang of working with workskins and aren't used to editing css, you can try this:

right click on the text you want to change on AO3, then click "inspect" or "inspect element" (not sure what it's called in browsers these days; on firefox, it's just "inspect"). this will bring up a bunch of developer tools and it kinda looks like this:

it might look different depending on the browser.

but here on the side, you can see the html on top and css at the bottom. as you can see in the screenshot, we are inspecting the title and we can see the different css rules for the title.

if you want to play around with the css, you can just change them from this panel and it will automatically reflect on the page. these changes are not permanent so it's a good way to test different styles without having to go through the cycle of updating the workskin and refreshing the fic page.

if this is your first time trying this out, it might look overwhelming, but it's very helpful if you get the hang of it. but of course, you don't need to learn how to do this to style your fics. :D

[tkymficrecs]

Hi, sorry to interrupt, but I was looking at your fics, which are really good, and I came across something that I see in a lot of other fanfics and I don't know how to do it. How did you manage to set it indented?

hello! thank you for reading my fics, it means a lot!

I need to know what you mean by "indented." do you mean something like this summary?

tumblr editor calls this "indented" for some reason, but what it's really called are "blockquotes." you don't need fancy css for this since it's available with just html. you can code it using the blockquote tag.

on the other hand, maybe you mean indenting as in adding spacing like in this chat?

in this case, then yes you do need to add css to your workskin. here are the relevant parts of the code.

so the important things here are:

put your elements inside a container with the .chat class (or any other class name of your choosing)

make sure .chat has margin set to auto and width set to less than 100%.

I hope I was able to answer your question! I'm not sure if there are other examples of indenting that I used in fics; if you meant something else, just let me know so I can answer the question properly! 🙇🏻

the rest of my workskin code is always available to use as a reference (copy paste if you want): AO3 demo, html code, css code.

something extra under the cut:

bonus:

the above is a modified version of what I'm doing. I actually combined both methods in one, but that gets a little bit more complicated and it's probably more than what you need. I'll add the full code here under the cut if anyone's interested.

to note:

notice that I replaced the div containers with blockquote in the html. however, with workskins turned on, you won't see it! that's because I'm hiding it specifically when workskin is turned on.

but if someone reads my fic with workskins turned off (the "hide creator's style" button AO3 provides at the top of the fic), then none of my styling will show up. I still want to make the grouping of the chat text and timestamp clear though, so I put them in blockquotes for this purpose.

here's how it looks like with and without workskins. I want to make sure that my fics are readable even if someone turns off workskins, or if they download my fic as an epub/pdf (which IIRC removes all the css styling as well).

[tkymficrecs]

Finally did it and managed to create AO3 work skin that looks like messenger.

Subway stories will get more fun to write/read, I hope.

[tkymficrecs]

[tkymficrecs]

5 posts!

[tkymficrecs]

biker jungkook 🏍️

[241/547] — until we meet again, jungkook ♡

[tkymficrecs]

friendly reminder that you can't judge a person's morals based on the things they like to read or write, and trying to make assumptions based on that with no other information makes an ass out of u and mption

[tkymficrecs]

50 Shades of You! Tom Hiddleston X Female! Reader

Note: This is my first ever fanfiction for Tom Hiddleston. I have not written fiction for ages. English is not my first language.

Inspiration: this is inspired by:

“I will live in thy heart, die in thy lap, and be buried in thy eyes.”

–Shakespeare, Much Ado About Nothing

Word count: 2660

Warnings: Romance, sweet words, and smut–this is +21 and not for everyone.

Enjoy reading and please comment with your feedback. 💚

-------------------------------------------------------

During the summer Cambridge University was having a conference "Gothic Elements In John Milton's Paradise Lost." As you the young professor of literature, the coordinate manager suggested that the University alumnus could join for not just attending, but acting a piece of the tragedy. Amongst the candidates was the Classic department graduate and famous actor, Tom Hiddleston. 

You know that he might have scheduled issues or time conflicts, but you suggested the committee email him. To your surprise, he accepted the offer. 

 

The scene of choice was casting the devil out of hell.

On the stage during the conference eve, you did not have the perfect time to watch him, but you took a glimpse of acting from far.

He even caught your show and face attending the rehearsals.

The conference day was pressuring. You were trying to get everything right, in the middle of your so-close meltdown. A voice brought you to reality, "Hello, is this professor Y/N)?"

You turned to find the British handsome alumni smiling peacefully at you. "Yes, how can I help you?"

"Indeed, I am the one offering help." As he adjusted his glasses, I asked the committee manager to take upon some errant backstage. Maybe I can assist with the front ceremony?"

"Of course," you paused for a moment, "can you help me with the dinner's seats arrangement? My assistant is absent and I have to print and arrange them myself."

"Just show me a computer and all will be done."

Both of you took your time arranging an evening missing up some seats. 

 

"Here comes my name. You will be seated with the professors, of course!" He was busy putting name tags over the table.

"Oh! Don't remind me." You replied as if it is a conversation with an old friend and continued "the Classic department and Literature."

"They might start a war." Both of you started laughing 

"I have an idea." He took a tag from his table and moved yours next to his. "Now you will be with a friend"

The presentations finished, you had to go for the gym showers to change and wear your conference and dinner dress.

By the time you arrived, the scene from the tardy was about to be played. You took your place in the front seat.

Tom was playing Satan. He noticed that you were reciting the lines with him. He even almost smiles at you. Could not hold himself from looking at you in the front row while playing the scene of...

 

"All is not lost; the unconquerable Will, And study of revenge, immortal hate, And courage never to submit or yield; (And what is else not to be overcome?) That glory never shall his wrath or might Extort from me to bow and sue for grace With suppliant knee and deify his power, Who from the terror of his arm so late Doubted his empire[.] (I, 106–114)"

 

Your facial expressions captured his eyes, the movement of your lips and then the flame of your applause. 

At the dinner, he was interested to hear all about your work and writings. His eyes could not able to leave you.

 

By the end of the dinner, he walked you to your car, "this was lovely, thank you for tonight" 

You smiled at him, "thank you for accepting our invitation."

You shake hands and opened your car door like the gentleman he is.

"Would you like to go out with me, for a coffee? Books and coffee, maybe." He did not hesitate to ask.

"I would love to. You already have my number within the conference contact information." You raised an eyebrow and smirked.

As your car drove away, he knew he was up for an adventure.

Three months later, you are happily dating and sharing sweet kisses. He suggested a film marathon. Each week one of you chose a topic.

That Saturday's topic was Russian Literature and you had to add: "or inspired by it" 

"Excuse me, but Tolstoy has no comparison!" He grimaced

"Shadow and Bones, love!" You teased him, "it the Netflix adaption of the era" 

"After Anna Karenina, please," he sounded like an old professor.

"Alright then, deal." You tickled him and kissed his lips softly

Both of you enjoyed Anna Karenina, however, you were crying in his arms.

"That dreadful ending." 

He hugged you "Hey, Shadow and Bones will make it up to you, let me make extra popcorn." Once again, he kissed you.

He came back with popcorn that will at least survive three episodes. You snuggled between his arms.

"Look at Alexie, how he said 'Make me your villain.'" 

You were swooning as a fangirl.

"I beg your pardon, I am literally a villain," he complained

Oh! I would literally," stressing upon the last word, "let him have me"

His face was irritated and you not coming close to making love made him anxious, that you might not be ready. He never inquired about you.   

You caressed his tummy, "hey, a penny for your thoughts, sir." It sounded like one of the Jack the Ripper prostitutes, about which you have constantly been talking.

His voice evolved deeper and his eyes did not leave yours "your deepest sexual desire. What do you crave?"

Comparing to your age, you were nervous and inexperienced. "My life was spent between books. I..."

He did not let you continue speaking and took your lips between his drawing your body closer to him, uttering between his hot kisses "I am not just a villain" his lips made the earth move "I am a God" whispering against the sport skin of your nick " a king" his hands were moving down the same tomes his lips reached the line of your bosom whilst his hand slides prevailed touching down pussy and dug his fingers driving you till the edge.

"I want you," you whispered between your soft moans.

He neglected your cravings and maintained his rhythm, watching your complexion and closed eyes till you arched your back in awe.

You collapsed between his arms heavily breathing "that was extremely wonderful, but I need you"

He kissed your lips playfully. "you are a delicious girl, Y/N, but..."

You hashed him with a kiss that he pulled from "if your life was between books, I want you to write me your deepest desire."

"Darling, it was a series, Alexie is fictional." You wrapped your arms around his neck.

"Fictional or not, he is a man, you are paying for this." 

He was deadly serious "write me your longing."

You laugh "What? Like the 50 Shades of Y/N?"

He gazed into your eyes "aiming to please and punish you, darling, avenging my honour"

The next morning when you were with your family on Sunday's lunch, he opened an email titled "50 Shades of Y/A"

 

The content was as follows:

"You!"

 

He grinned to himself and determined to show her how fiction can become real.

Your week was busy. He had signed a new contract for a mini-series and was supposed to film soon.

Not replying to your email made you nervous, even went meeting for dinner. He was quiet about it. 

You checked your sent box millions of times to make sure it arrived. Still, you knew he was busy working, and you were busy with the finals coming soon.

Thursday’s dinner, nothing yet, nothing but gaggling and discussing your days and current reads. 

"Darling, we did not decide this week's marathon" 

He did not take his eyes off the menu "Are not you having a big family week, you should go" he was confident and calm. 

Deep inside you wanted to grab his neck and jiggle him, but for the lady you are and the restaurant, you were calm.

"Wonderful!"

The dinner was over; he drove you home, kissed you goodnight.

Saturday morning, a ringing at your door. Apparently, you received a package, a big one.

You kept thinking that some books might have come early from your publisher. Unwrapping it to a surprise satin 1950 coat with Ruby red entourage and black heels.

There was also a note, she recognised the handwriting:

 

"Wear nothing but this for your punishment. If other pieces were found upon your body, then fear my fury and vengeance.

Love, 

T"

 

So, it was her version of Mr Grey. But have you ever been ready to comply with anyone?"

Suddenly, a message arrived on your phone 

"Reminder, a black will pick you tonight at 8, don't disobey me, Princess."

Your heel clicked on the floor as a man dressed in an old fashion suit opened the car for you. The windows were blacked out, so you did not see where it was heading.

"Welcome, Princess," he greeted you as if you were royalty, "My master is awaiting your presence."

You took his hands. The place was carved out of one of your favourite dark fantasies, a mansion with gargoyles, dark lighting, and a vast garden.

You could not believe your eyes. Tom knew your deepest desires indeed.

But that is not the end.

The inside was as of a dark enchantment with deep red flowers and candles. The servant showed you the way to a dining room fit for a feast. Tom was not there. 

"My master requires you to await his arrival." The servant bowed and left.

You were like a child been left inside her favourite toyshop. The ornaments, the lighting, and even the shapes of the food. That aesthetic you only could dream of but never reach.

"Enjoying yourself already?" You turned to find your man dressed in a black Victorian suit. His face was shaved, shorter hair, no glasses. Just all of the handsome glory.

You took a step forward "no princess, I shall come for you"

He kissed your hand and then sat on the table's head, while it sat on the opposite side and faced you away indeed.

"Are you pleased, princess?" He raised his glass of red wine.

"Yes, my Prince." You smile.

"In here, you shall address me as your king." His eyes lit with fire, and his voice was harsh.

You played along and raised an eyebrow "my king."

"This is not a game, princess, you are my prisoner"

You dined quietly, as he did not drop his eyes from you.

"Enjoying yourself?"

You flirted "deeply, my king"

He left his chair and came closer to you, his fingers left your chain so you can gaze into your eyes.

He asked, "care for a dance?"

You smiled "I would love to."

You stepped forward and took his hand to a ballroom, just for you and him, the dark king.

The following piece of music was sensual and moving.

"The coat, princess, I want to see nothing but heels on your body,"

You obeyed the king, but for a tick. When you took it off, underneath it a short emerald green strapless corset dress tight upon the curves of your body and pushed your bosoms to their glory.

He grinned and his eyes darken "looking for further punishment, I suppose?" 

"Anything to please the king." You took his hand and kissed it. He did not expect it.

He turned furiously and the next song was romantic. He wrapped his arms around you once again, waltz, you sneaky woman, deserved joy before being punished.

Twirling you on the dance floor like the earth has no one but the two of you.

By the end, he carried you "to my chambers, little one"

You were nervous and anxious. What if he did not like what was underneath the dress?

He entered a candlelight room with a four-poster bed in the centre. The curtains of the bed were black and emerald. 

He laid you in bed, kissing your lips and playing with your hair. 

His breathing was heating against your skin.

"You won't miss that dress, will you, princess?"

He did not wait for your reply as he lifted a dagger amongst the layers of his suit and cut the corset down to the last piece of the dress.

You wore nothing else. You were lying exposed as he stood to look upon your naked curves for the first time. 

You spontaneously tried to cover your bosom and private parts.

"No, do not you dare" he was angry and you could not distinguish reality from fantasy.

You throw the rest of the dress away. Hands laying by your head and he stood there for a juncture, gazing at every inch of your body.

"Turn," he ordered angrily as if the soul of Loki took over him, "I said, turn" 

You nearly dropped tears "here my king" 

You felt the softness of his lips upon your delicate shoulders.

Kissing the line of your spine. He knows this will work like magic. You tickle from your back, now trying to lick you, taste you, slap you.

He flipped you to face him. You were sobbing. He could hear it under your moans.

"You are not a princess, you are not a queen."

He wipes her tears from her cheek "you are a goddess and I am your slave."

You giggled between your tears, wrapping your arms around his neck "my king"

"Your, slave" As his voice became softer, he hushed you with a finger.

He kissed every inch of your body. You were playing with his short blonde locks.

"Let me worship your bosom, my goddess" he kissed, licked and played with your nipples and cupped your bosoms gently.

Kissing down till he reached your pussy, "Let me worship your temple" as he licked your clitoris.

You were moaning loader now

“Not this time, my king I want you inside me."

"Alright, as the pleasure of my goddess, I shall obey." 

He adjusted his weight on you and asked, "wider for me, my goddess of beauty" 

You opened for him as he enters you for the first time. You let out a loud breath "are you alright" he took your hands between his.

"Continue, my king."

He is just thrusting himself gently inside you. Your moans filling the room 

"I am a villain, a king, a god, and a man"

Your hands were free to run along his back as he continued, "a man, no, a slave for my goddess"

You were moving with him and moaning louder, "my king, what else?"

 Thursinting himself harder and moving with a faster pace.

"My goddess, the sculptures of beauty," between his breathing and moaning "Da Vinci would not be able to capture your grace"

You were kissing as your nail dug inside his shoulders.

His last whispers as moving himself inside your pussy which was clutching around his manhood. He moved with pace, as you rocked your lap against him

"I will live in thy heart," kissing your lips as you bite his lower lip between your steamy breath. "Die in thy lap, and be buried in thy eyes.”

He was going faster now and you were in tremendous awe and your skin was heating up with your pleasure.

"Look at me goddess" you were closing your eyes as you become close to you your orgasm "look at me," he ordered 

"I love thee, Tom," you said as your pussy was clutching around his manhood and trembling underneath him. His enormous climax followed your orgasm. 

You were shaking. He used his hands to keep himself from crushing you with his weight.

He rested his forehead on yours till both of you caught your breath. Gently took you between his arms as resting on his side "and I love thee, Y/N"

kissed you and as you were falling asleep, yet muttered, "I made you my villain, did not I?"

He giggles, "I beg your pardon, your God, King, and lover"

You kissed for the last time of that night and snuggle between peacefully each other's arms.

----------------------------------------------------

Tag list:

@shafverani

@imsebastiansta-n

@brokenwitty

@221bshrlocked (awaiting your feedback)

@sinner-as-saint

@zemosimp05

@buckys-fairy

[tkymficrecs]

When they say Palestine didn't exist back then. Shakespeare's Othello was published over 400 years ago.