Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Language:
English
Stats:
Published:
2014-01-29
Completed:
2014-01-29
Words:
1,554
Chapters:
3/3
Comments:
37
Kudos:
339
Bookmarks:
145
Hits:
15,254

Homestuck Skin

Summary:

Type in colour, make pesterlogs, and more by following the provided instructions.

I know there already is a public workskin for Homestuck, but this one has a background function and a function for the larger command font.

Updated Apr 2024 to clarify some instructions (and also update them according to various layout changes) and to alter the CSS to use percentage widths instead of fixed widths (in order to improve the mobile reader's experience). The Courier New font seems to dislike certain mobile browsers, but I've yet to find a fix for it.

Chapter 1: Example

Chapter Text

The following is an example of what you'll be able to do with this skin:

That started the background. Type what you want, but this font looks a bit strange, doesn't it? Do you want the Homestuck font?

===>Type in the Homestuck font.

Now you can type with the Homestuck font. You can even colour text in this.

You can also simulate the persterlogs with this function.
Don't forget to never use the paragraph markers in this part.
Instead, use the 'br' function.
if you need to, you can always enter it twice, like this:

You can type like any character you want. Just remember, Hussie and Grimbark Jade type with normal black text.
Here're Eridan and Cronus being assholes.
Here's Calliope cheering you on.
Here's Caliborn being a douchebag, although not a complete douchebag because he hasn't kill Calliope yet.
Here're Sollux being annoyed and Mituna being annoying.
Fedorafreak types in this colour, although I can't imagine how useful this function will be...
Dave, Lil Hal, ARquiusprite, and Equiusprite all type in this colour.
Dirk, Calsprite, and Davesprite type in this colour.
Here's the annoying colour that you need to highlight, as a certain Mr. Vanilla Milkshake likes to type in.
Jade and Erisolsprite type in this colour, but not Grimbark Jade.
Jake, Becsprite, and Jadesprite type in this colour.
This is Jane and Nanasprite, but not Jane in Crocker Tier.
Jaspersprite is weird in that he's the only one to type in this colour, although the pattern dictates that he should type in the same colour as Roxy.
John and Tavrisprite both type in this colour.
Crocker Tier Jane, Squarewave, and also future Karkat in the one conversation all type in the same colour as Kankri.
Here's Karkat being loud.
Here's Nepeta and Meulin being adorable.
Here's Caliborn as a complete douchebag after killing Calliope. He stays like this even after becoming Lord English.
:o) Here's these two adorable and psychotic clowns.
Here's Kanaya and Porrim and also the Mothersprite.
Here's Aradia and Damara and also Aradiasprite.
Here's Tavros and Rufioh.
Here's Feferi and Meenah and also the Condesce.
Here's Terezi and Latula and also the Dragonsprite.
Rose and Fefetasprite both type like this.
Here's Roxy.
Here's Vriska and Aranea and also Mindfang.
Finally, here is Equius and Horuss and also Aradiabot.

Do stuff without the background

You can do that too.

Here's the pesterlog thing outside the background. Here's some coloured text

You can even colour the text without the font. Or just be boring and write in black.

Anyways. Have fun

Chapter 2: CSS

Chapter Text

Go to your dashboard, and click "Skins", which can be found in the left sidebar on the desktop version of the browser, at the bottom of the first group of buttons (right under the greyed out "Dashboard" tab that lists "Profile", "Pseuds", and "Preferences"). If you're on mobile, this button can be found along the top of the page (although if you're confident to attempt this endeavour on mobile then I'm going to assume that you're already proficient enough with the system to no need further instructions and have clicked into this work solely to grab the CSS).

Next, go into "My Work Skins" and select "Create Work Skin" (to the right of the page, above the line of buttons for selecting the various skin categories).

The new page will allow you to input various information. First, for "Type", make sure "Work Skin" is selected. Next, enter whatever title you'd like EXCEPT "Homestuck Skin" (since that is the name of the public skin). Enter a description of the work skin if you want.

Finally, in the large "CSS" box, copy and paste the following:

#workskin .background {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: #EEEEEE;
  padding-top: 20px;
  padding-bottom: 20px;
}

#workskin .command {
  text-align: center;
  width: 92%;
  font-weight: bold;
  font-size: 28px;
  font-family: courier new, courier;
  color: #000000;
}

#workskin .text {
  text-align: center;
  width: 92%;
  font-weight: bold;
  font-size: 14px;
  font-family: courier new, courier;
  color: #000000;
}

#workskin .block {
  font-weight: bold;
  font-size: 14px;
  font-family: courier new, courier;
  text-align: left;
  width: 84%;
  margin-left: auto;
  margin-right: auto;
  border: 1px dashed #808080;
  padding-top: 19px;
  padding-bottom: 19px;
  padding-left: 19px;
  padding-right: 19px;
}

#workskin .ampora {
  color: #6A006A;
}

#workskin .calliope {
  color: #929292;
}

#workskin .caliborn {
  color: #323232;
}

#workskin .captor {
  color: #A1A100;
}

#workskin .dad {
  color: #4B4B4B;
}

#workskin .dave {
  color: #E00707;
}

#workskin .dirk {
  color: #F2A400;
}

#workskin .docscratch {
  color: #FFFFFF;
}

#workskin .jade {
  color: #4AC925;
}

#workskin .jake {
  color: #1F9400;
}

