Free layouts for all!

Trollian Myspace

Preview

A responsive Trollian Myspace page for all your needs!

The font used here is Typostuck by Speherh. To download it and use on your website, use Fontsquirrel!

Comes with:

Pre-ripped image borders.
Pre-ripped header.
Buttons you can click.
CSS that ~~hopefully~~ doesn't clash with xisting stylesheets..

HTML

<div id="trollian">
  <header>
    <nav class="btncontainer">
      <a href="LINK HERE">-</a>
      <a href="LINK HERE">X</a>
    </nav>
  </header>

  <aside class="menubar">
    <button>Home</button>
    <button>Browse</button>
    <button>Search</button>
    <button>Troll</button>
    <button>Blog</button>
    <button>Bulletins</button>
    <button>Forum</button>
  </aside>

    <main id="windowtainer">
      <div>
        <section class="window">
          <h2>profileOwner</h2>
          <center>
            <img src="https://i.ibb.co/5WfgwBBs/pfp.png" width="70%" style="filter: drop-shadow(0px 2px#e02413) drop-shadow(0px -2px#e02413) drop-shadow(2px 0px#e02413) drop-shadow(-2px 0px#e02413);">
          </center>
          <table style="width: 95%;">
            <tr>
              <th>Mood:</th>
              <td>____</td>
            </tr>
          </table>

        </section>

        <section class="window">
          <h2>PO's Interests</h2>
          <table>
            <tr>
              <th>General:</th>
              <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
            <tr>
              <th>Music:</th>
              <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
            <tr>
              <th>Games:</th>
              <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
            <tr>
              <th>Television:</th>
              <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
            <tr>
              <th>Movies:</th>
              <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
            <tr>
              <th>Books:</th>
              <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
            <tr>
              <th>Heroes:</th>
              <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
          </table>
        </section>
      </div>


      <div>
        <section class="window">
          <h2>
            PO's Blurbs
          </h2>

          <div class="loglist">
            <b>About me:</b>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum turpis sed nisl ornare, nec venenatis mi pretium. Ut fringilla risus vel tincidunt gravida. Vestibulum ac ultrices eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque condimentum sodales lectus, vel venenatis mi efficitur non. Nam porttitor lacus ac augue ornare, vel blandit orci facilisis. Nullam sit amet nisl vel enim porttitor imperdiet eu consequat ligula. Etiam lectus justo, varius non purus et, semper sagittis nisi. Morbi euismod arcu ut nisl commodo accumsan. Sed ut viverra ipsum, at tempor felis. Mauris non ipsum quis neque pretium pulvinar at in eros. Etiam fringilla turpis nec metus convallis, in porttitor lectus mollis. Mauris fringilla ornare tincidunt. Aliquam porta finibus eleifend. </p>
          </div>

          <div class="loglist">
            <b>Who I'd like to meet:</b>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum turpis sed nisl ornare, nec venenatis mi pretium. Ut fringilla risus vel tincidunt gravida. Vestibulum ac ultrices eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque condimentum sodales lectus, vel venenatis mi efficitur non. Nam porttitor lacus ac augue ornare, vel blandit orci facilisis. Nullam sit amet nisl vel enim porttitor imperdiet eu consequat ligula. Etiam lectus justo, varius non purus et, semper sagittis nisi. Morbi euismod arcu ut nisl commodo accumsan. Sed ut viverra ipsum, at tempor felis. Mauris non ipsum quis neque pretium pulvinar at in eros. Etiam fringilla turpis nec metus convallis, in porttitor lectus mollis. Mauris fringilla ornare tincidunt. Aliquam porta finibus eleifend. </p>
          </div>

        </section>

        <section class="window">
          <h2>
            PO's ChumpRoll
          </h2>

          <div class="loglist">
            <p><b>Displaying 6 of 11 chumps</b></p>
            <section class="loglist chump" style="color: #e02413;">
              <img src="https://i.ibb.co/5WfgwBBs/pfp.png" width="100%" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
              displayName
            </section>
            <section class="loglist chump" style="color: #e02413;">
              <img src="https://i.ibb.co/5WfgwBBs/pfp.png" width="100%" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
              displayName
            </section>
            <section class="loglist chump" style="color:#e02413">
              <img src="https://i.ibb.co/5WfgwBBs/pfp.png" width="100%" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
              displayName
            </section>
            <section class="loglist chump" style="color: #e02413;">
              <img src="https://i.ibb.co/5WfgwBBs/pfp.png" width="100%" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
              displayName
            </section>
            <section class="loglist chump" style="color: #e02413;">
              <img src="https://i.ibb.co/5WfgwBBs/pfp.png" width="100%" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
              displayName
            </section>
            <section class="loglist chump" style="color: #e02413;">
              <img src="https://i.ibb.co/5WfgwBBs/pfp.png" width="100%" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
              displayName
            </section>
          </div>

        </section>

        <section class="window">
          <h2>
            PO's Chump's Comments
          </h2>

          <div class="loglist" style="height: 500px;">
            <p><b>Displaying 10 of 10 comments</b></p>
            <section class="loglist">
              <h2>displayName</h2>
              <img src="https://i.ibb.co/5WfgwBBs/pfp.png" class="comment" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
              <p>Here's a <span class="fakea">fake link</span>.</p>
            </section>
            <section class="loglist">
              <h2>displayName</h2>
              <img src="https://i.ibb.co/5WfgwBBs/pfp.png" class="comment" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
              <p>Hi!</p>
              <div class="loglist">
                <p>Hello!!</p>
                <b>By profileOwner</b>
              </div>
            </section>
          </div>

        </section>

      </div>
    </main>

