(no subject)
Sep. 6th, 2022 05:25 amvia https://ift.tt/wtFsrEb
simon-eriksson https://simon-eriksson.tumblr.com/post/635059462829408256/fanfic-writers-my-friend-send-me-this-link-is-a :
fanfic writers:
My friend send me this link https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fusers%2FLa_Temperanza%2Fworks%3Ffandom_id%3D5450&t=MDg0ZTNiYzk0YjgwZDM0YTc3MjNkM2Y0NjFjMjI4NTNhZWMwYzc2NSw3MTQxYzA5NjI0ZTM1NGIwOWQzMTQ3MWY1NzNiMmU0MTFlMGM3NWI1&ts=1605639156, is a series on a profile on Ao3 (tumblr http://to-skin-a-fic.tumblr.com/) that has different tutorials to insert things to fanfics via html code, I thought I would share bc it’s really cool
Lists of tutorials:
- How to make images fit in mobile browsers https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F15768186&t=NzJlN2U3NWY4MTI2MjFiMWEwZWJmMGZjOTJiOWUxMzRlNmQ2NTg4YSw3YmU4OTdjMTgwZjYyYmJhZjE1OGNkMDVhNTUxZDk2NWJjNzMxNzQ3&ts=1605639156
This is a tutorial/live example on how to make large images fit on mobile browsers but remain normal size on desktop browsers.
- How to mimic letters, fliers, and stationery without using images https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F11549178&t=MjljMTRjYWZiZGMyOGQ0ODQ3YjQ3ZmQyMmJkYTYxNjY2MjU1MWEzYSxiMGIwNGRkZGRjOTI0ZjA2MTAwZGJlODE5ZDgwZDFiNGE5MTBhNWU2&ts=1605639156
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.
- How to make a “choose your own adventure” Fic https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F11514573&t=OGE0YmM1NTgyOGE4MjY1ZjRhMzg1MTc2ZTNlYjJmNjRmYzAwNTQ2YSwwZjU1MWQxMzM1MWE4MGNlYzJmMThlMGMyNzRkZWU2ZjhhN2IzNjc2&ts=1605639156
This is a tutorial/live example on how to create a “Choose Your Own Adventure” fic. While this has been explained before (see here http://eponis.tumblr.com/post/137325562620/so-i-recently-read-that-cyoa-you-posted-on-ao3), 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.
- How to make linked footnotes on Ao3 https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F4579026&t=NDdlNzI3YzdkNDA1Y2ZmOTNiY2I2MjM4OGNlOWY1NGRkYzYxY2JlMCxhOTc2MDdiZWMyYTM0MmZjMzM4YmQ2ZGViZjQ2Mzc5NDUwY2Q1NDE2&ts=1605639156
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 http://teekettle.tumblr.com/post/126920988304/live-example-my-ao3-skins-while-ao3-has-a .
- How to change text on Ao3 when the cursor is hovering over it (or clicked on mobile) https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F10957056&t=YTAwNTBhNzg4ZjQ5MjIwODA1OTJkYWRhNjEyZDYwNzA3NDE3NThmYywxOTM1MmExNTRhZWE5MGMyY2I3ZWQ1NWYwMGNkZTQxZTBlMDRmYjYy&ts=1605639156
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.
- How to mimic author’s notes and Kudos/Comment buttons https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F10929336&t=MmFjNGJkOTc4Y2ZhOTcyNmM2ZDY1NzhkYWE2OGNmZTQyMTI0MWZkNSw1NzQ5ZjA4ZGEyOTNlNDFlZjZlN2M2ZTliMzU5ZGZmZjYwNGI0YTM4&ts=1605639156
Anonymous on tumblr: do you have a skin that would mimic the author’s notes and review/kudos buttons section from the end of a fic? the desired effect being that the fic could go on after the “end” of the fic, so after the author’s notes and review/kudos buttons
Here’s a tutorial/live example to do just that, with some of the buttons actually functioning. I’ll explain more inside!
- How to wrap text around images https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F10492452&t=YmYwYjBiOWI4YjI5ODhiMjFhOTk2NjczYTRlOTA0MGIwMzA5NzA3ZSxlZTE5NTBlNzA5Y2UxZjM1NGI3YTE3MjVmNDk5NzQyZTIxNTZhOTc4&ts=1605639156
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.
- How to mimic email windows https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F7953412&t=NTdmZGYwMjM4NzE0NWU4MDI0ZTU2ODZmMjY2MTgwNTY4MzcwNTVmOCw0MjVhZGUzNGQ5YmUzNDA4MGFkYWY4YWRhMmI1NzExNTNhNjhmZjI1&ts=1605639156
This is a tutorial/live example on how to mimic email windows on AO3 without the need to use images.
- How to make ios text messages on Ao3 https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F6434845&t=N2Y5NTBkMzJjYjFhZWQ3ZTYwOTNhY2UzOWUyYTVjMTk0ZTEwYTI3MSwyYjhiYTUxZTI5Mjg5ODRkZGE1OWM4MzdhNjBjY2NlYTg3Y2E1NjU4&ts=1605639156
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.
- How to make Customized page deviders https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F5817334&t=ZjU0NWY1NmVkNzBiNmM0M2Y0ZDRjZGQyYzMxZmZjN2Q4ZWMyMzBiMyw2NjYyODAyY2RjZTZlMjBhNzhmNWIxNzgyOTRhOTRhN2NkMjc4MjQw&ts=1605639156
Bored with the default page dividers? This is a tutorial/live example on how customize your page dividers with no images needed (though I do show you how you could use images if you wanted to do such a thing).
- How to make invisible text (That can be highlighted) https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F5046274&t=YzNiYzYzOWYyZDc5ZmFlOWVlYmFmMmYzNTAxYzc1NTUxY2E3NjRiOSwyNzAwODZjNTBlMWQzM2E3YTM0NTQ5MmE4NGY1OTRmNTlkMDViZjcz&ts=1605639156
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.
- How to make a rounded playlist https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F4826000&t=MGU1N2Y4ODU0NWFhNjYxNWZjZGI3ODdlYjk1M2I3ODhkZGNjOGU5YSwxYmQ2MTkzMDMwNTUwNzA1OTM2NDMwYWIxMWFhMmE4NjllMGNjMGYw&ts=1605639156
Original coding and design is from layouttest https://t.umblr.com/redirect?z=http%3A%2F%2Flayouttesst.livejournal.com%2F24421.html&t=NThlNmI2MjZlMDY4NzI1YjYyY2M4YTE1Nzg3NDFlOWJhNGU0MzJiZCw4ODEzNjE3ZTgwNjU5MzVhYzFmZjhiZDZkNzVlYjkzOTg5MjkyOGRl&ts=1605639156. I make no claims for it, just tweaked it so it will work on AO3.
- How to create notebook lined paper on Ao3 https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F4414436&t=MjNkNTAxZmJmNGYyN2EwOWRiZGFlOGVhMmQ4NTQ0NjkyYWY5OTJkNyxiNjIzYjlkYzRjZmU2NjU5YWFkZDc5NGI4MmZkYTgyNjFlYzFjZGQw&ts=1605639156
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 http://teekettle.tumblr.com/post/126214255009/live-example-of-skin-my-ao3-skins .
- Sticky notes on Ao3 without using images https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F4390949&t=NTNmYmQxNzk2Njg5NzQxYzU1YmI2NDdiYmIwN2NlZWM3MDI5NzRiNixjZDFhYmQ5MzA2MzRkOWM4YjU3NGUyYTI0M2M5NjY4MjVmYjUwNjhi&ts=1605639156
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 http://teekettle.tumblr.com/post/121690800779/so-after-i-made-my-last-ao3-work-skin .
- How to make deadpool’s thinking thinking boxes on Ao3 https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F4384112&t=NjdkYzk3MjA3OGU0ZjJhZjg2YzZiOTY4NDg4ZmZiMTlkODYyYjliZSxjNzAzZjYxNmVmNjRlZmVlZGU1MDQ1OTE0YzczZTAzYjdhODJlNDNj&ts=1605639156
This is a live example of my AO3 skin that allows the author to recreate the look of Deadpool’s thinking boxes in their fic. To learn more about it, you can find the tutorial here https://teekettle.tumblr.com/post/120631771129.
- How to make newspaper articles on Ao3 https://t.umblr.com/redirect?z=https%3A%2F%2Farchiveofourown.org%2Fworks%2F4355759&t=M2U2NDYwN2NhMTVhOWFmZjZiNjRmMTNiZWIwYTY5YTcyOTRkMWNhNiw5OTYxODcxODY1NDBiN2UxYmQwYTYzMWU3ZjBlZDVlMzQ2NTJhMWQ1&ts=1605639156
This is a live example of my AO3 skin that allows the author to recreate the look of a newspaper article in their work. To learn more about it, you can find the tutorial here http://teekettle.tumblr.com/post/124765663544/original-article-live-example-of-skin-my-ao3 . (Your picture was not posted)