hic sunt dracones

« Prev
1
Next »

options

quote

hic sunt dracones written Jul 2, 2018 21:47:11 GMT

ᕕ( ᐛ )ᕗ

aliasthat bitch.

pronouns"that bitch" still works tbh (any OK!)

551written posts

selkieearned bits

offlinecurrently

pharaoh leap, valka, and 5 more like this

selkie

Part of the Furniture

a verb in perfect view.

[nospaces][googlefont=Raleway:300,400,700|Inconsolata:400,700|Montserrat+Alternates:400,700]

[attr="class","s-contain"]

[attr="class","s-side"]

[attr="class","s-side-ani"]

[attr="class","s-body"]

[attr="class","s-body-content"]

[attr="class","s-head"]$('.selkie-coding-gallery')

[PTabbedContent]

[PTab=

[attr="class","s-tabs"]introduction

]

[attr="class","s-stats"]

[attr="class","s-stats-txt"]
hi, i'm selkie! i'm 21 and a biology major currently in my third year of college. aside from writing as a hobby, i've been working with HTML/CSS for something shy of a decade, and have been dabbling in JS as of late! i consider myself a web developer over a web designer and love conceptualizing whacky ideas and figuring out how to manipulate html/css to make them a reality. please note that templates posted in this thread are not free for use unless they are posted elsewhere on site. however, feel free to use, edit, or modify the demos as you wish!

[attr="class","s-stats-body"]

[attr="class","s-stat-entry"]
posting

templates

[attr="class","s-stat-entry"]
plotting

templates

[attr="class","s-stat-entry"]
tracking

templates

[attr="class","s-stat-entry"]
miscellaneous

templates

[/PTab={codes}]

[PTab=

[attr="class","s-tabs"]templates

]

[/PTab={codes}]

[PTab=

[attr="class","s-tabs"]challenges

]

</challenge class="abcs-of-code">

</challenge class="solo-challenges">

[attr="class","s-challenges"]
.color-splash { template-type:posting; }
.gradual-repetition { template-type:posting; }
.kuler-than-me { template-type:posting; }
.nightcall { template-type:posting; }
.out-with-the-old { template-type:posting; }
.problematic-fav { template-type:plotting; }
.this-is-for-music { template-type:playlist; }

[/PTab={height:calc(545px - 25px); display:grid;}]

[/PTabbedContent={margin-top:25px;}]