</div>

CSS

/*Credit Speherh on Fontstruct for the Typostuck font*/
@font-face {
  font-family: typostuck;
  src: url('FILE PATH OF WHERE YOU PUT THE FONT .WOFF HERE')
}
::selection {
  background-color: #ff800050;
}

#trollian {
  border: 5px solid #810707;
  background-color: #4d4d4d;
  background-size: 50px;
}
.window {
  background-color: #ff5f84;
  scrollbar-color:#e02413 #cecece;
}
.menubar {
  background-color:#e02413;
  border: 2px solid #810707;
  border-right: none;
  border-left: none;
}
.menubar button {
  border-right: 2px solid #810707;
}
.menubar button:hover {
  color: #810707;
}
body {
  background-size: 70px;
  font-family: typostuck;
  margin: 20px;
  background-color: #000000;
  image-rendering: pixelated;
}
table {
  text-align: left;
  border-spacing: 5px;
  border-radius: 10px;
  margin: 5px;
  border: 2px solid #c2c2c2;
  background-color:#e02413;
}
th, td {
  margin: 5px;
  border-radius: 10px;
  padding: 5px;
}
td {
  border: 2px solid #c2c2c2;
  background-color: #ffffff;
}
th {
  border: 2px solid #c2c2c2;
  background-color:#e02413;
  color: #ffffff;
}
b {
  color: #000000;
}
header {
  border-radius: 10px 10px 0 0;
  width: 100%;
  height: 110px;
  background-image: url('https://i.ibb.co/M6SnJwS/trollianheader.png');
  background-size: cover;
}
h2 {
  color: #ffffff;
  position: relative;
  border-radius: 10px;
  margin: 5px;
  padding-left: 20px;
}
button {
  font-family: typostuck;
  font-weight: bold;
  cursor: pointer;
  font-size: 20px;
  background-color: #00000000;
}
.fakea {
  color: #0000FF;
  text-decoration: underline;
}

