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:
125
Bookmarks:
166
Hits:
9,108

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 backgroundjust a bunch of broken piecesToday 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!