Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Additional Tags:
Language:
English
Collections:
A Guide to Coding and Fanworks, Fanfiction Reference Works, HTML & CSS stuffs, Ao3 Skins, AO3 Social Media AU Work Skins, AO3 & Coding Layouts & Creative References
Stats:
Published:
2019-10-05
Updated:
2019-10-16
Words:
2,176
Chapters:
4/?
Comments:
18
Kudos:
110
Bookmarks:
147
Hits:
7,806

AO3 Workskin Testing and Tutorials

Summary:

where I test and share my original workskins and experiment with improvements to existing skins.

  1. additions to Heterochromia_Mars's Discord skin
  2. TV/theater scripts
  3. AO3 Entries
  4. Tumblr DMs (experimental)

last edit: 3/27/20

Notes:

  • all the chapters have been updated with the CSS and HTML guides except for the ones labelled "experimental"!!

(See the end of the work for more notes and other works inspired by this one.)

Chapter 1: Additions/Edits to Heterochromia_Mars's Discord Skin

Notes:

  • ok so i half have a solution? just place a div around each group of messages where there was previously a p, then make each span into its own paragraph. using this method you have to use "text2"
  • BUT the problem is when i tried to apply this method to messages that DON'T need to be wrapped, they don't go onto separate lines for some reason? they're paragraphs so i figured they'd automatically go on their own lines apparently not, i even tried to add in br's but that didn't work
  • additionally, i still haven't fixed the "container not blowing up" problem. hhhh
  • idk i tried?? i'll come back and work on this later

CREDIT TO THE SKIN GOES TO HETEROCHROMIA_MARS!! THEY'RE A TOTAL GENIUS FOR COMING UP WITH THE CODE FOR ALL THIS, I JUST MADE A COUPLE SMALL EDITS. GO SHOWER THEM WITH KUDOS AND COMMENTS (AND IF YOU'RE READING THIS YOU'RE AWESOME)

(See the end of the chapter for more notes.)

Chapter Text


# moore-than-surviiiiiiiive

hello kitty sneakersToday at 4:42 PM

ccccome on ccccome on go go ccccome on ccccome on go go i'm waiting for my porno to load (dun dun dun dun) my brain is gonna freakin explode (dun dun dun dun) and now of course it's time to hit the road which means i'll be uncomfortable all day but that really isn't such a change (dun dun dun dun) if i'm not feeling weird or super strange my life would be in utter disarray cause freaking out is my okay good morning time to start the day

ccccome on ccccome on go go ccccome on go go now should i take the bus or walk instead (duh nuh nuh nuh) i feel my stomach filling up with dread (duh nuh nuh nuh) when i get nervous my whole face goes red DUDE weight the options calmly and be still a junior on the bus is killer weak but if i walk when i arrive i'm gonna straight-up reek and my boxers will be bunchy and my pits will leak ugh god i wish i had the skill to just be fine and cool and chill

hello kitty sneakersToday at 4:57 PM

i don't wanna be a hero just wanna stay in the line i'll never be a rob deniro for me joe pesci is fine and so i follow my own rules and i use them as my tools to stay-i-ay alive i don't wanna be special no no i just wanna survive (edited)


# excuse-me-mister-beetlejuice

the ghost with the mostToday at 4:20 AM

you could use a buddy

dont u wanna pal

yes i do!! yes i do!!

beetlejuice posing in a highly epic way

gurl the way i see it ur daddy should be leavin and @you should stick around and kill him!

a white broken heart on a black background just a bunch of broken pieces Today at 4:23 AM

WHAT


MY EDITS/ADDITIONS TO THE SKIN

  • add cursor: pointer; to img.options, img.icon , .name, and .blulink (this is what makes the cursor change to the pointing finger when you hover over things)
  • add cursor: text; to img.input (this is what makes it look like you can actually start typing into the message box)
  • delete a and instead, if you want to make an actual link look like a discord link, you can add class="blulink" to the a tag like this: <a href="[insert url here]" class="blulink">[add the text you want the link to read here]</a>
  • change hr to .divider (the period is important!), then when you go to add message breaks, type <hr class="divider" />, and do the same thing with b and .db
  • to make timestamps and the "edited" thing, paste this into your skin:

#workskin .timestamp {
margin-top: -30px;
margin-right: 3px;
color: rgba(255, 255, 255, 0.2);
font-size: .75rem;
font-weight: 400;
}

#workskin .edited {
color: rgba(255, 255, 255, 0.2);
font-size: .625rem;
font-weight: 400;
}


  • and put <span class="timestamp">[insert time here]</span> after the "name" span tag
  • to tag a user, use <span class="tag">@[insert user]</span>, and to tag a role, replace "tag" with "roletag[#]" — roletags are labelled 1-10 and 1d-10d, the same way Heterochromia_Mars labelled the "role" class. css for the tags is below (warning: it's super long)

#workskin .tag {
background-color: rgba(114,137,218,.1);
color: #7289da;
cursor: pointer;
}