#workskin .jane {
  color: #00D5F2;
}

#workskin .jaspersprite {
  color: #F141EF;
}

#workskin .john {
  color: #0715CD;
}

#workskin .kankri {
  color: #FF0000;
}

#workskin .karkat {
  color: #626262;
}

#workskin .leijon {
  color: #416600;
}

#workskin .lordenglish {
  color: #2ED73A;
}

#workskin .makara {
  color: #2B0057;
}

#workskin .maryam {
  color: #008141;
}

#workskin .medigo {
  color: #A10000;
}

#workskin .nitram {
  color: #A15000;
}

#workskin .peixes {
  color: #77003C;
}

#workskin .pyrope {
  color: #008282;
}

#workskin .rose {
  color: #B536DA;
}

#workskin .roxy {
  color: #FF6FF2;
}

#workskin .serket {
  color: #005682;
}

#workskin .zahhak {
  color: #000056;
}

 

Chapter 3: Instructions

Chapter Text

Go to you Dashboard. Click "Post New". Fill in the required fields until you reach the "Associations" section.

Under "Associations", you will find "Select Work Skin". Choose the name of the work skin that you created according to the instructions in Chapter 2. Do NOT select "Homestuck Skin", since that would be the public work skin, rather than the work skin that you just created.

Under "Work Text", MAKE SURE YOU'VE SELECTED THE HTML TAB.

Then, copy and paste the following:

<p>The following is an example of what you'll be able to do with this skin.</p>
<p>&nbsp;</p>
<div class="background">
<p>That started the background. Type what you want, but this font looks a bit strange, doesn't it? Do you wan the Homestuck font?</p>
<p class="command">===&gt;Type in the Homestuck font.</p>
<p class="text">Now you can type with the Homestuck font. <span class="docscratch">You can even colour text in this.</span></p>
<p class="block">You can also simulate the persterlogs with this function.<br /> Don't forget to never use the paragraph markers in this part.<br /> Instead, use the 'br' function.<br /> if you need to, you can always enter it twice, like this:<br /> <br /> You can type like any character you want. Just remember, Hussie and Grimbark Jade type with normal black text.<br /> <span class="ampora">Here're Eridan and Cronus being assholes.</span><br /> <span class="calliope">Here's Calliope cheering you on.</span><br /> <span class="caliborn">Here's Caliborn being a douchebag, although not a complete douchebag because he hasn't kill Calliope yet.</span><br /> <span class="captor">Here're Sollux being annoyed and Mituna being annoying.</span><br /> <span class="dad">Fedorafreak types in this colour, although I can't imagine how useful this function will be...</span><br /> <span class="dave">Dave, Lil Hal, ARquiusprite, and Equiusprite all type in this colour.</span><br /> <span class="dirk">Dirk, Calsprite, and Davesprite type in this colour.</span><br /> <span class="docscratch">Here's the annoying colour that you need to highlight, as a certain Mr. Vanilla Milkshake likes to type in.</span><br /> <span class="jade">Jade and Erisolsprite type in this colour, but not Grimbark Jade.</span><br /> <span class="jake">Jake, Becsprite, and Jadesprite type in this colour.</span><br /> <span class="jane">This is Jane and Nanasprite, but not Jane in Crocker Tier.</span><br /> <span class="jaspersprite">Jaspersprite is weird in that he's the only one to type in this colour, although the pattern dictates that he should type in the same colour as Roxy.</span><br /> <span class="john">John and Tavrisprite both type in this colour.</span><br /> <span class="kankri">Crocker Tier Jane, Squarewave, and also future Karkat in the one conversation all type in the same colour as Kankri.</span><br /> <span class="karkat">Here's Karkat being loud.</span><br /> <span class="leijon">Here's Nepeta and Meulin being adorable.</span><br /> <span class="lordenglish">Here's Caliborn as a complete douchebag after killing Calliope. He stays like this even after becoming Lord English.</span><br /> <span class="makara">:o) Here's these two adorable and psychotic clowns.</span><br /> <span class="maryam">Here's Kanaya and Porrim and also the Mothersprite.</span><br /> <span class="medigo">Here's Aradia and Damara and also Aradiasprite.</span><br /> <span class="nitram">Here's Tavros and Rufioh.</span><br /> <span class="peixes">Here's Feferi and Meenah and also the Condesce.</span><br /> <span class="pyrope">Here's Terezi and Latula and also the Dragonsprite.</span><br /> <span class="rose">Rose and Fefetasprite both type like this.</span><br /> <span class="roxy">Here's Roxy.</span><br /> <span class="serket">Here's Vriska and Aranea and also Mindfang.</span><br /> <span class="zahhak">Finally, here is Equius and Horuss and also Aradiabot.</span></p>
</div>
<p class="command">Do stuff without the background</p>
<p class="text">You can do that too.</p>
<p class="block">Here's the pesterlog thing outside the background. <span class="makara">Here's some coloured text</span></p>
<p><span class="kankri">You can even colour the text without the font.</span> Or just be boring and write in black.</p>
<p>Anyways. Have fun</p>

Upon pasting the above into the HTML input box, select preview, then save as draft. You'll see something rather similar to Chapter 1. By referencing between the results and the HTML above, you should be able to figure out most of the relevant commands. If you can't, I suggest that you seek out a basic HTML guide before proceeding with using this skin.