Actions

Work Header

AO3 Workskin Testing and Tutorials

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"