hello, planet

[attr="class","abc-selk-jc-rules"]

[attr="class","abc-selk-jc-body"]

[attr="class","abc-selk-jc-text"] good morning, good morning~ i'm sad this song is so obscure, it's jammin'.

your sent messages are enclosed in [*h1][*/h1] tags and your received messages are in [*h2][*/h2] tags. the font icons at the bottom are self-hosted, so they'll work regardless of whether or not your site has honeybee icons installed.

[attr="class","abc-selk-jc-hash"] [HASH]jcink [HASH]jcinktechnology [HASH]jcinkinstantmessager [HASH]jcinkim

[attr="class","abc-selk-jc-colorpickers"]

[attr="class","abc-selk-jc-color"]

#94DCD4

[attr="class","abc-selk-jc-color"]

#21B7EC

[attr="class","abc-selk-jc-var"] this template uses css variables for easier editing and is therefore incompatible with internet explorer. if you need this cross-compatibility, use a search and replace to change var(--planetAccent1) and var(--planetAccent2) to the desired hex code.

[attr="class","selk-code"]

edit as much as you want! don't touch the credits! i'd love to see how you use it!

[dohtml]<style>
.hlplIM { --planetAccent1:#94DCD4; --planetAccent2:#21B7EC; }
</style>

<div align="center">
<div class="hlplIM">
<div class="hlplContact">

<img src="https://i.imgur.com/wTujHsB.png" style="display:block; width:75px; height:75px;">

<h1>@[tagged]</h1>

</div>
<div class="hlplMessages">

<h1>to my lonely bed</h1>

<h1>good morning, good morning</h1>

<h2>to a coelacanth tail</h2>

<h1>good morning, good morning</h1>

<h2>to a sphinx tail</h2>

<h1>good morning, good morning</h1>

<h1>to you in my cache memory</h1>

<h2>good morning, good morning</h2>

<h1><img src="https://i.imgur.com/TXjEMJN.png" style="max-width:300px;"></h1>

</div>
<div class="hlplSend"><span class="th th-paper-clip-o"></span> <div></div> <span class="th th-up-direction"></span></div>
</div>
<div class="hlplCredit"><a href="http://pixel-perfect.boards.net/user/15">SELKIE</a></div>
</div>

<head>
<link href="https://fonts.googleapis.com/css?family=Muli:900|Roboto:400,400i,700|Ubuntu:400" rel="stylesheet">
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
</head>

<style>
.hlplIM { width:400px; height:500px; overflow:hidden; border-radius:3px; }
.hlplBanner { height:10px; padding:5px 10px; background-color:#333; color:#fafafa; font:100 10px/21px ubuntu; display:flex; align-items:center; justify-content:space-between; }
.hlplContact { height:93px; padding:10px 10px; background-image: linear-gradient(to bottom right, var(--planetAccent1), var(--planetAccent2) ); display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-start; overflow:hidden; }
.hlplContact img { width:75px; height:75px; border-radius:100%; padding:30px; background-color:rgba(255,255,255,.2); }
.hlplContact h1 { font:900 25px/25px Muli; color:#fafafa; margin-left:-20px; text-align:left; text-transform:uppercase; }
.hlplContact h1 a { color:#fafafa!important; font:900 25px/25px Muli!important; text-shadow:2px 2px rgba(0,0,0,.075)!important;}
.hlplMessages { height:342px; width:400px; overflow:auto; text-align:left; background-color:#eee; display:flex; flex-flow:column nowrap; justify-content:flex-start; padding-top:10px; }
.hlplMessages h1, h2 { margin:0px 10px 10px 10px; max-width:300px; color:#fafafa; padding:10px; font:12px roboto; border-radius:3px; width:auto; }
.hlplMessages h1 img, h2 img { border-radius:3px; display:block!important; max-width:300px!important; border:1px solid rgba(255,255,255,.5);}
.hlplMessages h1 { background: linear-gradient(to bottom right, var(--planetAccent1), var(--planetAccent2) ); margin-left: auto; text-align:right; }
.hlplMessages h2 { background: var(--planetAccent2); margin-right:auto; text-align:left; }
.hlplSend { background-image: linear-gradient(to right, var(--planetAccent1), var(--planetAccent2) ); height:35px; padding:0px 5px; display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-start; }
.hlplSend div { width:318px; height:13px; margin:0px 5px; padding:5px; background-color:rgba(255,255,255,.25); font:400 10px/15px Ubuntu; color:#fafafa; cursor:text; }
.hlplSend div::before { content:'ENTER YOUR MESSAGE...'; }
.hlplSend span { color:#fafafa; width:25px; height:25px; background-color:rgba(255,255,255,.33); display:flex; align-items:center; justify-content:center; border-radius:100%; font-size:12px; transition:.1s ease; }
.hlplSend span:hover { font-size:15px; cursor:pointer; transition:.1s ease; }
.hlplMessages::-webkit-scrollbar { width:7px;border:0px; }
.hlplMessages::-webkit-scrollbar-track { background-color:#eee;border:0px;}
.hlplMessages::-webkit-scrollbar-thumb { background-image: linear-gradient(to bottom, var(--planetAccent1), var(--planetAccent2) );border-radius:7px;border:0px; } 
.hlplCredit { font:800 7px roboto; margin-left:350px; }
.hlplCredit a { font:800 7px roboto; }
</style>[/dohtml]

[attr="class","abc-selk-jc-link"] [attr="class","lnr lnr-link"]

[newclass=.selk-jc-hello-planet .abc-selk-jc-contain h1, .selk-jc-hello-planet .abc-selk-jc-hash a, .selk-jc-hello-planet .abc-selk-jc-rules h2]color:#21B7EC!important;[/newclass] [newclass=.selk-jc-hello-planet .abc-selk-jc-link]background-color:#21B7EC!important;[/newclass] [newclass=.abc-selk-jc-contain, .selk-code] --abc-selk-jc-accent:#CCCCCC; [/newclass] [newclass=.abc-selk-jc-contain] width:500px; padding:25px; -webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px; background-color:#eee; display:flex; flex-flow:row-reverse wrap; justify-content:space-between; position:relative; overflow:hidden; [/newclass] [newclass=.abc-selk-jc-contain h1] margin:0px; width:100%; display:flex; flex-flow:row wrap; align-items:center; font:200 32px/32px Raleway; color:var(--abc-selk-jc-accent); [/newclass] [newclass=.abc-selk-jc-contain h1:before] content:''; width:10px; height:1px; background-color:#ccc; flex-grow:2; margin-right:25px; [/newclass] [newclass=.abc-selk-jc-contain h1:after] content:'-Y-Z'; color:#ccc; [/newclass] [newclass=.abc-selk-jc-body] width:350px; border-radius:5px; color:#aaa; font:400 11px roboto; text-align:justify; margin-top:25px; [/newclass] [newclass=.abc-selk-jc-text] background-color:#fafafa; padding:25px; border-radius:5px; [/newclass] [newclass=.abc-selk-jc-hash] margin:25px 0px; text-align:left; [/newclass] [newclass=.abc-selk-jc-hash a] display:inline-block; height:10px; padding:5px 7px; margin:0px 3px 5px 0px; color:var(--abc-selk-jc-accent); background-color:#ddd; border-radius:2px; text-transform:uppercase; font:600 10px/10px roboto; [/newclass] [newclass=.abc-selk-jc-colorpickers] width:350px; display:flex; flex-flow:row-reverse wrap; align-items:flex-start; [/newclass] [newclass=.abc-selk-jc-color] display:flex; flex-flow:row-reverse nowrap; width:350px; [/newclass] [newclass=.abc-selk-jc-color div] height:10px; display:inline-block; margin-left:41px; background-color:#ccc; [/newclass] [newclass=.abc-selk-jc-color span] height:10px; width:0px; display:flex; font:600 9px/10px Roboto; color:#ccc; [/newclass] [newclass=.abc-selk-jc-var] width:340px; font:400 10px/13px roboto; margin-top:25px; padding-right:10px; height:25px; overflow:auto; [/newclass] [newclass=.abc-selk-jc-var::-webkit-scrollbar] width:5px; border:0px; [/newclass] [newclass=.abc-selk-jc-var::-webkit-scrollbar-thumb] background-color:#999; border:0px; [/newclass] [newclass=.abc-selk-jc-var::-webkit-scrollbar-track] background-color:#ddd; border:0px; [/newclass] [newclass=.abc-selk-jc-rules] margin:25px 0px 0px 0px; text-align:left; width:125px; display:flex; justify-content:flex-start; align-self:stretch; align-items:flex-end; flex-flow:column nowrap; border-left:1px solid #ddd; [/newclass] [newclass=.abc-selk-jc-rules h2] margin:0px; display:block; width:50px; height:50px; background-color:var(--abc-selk-jc-accent); border-radius:5px; [/newclass] [newclass=.abc-selk-jc-rules img] width:100px; height:100px; border-radius:5px; [/newclass] [newclass=.selk-code] background-color:#eee; width:500px; padding:25px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; margin-top:-25px; position:relative; overflow:hidden; [/newclass] [newclass=.selk-code div] margin:0px!important; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; [/newclass] [newclass=.selk-code div span] display:inline-block; font:700 9px roboto; color:#333; text-transform:uppercase; background-color:#ddd; margin:0px 5px 25px 0px; padding:5px 8px; border-radius:3px; [/newclass] [newclass=.selk-code code] display:block; width:400px!important; height:100px!important;overflow:auto!important; padding:25px!important; text-align:justify; border-radius:5px; font:11px roboto; color:#aaa; background-color:#f7f7f7; border:0px!important; [/newclass] [newclass=.selk-code .code_tag_toggle]margin-top:25px; border:0px!important; color:#333!important; font:700 9px/9px roboto!important; padding:5px 10px!important; border-radius:3px!important;[/newclass] [newclass=.abc-selk-jc-link] position:absolute; bottom:0px; left:0px; height:45px; width:45px!important; background-color:var(--abc-selk-jc-accent); display:flex!important; align-items:center!important; justify-content:center!important; border-radius:0px; [/newclass] [newclass=.abc-selk-jc-link i] font-size:20px; color:#fafafa; [/newclass]

[googlefont=Muli:900|Ubuntu:400] [newclass=.hlplIM] --planetAccent1:#94DCD4; --planetAccent2:#21B7EC; [/newclass]

[attr="class","hlplIM"]

[attr="class","hlplContact"]

vriska

[attr="class","hlplMessages"]

to my lonely bed

good morning, good morning

to a coelacanth tail

good morning, good morning

to a sphinx tail

good morning, good morning

to you in my cache memory

good morning, good morning

[attr="class","hlplSend"][attr="class","th th-paper-clip-o"]

[attr="class","th th-up-direction"]

[attr="class","hlplCredit"]SELKIE

[newclass=.hlplIM] width:400px; height:500px; overflow:hidden; border-radius:3px; [/newclass] [newclass=.hlplBanner] height:10px; padding:5px 10px; background-color:#333; color:#fafafa; font:100 10px/21px ubuntu; display:flex; align-items:center; justify-content:space-between; [/newclass] [newclass=.hlplContact] height:93px; padding:10px 10px; background-image: linear-gradient(to bottom right, var(--planetAccent1), var(--planetAccent2) ); display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-start; overflow:hidden; [/newclass] [newclass=.hlplContact img] width:75px; height:75px; border-radius:100%; padding:30px; background-color:rgba(255,255,255,.2); [/newclass] [newclass=.hlplContact h1] font:900 25px/25px Muli; color:#fafafa; margin-left:-20px; text-align:left; text-transform:uppercase; [/newclass] [newclass=.hlplContact h1 a] color:#fafafa!important; font:900 25px/25px Muli!important; text-shadow:2px 2px rgba(0,0,0,.075)!important;[/newclass] [newclass=.hlplMessages] height:342px; width:400px; overflow:auto; text-align:left; background-color:#eee; display:flex; flex-flow:column nowrap; justify-content:flex-start; padding-top:10px; [/newclass] [newclass=.hlplMessages h1, h2] margin:0px 10px 10px 10px; max-width:300px; color:#fafafa; padding:10px; font:12px roboto; border-radius:3px; width:auto; [/newclass] [newclass=.hlplMessages h1 img, h2 img] border-radius:3px; display:block!important; max-width:300px!important; border:1px solid rgba(255,255,255,.5);[/newclass] [newclass=.hlplMessages h1] background: linear-gradient(to bottom right, var(--planetAccent1), var(--planetAccent2) ); margin-left: auto; text-align:right; [/newclass] [newclass=.hlplMessages h2] background: var(--planetAccent2); margin-right:auto; text-align:left; [/newclass] [newclass=.hlplSend] background-image: linear-gradient(to right, var(--planetAccent1), var(--planetAccent2) ); height:35px; padding:0px 5px; display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-start; [/newclass] [newclass=.hlplSend div] width:318px; height:13px; margin:0px 5px; padding:5px; background-color:rgba(255,255,255,.25); font:400 10px/15px Ubuntu; color:#fafafa; cursor:text; [/newclass] [newclass=.hlplSend div::before] content:'ENTER YOUR MESSAGE...'; [/newclass] [newclass=.hlplSend span] color:#fafafa; width:25px; height:25px; background-color:rgba(255,255,255,.33); display:flex; align-items:center; justify-content:center; border-radius:100%; font-size:12px; transition:.1s ease; [/newclass] [newclass=.hlplSend span:hover] font-size:15px; cursor:pointer; transition:.1s ease; [/newclass] [newclass=.hlplMessages::-webkit-scrollbar] width:7px;border:0px; [/newclass] [newclass=.hlplMessages::-webkit-scrollbar-track] background-color:#eee;border:0px;[/newclass] [newclass=.hlplMessages::-webkit-scrollbar-thumb] background-image: linear-gradient(to bottom, var(--planetAccent1), var(--planetAccent2) );border-radius:7px;border:0px; [/newclass] [newclass=.hlplCredit] font:800 7px roboto; margin-left:350px; [/newclass] [newclass=.hlplCredit a] font:800 7px roboto; [/newclass] [newclass=.hlplhoneybee]speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale } @font-face { font-family: "honeybee";src:url("//dl.dropbox.com/s/0l8lnm6qy7vzwn7/honeybee.eot");src:url("//dl.dropbox.com/s/0l8lnm6qy7vzwn7/honeybee.eot?#iefix") format("embedded-opentype"),url("//dl.dropbox.com/s/504hc3yd80hv4ux/honeybee.woff") format("woff"),url("//dl.dropbox.com/s/2f5jbp3v8tjk5hf/honeybee.ttf") format("truetype"),url("//dl.dropbox.com/s/nyfekn9fqo1wid2/honeybee.svg#honeybee") format("svg");font-weight: normal;font-style: normal;[/newclass] [newclass=.th-paper-clip-o:before]font-family: "honeybee";content:"\e269";[/newclass] [newclass=.th-up-direction:before]font-family: "honeybee";content:"\e48e";[/newclass]