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 324 comments ( View all | Add Comment )

Kenon	1761099629 Using (with some edits) Report Comment
2teal lex	1760897299 UZEINGGG Report Comment
FritzzXxD	1760373131 ahhhhhh using ths Report Comment
𐔌 . ⋮ matt .ᐟ ֹ ₊ ꒱	1760280914 using aaaa Report Comment
eclipsingVessel	1760061824 hmmm yesss usinggg! Report Comment
fenix / bunny	1759676459 usin Report Comment
Lizzy	1759292684 Using!! Report Comment
MassacreGirl	1758961774 using! this is so cool! Report Comment
Sh9nyx	1758570695 Using! Report Comment
SmokeyAsh	1758267653 using!! <3 Report Comment
DJ!!!	1758044678 using!! ^^ Report Comment
Kaizito	1757438303 USING!! Report Comment
Neil	1757204379 Def using!! Report Comment
mike	1757172844 using Report Comment
Sammy!!	1757125067 Using!!! Report Comment
ravingAnomaly	1755991110 I don’t even have to change the hex lol Report Comment
🎧ReowR★.ᐟ	1755655942 Usiing :]!! Report Comment
SystemErrorr	1755009063 using!! :0D Report Comment
carcinoGeneticist	1753756789 USING!! Report Comment
jude	1753649935 usin Report Comment