#workskin .tag:hover,
#workskin .tag:focus {
background-color: rgba(114,137,218,.7);
color: #ffffff;
cursor: pointer;
}

#workskin .roletag1 {
color: #1ABC9C;
background-color: rgba(26,188,156,.1);
}

#workskin .roletag1:hover {
background-color: rgba(26,188,156,.3);
}

#workskin .roletag1d {
color: #11806A;
background-color: rgba(17,128,106,.1);
}

#workskin .roletag1d:hover {
background-color: rgba(17,128,106,.3);
}

#workskin .roletag2 {
color: #2ECC71;
background-color: rgba(46,204,113,.1);
}

#workskin .roletag2:hover {
background-color: rgba(46,204,113,.3);
}

#workskin .roletag2d {
color: #1F8B4C;
background-color: rgba(31,139,76,.1);
}

#workskin .roletag2d:hover {
background-color: rgba(31,139,76,.3);
}

#workskin .roletag3 {
color: #3498DB;
background-color: rgba(52,152,219,.1);
}

#workskin .roletag3:hover {
background-color: rgba(52,152,219,.3);
}

#workskin .roletag3d {
color: #206694;
background-color: rgba(32,102,148,.1);
}

#workskin .roletag3d:hover {
background-color: rgba(32,102,148,.3);
}

#workskin .roletag4 {
color: #9B59B6;
background-color: rgba(155,89,182,.1);
}

#workskin .roletag4:hover {
background-color: rgba(155,89,182,.3);
}

#workskin .roletag4d {
color: #71368A;
background-color: rgba(113,54,138,.1);
}

#workskin .roletag4d:hover {
background-color: rgba(113,54,138,.3);
}

#workskin .roletag5 {
color: #E91E63;
background-color: rgba(233,30,99,.1);
}

#workskin .roletag5:hover {
background-color: rgba(233,30,99,.3);
}

#workskin .roletag5d {
color: #AD1457;
background-color: rgba(173,20,87,.1);
}

#workskin .roletag5d:hover {
background-color: rgba(173,20,87,.3);
}

#workskin .roletag6 {
color: #F1C40F;
background-color: rgba(241,196,15,.1);
}

#workskin .roletag6:hover {
background-color: rgba(241,196,15,.3);
}

#workskin .roletag6d {
color: #C27C0E;
background-color: rgba(194,124,14,.1);
}

#workskin .roletag6d:hover {
background-color: rgba(194,124,14,.3);
}

#workskin .roletag7 {
color: #E67E22;
background-color: rgba(230,126,34,.1);
}

#workskin .roletag7:hover {
background-color: rgba(230,126,34,.3);
}

#workskin .roletag7d {
color: #A84300;
background-color: rgba(168,67,0,.1);
}

#workskin .roletag7d:hover {
background-color: rgba(168,67,0,.3);
}

#workskin .roletag8 {
color: #E74C3C;
background-color: rgba(231,76,60,.1);
}

#workskin .roletag8:hover {
background-color: rgba(231,76,60,.3);
}

#workskin .roletag8d {
color: #992D22;
background-color: rgba(153,45,34,.1);
}

#workskin .roletag8d:hover {
background-color: rgba(153,45,34,.3);
}

#workskin .roletag9 {
color: #95A5A6;
background-color: rgba(149,165,166,.1);
}

#workskin .roletag9:hover {
background-color: rgba(149,165,166,.3);
}

#workskin .roletag9d {
color: #979C9F;
background-color: rgba(151,156,159,.1);
}

#workskin .roletag9d:hover {
background-color: rgba(151,156,159,.3);
}

#workskin .roletag10 {
color: #607D8B;
background-color: rgba(96,125,139,.1);
}

#workskin .roletag10:hover {
background-color: rgba(96,125,139,.3);
}

#workskin .roletag10d {
color: #546E7A;
background-color: rgba(84,110,122,.1);
}

#workskin .roletag10d:hover {
background-color: rgba(84,110,122,.3);
}


  • to make the yellow box appear around a text that @'d you, first paste the below into the CSS
    • #workskin .mentioned {
    color: #B4B5B7;
    margin-right: 3px;
    margin-bottom: .2em;
    padding-left: 10px;
    display: inline-block;
    width: 90%;
    background: rgba(250,166,26,.2);
    border-left: 4px solid #faa61a;
    border-radius: 3px;
    }

    #workskin .mindent {
    padding-left: 10px;
    }

    #workskin .mentioned2 {
    color: #B4B5B7;
    margin-right: 3px;
    margin-bottom: .2em;
    padding-left: 10px;
    display: inline-block;
    width: 90%;
    background: rgba(250,166,26,.2);
    border-left: 4px solid #faa61a;
    border-radius: 3px;
    }

    #workskin .mindent2 {
    padding-left: 50px;
    }
  • then, if it's the first message, use "mentioned" in place of "text", all you have to do is replace the word. also, add <span class="mindent"></span> right before it to get the indent. yeah it's inefficient but it's the only way i could think of. if it's a text2, do the exact same thing but replace "mentioned" with "mentioned2" and "mindent" with "mindent2"

