Pesterchum

Tags: homestuck, pesterchum

Description:

Makes your page look like Pesterchum, the fictional chat client from Homestuck :o)

If you find anything that looks wrong, just let me know in the comments and I'll patch it in an update.

!!please credit if used!!

Current Version: 1.1

Patch note: added support for different blood colors

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by hubert breast(working on layout) (https://layouts.spacehey.com/layout?id=21441) -->

<!-- (c) Layout created by hubert breast (https://layouts.spacehey.com/layout?id=21441) -->

<style>
  /*
    PESTERCHUM THEME
    LAYOUT MADE BY https://spacehey.com/sigmundfreud
    V1.0 May 1 2022
  */
  @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
  @font-face {
      font-family: 'header';
      src: url('https://external-media.spacehey.net/media/smPo_RcgKw6ohoWFs5gvUAFyiNe_1fW3lSRa0eldvH40=/https://file.garden/X1htvgJ0DEp_tp-Z/MSPFA%20other/fontstuck.ttf');
  }
  /*HEMOSPECTRUM COLOR GUIDE
    RED:#FF0000, RUST: #a00103, BRONZE: #a25203, GOLD: #a1a100, LIME: #678900, OLIVE: #416600, JADE: #078446, TEAL: #008282, CERULEAN: #004182, INDIGO:#0021bc, PURPLE: #440a7f, VIIOLET:#6a006a, FUSCHIIA: #99004a
  */
  :root{--blood-color: grey;}

  :root {
      --logo-blue: #F4B840;
      --lighter-blue: black;
      --darker-blue: #BB8B2E;
      --light-orange: var(--logo-blue);
      --dark-orange: black;
  }

  /*changes spacehey logo with pesterchum logo*/
  img.logo{
      content: url("https://64.media.tumblr.com/60dd3f38dc8001e311d9d2ce492e7e2a/f4c16ad79c503265-9c/s2048x3072/4930b5bc4aae0b7f40d4b40460c646b92d45804a.png");
      width: 103px !important;
      height: 63px !important;
  }
  .top{ padding-bottom: 5px !important; padding-top: 8px !important;}

  /*general shennanigans*/
  .container{ width: 100%; }
  main{ padding-left: 10px;padding-right: 10px;}
  body, main, footer{background-color: black !important;}

  /*left side*/
  .blurbs p{color: var(--blood-color) !important;}

  h1{
      font-family: header, monospace !important;
      font-size: 2em !important;
      color: white
  }

  .col.left, .links, .top{
      font-family: 'VT323', monospace;
      font-size: 1.25em;
  }

  .links{text-align: center;}

  nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
      content: " ▪ ";
      color: white;
  }

  .col.left{
      width: 30%;
      border: 3px solid yellow;
      background-color: var(--logo-blue);
  }

  .col.left a{color: white;}

  .details{padding-bottom: 60px;}

  .details, .mood, .contact, .url-info, .table-section{
      margin-bottom: 10px;
      border: 3px solid yellow !important;
      background-color: black;
      color: white;
  }

  .profile-pic img{
      margin: 20px;
  }

  .online img{
      max-width: 15px;
      max-height: 15px;
      content: url("https://external-preview.redd.it/857aq6Jb7SnQv5v0QcTPsJ5UlkXC9JaPF9xoI2rzje8.jpg?auto=webp&s=86be4c4a49af01bf51a4dfc3b7c006fc1ee5a591")
  }

  .online{color: var(--logo-blue);}

  .links{
      background-color: var(--darker-blue)!important;
  }

  .details-table {background-color: var(--darker-blue);}
  .details-table td, .details-table td:first-child, .details-table a, .details-table p{
      background-color: yellow;
      color: black !important;
  }
  .details-table td:first-child{
      text-transform: uppercase;
      text-align: center;
  }

  /*right side*/
  .col.right{
      border: 3px solid yellow;
      background-color: var(--logo-blue);
      font-family: Courier, monospace;
      font-size: 1.25em;
  }

  .right .inner, .blog-preview{
      background-color: white;
      border: 3px solid var(--darker-blue);
  }

  .blog-preview{padding-left: 10px;}

  .right .heading{
      font-family: 'VT323', monospace;
      font-size: 1.25em;
  }

  .right .inner, .count{
      color: gray !important;
  }
  /*THIS WAS MADE BY https://spacehey.com/sigmundfreud*/
  .profile-info{
      padding: 0px;
      border: none;
  }

  .profile-info .inner{
      padding-right: 35%;
      padding-left: 35%;
  }

  /*comments*/
  .comments-table td, .comments-table td:first-child{background-color:white;}
  .comments-table td:first-child {width: 90px;}
  #comments{margin-top: 30px;}
  .comment-replies{
      border: none;
      padding-top: 0;
      margin-left: 20px;
      margin-top: 0;
    }
  small, .comment-reply b{font-size: 10px !important;}
  table.comments-table{
      display: block;
      height: 400px!important;
      overflow-y: scroll;
  }

  button {
    border: none;
    background-color: rgba(0,0,0, .25);
  }
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 290 comments ( View all | Add Comment )

Stelle Ram	1751583853 USING!!!!!!!11!1!!11 Report Comment
jaDe_4ever	1750976142 USING THIS!!!!!!!!!!!! Report Comment
TARVOS}:]	1750740640 USING THX }:) Report Comment
sulivaan ..	1749330301 us1ng Report Comment
turntechGodhead	1749004532 using tyy! Report Comment
brainzrfghd123	1748124107 using ty Report Comment
Cloud!	1746609392 Using! Report Comment
Remzer	1746539219 Also on mobile the layout is kind of just pushed to the left Report Comment
Remzer	1746539037 Usinh Report Comment
𝄞 mai	1746291957 using! Report Comment
🌸 pee girl / dakota 🦄	1745677797 Using!!! Report Comment
AlyStar	1745629372 Using this! Report Comment
🥩🍭⦻Z0MBI3⦻🦑🐇	1744987480 Usingggg Report Comment
「 ✦ ＪＵＮＥ！✦ 」	1744717272 using some parts Report Comment
vid	1744419287 usingg Report Comment
JAY.canvas	1744017352 using!! Report Comment
Dr.Cheez12	1743879011 using Report Comment
Elliott is a vampire (sflv version)	1742971064 USEINF Report Comment
KOI	1741728680 USINF XXX333 Report Comment
turntechGodhead	1740949966 using!!!! Report Comment