TROLLIAN

Tags: homestuck, pesterchum, trollian

Description:

!Important!: on the line that reads ":root{--blood-color: #0021bc;}" replace the hex code with your preferred blood color, or it will default to indigo!

Makes your page look like Trollian, the other fictional chat client from Homestuck 8)

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.0

Preview:

click on the image for a larger preview

Code:

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

<style>
  /*
    TROLLIAN THEME
    LAYOUT MADE BY https://spacehey.com/sigmundfreud
    V1.0 May 11 2022
  */
  @import url('https://fonts.googleapis.com/css2?family=Goldman:wght@700&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');}
  /*HEMO2PECTRUM COLOR GUIDE
    RED:#FF0000, RU2T: #a00103, BRONZE: #a25203, GOLD: #a1a100, LIIME: #678900, OLIIVE: #416600, JADE: #078446, TEAL: #008282, CERULEAN: #004182, IINDIIGO:#0021bc, PURPLE: #440a7f, VIIOLET:#6a006a, FU2CHIIA: #99004a
  */
  /*WHAT COLOR II2 YOUR BLOOD TYPE IIT THE HEX CODE IIN THE LIINE AFTER THII2 COMMENT*/
  :root{--blood-color: #0021bc;}

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

  /*changes spacehey logo with pesterchum logo*/
  img.logo{
      content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/d2088517-f55c-4148-a27e-3f86a088d9a8/d6kbqgq-a9b912fb-2889-4af5-bf00-6f301fe091ba.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2QyMDg4NTE3LWY1NWMtNDE0OC1hMjdlLTNmODZhMDg4ZDlhOFwvZDZrYnFncS1hOWI5MTJmYi0yODg5LTRhZjUtYmYwMC02ZjMwMWZlMDkxYmEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.52KZA1rVvBEtsy7u3vRenXP28lUswtbQJWISkM1FLxY");
      width: 63px !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*/
  h1{
      font-family: 'Goldman', monospace !important;
      font-size: 3em !important;
      color: #323232;
      text-transform: uppercase;
      font-style: italic;
      text-shadow: 3px 0px 0 gray;
  }

  .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 var(--darker-blue);
      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 var(--darker-blue) !important;
      background-color: black;
      color: white;
  }

  .w-40.left:after {
    display: block;
    content: "";
    background-image: url("https://64.media.tumblr.com/9283c60f44bb5480ab5c20176f0bceda/tumblr_npdr1iLioV1uxvldxo1_400.gifv");
    background-repeat: no-repeat;
    background-size: cover;
    height: 291px;
    background-color: var(--darker-blue);
    background-position: center;
    border: medium var(--darker-blue) solid !important;
  }

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

  .online img{
      max-width: 15px;
      max-height: 15px;
      content: url("https://static.wikia.nocookie.net/mspaintadventures/images/e/eb/SburbAlpha_Logo.svg/revision/latest/scale-to-width-down/512?cb=20200130061041")
  }

  .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: #B2B2B2;
      color: black !important;
  }
  .details-table td:first-child{
      text-transform: uppercase;
      text-align: center;
      width: 50px;
  }

  /*right side*/
  .col.right{
      background-color: #4d4d4d;
      font-family: Courier, monospace;
      font-size: 1.25em;
  }

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

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

  .profile-info .inner, .blog-preview{background-color: #B2B2B2; border: 3px solid var(--darker-blue);}

  .right .heading{
      font-family: 'VT323', monospace;
      font-size: 1.25em;
      border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px;
      background: linear-gradient(90deg, var(--logo-blue) 50%, var(--darker-blue) 100%) !important;
  }

  .right .inner, .count{
      color: gray !important;
  }

  .blurbs p{
    color: var(--blood-color) !important;
    font-weight: bold;
  }
  /*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 138 comments ( View all | Add Comment )

anx :3	1701926111 USINF!!!! Report Comment
M17UN4 :33	1701745107 euguhjju uzign !!!!!!!!!!!!11 Report Comment
⋆｡°✩ wallace	1701654682 using‼️ Report Comment
carden	1701402262 I'VE COME BACK TO USE THIS ONCE MORE Report Comment
Glitchy Red Simp	1701312402 ✦ i Am u✰ing i+. +hank you for making I+ B:3 ✦ Report Comment
Sylph	1701292397 My Profile Photo Seems To Be Clipping Into The Red Borders Report Comment Update On This, Changing The Profile Pic Margin Helps And Changing The Pic Actual Size Does As Well by Sylph; 1701292982; Report Update On This, Changing The Profile Pic Margin Helps And Changing The Pic Actual Size Does As Well by Sylph; 1701292983; Report are you having the issue on mobile or on desktop? by hubert breast; 1701322560; Report
Aradia Megido	1701056286 using Report Comment
nepeta :3 (RP)	1700945797 :33 < thank you!! Report Comment
twinArmageddons	1700936592 using Report Comment
flesta	1700842604 using Report Comment
jade	1699825167 using :D Report Comment
xeroZombie	1699550318 usuing!!! Report Comment
☆ Tavros Nitram !! ☆	1699413307 using!!! Report Comment
Marku	1699403303 Using Report Comment
gallowsCalibrator	1699116746 use Report Comment
mari_green	1698587053 using!! :3 Report Comment
Karkat Vantas	1698553529 CG: USING !! Report Comment
TotallyDiamondDroog	1697768985 Using!! Report Comment
💿 // Dave	1697643949 Using ! Report Comment
lola	1697337076 might use :> Report Comment