Notes:

if any of this was unclear, please let me know!

Chapter 2: TV/Theater Scripts

Notes:

  • the indenting looks perfectly fine on desktop but i can't figure out how to get it to scale properly on mobile. it's okay rn but it could be better
  • need to add parentheticals (the actor notes in paretheses) and i think act headings? idk if i need ones for scenes though

    (See the end of the chapter for more notes.)

    Chapter Text

    NARRATOR

    I never know where to begin...
    The map of this story is both tiny and vast. And beginning is as simple and complex as choosing a path to travel and trusting that it will connect to all other paths.
    I suppose I could begin by telling you that there is an invisible world woven into the fabric of our daily lives. Don't go looking for this invisible world. Because you won't find it.


    HOW TO CODE IT

    CSS
    • first of all, create a workskin by going to dashboard, finding "Skins" two categories down from (or next to on mobile) the "Dashboard" button, clicking the button that says "Work Skins", then clicking the one that says "Create Work Skin". then fill in whatever you want into the title (and description, if you want) boxes and paste this into the "CSS" box:

    #workskin .script {
    background: #fff;
    color: #000;
    font-family: Courier, "Courier New", "Lucida Console", Monaco, monospace;
    padding: 15px;
    width: 40em;
    max-width: 85%;
    margin: 0 auto 25px;
    display: block;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    position: relative;
    text-align: justify;
    }

    #workskin .script:before,
    #workskin .script:after {
    content: "";
    height: 98%;
    position: absolute;
    width: 100%;
    z-index: -1;
    }

    #workskin .script:before {
    background: #fafafa;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    left: -5px;
    top: 4px;
    transform: rotate(-2.5deg);
    }

    #workskin .script:after {
    background: #f6f6f6;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    right: -3px;
    top: 1px;
    transform: rotate(1.4deg);
    }

    #workskin .character {
    margin-left: 15em;
    }

    #workskin .dialogue {
    margin-left: 7em;
    margin-right: 2em;
    display: block;
    }

    HTML
    • when you go to create the work, make sure your workskin is selected in the last dropdown menu under "Associations"
    • make sure you're in html mode (not rich text!) when you paste in the below:

    <div class="script">
    <p class="character">[insert character name here]</p>
    <p class="dialogue">[insert dialogue here]</p></div>

    • and just copy-and-paste those two elements as many times as needed to create a conversation! put <br /> after a line if you want to put a line break in the middle of dialogue
    • however, because you're in html mode, if you want to put any regular prose into the same chapter, you're gonna have to use html tags for the rest of the chapter. paragraphs will form automatically, but to do bold, italics, underlines, and strikethroughs, this is how you do it:

    BOLD: b = “<b>[insert bolded word here]</b>” = “[insert bolded word here]”
    ITALICS: i = “<i>[insert italicized word here]</i>” = “[insert italicized word here]”
    UNDERLINE: u = “<u>[insert underlined word here]</u>” = “[insert underlined word here]”
    STRIKETHROUGH: s = “<s>[insert word with strikethrough here]</s>” = “[insert word with strikethrough here]”

    Notes:

    as always, if you have any questions, please let me know!

    Chapter 3: AO3 Entries

    Notes:

    • need to figure out how to do the archive symbols (i hate working with images)
    • (on desktop only) text with dotted underlines can be hovered over to see more notes

    (See the end of the chapter for more notes.)

    Chapter Text

    Romantically by junietuesday25
    Be More Chill - Iconis/Tracz

    09 Jul 2019

    No Archive Warnings Apply, Brooke Lohst & Original Male Character, Brooke Lohst/Jenna Rolan, Brooke Lohst, Jenna Rolan, Original Male Character, (that OC is Brooke's brother), Chill Summer, Fluff, Getting Together, Post-Canon

    Brooke comes out to her brother—but her pansexuality isn't the only thing that comes to light.

    Part 8 of #chill summer

    Language: English Words: 681 Chapters: 1/1 Comments: 1 Kudos: 12 Hits: 69


    HOW TO CODE IT

    CSS
    • as always, before we can code in-fic, we need to make the workskin. go to dashboard, find "Skins" two categories down from (or next to on mobile) the "Dashboard" button, click the button that says "Work Skins", then click the one that says "Create Work Skin". then fill in whatever you want into the title (and description, if you want) boxes and paste this into the "CSS" box:

    #workskin .fic {
    border: 1px solid #ddd;
    max-width: 95%;
    width: 45em;
    display: block;
    margin: auto;
    padding: .75em;
    position: relative;
    }

    #workskin .fichead {
    margin-top: 0;
    }

    #workskin .date {
    position: absolute;
    top: .75em;
    right: .75em;
    margin: 0;
    font-family: monospace;
    }

    #workskin .redlinks {
    color: #900;
    cursor: pointer;
    border-bottom: 1px solid;
    }

    #workskin .redlinks:focus {
    border: 1px dotted #900;
    }

    #workskin .tags {
    border-bottom: 1px dotted;
    cursor: pointer;
    }

    #workskin .tags:hover {
    background-color: #900;
    color: #FFFFFF;
    }

    #workskin .tags:focus {
    border: 1px dotted;
    }

    #workskin .rtag {
    background-color: #eee;
    cursor: pointer;
    border-bottom: 1px dotted;
    }

    #workskin .rtag:hover {
    background-color: #900;
    color: #FFFFFF;
    }

    #workskin rtag:focus {
    border: 1px dotted;
    }

    #workskin .graylinks {
    color: #666;
    border-bottom: 1px solid;
    cursor: pointer;
    }

    #workskin .graylinks:hover {
    color: #999;
    }

    #workskin .graylinks:focus {
    border: 1px dotted;
    }

    #workskin .stats {
    text-align: right;
    margin-bottom: 0;
    }

    HTML
    • the below is a blank version of the html for the fic! everything in bold is what you can replace w/ your actual content
    • underneath it is what the words i put in would look like

    <div class="fic">

    <p class="fichead"><span class="redlinks">Title</span> by <span class="redlinks">Author123</span><br />
    <span class="tags">Fandom - Creator</span></p>

    <p class="date">Dy Mth Year</p>

    <p><b><span class="tags">Archive Warnings</span></b>, <span class="rtag">Character A & Character B</span>, <span class="rtag">Character C/Character D</span>, <span class="tags">Tag 1</span>, <span class="tags">Tag 2</span>, <span class="tags">Tag 3</span>, <span class="tags">Tag 4</span>, <span class="tags">Tag 5</span>

    <p>Summary summary summary summary summary you get the idea right?<br /></p>

    <p>Part <b>#</b> of <span class="graylinks">Series Title</span><br /></p>

    <p class="stats">Language:&ensp;X&emsp;Words:&ensp;#&emsp;Chapters:&ensp;#&emsp;Comments:&ensp;<span class="graylinks">#</span>&emsp;Kudos:&ensp;<span class="graylinks">#</span>&emsp;Hits:&ensp;#</p></div>


    Title by Author123
    Fandom - Creator

    Dy Mth Year

    Archive Warnings, Character A & Character B, Character C/Character D, Tag 1, Tag 2, Tag 3, Tag 4, Tag 5

    Summary summary summary summary summary you get the idea right?

    Part # of Series Title

    Language: X Words: # Chapters: # Comments: # Kudos: # Hits: #


    • if, by chance, you wanted to replace the tags with links to the actual ao3 tags, replace span with a and add href="[url to the tag]". same with if you want to link to an actual author, story, series, etc.
    • okay so i get that's a bad explanation, it's hard to describe over text so:

    <span class="tags">Tag 1</span> → <a href="[url]" class="tags">Tag 1</a>

    <span class="redlinks">Title</span> → <a href="[url]" class="redlinks">Title</a>

    • which turns "Romantically" into "Romantically" and "Fluff" into "Fluff"
    • since we're in html mode, you'll need to do any other formatting with html tags. see the end of chapter 2 for a quick html guide for bold, italics, underline, and strikethrough

    Notes:

    let me know if you have any questions!!

    Chapter 4: Tumblr DMs (EXPERIMENTAL)

    Notes:

    • i have no clue what is happening with the header rip, also i need to find a better way to show the diagonal arrow bc on mobile its an emoji
    • ok but ao3 keeps adding p tags before the divs which is causing that space between the header and the body’s background, but idk how else to solve the “messages can’t have line breaks” problem other than moving all the tags up in size (spans to p, ps to divs), and the header now has to be a div but ???? hhhhhhhhh

    the base code is by La_Temperanza and CodenameCarrot!! i just modified it (to little avail so far rip). please go check out their guide to iOS messages!! it's excellent, i've used it in multiple of my fics and drafts

    Chapter Text

    thebroduet      ••• ↘ X

    momentbymoment
    hey dude we've been best friends for a really long time now

    thebroduet
    uh huh?

    Notes:

    check out my tumblr!! you can send me questions there if you'd prefer it over commenting