buy the stars

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

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

[attr="class","abc-jc-selk-text"] i am immediately starting to see a problem with posting templates based around songs that i like, because buy the stars has been stuck in my head since, like, yesterday. rip @ me.

you'll only have to replace the one accent color at the top, and you can disable the icon animation by deleting the first .buytsHeader img class underneath the accent variable.

[attr="class","abc-jc-selk-hash"] [HASH]lighttracking [HASH]jcinktracking [HASH]dohtml

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

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

#C3A4AE

[attr="class","abc-jc-selk-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(--buytsAccent) 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>
.buythestars { --buytsAccent:#C3A4AE; }
.buytsHeader img {animation-play-state:running!important;}
</style>

<div align="center"><div class="buythestars">
<div class="buytsHeader">

<a title="APPLICATION" href="/"><img src="https://image.ibb.co/cHPEj9/21.png" style="display:block; width:75px; height:75px;"></a>

<h1>firstname lastname</h1>

</div>
<div class="buytsBody">

<div class="buytsTrackerBox">

<h1>ongoing</h1>
<div>

<h2><a href="/">
buy the stars
</a></h2>
<div>
with @admin. all my life i've been so lonely, all in the name of being holy.
</div>

<h2><a href="/">
living dead
</a></h2>
<div>
i haven't lived life, i haven't lived love, just a bird's eye view, from the sky above.
</div>

</div></div>

<div class="buytsTrackerBox">

<h1>complete</h1>
<div>

<h2><a href="/">
radioactive
</a></h2>
<div>
my heart is nuclear, love is all that i fear. ready to be let down, now i’m heading for a meltdown.
</div>

<h2><a href="/">
fear and loathing
</a></h2>
<div>
and now i see it for the first time, there is no crime in being kind.
</div>

<h2><a href="/">
obsessions
</a></h2>
<div>
you never told me what it was that made you strong, and what it was that made you weak.
</div>

<h2><a href="/">
the family jewels
</a></h2>
<div>
welcome to the family jewels, coal to diamonds, sold to fools. welcome to the family jewels, simmer and suffer, can't keep his cool.
</div>

</div></div>

<div class="buytsTrackerBox">
<h1>planned</h1>
<div>

<h2><a href="/">
how to be a heartbreaker
</a></h2>
<div>
rule number one, is that you gotta have fun. but baby when you're done, you gotta be the first to run.
</div>

<h2><a href="/">
hermit the frog
</a></h2>
<div>
i was the wrong damn girl in the wrong damn room, i broke my glass balloon.
</div>

<h2><a href="/">
i am not a robot
</a></h2>
<div>
you don't always have to be on top. better to be hated than loved, loved, loved for what you're not.
</div>

<h2><a href="/">
the state of dreaming
</a></h2>
<div>
i live my life inside a dream, only waking when i sleep. i would sell my sorry soul, if i could have it all.
</div>

</div></div>

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

<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,700|Montserrat+Alternates:400,700|Open+Sans:400,400i|Roboto:400,700" rel="stylesheet">
</head>

<style>
.buythestars { width:500px; background-color:#eee; border-radius:5px; overflow:hidden; }
.buytsHeader { width:500px; height:150px; background-color:#aaa; background-color:var(--buytsAccent); position:relative; display:flex; align-items:center; justify-content:space-between; overflow:hidden; }
.buytsHeader img { width:75px; height:75px; position:relative; margin-left:25px; border-radius:100%; padding:5px; background-color:#fafafa; border:10px solid #333; animation: buytspulse 3s infinite; animation-play-state:paused; }
@keyframes buytspulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0.25); box-shadow: 0 0 0 0 rgba(0,0,0, 0.25); } 33% { -moz-box-shadow: 0 0 0 20px rgba(0,0,0, 0); box-shadow: 0 0 0 20px rgba(0,0,0, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0); box-shadow: 0 0 0 0 rgba(0,0,0, 0); } }
.buytsHeader div:last-child { width:50px; background-color:#333; height:100%; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; }
.buytsHeader div a { font-size:20px; color:#5a5a5a; margin:10px 0px; }
.buytsHeader h1 { margin:0px 0px 0px 25px; display:block; position:relative; text-align:left; font:700 45px/40px montserrat; text-transform:uppercase; color:#fafafa; text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333; }
.buytsHeader:before { content:''; position:absolute; margin-top:-100px; left:0px; width:100%; height:500px; opacity:.15; background-image:url(https://image.ibb.co/btvYeK/transparent_flowers_4.png); background-size:cover; }
.buytsBody { padding:25px; display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; }
.buytsTrackerBox { width:100%; margin-bottom:25px; }
.buytsTrackerBox:last-child { margin-bottom:0px; }
.buytsTrackerBox h1 { margin:0px 0px 0px 25px; text-align:left; font:700 25px/25px montserrat alternates; color:#aaa; color:var(--buytsAccent); text-shadow: -1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; }
.buytsTrackerBox div { background-color:#f5f5f5; margin-top:-5px; text-align:left; padding:10px; border-radius:5px; }
.buytsTrackerBox h2 { margin:0px; min-height:20px; display:flex; align-items:center; justify-content:flex-start; font:300 20px/20px montserrat; font-style:italic; color:#aaa; }
.buytsTrackerBox h2 a {font:300 20px/20px montserrat; color:var(--buytsAccent);}
.buytsTrackerBox h2:before { content:''; min-width:25px; margin-right:10px; height:1px; background-color:#eaeaea; }
.buytsTrackerBox h2:after { content:''; margin-left:10px; flex-grow:1; min-width:25px; height:1px; background-color:#eaeaea; }
.buytsTrackerBox div div { margin:0px; padding:10px 20px; border-radius:0px; font:400 11px open sans; color:#aaa; }
.buytsTrackerBox div div a { font:700 11px montserrat alternates; }
.buytsCredit { font:bold 7px roboto; margin-left:425px; }
.buytsCredit a { font:bold 7px roboto!important; }
</style>
[/dohtml]

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

[newclass=.buythestarsjcink .abc-jc-selk-contain h1, .buythestarsjcink .abc-jc-selk-hash a, .buythestarsjcink .abc-jc-selk-rules h2]color:#C3A4AE!important;[/newclass] [newclass=.buythestarsjcink .abc-jc-selk-link]background-color:#C3A4AE!important;[/newclass] [newclass=.abc-jc-selk-contain, .selk-code] --abc-jc-selk-accent:#CCCCCC; [/newclass] [newclass=.abc-jc-selk-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-jc-selk-contain h1] margin:0px; width:100%; display:flex; flex-flow:row wrap; align-items:center; font:200 32px/32px Raleway; color:var(--abc-jc-selk-accent); [/newclass] [newclass=.abc-jc-selk-contain h1:before] content:''; width:10px; height:1px; background-color:#ccc; flex-grow:2; margin-right:25px; [/newclass] [newclass=.abc-jc-selk-contain h1:after] content:'-Y-Z'; color:#ccc; [/newclass] [newclass=.abc-jc-selk-body] width:350px; border-radius:5px; color:#aaa; font:400 11px roboto; text-align:justify; margin-top:25px; [/newclass] [newclass=.abc-jc-selk-text] background-color:#fafafa; padding:25px; border-radius:5px; [/newclass] [newclass=.abc-jc-selk-hash] margin:25px 0px; text-align:left; [/newclass] [newclass=.abc-jc-selk-hash a] display:inline-block; height:10px; padding:5px 7px; margin:0px 3px 5px 0px; color:var(--abc-jc-selk-accent); background-color:#ddd; border-radius:2px; text-transform:uppercase; font:600 10px/10px roboto; [/newclass] [newclass=.abc-jc-selk-colorpickers] width:350px; display:flex; flex-flow:row wrap; align-items:flex-start; [/newclass] [newclass=.abc-jc-selk-color] display:flex; flex-flow:row nowrap; width:350px; [/newclass] [newclass=.abc-jc-selk-color div] height:10px; display:inline-block; margin-right:5px; background-color:#ccc; [/newclass] [newclass=.abc-jc-selk-color span] height:10px; width:41px; font:600 9px/10px Roboto; color:#ccc; [/newclass] [newclass=.abc-jc-selk-var] width:340px; font:400 10px/13px roboto; margin-top:25px; padding-right:10px; height:25px; overflow:auto; [/newclass] [newclass=.abc-jc-selk-var::-webkit-scrollbar] width:5px; border:0px; [/newclass] [newclass=.abc-jc-selk-var::-webkit-scrollbar-thumb] background-color:#999; border:0px; [/newclass] [newclass=.abc-jc-selk-var::-webkit-scrollbar-track] background-color:#ddd; border:0px; [/newclass] [newclass=.abc-jc-selk-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-jc-selk-rules h2] margin:0px; display:block; width:50px; height:50px; background-color:var(--abc-jc-selk-accent); border-radius:5px; [/newclass] [newclass=.abc-jc-selk-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-jc-selk-link] position:absolute; bottom:0px; left:0px; height:45px; width:45px!important; background-color:var(--abc-jc-selk-accent); display:flex!important; align-items:center!important; justify-content:center!important; border-radius:0px; [/newclass] [newclass=.abc-jc-selk-link i] font-size:20px; color:#fafafa; [/newclass]

[googlefont=Montserrat:300,700|Montserrat+Alternates:700|Open+Sans:400,400i] [newclass=.buythestars] --buytsAccent:#C3A4AE; [/newclass] [newclass=.buytsHeader img]animation-play-state:running!important;[/newclass]

[attr="class","buythestars"]

[attr="class","buytsHeader"]

firstname lastname

[attr="class","buytsBody"]

[attr="class","buytsTrackerBox"]

ongoing

buy the stars

with @selkie. all my life i've been so lonely, all in the name of being holy.

living dead

i haven't lived life, i haven't lived love, just a bird's eye view, from the sky above.

[attr="class","buytsTrackerBox"]

complete

radioactive

my heart is nuclear, love is all that i fear. ready to be let down, now i’m heading for a meltdown.

fear and loathing

and now i see it for the first time, there is no crime in being kind.

obsessions

you never told me what it was that made you strong, and what it was that made you weak.

the family jewels

welcome to the family jewels, coal to diamonds, sold to fools. welcome to the family jewels, simmer and suffer, can't keep his cool.

[attr="class","buytsTrackerBox"]

planned

how to be a heartbreaker

rule number one, is that you gotta have fun. but baby when you're done, you gotta be the first to run.

hermit the frog

i was the wrong damn girl in the wrong damn room, i broke my glass balloon.

i am not a robot

you don't always have to be on top. better to be hated than loved, loved, loved for what you're not.

the state of dreaming

i live my life inside a dream, only waking when i sleep. i would sell my sorry soul, if i could have it all.

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

[newclass=.buythestars] width:500px; background-color:#eee; border-radius:5px; overflow:hidden; [/newclass] [newclass=.buytsHeader] width:500px; height:150px; background-color:#aaa; background-color:var(--buytsAccent); position:relative; display:flex; align-items:center; justify-content:space-between; overflow:hidden; [/newclass] [newclass=.buytsHeader img] width:75px; height:75px; position:relative; margin-left:25px; border-radius:100%; padding:5px; background-color:#fafafa; border:10px solid #333; animation: buytspulse 3s infinite; animation-play-state:paused; } @keyframes buytspulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0.25); box-shadow: 0 0 0 0 rgba(0,0,0, 0.25); } 33% { -moz-box-shadow: 0 0 0 20px rgba(0,0,0, 0); box-shadow: 0 0 0 20px rgba(0,0,0, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0); box-shadow: 0 0 0 0 rgba(0,0,0, 0); }[/newclass] [newclass=.buytsHeader div:last-child] width:50px; background-color:#333; height:100%; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; [/newclass] [newclass=.buytsHeader div a] font-size:20px; color:#5a5a5a; margin:10px 0px; [/newclass] [newclass=.buytsHeader h1] margin:0px 0px 0px 25px; display:block; position:relative; text-align:left; font:700 45px/40px montserrat; text-transform:uppercase; color:#fafafa; text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333; [/newclass] [newclass=.buytsHeader:before] content:''; position:absolute; margin-top:-100px; left:0px; width:100%; height:500px; opacity:.15; background-image:url(https://image.ibb.co/btvYeK/transparent_flowers_4.png); background-size:cover; [/newclass] [newclass=.buytsBody] padding:25px; display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; [/newclass] [newclass=.buytsTrackerBox] width:100%; margin-bottom:25px; [/newclass] [newclass=.buytsTrackerBox:last-child] margin-bottom:0px; [/newclass] [newclass=.buytsTrackerBox h1] margin:0px 0px 0px 25px; text-align:left; font:700 25px/25px montserrat alternates; color:#aaa; color:var(--buytsAccent); text-shadow: -1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; [/newclass] [newclass=.buytsTrackerBox div] background-color:#f5f5f5; margin-top:-5px; text-align:left; padding:10px; border-radius:5px; [/newclass] [newclass=.buytsTrackerBox h2] margin:0px; min-height:20px; display:flex; align-items:center; justify-content:flex-start; font:300 20px/20px montserrat; font-style:italic; color:#aaa; [/newclass] [newclass=.buytsTrackerBox h2 a]font:300 20px/20px montserrat; color:var(--buytsAccent);[/newclass] [newclass=.buytsTrackerBox h2:before] content:''; min-width:25px; margin-right:10px; height:1px; background-color:#eaeaea; [/newclass] [newclass=.buytsTrackerBox h2:after] content:''; margin-left:10px; flex-grow:1; min-width:25px; height:1px; background-color:#eaeaea; [/newclass] [newclass=.buytsTrackerBox div div] margin:0px; padding:10px 20px; border-radius:0px; font:400 11px open sans; color:#aaa; [/newclass] [newclass=.buytsTrackerBox div div a] font:700 11px montserrat alternates; [/newclass] [newclass=.buytsCredit] font:bold 7px roboto; margin-left:425px; [/newclass] [newclass=.buytsCredit a] font:bold 7px roboto!important; [/newclass]