vagrant

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

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

[attr="class","abc-selk-jc-text"] selkie and obscure liquid d&b songs, name a more iconic duo.

the big image is 150 by 150 pixels & the accent you gotta edit is at the top of the template. easy peasy.

[attr="class","abc-selk-jc-hash"] [HASH]jcink [HASH]jcinkposting [HASH]jcinklightposting

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

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

#4E8FBD

[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(--vagrantAccent) 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>

.vagrantPost {--vagrantAccent:#4E8FBD;}

</style>
<div align="center">
<div class="vagrantPost">
<div class="vagrantHeader">

<img src="https://image.ibb.co/mEVGHU/image.png" style="width:150px;height:150px;">

</div>
<div class="vagrantBody">
<div>

there's a reason she's alone, <b>you can't pin her down</b>. because no one needs her home, or needs her around. she says, "there's beauty in the hills, a chip in the sky. so don't be sad because i roam, <i>it keeps me alive</i>." to impress her, it's too damn hard, to stay loyal without going too far. if i see her again promise i won't cry. to impress her - it's too damn hard, to stay loyal without going too far. if i see her again promise i won't cry. <br><br>

she wasn't back tonight, and i don't know about you, my money's on the night, it takes her away like i do. my charm is twinkling out of her eyes, of her eyes. she will never grow old, or change her mind, she'll talk about it later on, from seeing the sights. there's something wonderful and odd about the escape, and while you want them to be gone, you want them to stay. and impressing her is just so damn hard, i want her back, and please don't go too far. if i see her again promise i won't cry. to impress her - it's too damn hard, to stay loyal without going too far. if i see her again promise i won't cry. <br><br>

she doesn't come back much, no one misses her like i do. i hope she's having fun, doing what she wants to. and send a postcard or two from the sights sometime. to impress her - it's just too damn hard, and i want her back but she's gone too far. if i see her again promise i won't cry.

</div>
<div class="vagrantNotes">
<div>

put your notes here. they'll autoexpand, but they look better when they're shorter <:

</div>

@admin

</div>
</div></div><div class="vagrantCredit"><a href="http://pixel-perfect.boards.net/user/15">SELKIE</a></div></div>

<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
</head>
<style>
.vagrantPost { width:500px; background-color:#f7f7f7; border-radius:5px; overflow:hidden; }
.vagrantHeader { height:130px; overflow:hidden; background-color:var(--vagrantAccent); }
.vagrantHeader img { height:150px; width:150px; border-radius:100%; margin-top:-61px; padding:50px; background-color:rgba(255,255,255,.25); border:1px solid #fafafa; }
.vagrantBody div:nth-child(1) { text-align:justify; font:400 12px roboto; color:#7a7a7a; border-left:1px solid #ddd; border-right:1px solid #ddd; margin:50px 50px 25px 50px; padding:0px 25px; }
.vagrantBody b { color:var(--vagrantAccent); font:700 12px roboto; }
.vagrantBody i { border-bottom:1px dashed var(--vagrantAccent); color:#aaa; }
.vagrantNotes { padding:0px 50px 50px 50px; display:flex; align-items:center; justify-content:space-between; }
.vagrantNotes div:nth-child(1) { margin:0px; flex-grow:1; overflow:hidden; padding:0px 10px; border:0px; color:#aaa; font:400 11px roboto; }
.vagrantNotes a { font:700 11px roboto; display:inline-block; text-transform:uppercase; background-color:#ccc; background-color:var(--vagrantAccent); color:#fafafa; padding:5px 10px; margin-left:10px; border-radius:3px; }
.vagrantCredit { font:700 7px roboto; margin-left:425px; }
.vagrantCredit a { font:700 7px roboto!important; }
</style>
[/dohtml]

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

[newclass=.selk-jc-vagrant .abc-selk-jc-contain h1, .selk-jc-vagrant .abc-selk-jc-hash a, .selk-jc-vagrant .abc-selk-jc-rules h2]color:#4E8FBD!important;[/newclass] [newclass=.selk-jc-vagrant .abc-selk-jc-link]background-color:#4E8FBD!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=Roboto:400,700] [newclass=.vagrantPost]--vagrantAccent:#4E8FBD;[/newclass]

[attr="class","vagrantPost"]

[attr="class","vagrantHeader"]

[attr="class","vagrantBody"]

there's a reason she's alone, you can't pin her down. because no one needs her home, or needs her around. she says, "there's beauty in the hills, a chip in the sky. so don't be sad because i roam, it keeps me alive." to impress her, it's too damn hard, to stay loyal without going too far. if i see her again promise i won't cry. to impress her - it's too damn hard, to stay loyal without going too far. if i see her again promise i won't cry.

she wasn't back tonight, and i don't know about you, my money's on the night, it takes her away like i do. my charm is twinkling out of her eyes, of her eyes. she will never grow old, or change her mind, she'll talk about it later on, from seeing the sights. there's something wonderful and odd about the escape, and while you want them to be gone, you want them to stay. and impressing her is just so damn hard, i want her back, and please don't go too far. if i see her again promise i won't cry. to impress her - it's too damn hard, to stay loyal without going too far. if i see her again promise i won't cry.

she doesn't come back much, no one misses her like i do. i hope she's having fun, doing what she wants to. and send a postcard or two from the sights sometime. to impress her - it's just too damn hard, and i want her back but she's gone too far. if i see her again promise i won't cry.

[attr="class","vagrantNotes"]

put your notes here. they'll autoexpand, but they look better when they're shorter <:

vriska

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

[newclass=.vagrantPost] width:500px; background-color:#f7f7f7; border-radius:5px; overflow:hidden; [/newclass] [newclass=.vagrantHeader] height:130px; overflow:hidden; background-color:var(--vagrantAccent); [/newclass] [newclass=.vagrantHeader img] height:150px; width:150px; border-radius:100%; margin-top:-61px; padding:50px; background-color:rgba(255,255,255,.25); border:1px solid #fafafa; [/newclass] [newclass=.vagrantBody div:nth-child(1)] text-align:justify; font:400 12px roboto; color:#7a7a7a; border-left:1px solid #ddd; border-right:1px solid #ddd; margin:50px 50px 25px 50px; padding:0px 25px; [/newclass] [newclass=.vagrantBody b] color:var(--vagrantAccent); font:700 12px roboto; [/newclass] [newclass=.vagrantBody i] border-bottom:1px dashed var(--vagrantAccent); color:#aaa; [/newclass] [newclass=.vagrantNotes] padding:0px 50px 50px 50px; display:flex; align-items:center; justify-content:space-between; [/newclass] [newclass=.vagrantNotes div:nth-child(1)] margin:0px; flex-grow:1; overflow:hidden; padding:0px 10px; border:0px; color:#aaa; font:400 11px roboto; [/newclass] [newclass=.vagrantNotes a] font:700 11px roboto; display:inline-block; text-transform:uppercase; background-color:#ccc; background-color:var(--vagrantAccent); color:#fafafa; padding:5px 10px; margin-left:10px; border-radius:3px; [/newclass] [newclass=.vagrantCredit] font:700 7px roboto; margin-left:425px; [/newclass] [newclass=.vagrantCredit a] font:700 7px roboto!important; [/newclass]