$accent:#df6885; $sidepattern:url(https://image.ibb.co/h5t3vf/pixel-pattern.png); $bodypattern:url(https://image.ibb.co/hREb3o/08.png); [newclass=.s-contain] width:686px; height:686px; background:#fafafa; display:flex; flex-flow:row wrap; border-radius:10px; overflow:hidden; [/newclass]
[newclass=.s-side] position:relative; height:100%; width:33%; overflow:hidden; background-color: #fc5296; background-image: linear-gradient(315deg, #fc5296 0%, #f67062 74%); [/newclass]
[newclass=.s-side::before] content:''; position:absolute; bottom:-110px; right:-20px; width:200px; height:200px; transform:rotate(45deg); border-radius:20px; background-color:#fff; opacity:.5; z-index:0; [/newclass]
[newclass=.s-side::after] content:''; position:absolute; height:100%; width:100%; background:url(https://i.ibb.co/SJrqSrh/5px-grid.png); top:0px; left:0px; filter:invert(1); opacity:0.066; z-index:0; [/newclass]
[newclass=.s-side img] height:900px; position:absolute; top:-50px; left:-70px; filter:grayscale(50%) contrast(50%); opacity:.92; z-index:1; [/newclass]
[newclass=.s-side-ani] width:500px; height:500px; border-radius:100%; border:10px dotted #fafafa; opacity:.25; position:absolute; left:-5px; animation:60s s-side-ani linear infinite; } @keyframes s-side-ani { from { transform:rotate(0deg); } to { transform:rotate(-360deg); }[/newclass]
[newclass=.s-head] height:35px; font:700 30px/120% montserrat alternates; padding:25px 10px 0px 10px; color:$accent; background-image: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; color: transparent; position:relative; [/newclass]
[newclass=.s-body] width:67%; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:center; position:relative; z-index:0; overflow:hidden; [/newclass]
[newclass=.s-body:before] content:''; position:absolute; width:100%; height:100%; top:0px; left:0px; background:$bodypattern; opacity:0.0125; [/newclass]
[newclass=.s-body-content] z-index:1; [/newclass]
[newclass=.s-buttons] height:auto; width:calc(100% - 50px); display:flex; padding:25px; display:flex; justify-content:space-between; [/newclass]
[newclass=.s-tabs] height:11px; font:700 11px/100% roboto; text-transform:uppercase; background:#fefefe; color:#f67062; padding:10px 30px; border-radius:20px; box-shadow:2px 2px 5px rgba(0,0,0,.050); transition:.25s; cursor:pointer; } @keyframes s-tabs-ani { 0% { transform:translateY(0px); } 50% { transform:translateY(-3px); } 100% { transform:translateY(0px); }[/newclass]
[newclass=.s-tabs:hover] background:rgba(255,255,255,0.8); transform:translateY(-3px); transition:.25s; [/newclass]
[newclass=.s-stats] flex-grow:1; [/newclass]
[newclass=.s-stats-txt] background-color:#fefefe; padding:20px; margin:0px 25px; border-radius:10px; box-shadow:0px 0px 10px rgba(0,0,0,.05); font:12px/140% inconsolata; color:#555; text-align:justify; [/newclass]
[newclass=.s-stats-txt b] font:700 12px inconsolata; color:transparent; background-image: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; [/newclass]
[newclass=.s-stats-txt:before] content:"/* "; color:#ccc; [/newclass]
[newclass=.s-stats-txt:after] content:" */"; color:#ccc; [/newclass]
[newclass=.s-stats-body] display:flex; height:325px; padding:10px 50px; flex-flow:row wrap; align-items:center; justify-content:space-between; [/newclass]
[newclass=.s-stat-entry] width:150px; height:150px; background:#fefefe; border-radius:100%; box-shadow:0px 0px 10px rgba(0,0,0,.05); display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; text-transform:uppercase; position:relative; overflow:hidden; transition:.25s; cursor:default;[/newclass]
[newclass=.s-stat-entry:hover] transform:translateY(-5px); transition:.25s; [/newclass]
[newclass=.s-stat-entry div] display:block; font:700 75px/100% montserrat alternates; color:transparent; background: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; [/newclass]
[newclass=.s-stat-entry span] bottom:30px; color:#ddd; font:700 10px/100% roboto; [/newclass]

[newclass=.s-templates] max-height:calc(510px - 40px); overflow:auto; background-color:#fefefe; margin:0px 25px; border-radius:10px; border:25px solid #fefefe; box-shadow:0px 0px 10px rgba(0,0,0,.05); font:13px/140% roboto; color:#555; text-align:justify; [/newclass]
[newclass=.s-templates a] display:block; height:13px; padding:10px 0px; border-top:1px solid #eee; color:transparent!important; font:12px/13px Inconsolata; background: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; text-decoration:none; text-transform:lowercase; [/newclass]
[newclass=.s-templates a:first-child] padding-top:0px; border:0px; [/newclass]
[newclass=.s-templates i] color:#aaa; font-style:normal; [/newclass]
[newclass=.s-templates::-webkit-scrollbar] width:15px; [/newclass]
[newclass=.s-templates::-webkit-scrollbar-thumb] width:5px; background: linear-gradient(0deg, #fc5296 0%, #f67062 74%); border-radius:7px; border:7px solid #fefefe;[/newclass]

[newclass=.s-templates::-webkit-scrollbar-track] background:#e3e3e3; border:7px solid #fefefe;[/newclass]
[newclass=.s-body h1] width:100%; margin:0px 0px 4px 0px; position:relative; z-index:2; font:300 19px/100% raleway; color: #aaa; text-align:center; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; text-shadow: -1px -1px 0 #fefefe, 1px -1px 0 #fefefe, -1px 1px 0 #fefefe, 1px 1px 0 #fefefe; [/newclass]
[newclass=.s-body h1::after] content:''; width:66%; position:relative; z-index:0; height:7px; top:-10px; [/newclass]
[newclass=.s-challenges, .s-challenges-2] overflow:auto; background-color:#fefefe; margin:0px 25px; border-radius:10px; border:25px solid #fefefe; box-shadow:0px 0px 10px rgba(0,0,0,.05); font:13px/140% roboto; color:#555; text-align:justify; padding:0px 15px; [/newclass]
[newclass=.s-challenges a, .s-challenges-2 a] display:block; height:13px; padding:10px 0px; border-top:1px solid #eee; color:transparent!important; font:12px/13px Inconsolata; background: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; text-decoration:none; text-transform:lowercase; [/newclass]
[newclass=.s-challenges a:first-child, .s-challenges-2 a:first-child] padding-top:0px; border:0px; [/newclass]
[newclass=.s-challenges i, .s-challenges-2 i] color:#aaa; font-style:normal; [/newclass]
[newclass=.s-challenges::-webkit-scrollbar, .s-challenges-2::-webkit-scrollbar] width:15px; [/newclass]
[newclass=.s-challenges::-webkit-scrollbar-thumb, .s-challenges-2::-webkit-scrollbar-thumb] width:5px; background: linear-gradient(0deg, #fc5296 0%, #f67062 74%); border-radius:7px; border:7px solid #fefefe;[/newclass]
[newclass=.s-challenges::-webkit-scrollbar-track, .s-challenges-2::-webkit-scrollbar-track] background:#e3e3e3; border:7px solid #fefefe;[/newclass]
[newclass=.s-challenges-2]grid-row-end: span 3[/newclass]

[newclass=.s-contain table.PT_table]border:0px!important;[/newclass]
[newclass=.s-contain table td]padding:0px!important;[/newclass]
[newclass=.s-contain .PT_Tabs_holder]padding:0px!important; display:flex; [/newclass]
[newclass=.s-contain .PT_table .PT_Tabs]padding:0px!important; width:100px!important;[/newclass]
[newclass=.s-contain .PT_tabs_selected]background:transparent;[/newclass]

[newclass=.s-contain .PT_tabs_selected .s-tabs]color:#fc5296; background-color:#fff; transform:translateY(-3px)[/newclass]
[newclass=.s-contain .PT_tabs_selected_hover .s-tabs]color:#fc5296; background-color:#fff; transform:translateY(-3px);[/newclass]

[newclass=.s-contain .PT_tabs_hover]background:transparent;[/newclass]
[newclass=.s-contain .PT_tabs_selected_hover]background:transparent;[/newclass]
[newclass=.s-contain .PT_Tabs_holder tbody tr]width: 410px; margin:0px 25px; display: flex; flex-flow: row wrap; justify-content: space-between;[/newclass]
[newclass=.s-contain .PT_spots]margin-top:25px;background-color:transparent;[/newclass]

last edit on Apr 5, 2021 4:52:40 GMT by selkie

all my proboards templates require the style tags plugin!

options

quote

hic sunt dracones written Jul 11, 2018 17:45:33 GMT

ᕕ( ᐛ )ᕗ

aliasthat bitch.

pronouns"that bitch" still works tbh (any OK!)

551written posts

selkieearned bits

offlinecurrently

pharaoh leap, lumi, and 9 more like this

selkie

Part of the Furniture

a verb in perfect view.

[nospaces][googlefont=Inconsolata:400,700|Roboto:400,900]

[attr="class","s-ch-contain"]

[attr="class","s-ch-side"]

changelog

[attr="class","s-ch-body"]

v1.0.0

look at that! after a SOLID two and a half years since pixel lauched, i finally fricken' got around to coding a gallery code. i think it's nifty! it's also uh....unnamed, bc i can't think of a good song title for it orz. let's just call it v1.0 for now! [break][break]

ngl, using selkie as a sidebar is cute, but at the same time like.....it's important that people know that i was first ok. intsys owes me royalties >:[

[newclass=.s-ch-contain] width:400px; background:#fcfcfc; border-radius:10px; overflow:hidden; box-shadow:0px 0px 10px rgba(0,0,0,.075); margin:10px; [/newclass]
[newclass=.s-ch-contain] display:flex; flex-flow:row-reverse wrap; [/newclass]
[newclass=.s-ch-side] width:25%; background-image:linear-gradient(315deg, #fc5296 0%, #f67062 74%); display:grid; position:relative; grid-template-columns: 1fr 1fr 1fr 1fr; [/newclass]
[newclass=.s-ch-side::after] content: ''; position: absolute; height: 100%; width: 100%; background: url(https://i.ibb.co/SJrqSrh/5px-grid.png); top: 0px; left: 0px; filter: invert(1); opacity: 0.066; z-index: 0; [/newclass]
[newclass=.s-ch-side h1] margin:0px; font:900 30px/42px roboto; text-transform:uppercase; color:#fefefe; writing-mode: vertical-rl; grid-row-start:10; text-shadow:1px 1px rgba(0,0,0,.2); [/newclass]
[newclass=.s-ch-body] padding:50px; width:calc(75% - 100px); font:12px Inconsolata; color:#555; text-align:left; [/newclass]
[newclass=.s-ch-body h2] margin:0px 0px 10px; font:700 20px montserrat alternates; text-align:right; background-image: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; color: transparent; [/newclass]

last edit on Feb 6, 2020 4:26:54 GMT by selkie

all my proboards templates require the style tags plugin!

options

quote

hic sunt dracones written Jul 12, 2018 18:53:04 GMT

ᕕ( ᐛ )ᕗ

aliasthat bitch.

pronouns"that bitch" still works tbh (any OK!)

551written posts

selkieearned bits

offlinecurrently

Dolten♦, Sharp, and 1 more like this

selkie

Part of the Furniture

a verb in perfect view.

[nospaces]

ANIMATION DEMO: [break][break]

[attr="class","animationTesting"]

[newclass=.animationTesting]border:2px solid transparent; border-left:2px solid #bbb; height:100px; width:100px; border-radius:100%; animation: spinner 4s linear infinite; } @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); }[/newclass]

[break]

[div][attr="class","animationTesting"][/div]

[newclass=.animationTesting]border:2px solid transparent; border-left:2px solid #bbb; height:100px; width:100px; border-radius:100%;  animation: spinner 4s linear infinite; } @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); }[/newclass]

[break][break]

CUSTOM FONT DEMO:

[attr="class","fontfaceTesting"]lorem ipsum.

[newclass=.fontfaceTesting]font:bold 25px 'Signerica Fat'; } @font-face { font-family:Signerica Fat; src:url(//dl.dropbox.com/s/o5tlpkcxt7qwgj1/Signerica_Fat.ttf) format('truetype');[/newclass][break]

[div][attr="class","fontfaceTesting"]lorem ipsum.[/div]

[newclass=.fontfaceTesting]font:bold 25px 'Signerica Fat'; } @font-face { font-family:Signerica Fat; src:url(//dl.dropbox.com/s/o5tlpkcxt7qwgj1/Signerica_Fat.ttf) format('truetype');[/newclass]

PSEUDO SVG IN PROBOARDS RUNDOWN

[break]

1. generate svg as normal while coding [break]
2. paste finished svg xml into the converter at the bottom here; edit dimensions of svg as necessary (pulling them from inspect element in the original code is easiest)[break]
3. replace svg xml with inserted image (can probably also use it in pseudoelements to cut down on # of divs) [break]
4. edit as necessary to make PB happy. you'll likely need to set the img html tag to display:block && you may need to slightly manipulate margins/img size to display properly

last edit on Oct 22, 2020 15:37:57 GMT by selkie

all my proboards templates require the style tags plugin!

options

quote

hic sunt dracones written Nov 27, 2018 5:17:46 GMT

ᕕ( ᐛ )ᕗ

aliasthat bitch.

pronouns"that bitch" still works tbh (any OK!)

551written posts

selkieearned bits

offlinecurrently

pharaoh leap, valka, and 10 more like this

selkie

Part of the Furniture

a verb in perfect view.

[nospaces][googlefont=Montserrat:700|Roboto:700]

[attr="class","CaFBorder"]

[attr="class","CaFBody"]

[attr="class","CaFHeader"]

[attr="class","CaFIcon"]

[attr="class","CaFAni"]

[attr="class","CaFLyric"]

[attr="class","CaFLyric1"]why can't i see

[attr="class","CaFLyric1"]all the colors

[attr="class","CaFLyric2"]that you see

[attr="class","CaFPost"]

lorem ipsum dolor sit amet, consectetur adipiscing elit. vivamus nec orci aliquam, sodales nibh at, interdum ante. integer luctus elementum libero quis aliquet. cras non diam ut diam porttitor bibendum. sed eu risus vitae urna viverra pulvinar vel eget ipsum. mauris et maximus tortor, sit amet tristique purus. ut mattis non dolor ut pharetra. aliquam erat volutpat. donec id neque arcu. sed metus diam, iaculis at efficitur ac, maximus quis lacus. aenean luctus, nibh at euismod aliquet, leo ex lobortis orci, et consectetur ex nibh volutpat sem. suspendisse in purus lacus. curabitur posuere ipsum et placerat euismod. praesent tincidunt nibh orci, nec gravida leo consequat a. cras mattis tincidunt mi, non maximus orci mattis in. nunc in lacus non sapien hendrerit venenatis interdum vitae dui. [break][break]

orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. proin pellentesque est ac arcu commodo, vel commodo turpis egestas. mauris in lectus vitae metus convallis feugiat. donec porta lorem a fringilla convallis. donec eleifend tellus sed magna tempus pellentesque. curabitur tempor diam sed nibh condimentum, sed hendrerit purus molestie. proin at malesuada dui. maecenas auctor porta nisl, dictum faucibus dolor egestas eu. sed scelerisque ligula et purus fermentum, et molestie velit rutrum. [break][break]

interdum et malesuada fames ac ante ipsum primis in faucibus. donec varius consequat tortor, vitae lobortis eros bibendum in. suspendisse potenti. duis eu ex eros. aliquam erat volutpat. cras mattis nulla mollis varius lobortis. donec pellentesque elit lorem, eget aliquet leo volutpat nec. proin ultricies tincidunt condimentum. nullam bibendum neque a mattis tempus. quisque ac purus placerat augue ornare imperdiet eget eget turpis. nunc diam nisi, tincidunt non mattis vel, pharetra eget libero. donec nunc dui, bibendum consequat convallis vel, rhoncus vel est. curabitur volutpat cursus augue et imperdiet.

[attr="class","CaFFooter"]

[attr="class","CaFNotes"]

put your notes here!

[attr="class","CaFTag"]

@tagged

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

[newclass=.CaFBorder] border:10px solid #efefef; outline:1px solid #ddd; width:452px; margin:1px; [/newclass]
[newclass=.CaFBody] border:1px solid #ddd; background-color:#fefefe; [/newclass]
[newclass=.CaFHeader] display:flex; justify-content:space-between; align-items:center; background-color:#fafafa; border-bottom:1px solid #ddd; padding:20px; [/newclass]
[newclass=.CaFIcon] padding:10px; width:100px; height:100px; border:2px solid #ddd; display:flex; align-items:center; justify-content:center; border-radius:100%; [/newclass]
[newclass=.CaFAni] border:2px solid transparent; border-right:2px solid #B84244; height:120px; width:120px; border-radius:100%; position:absolute; -ms-animation: spinner 2.5s linear infinite; -moz-animation: spinner 2.5s linear infinite; -webkit-animation: spinner 2.5s linear infinite; -o-animation: spinner 2.5s linear infinite; animation: spinner 2.5s linear infinite; z-index:1; } @keyframes spinner { 0% { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } }[/newclass]
[newclass=.CaFLyric] display:flex; flex-direction:column; cursor:default [/newclass]
[newclass=.CaFLyric1] font:700 31px/100% Montserrat; color:#ddd; text-transform:uppercase; text-align:right; [/newclass]
[newclass=.CaFLyric2] font:800 24px Signerica_Fat; color:#88C26D; line-height:24px; text-shadow: #FAFAFA 1px 1px, #FAFAFA -1px 1px, #FAFAFA 1px -1px, #FAFAFA -1px -1px; margin-top:-10px; } @font-face { font-family:Signerica_Fat; src:url(//dl.dropbox.com/s/o5tlpkcxt7qwgj1/Signerica_Fat.ttf) format('truetype'); [/newclass]
[newclass=.CaFPost] font:11px roboto; color:#7a7a7a; padding:50px; text-align:justify; [/newclass]
[newclass=.CaFPost b] color:#57ADBD; font:700 11px Montserrat; [/newclass]
[newclass=.CaFFooter] display:flex; height:40px; [/newclass]
[newclass=.CaFTag] width:33%; font:9px roboto; text-transform:uppercase; padding:10px; border-top:1px solid #DDDDDD; background-color:#FAFAFA; color:#7a7a7a; display:flex; align-items:center; justify-content:center; [/newclass]
[newclass=.CaFTag a] font:9px roboto!important; [/newclass]
[newclass=.CaFNotes] font:9px roboto; text-transform:uppercase; background-color:#C391CC; color:#FEFEFE; width:66%; padding:10px 10px; height:20px; overflow:hidden; display:flex; text-align:left; justify-content:center; align-items:center; [/newclass]
[newclass=.CaFCredit] font:700 7px roboto; width:50px; margin-left:400px; [/newclass]
[newclass=.CaFCredit a] font:700 7px roboto; [/newclass]

last edit on Feb 6, 2020 4:29:01 GMT by selkie

all my proboards templates require the style tags plugin!

options

quote

hic sunt dracones written Dec 15, 2018 19:49:58 GMT

ᕕ( ᐛ )ᕗ

aliasthat bitch.

pronouns"that bitch" still works tbh (any OK!)

551written posts

selkieearned bits

offlinecurrently

pharaoh leap, valka, and 24 more like this

selkie

Part of the Furniture

a verb in perfect view.

[googlefont=Roboto:400,600,700|Raleway:200|Roboto+Condensed:400,700]

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

[attr="class","abc-selk-contain"]

pop/stars

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

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

[attr="class","abc-selk-text"]

this template is not for public use!

[break]

i originally coded this for another song but recoded this at the beginning of december because i listen to this song wayyyyyyy too much. i'm really glad i did, because this version is a million percent cooler. i think i'm finally getting a handle on animations, so i really need to use more flashy (snrk) effects O:<[break][break]

also, (and this is a very belated edit, whoops) i would like to give a HUGE thank you to windami for the two amazing pieces of art used here -- please check out her work & support this amazing artist![break][break]

[attr="class","abc-selk-hash"]
[HASH]abcsofcode

[newclass=.selk-popstars .abc-selk-contain h1, .selk-popstars .abc-selk-hash a, .selk-popstars .abc-selk-rules h2]color:#AD334D!important;[/newclass]
[newclass=.selk-popstars .abc-selk-link]background-color:#AD334D!important;[/newclass]
[newclass=.abc-selk-contain, .selk-code] --abc-selk-accent:#CCCCCC; [/newclass]
[newclass=.abc-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 wrap; justify-content:space-between; position:relative; overflow:hidden; [/newclass]
[newclass=.abc-selk-contain h1] margin:0px; width:100%; display:flex; flex-flow:row wrap; align-items:center; font:200 32px/32px Raleway; color:var(--abc-selk-accent); [/newclass]
[newclass=.abc-selk-contain h1:after] content:''; width:10px; height:1px; background-color:#ccc; flex-grow:2; margin-left:25px; [/newclass]
[newclass=.abc-selk-contain h1:before] content:'A-B-'; color:#ccc; [/newclass]
[newclass=.abc-selk-body] width:350px; border-radius:5px; color:#aaa; font:400 11px roboto; text-align:justify; margin-top:25px; [/newclass]
[newclass=.abc-selk-text] background-color:#fafafa; padding:25px; border-radius:5px; [/newclass]
[newclass=.abc-selk-hash] margin:25px 0px; text-align:left; [/newclass]
[newclass=.abc-selk-hash a] display:inline-block; height:10px; padding:5px 7px; margin:0px 3px 5px 0px; color:var(--abc-selk-accent); background-color:#ddd; border-radius:2px; text-transform:uppercase; font:600 10px/10px roboto; [/newclass]
[newclass=.abc-selk-colorpickers] width:309px; display:flex; flex-flow:row wrap; align-items:flex-start; [/newclass]
[newclass=.abc-selk-color] display:flex; flex-flow:row nowrap; width:309px; [/newclass]
[newclass=.abc-selk-color div] height:10px; display:inline-block; margin-right:5px; background-color:#ccc; [/newclass]
[newclass=.abc-selk-color span] height:10px; width:0px; display:flex; font:600 9px/10px Roboto; color:#ccc; [/newclass]
[newclass=.abc-selk-var] width:340px; font:400 10px/13px roboto; margin-top:25px; padding-right:10px; height:25px; overflow:auto; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar] width:5px; border:0px; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar-thumb] background-color:#999; border:0px; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar-track] background-color:#ddd; border:0px; [/newclass]
[newclass=.abc-selk-rules] margin:25px 0px 0px 0px; text-align:left; width:125px; display:flex; justify-content:flex-start; align-self:stretch; flex-flow:column nowrap; border-right:1px solid #ddd; [/newclass]
[newclass=.abc-selk-rules img] width:100px; height:100px; border-radius:5px; [/newclass][break][break]

[nospaces][googlefont=Montserrat:400,700|Montserrat+Alternates:400,700|Roboto:400,400i,700]

[attr="class","kdaPost"]

[attr="class","kdaRender"]

[attr="class","kdaIMG1"]

[attr="class","kdaIMGhover"]

[attr="class","kdaBodyContain"]

[attr="class","kdaBody"]

you know who it is, coming 'round again, you want a dose of this right now it's k/da! i'm a goddess with a blade, sori chyuh bwa nae eereum, itchi moht ha geh loud, loud, loud, loud. i could take it to the top, juhl dae mum choo ji moht hae, nae ga kkeut nae joo neun bad gal, gal, gal. and when i start to talk like that, oh, you won't know how to react. i'm a picture-perfect face, with that wild in my veins, you can hear it in my growl, growl, growl, growl. [break][break]

so keep your eyes on me now, mu uhtseul bo dun joah hal guh ya. dahl sooup neun level, na wa dae gyul won han nuhl hwak shin hae. we got it all in our hands now, so can you handle what we're all about? we're so tough, not scared to show you up, can you feel the rush now? ain't nobody bringing us down, down, down, down, down, down, they could try it but we're gonna wear the crown. you could go another round, round, round, round, round, round, round. wish you luck, but you're not bringing us down. we go hard, 'til we get it, get it, we go hard, we so in it, in it, we pop stars, only winning, winning now, ain't nobody bringing us down, down, down, down. [break][break] hey! you ready for this? see, uhn jae deunji nae mo seup magic, dan han bun eh naega jab uh, juhl dae gi jook ji ahn chi uh! pow pow ni ga mwol ahruh, gyun dil soo up ssuh won hae do, won ha neun gae uhl gool ae boyuh, i’m trouble and you’re wanting it. i'm so cold, when i move that way, you gon' be so blown, i'm the realest in the game, uh! said i'm on fire with a blade, you're about to hear my name, ringing in your head like, whoa.

[attr="class","kdaDeco"]

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

[newclass=.kdaPost] --kda-l-bg:#fcfcfc; --kda-l-text:#9c9c9c; --kda-l-text-bg:#fefefe; --kda-l-sidebarbg:#FFE8E6; --kda-l-accent:#AD334D; --kda-l-bold:#AD334D; transition:.25s; [/newclass]
[newclass=.kdaPost:hover, .kdaPost:hover .kdaBody, .kdaPost:hover .kdaDeco, .kdaPost:hover .kdaRender::after, .kdaPost:hover .kdaBody b, .kdaPost:hover .kdaBody i] transition:.25s; transition-delay:1s!important; --kda-l-bg:#333; --kda-l-text:#9c9c9c; --kda-l-text-bg:#414141; --kda-l-sidebarbg:#9CF4FC; --kda-l-accent:#7446F4; --kda-l-bold:#E927F3; [/newclass]

[newclass=.kdaPost]width:550px; height:500px; border-radius:10px; background-color:var(--kda-l-bg); overflow:hidden; display:flex; justify-content:center; align-items:flex-start;[/newclass]
[newclass=.kdaPost::after]content:''; width:550px; height:500px;border-radius:10px; position:absolute; background-image:url(https://image.ibb.co/b6UFw8/5.png); filter:invert(0%); opacity:.05; z-index:0; transition:.25s;[/newclass]
[newclass=.kdaPost:hover::after]filter: invert(100%); opacity:.05; transition:.25s; transition-delay:1s;[/newclass]
[newclass=.kdaRender]width:0px; height:500px; position:relative; margin-right:auto; z-index:2; align-self:flex-end;[/newclass]
[newclass=.kdaRender::after]content:''; position:absolute; z-index:0; margin-top:-500px; width:550px; height:500px; background-color:var(--kda-l-sidebarbg); transition:.25s; -webkit-clip-path: polygon(0 0, 25% 0, 50% 100%, 0% 100%); clip-path: polygon(0 0, 25% 0, 50% 100%, 0% 100%); [/newclass]
[newclass=.kdaIMG1]height:500px;[/newclass]
[newclass=.kdaIMG1 img]height:500px; margin-left:-125px; position:relative; z-index:2; [/newclass]
[newclass=.kdaIMGhover]position:absolute; top:0px; left:-1px;[/newclass]
[newclass=.kdaPost:hover .kdaIMGhover img] animation: kda-blink-in 1s normal forwards; opacity:1; transition:.25s; } @keyframes kda-out { 0% { opacity:1; } 100% { opacity:0; }[/newclass]
[newclass=.kdaIMGhover img]height:500px; margin-left:-125px; position:relative; z-index:2; animation: kda-out .25s normal forwards; opacity:0; transition:.25s;} @keyframes kda-blink-in { 0% { opacity:0; } 25% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }[/newclass]
[newclass=.kdaBodyContain]height:500px; display:flex; align-items:center;[/newclass]
[newclass=.kdaBody]height:calc(378px + 50px); transition:.25s; width:275px; border-radius:10px; position:relative; margin-right:35px; z-index:3; background-color:var(--kda-l-text-bg); font:11px/160% roboto; text-align:justify; color:var(--kda-l-text); display:inline-block;[/newclass]
[newclass=.kdaBody div]height:378px; overflow:auto; margin:25px;[/newclass]
[newclass=.kdaBody b]font:700 12px/11px Montserrat Alternates; color:var(--kda-l-bold); transition:.25s;[/newclass]
[newclass=.kdaBody i]color:#cacaca; border-bottom:1px solid var(--kda-l-sidebarbg); transition:.25s;[/newclass]
[newclass=.kdaBody a]font:12px/11px Montserrat Alternates; color:var(--kda-l-accent); text-align:center; display: block; margin-top:25px; [/newclass]
[newclass=.kdaDeco]align-self:center; position:absolute; height:450px; width:450px; border:10px dotted var(--kda-l-accent); transition:.25s; border-radius:100%; animation:kda-spinner 15s linear infinite; animation-play-state:paused; z-index:1; [/newclass]
[newclass=.kdaPost:hover .kdaDeco]animation-play-state:running; } @keyframes kda-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); }[/newclass]
[newclass=.kdaCredit]font:800 7px roboto; margin-left:500px;[/newclass]
[newclass=.kdaCredit a]font:800 7px roboto;[/newclass]
[newclass=.kdaBody div::-webkit-scrollbar]width:0px;[/newclass]

last edit on Jan 2, 2019 0:18:52 GMT by selkie

all my proboards templates require the style tags plugin!

options

quote

hic sunt dracones written Dec 26, 2018 1:45:21 GMT

ᕕ( ᐛ )ᕗ

aliasthat bitch.

pronouns"that bitch" still works tbh (any OK!)

551written posts

selkieearned bits

offlinecurrently

pharaoh leap, valka, and 15 more like this

selkie

Part of the Furniture

a verb in perfect view.

[googlefont=Roboto:400,600,700|Raleway:200|Roboto+Condensed:400,700]

[attr="class","selk-zinnia-up"]

[attr="class","abc-selk-contain"]

zinnia

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

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

[attr="class","abc-selk-text"]

this template is not for public use![break][break]

also it's broken rn, i'll find another mp3 host later, i'm lazy

[break]

okay, the title of this song is technically "zinnia's theme", but i'm not going to call it that because it's prettier the other way, sue me. i struggled a lot to come up w/ an idea for this code, but decided that a playlist template would be a fitting end for the project! [break][break]

this playlist template is fully functional ~~which is why it's a bit bare-bones aesthetically, wheezes~~ -- toggle between songs using the tabs on the left, and play/pause songs using the play button in the center! (just make sure to pause songs when you're done listening to them, because you might create some unintended mashups otherwise.) [break][break]

i'd also like to take a minute and say thank you to everyone for supporting me throughout this project. the amount of support i got from everyone here was wonderful and it means more to me than i can ever express. happy holidays, pixel <3

[attr="class","abc-selk-hash"]
[HASH]abcsofcode

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

[nospaces][googlefont=Open+Sans:400,700|Raleway:900|Montserrat:700|Maven+Pro:900]

[newclass=.selk-Contain] --selk-accent:#DF6885; width:650px; height:400px; position:relative;[/newclass]

[newclass=.selk-cover] width: 400px; height: 400px; background-color: #eee; position: relative; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; [/newclass]
[newclass=.selk-big-img] position: absolute; width: 400px; height: 300px; background: url(https://i.imgur.com/FqUCpsL.png); background-position: center; align-self: flex-start; position: relative; filter: grayscale(100%); opacity: 0.75; [/newclass]
[newclass=.selk-big-img:after] content: ""; width: 400px; height: 300px; background: linear-gradient( to bottom, rgba(238, 238, 238, 0.1), rgba(238, 238, 238, 1) ); position: absolute; top: 0px; left: 0px; [/newclass]
[newclass=.selk-top] position: absolute; top: 25px; text-transform: lowercase; font: 400 35px maven pro; color: #fafafa; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); [/newclass]
[newclass=.selk-play-bg] position: absolute; width: 200px; height: 200px; border-radius: 100%; background: url(https://i.ibb.co/1KZRJxc/image.png); background-size: cover; border: 10px solid #f8f8f8; display: flex; align-items: center; justify-content: center; z-index: 1; [/newclass]
[newclass=.selk-play-bg:after] content: ""; position: absolute; top: -10px; left: -10px; width: 220px; height: 220px; background-color: transparent; border-radius: 100%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); [/newclass]
[newclass=.selk-play-bg i] display: block; width: 150px; height: 150px; font-size: 150px; color: #eee; z-index: 1; border-radius: 100px; [/newclass]
[newclass=.selk-play-bg i:before] display: block; background: url(https://i.imgur.com/FqUCpsL.png); background-size: cover; background-position: center; -webkit-background-clip: text; color: #fafafa; text-shadow: 0px 0px 25px rgba(0, 0, 0, 0.25); [/newclass]
[newclass=.selk-bottom] position: absolute; bottom: 0px; width: 400px; height: 100px; background-color: #eee; z-index: 0; display: flex; flex-flow: column nowrap; align-items: center; justify-content: flex-end; [/newclass]
[newclass=.selk-bottom h1] margin: 5px 0px 0px 0px; font: 700 8px/100% Montserrat; text-transform: uppercase; color: #ccc; position: relative; z-index: 1; [/newclass]
[newclass=.selk-bottom h2] display: block; margin: 0px 0px 25px 0px; font: 900 36px/100% maven pro; color: #888; position: relative; text-transform: uppercase; z-index: 0; [/newclass]

[newclass=.selk-cover .music]background-color:transparent;color:transparent; width:150px; height:150px; position:absolute; z-index:99999; white-space:nowrap; padding:0px; [/newclass]
[newclass=.selk-cover .music .controls] color:#FDFDFD; text-shadow:0px 0px 10px rgba(0,0,0,.25); font-size:150px; line-height:150px; margin:0px; z-index:99999; cursor:pointer;[/newclass]
[newclass=.selk-cover .music .time]display:none;[/newclass]
[newclass=.selk-cover .music .scrubber]display:none;[/newclass]
[newclass=.selk-cover .music .fa-fw]width:150px;[/newclass]

[newclass=.selk-Tab] height:10px; width:200px; color:#eee; padding:15px 25px; display:flex; align-items:center; justify-content:space-between; text-align:left; font:700 10px/10px open sans; text-transform:uppercase; text-shadow:1px 1px rgba(0,0,0,.25); [/newclass]
[newclass=.selk-Extras] position:absolute; width:300px; padding:50px 50px; display:flex; align-items:center; justify-content:space-between; bottom:0px; right:0px; z-index:100; [/newclass]
[newclass=.selk-Extras span] font-size:25px; color:#fafafa; text-shadow:2px 2px rgba(0,0,0,.1); cursor:pointer; [/newclass]

[newclass=.selk-Contain table td]padding:0px!important; border:0px!important;[/newclass]
[newclass=.selk-Contain .PT_Tabs_holder]table-layout:none!important; height:400px!important; overflow-y:scroll!important; display:flex; flex-flow: row wrap; overflow-x:hidden!important; [/newclass]
[newclass=.selk-Contain .PT_Tabs_holder::-webkit-scrollbar]width:5px; border:0px;[/newclass]
[newclass=.selk-Contain .PT_Tabs_holder::-webkit-scrollbar-thumb]background-color:var(--selk-accent);border:1px solid #333;[/newclass]
[newclass=.selk-Contain .PT_Tabs_holder::-webkit-scrollbar-track]background-color:#333;[/newclass]
[newclass=.selk-Contain .PT_table .PT_tabs]background-color:#444;[/newclass]
[newclass=.selk-Contain .PT_table .PT_tabs_hover]background-color:var(--selk-accent); cursor:pointer;[/newclass]
[newclass=.selk-Contain .PT_table .PT_tabs_selected_hover]background-color:var(--selk-accent); cursor:pointer;[/newclass]
[newclass=.selk-Contain .PT_table .PT_tabs_selected]background-color:var(--selk-accent);[/newclass]

last edit on Dec 28, 2018 18:29:49 GMT by selkie

all my proboards templates require the style tags plugin!

options

quote

hic sunt dracones written Feb 6, 2020 4:32:47 GMT

ᕕ( ᐛ )ᕗ

aliasthat bitch.

pronouns"that bitch" still works tbh (any OK!)

551written posts

selkieearned bits

offlinecurrently

pharaoh leap, valka, and 4 more like this

selkie

Part of the Furniture

a verb in perfect view.

[nospaces][googlefont=Pacifico|Montserrat:700|Montserrat+Alternates:700]

my uploading code for over at iconic! this was posted here previously, but i'm reposting it b/c of the revamp to this thread due to my ~*~*~*new gallery code*~*~*~ (feel free to check it out.) otherwise, plz don't mind me o/.[break][break][break]

[attr="class","selk-iconic-b-dar"]

[attr="class","selk-iconic-b-li"]

[attr="class","selk-iconic-icons"]

[attr="class","selk-iconic-head"]

[attr="class","selk-iconic-img"]

[attr="class","selk-iconic-spin"]

[attr="class","selk-iconic-orbit"]

[attr="class","selk-iconic-name"]

name mcname

from series title

## iconsand other info

[attr="class","selk-iconic-tags"]

#loremipsum
#dolor
#sit
#amet
#donotuse
#inspiredbyiconic
#xoxoxo

[attr="class","th th-planet-1-o"]

[newclass=.selk-iconic-b-li] border: 5px solid #f1f1f1; outline: 1px solid #dadada; width: calc(500px + 2px); [/newclass]
[newclass=.selk-iconic-b-dar] border: 10px solid #e2e2e2; outline: 1px solid #dadada; width: calc(500px + 2px + 10px); margin:1px; [/newclass]
[newclass=.selk-iconic-icons] width: 500px; border: 1px solid #dadada; background-color: #eaeaea; --selk-iconic-1: #FC5C9C; --selk-iconic-2: #4E8FBD; [/newclass]
[newclass=.selk-iconic-head] display: flex; flex-flow: row wrap; align-items: center; height: 124px; padding: 25px; position: relative; overflow: hidden; border: 1px solid #f6f6f6; background-image: linear-gradient( 340deg, var(--selk-iconic-1) 0%, var(--selk-iconic-2) 75% ); [/newclass]
[newclass=.selk-iconic-img] margin: 0px 25px 0px 0px; transition: 0.25s ease; position: relative; [/newclass]
[newclass=.selk-iconic-img img] display: block; border-radius: 100%; animation: 3s selk-iconic-pulse linear infinite; padding: 10px; background-color: rgba(255, 255, 255, 0.33); border: 2px solid #fff; transition: 0.25s ease; [/newclass]
[newclass=.selk-iconic-img:hover] transform: scale(0.95); transition: 0.25s ease; [/newclass]
[newclass=.selk-iconic-name] display: flex; width: 295px; height: 124px; flex-flow: column wrap; justify-content: center; align-items: center; position: relative; [/newclass]
[newclass=.selk-iconic-name h1] margin: 0px; position: absolute; top: 0px; font: 36px/36px Pacifico; color: #fafafa; overflow: visible; letter-spacing: -2px; text-shadow: 2px 2px rgba(0, 0, 0, 0.05); [/newclass]
[newclass=.selk-iconic-name h1 a] color: #fafafa!important; font: 36px/36px Pacifico!important;[/newclass]
[newclass=.selk-iconic-name h2] position: absolute; font: 700 12px montserrat; padding: 5px 7px; margin: -3px 0px 5px 0px; border-radius: 5px; color: #fdfdfd; background-color: rgba(255, 255, 255, 0.15); text-shadow: 1px 1px rgba(0, 0, 0, 0.1); cursor: default; [/newclass]
[newclass=.selk-iconic-name h2 a] color: #fafafa!important; font: 700 12px montserrat!important;[/newclass]
[newclass=.selk-iconic-name div] display: flex; flex-flow: row wrap; justify-content: center; position: absolute; top: 82px; [/newclass]
[newclass=.selk-iconic-name span] font: 700 12px montserrat; padding: 5px 7px; margin: 0px 5px 5px 5px; border-radius: 5px; color: #fdfdfd; background-color: rgba(255, 255, 255, 0.15); text-shadow: 1px 1px rgba(0, 0, 0, 0.1); cursor: default; [/newclass]
[newclass=.selk-iconic-spin] position: absolute; top: 0px; left: 0px; width: 124px; height: 124px; border-radius: 100%; animation: 3s theworldrevolving infinite; animation-play-state: paused; [/newclass]
[newclass=.selk-iconic-icons:hover .selk-iconic-spin] animation-play-state: running; } @keyframes theworldrevolving { 0% { transform: rotate(90deg); } 100% { transform: rotate(450deg); }[/newclass]
[newclass=.selk-iconic-orbit] width: 10px; height: 10px; background-color: #fff; position: relative; top: -4px; border-radius: 100%; } @keyframes selk-iconic-pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); } 25% { -moz-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }[/newclass]
[newclass=.selk-iconic-tags] display: flex; flex-flow: row wrap; padding: 50px; position: relative; overflow: hidden; border-top: 1px solid #dadada; [/newclass]
[newclass=.selk-iconic-tags a] font: 700 13px montserrat alternates; background-color: rgba(255, 255, 255, 0.5); margin: 0px 10px 10px 0px; padding: 10px 10px; color: #7a7a7a; z-index: 1; transition: 0.25s ease; border-radius: 20px; cursor: pointer; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; [/newclass]
[newclass=.selk-iconic-tags a:nth-child(odd):hover] background-color: rgba(255, 255, 255, 0.75); color: var(--selk-iconic-2); [/newclass]
[newclass=.selk-iconic-tags a:nth-child(even):hover] background-color: rgba(255, 255, 255, 0.75); color: var(--selk-iconic-1); [/newclass]
[newclass=.selk-iconic-tags i] font-size:200px; position:absolute; bottom:-20px; right:-20px; z-index:0; background-image: linear-gradient(to top left, var(--selk-iconic-1), var(--selk-iconic-2) 66%); color: transparent; background-clip: text; -webkit-background-clip: text; opacity:.5; [/newclass]

last edit on Feb 6, 2020 4:38:13 GMT by selkie

all my proboards templates require the style tags plugin!

options

quote

hic sunt dracones written Nov 30, 2020 23:15:05 GMT

ᕕ( ᐛ )ᕗ

aliasthat bitch.

pronouns"that bitch" still works tbh (any OK!)

551written posts

selkieearned bits

offlinecurrently

pharaoh leap, 𝚖𝚘𝚛𝚒, and 8 more like this

selkie

Part of the Furniture

a verb in perfect view.

i finally finished the skin 4 my testing site and i'm posting preview here cuz i spent too long on it and no one will ever see it besides me fite me

admin view:

guest view:

live preview is here if anyone wants to poke around thassit bai

last edit on Nov 30, 2020 23:15:46 GMT by selkie

all my proboards templates require the style tags plugin!

options

quote

hic sunt dracones written May 8, 2021 7:16:42 GMT

ᕕ( ᐛ )ᕗ

aliasthat bitch.

pronouns"that bitch" still works tbh (any OK!)

551written posts

selkieearned bits

offlinecurrently

Neko, salty, and 6 more like this

selkie

Part of the Furniture

a verb in perfect view.

[attr="class","selkieomens"]

( WEEPING OMENS, an animanga urban fantasy rp )

WO's skin started with me drafting a logo that changed based on the real-world lunar cycle and ended with me saying “go” on launch after being awake for 17 hours and i wouldn’t have wanted it any other way. what a helluva first skin to drop, LMAO. i’ve had the technical ability to create a skin for a good few years now, i think, but all of the sites i ended up spending a significant amount of time were run by hella talented coders, so i never really had the opportunity. still, i’m glad to have thrown my hat in the ring at least this once! ~~it’ll probably be more tbh. i have been converted.~~

i’m also taking the opportunity to drop some of the more advanced things here as a demo, because i like how they turned out and tbh it’d make my day to see someone with a better eye for design build on this stuff. (forewarning, though ⁠— the language i’m using is very much “by coders, for coders”.)

miscellaneous technical features i like, in no specific order:

custom skin accents mask-image does a whooole heck of a lot of lifting with this. the rainbow animation when you load in as guest is pure css, and the skin additionally changes by the user’s member group. there’s also an option to input your own colors scheme to customize your own skin.

technical explanation: custom profile field filled out by user is pulled into a CSS variable on the main class. the rainbow effect is, again, mask-image + css animation. fallbacks to member groups are inlaid….somewhere. i think it’s in the CSS, but don’t quote me on that one.

content warning system this was something i’d had the idea for a loooooooong time ago and i think it came together super nice!

technical explanation and demo: users can add a <cw>list of triggers</cw> or <cw-toggle>list of triggers</cw-toggle> in threads or applications. with the latter, a pseudo-element from cw-toggle is used to toggle the visibility of anything wrapped in a <censor> class.

i,,,, haven’t actually tested this specific demo to see if it works, but hopefully the gist is gotten across!
basic CSS

cw-toggle {
  display: flex;
  width: 100%;
  place-items: center;
  place-content: center;
  text-align: center;
  position: relative;
  margin-top: 25px;
  margin-bottom: 50px;
  color: #000;
  font: 700 11px roboto;
  pointer-events: none;
}
cw {
  margin-bottom: 25px;
}
cw-toggle:before,
cw:before {
  content: "this post contains";
  font: 900 10px/90% roboto;
  text-transform: uppercase;
  position: absolute;
  top: -10px;
  color: #000;
}
.cwbuttonhidecontent:after,
.cwbuttonshowcontent:after {
  position: absolute;
  bottom: -20px;
  background: red;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  font: 900 10px/90% roboto;
  text-transform: uppercase;
  pointer-events: auto;
  color: #fff;
}
.cwbuttonshowcontent:after {
  content: "show sensitive content";
}
.cwbuttonhidecontent:after {
  content: "hide sensitive content";
}

.cwcensorshowcontent {
  background: initial !important;
  color: revert !important;
}

.cwcensorhidecontent {
  background: #111;
  color: #111;
}
.cwcensorhidecontent b, .cwcensorhidecontent i, .cwcensorhidecontent u, .cwcensorhidecontent a {
color: revert!important;
}

scripting (jquery will need to be enabled on the forum for this to work)
goes in the wrapper:

<script>$('cw-toggle').addClass('cwbuttonhidecontent');
$('censor').addClass('cwcensorshowcontent');</script>

goes in the post row:

<script>// censor toggle function
$(function(){
    $('cw-toggle').click(function() {
$(this).toggleClass('cwbuttonhidecontent cwbuttonshowcontent');
$("#pid_<!-- |pid| --> censor").toggleClass('cwcensorshowcontent cwcensorhidecontent');
    }); 
});</script>

goes in the main profile (i.e. for profile pages):

<script>$(function(){
    $('cw-toggle').click(function() {
$(this).toggleClass('cwbuttonhidecontent cwbuttonshowcontent');
$(this).siblings('censor').toggleClass('cwcensorshowcontent cwcensorhidecontent');
    }); 
});</script>

toggleable, responsive sidebar w/ custom links i’d conceptualized this skin from the start as having a toggleable sidebar, with the gist being “first sidebar is new-user-friendly, second sidebar is settled-in-user-friendly”. i think one of the issues with sidebars is that they can just become wasted space ⁠— once you’ve got a character nice n’ registered on site you’re probably not going to need links to the startup guide taking up valuable screen space, and so on. i attempted to counter this by adding in a “quicklinks” section which lets users quickly jump to their development, tracker, and testing threads, in addition to various forums around the site.

the other gambit w/ sidebars is that you have a lot more variation in screen size and stuff that looks great on some monitors looks like poo poo shit on others. i just went ahead and made both those bitches responsive:

custom user accents gist here is that there’s a custom profile field in which you can enter a hex code which will color the main profile and post row. the concept wasn’t mine, but i’m happy with the execution.

technical explanation & demo: the custom user accent is stored as a profile field, which is pulled into a CSS variable. if no accent is entered, it falls back to the user’s member group color. this is done through CSS in the post row and the following script in the main profile:

<script>if ('<!-- |field_USERACCENT| -->' === '<i>No Information</i>') {
   $("profile").attr("style", "--custom:var(--group);");
}</script>

(where --group is stored in the skin as a variable dependent on the user’s member group so groupid-2 would have --group defined as red, groupid-3 with --group defined as green, so on and so forth)

with great power comes great responsibility, but i’ve shoved accessible-colors.com down the memberbase’s throats and they’ve honestly been fuckin’ killing it with readibility. regardless, there is, additionally, a setting in the UCP which disables this quote “rainbow bullshit”. that, plus a toggleable light mode, hopefully means that the skin is about as accessible color-wise as you can get?

usercp-hosted template system built-in post templates use custom profile fields to set lyrics and images. if those fields are left blank, they’re removed from the post entirely. this, for example, has nothing surrounding the text besides [*post2][*/post2]. usercp settings can also be overridden per-post for those sadstuck threads.

brief technical overview and demo: classes are standardized across templates, so lyric-1, lyric-2, post-image-1, are all targeted in jquery. these classes pull values from custom user profile fields and bbcodes have also been set up on the forum to override the default settings (this works by creating an override class i.e. lyric-1-override which replaces the initial instance). the scripting for this is notably shoestring due to it p. much pushing the limits of the custom profile field system in the first place, so i’m providing this as-is and won’t be offering support on implementing it.

scripting in post row ⁠—

<script>$("#pid_<!-- |pid| --> .lyric-1").text("<!-- |field_LYRIC1| -->");
$("#pid_<!-- |pid| --> .lyric-2").text("<!-- |field_LYRIC2| -->");
$("#pid_<!-- |pid| --> .post-icon").prepend('<img src="<!-- |field_SQUAREIMAGE| -->">');
$("#pid_<!-- |pid| --> .post-image-1").prepend('<img src="<!-- |field_LARGEIMAGE1| -->">');
$("#pid_<!-- |pid| --> .post-image-2").prepend('<img src="<!-- |field_LARGEIMAGE2| -->">');
 if( $('#pid_<!-- |pid| --> .post-image-2-override').length )
{
$("#pid_<!-- |pid| --> .post-image-2").replaceWith($("#pid_<!-- |pid| --> .post-image-2-override"));
}
 if( $('#pid_<!-- |pid| --> .post-image-1-override').length )
{
$("#pid_<!-- |pid| --> .post-image-1").replaceWith($("#pid_<!-- |pid| --> .post-image-1-override"));
}
 if( $('#pid_<!-- |pid| --> .lyric-1-override').length )
{
$("#pid_<!-- |pid| --> .lyric-1").replaceWith($("#pid_<!-- |pid| --> .lyric-1-override"));
}
 if( $('#pid_<!-- |pid| --> .lyric-2-override').length )
{
$("#pid_<!-- |pid| --> .lyric-2").replaceWith($("#pid_<!-- |pid| --> .lyric-2-override"));
}
 if( $('#pid_<!-- |pid| --> .post-icon-override').length )
{
$("#pid_<!-- |pid| --> .post-icon").replaceWith($("#pid_<!-- |pid| --> .post-icon-override"));
}
</script>

scripting in wrapper ⁠—

<script>

// if no lyrics




$(".lyric-1:empty").remove();


$(".lyric-2:empty").remove();


// if no images


$(".post-image-1:empty").remove();


$(".post-image-2:empty").remove();


$(".post-icon:empty").remove();
$(".post-icon img[src='']").remove();
$(".post-image-1 img[src='']").remove();
$(".post-image-2 img[src='']").remove();
$(".post-image-1-override img[src='x']").remove();
$(".post-image-2-override img[src='x']").remove();
$(".post-icon-override img[src='x']").closest('.post-icon-override').hide();

</script>

the HTML of the template previewed above, as an example:

<div class="omens-post-template omens-post-2"><div class="post-image-2"><div class="lyric-1"></div><div class="lyric-2"></div></div><div class="post-body"><div class="post-icon"></div>(PARAM1)</div></div>

this does, as a downside, not play nice with jcink’s search function and topic summary while posting. the lyric lines also eat shit when there’s manual line breaks in them, but o well :’D.

if you're interested in utilizing any of the above demos, feel free to poke around on the live preview of the skin if that helps you learn better -- i'd really just request that you don't use anything ripped live from the skin in something actually published. (also if a skinner uses anything plsplspls link me i wanna seeeeeeeee)

...there's probably stuff i'm forgetting, but ye! if urban fantasy sounds like your thing, we're a pretty fun little group :hue:.

also if u join our server u get the :hellble: emote.

what more can u ask for tbh

[newclass=.selkieomens code]max-height:150px;overflow:auto;text-align:left;[/newclass]

all my proboards templates require the style tags plugin!

PERFECT

AN ANIMANGA RESOURCE COMMUNITY

STAFFTEAM

PMALL

april 26

january 25

january 20

an urban fantasy faction-focused roleplay

AFFSLOTS

getting started

around the site

helpful links

current events

hic sunt dracones

</challenge class="abcs-of-code">

</challenge class="solo-challenges">

changelog

v1.0.0

pop/stars

zinnia

NOW PLAYING

angel on fire

NOW PLAYING

buy the stars

NOW PLAYING

cosmic love

NOW PLAYING

dracula

NOW PLAYING

even in death

NOW PLAYING

foreigner's god

NOW PLAYING

galaxy

NOW PLAYING

hello, planet

NOW PLAYING

icarus

NOW PLAYING

jenny

NOW PLAYING

keep on doin'

NOW PLAYING

leave the lights on

NOW PLAYING

monster

NOW PLAYING

nina cried power

NOW PLAYING

operation: mindcrime

NOW PLAYING

pop/stars

NOW PLAYING

quaver

NOW PLAYING

reach for the moon

NOW PLAYING

snake eyes

NOW PLAYING

two birds

NOW PLAYING

unbelievable

NOW PLAYING

vagrant

NOW PLAYING

werewolf gimmick

NOW PLAYING

xo

NOW PLAYING

young volcanoes

NOW PLAYING

zinnia

name mcname

from series title

STAFF
TEAM

PM
ALL

AFF
SLOTS