#ao3-workskin

[gadaursan]

Oh shit I did it. I’m too powerful.

[sara-bocchan]

[AO3 Work Skin] Auto Image Resizing

I tend to read a lot of fic on my phone these days, as surely a lot of more people do. Whenever there is art in these stories this can get quite tricky, though. Side-scrolling into lot of empty space, the images are too big to see them completely, and so on.

So here is short and simple Work Skin I made; Feel free to use it - your readers will be grateful! :D

(Also: Thank you, Lao, for bringing up the idea in the first place! <3)

Work Skin

#workskin .illu {  display: block;  margin-left: auto;  margin-right: auto;  max-width: 80%; } #workskin .divider {  display: block;  margin-left: auto;  margin-right: auto;  max-width: 60%; }

explanation

How to use Work Skins:

A Step-by-Step Guide to Work Skins

Tutorial: Styling Works

What this Work Skin does, and why:

 display: block;  margin-left: auto;  margin-right: auto;

To anyone who isn’t familiar with CSS this might look confusing or overly complicated. Especially, since all it does is is centre the image. There are other options to do this, yes, but as far as my experience goes this is the most reliable one.

Besides, it does not only work on images but other html tags too. 

max-width: 80%;

The actual auto resizing. I’m using max-width instead of width so smaller images will not become pixelated. (I only updated this recently tbh. Thanks to Momo for pointing out that issue to me! <3) Essentially, all this does is resize the image to your set percentage (in relation to the window width), but never bigger than the original image size.

Of course, you can use whatever percentage, and as many different classes as you prefer. Two was enough for me, though. :)

Note:

If you notice anything I did wrong or could do better: please feel free to send me a message! I am by far no expert in CSS. And I’m always happy to learn! <3

If you have any other ideas for small and helpful Work Skins like this: message me about it! Usually authors just don’t notice or don’t know about issues readers have. I want to help both sides with this/these Work Skins! :D

[gadaursan]

You disallowed anon comments on the work, but you should tag you workskin work with Fanwork Research & Reference Guides, and try to add it to the Fanfiction Reference Works and A Guide to Coding and Fanworks collections. That's where most people put their work skins so other people can find them :)

Thanks for letting me know anon! I’ve applied the changes as requested!

[gadaursan]

AO3 Work Skin: Twitter Mockup v1.0

Want to take social media in your fictional Tweets to the next level on AO3? Try this work skin that formats your text to look like a Tweet!

Now you can easily edit stuff after you publish and not have to upload pictures and snapshots, while still preserving nice crisp images! Currently there are only two forms that are available, the text-only Tweet and the Single Image Tweet, but that should be more than enough for most writers who implement Tweets into their writing.

This is a work in progress, meaning I will update this work skin to add more functionality later, but you can play with the code yourself. CSS and HTML, like any programming language, does have a learning curve, but I can tell you, it’s so rewarding when you succeed and make stuff pretty.

Anyways, better documentation on the actual live preview through the link in the picture. Next time I’m going to do some mockups for Instagram!

[gadaursan]

Finished with headers and footers. Now all that’s left is inserting additional media. and then... finding ppl willing to test this thing.

[gadaursan]

A few days ago I learned that pressing checkboxes too fast can break the sidebar, which really could be fixed if we don’t do nice smooth slidey transitions. but like... i want slidey transitions... buttons are hard.

[gadaursan]

And the scripting begins.

[gadaursan]

AO3 why