#trollian {
  margin: auto;
  letter-spacing: 1.5px;
  border-radius: 20px 20px 10px 10px;
  max-width: 950px;
  background-size: 50px;
  position: relative;
}
#windowtainer {
  display: grid;
  grid-template-columns: 35% 65%;
  overflow: auto;
  padding: 15px;
}
.window {
  scrollbar-width: 50px;
  padding: 5px;
  margin: 10px;
  margin-top: 45px;
  margin-bottom: 60px;
  min-height: 100px;
  border-image: url('https://i.ibb.co/k8kmvyj/windowborder.png');
  border-image-slice: 20 4 5 3;
  border-image-width: 35px 3px 6px 3px;
  border-image-outset: 35px 3px 6px 3px;
  border-image-repeat: stretch stretch; 
}
.menubar {
  padding: 5px;
}
.menubar button {
  color: #ffffff;
  border: none;
  padding: 5px;
}
.btncontainer {
  position: absolute;
  right: 5px;
  margin-top: 20px;
}
.btncontainer a {
  transition: 0.3s;
  text-decoration: none;
  color: #c2c2c2;
  border: 1.5px solid #c2c2c2;
  font-size: large;
  border-radius: 2px;
  text-align: center;
  padding: 5px;
  padding-left: 8px;
  margin: 5px;
}
.btncontainer a:hover {
  color: #d3d3d3;
  background-color: #00000020;
}
.loglist {
  overflow: auto;
  border-radius: 10px;
  padding: 10px;
  margin: 5px;
  border: 2px solid #c2c2c2;
  background-color: #ffffff;
}
.chump {
  display: inline-block;
  width: 145px;
  margin: 1px;
  text-align: center;
  transition: 0.3s;
}
.chump:hover {
  background-color: #d3d3d370;
}
.comment {
  width: 30%;
  float: left;
  margin-right: 20px; 
}

/*Responsive stuffs..*/
@media (max-width: 950px) {
  body {
    margin: 0;
  }
  #windowtainer {
    padding: 0px;
  }
  .window {
    margin: 5px;
    margin-top: 45px;
    margin-bottom: 60px;
  }
}
@media (max-width: 820px) {
  #windowtainer {
    display: block;
    padding: 0px;
    border-right: none;
  }
}

@media (max-width: 550px){
  header {
    height: 60px;
  }
  .chump {
    width: 40%
  }
}

Trollian Window

Preview

A responsive Trollian window for all your needs!

It's styled to be small, but can easily be styled to fit the entire screen without too many problems. Just edit the trollian ID in the CSS. 0:D

The font used here is Typostuck by Speherh. To download it and use on your website, use Fontsquirrel!

It isn't exactly accurate, but I had fun making it. 0:)

Comes with:

Pre-ripped image borders.
Pre-ripped header.
Buttons you can click.
CSS that ~~hopefully~~ doesn't clash with xisting stylesheets..

HTML

<div id="trollian">
  <header>
    <div class="btncontainer">
      <button class="interactivebtn">-</button>
      <button class="interactivebtn">X</button>
    </div>
  </header>

  <div id="content">
    <main id="windowtainer">

      <div class="window">
        <h2>
          <div class="btncontainer">
            <button class="interactivebtn">-</button>
            <button class="interactivebtn">X</button>
          </div>
          trolling: ???
        </h2>

        <div class="loglist" style="height: 200px;">
          <p>-- ?? [??] began trolling ?? [??] --</p>
          ??: Hey.<br>
          <span style="color: #a5a5a5;">??: Who the fuck are you?!</span>
        </div>

        <div class="input">
          <input placeholder="Send a message!" type="text"> <input style="width: 7.5%" type="submit" value="Send">
        </div>
      </div>

      <div class="window">
        <div class="menubar">
          <button>1</button>
          <button>2</button>
          <button>3</button>
          <button>4</button>
        </div>

        <h2>
          <div class="btncontainer">
            <button>-</button>
            <button>X</button>
          </div>
          Placeholder..
        </h2>
        <center><img title="Really shitty placeholder image." alt="Really shitty placeholder image." src="https://i.ibb.co/bdZFGP1/timelines.png" width="98%"></center>
      </div>

    </main>

    <aside id="chumproll">
      <h2>ChumpRoll</h2>
      <div class="loglist" style="height: 88%;">
        <span style="color: #000000;">⬤ ??</span><br>
        <span style="color: #a5a5a5;">⬤ ??</span>
      </div>
    </aside>
  </div>
