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

InternetAlien	1771202750 Using Report Comment
Luu	1771176172 Jsinggg Report Comment
RUSTUNA	1770577657 using :] Report Comment
warzone	1769623110 using! Report Comment
Sparklingsound	1769441248 using :) Report Comment
XxFosterFoxtrot	1769373203 usinggg ;) Report Comment
Mystic Lolz	1768977209 Using cause this is so cool! Report Comment
DoctorHarold	1768956407 Using! Report Comment
ZHADO!!	1768523124 ooo this looks real cool!! using!! Report Comment
ashton👾👾	1768194893 using :3 Report Comment
glamorousMisery	1767594418 Using, ty! Report Comment
lazy :B	1767574862 Using! :) Report Comment
tonguetiedAnimal	1767232040 use!ng :D Report Comment
Marin	1766882134 usssing Report Comment
coltishCobra	1766677088 ~> Ussing thiss. : )) Report Comment
karkles <3	1766466246 usin :) Report Comment
Karkat / Cyrus	1766292954 using [:B Report Comment
6Karkat9	1766264460 USINGGGGGG!!!!!!!!!!!! Report Comment
hollisticZeal	1765850588 using!! Report Comment
CRT	1765739718 using <.< Report Comment but i changed it a little since im not part of the same fandom :( by CRT; 1765740073; Report