</div>

CSS


    body {
      background-color: #1f1f1f;
      margin: 20px;
    }
    /*Credit Speherh on Fontstruct for the Typostuck font*/
    @font-face {
      font-family: typostuck;
      src: url('FILE PATH OF WHERE YOU PUT THE FONT .WOFF HERE');
    }
    #trollian {
      /*Optional ->*/ margin: auto;
      border: 5px solid #c20f00;
      font-family: typostuck;
      letter-spacing: 1.5px;
      border-radius: 20px 20px 10px 10px;
      max-width: 1000px;
      background-color: #4d4d4d;
      position: relative;
    }
    #content {
      height: 600px;
      display: grid;
      grid-template-columns: 75% 25%;
    }
    #windowtainer {
      overflow: auto;
      padding: 15px;
      border-right: 5px solid #c20f00;
    }
    #chumproll {
      background-color: #ff5f84;
      border: 2px solid #c2c2c2;
      border-top: none;
      border-bottom: none;
    }
    .window {
      scrollbar-color: #e02413 #cecece;
      scrollbar-width: 50px;
      background-color: #ff5f84;
      margin: 10px;
      margin-top: 45px;
      margin-bottom: 60px;
      min-height: 100px;
      border-image: url('https://i.ibb.co/k8kmvyj/windowborder.png');
      border-image-slice: 20 4 5 3;
      border-image-width: 35px 3px 6px 3px;
      border-image-outset: 35px 3px 6px 3px;
      border-image-repeat: stretch stretch; 
    }
    .menubar {
      background-color: #c2c2c2;
      padding: 5px;
      top: 0;
    }
    .btncontainer {
      position: absolute;
      right: 5px;
    }
    .btncontainer button {
      color: #c2c2c2;
      background-color: #00000000;
    }
    .loglist {
      overflow: auto;
      border-radius: 10px;
      padding: 10px;
      margin: 5px;
      border: 2px solid #c2c2c2;
      background-color: #ffffff;
    }
    .input {
      margin-top: 5px;
      min-height: 30px;
      padding: 5px;
      background-color: #c2c2c2;
      border-radius: 5px;
    }
    #trollian input {
      font-family: typostuck;
      letter-spacing: 1.5px;
      width: 90%;
      height: 29px;
      border: none;
    }
    #trollian header {
      border-radius: 10px 10px 0 0;
      width: 100%;
      height: 100px;
      background-image: url('https://i.ibb.co/M6SnJwS/trollianheader.png');
      background-size: cover;
    }
    #trollian h2 {
      position: relative;
      border-radius: 10px;
      color: #ffffff;
      margin: 5px;
      border: 2px solid #c2c2c2;
      background-color: #ff2612;
      padding-left: 20px;
    }
    #trollian p {
      color: #000000;
    }
    #trollian button {
      font-family: typostuck;
      letter-spacing: 1.5px;
      font-weight: bold;
      cursor: pointer;
      font-size: 20px;
      background-color: #00000000;
      border: none;
      width: 20px;
    }
    #trollian button:hover {
      background-color: #00000020;
    }
    
  /*Responsive stuffs..*/
    @media (max-width: 950px) {
      #content {
        display: block;
        height: auto;
      }
      #windowtainer {
        padding: 0px;
        border-right: none;
        border-bottom: 5px solid #c20f00;
      }
      #chumproll {
        border-top: 2px solid #c2c2c2;
        border-bottom: 2px solid #c2c2c2;
      }
    }
  
    @media (max-width: 550px){
      header {
        height: 50px;
      }
      h2, button {
        font-size: medium;
      }
    }

Free for all: Layouts

Trollian Myspace

Trollian Window