posted Dec 23, 2018 17:56:41 GMT -6 in xo
[googlefont=Roboto:400,600,700|Raleway:200|Roboto+Condensed:400,700]
[newclass=.selk-xo .abc-selk-contain h1, .selk-xo .abc-selk-hash a, .selk-xo .abc-selk-rules h2]color:#A30413!important;[/newclass]
[newclass=.selk-xo .abc-selk-link]background-color:#A30413!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]
[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=Roboto+Slab:400]
[newclass=.xo-moodboard] --xo-accent:#A30413; [/newclass]
[newclass=.xo-moodboard] width:610px; background-color:#eee; border-radius:5px; overflow:hidden; [/newclass]
[newclass=.xo-title] padding:25px 0px; background-color:#aaa; background-color:var(--xo-accent); display:flex; align-items:center; justify-content:flex-end; [/newclass]
[newclass=.xo-title h1] margin:0px 25px 0px 0px; max-width:510px; text-align:right; padding:25px 25px; border-radius:5px; font:400 25px/25px roboto slab; text-transform:uppercase; background-color:#eee; color:#aaa; color:var(--xo-accent); text-shadow:-1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; display:flex; [/newclass]
[newclass=.xo-title h1 span] display:inline; font-size:25px; line-height:25px; margin-right:10px; [/newclass]
[newclass=.xo-board] height:585px; padding:25px 0px 0px 0px; width:610px; display:flex; flex-flow:row wrap; align-items:flex-start; justify-content:flex-start; [/newclass]
[newclass=.xo-board div] padding:10px; background-color:#ddd; margin-left:25px; margin-bottom:25px; border-radius:5px; [/newclass]
[newclass=.xo-board img] display:block; border-radius:5px; [/newclass]
[newclass=.xo-credit] font:bold 7px roboto; margin-left:525px; [/newclass] [newclass=.xo-credit a] font:bold 7px roboto!important; [/newclass]
[attr="class","selk-xo"]
[attr="class","abc-selk-contain"]
xo
[attr="class","abc-selk-rules"]
[attr="class","abc-selk-body"]
[attr="class","abc-selk-text"]
we're in the home stretch of templates here, people. /wheezes[break][break]
images are 150 by 150 pixels and the accent is edited at the top.
we're in the home stretch of templates here, people. /wheezes[break][break]
images are 150 by 150 pixels and the accent is edited at the top.
[attr="class","abc-selk-hash"]
[HASH]moodboard [HASH]singleaccent [HASH]noscroll [HASH]bigimage [HASH]development [HASH]robotoslab [HASH]abcsofcode
[HASH]moodboard [HASH]singleaccent [HASH]noscroll [HASH]bigimage [HASH]development [HASH]robotoslab [HASH]abcsofcode
[attr="class","abc-selk-colorpickers"]
[attr="class","abc-selk-color"]
#A30413
#A30413
[attr="class","abc-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(--xo-accent) to the desired hex code.
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(--xo-accent) 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!
edit as much as you want!
don't touch the credits!
i'd love to see how you use it!
[nospaces][googlefont=Roboto+Slab:400]
[newclass=.xo-moodboard] --xo-accent:#A30413; [/newclass]
[div align="center"][div][attr="class","xo-moodboard"]
[div][attr="class","xo-title"]
[h1]
[span][attr="class","th th-broken-heart-o"][/span]
hey "tear chaser"
[/h1]
[/div]
[div][attr="class","xo-board"]
[div][img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"][/div]
[div][img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"][/div]
[div][img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"][/div]
[div][img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"][/div]
[div][img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"][/div]
[div][img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"][/div]
[div][img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"][/div]
[div][img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"][/div]
[div][img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"][/div]
[/div]
[/div]
[div][attr="class","xo-credit"][a href="http://pixel-perfect.boards.net/user/15"]SELKIE[/a][/div]
[/div]
[newclass=.xo-moodboard] width:610px; background-color:#eee; border-radius:5px; overflow:hidden; [/newclass]
[newclass=.xo-title] padding:25px 0px; background-color:#aaa; background-color:var(--xo-accent); display:flex; align-items:center; justify-content:flex-end; [/newclass]
[newclass=.xo-title h1] margin:0px 25px 0px 0px; max-width:510px; text-align:right; padding:25px 25px; border-radius:5px; font:400 25px/25px roboto slab; text-transform:uppercase; background-color:#eee; color:#aaa; color:var(--xo-accent); text-shadow:-1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; display:flex; [/newclass]
[newclass=.xo-title h1 span] display:inline; font-size:25px; line-height:25px; margin-right:10px; [/newclass]
[newclass=.xo-board] height:585px; padding:25px 0px 0px 0px; width:610px; display:flex; flex-flow:row wrap; align-items:flex-start; justify-content:flex-start; [/newclass]
[newclass=.xo-board div] padding:10px; background-color:#ddd; margin-left:25px; margin-bottom:25px; border-radius:5px; [/newclass]
[newclass=.xo-board img] display:block; border-radius:5px; [/newclass]
[newclass=.xo-credit] font:bold 7px roboto; margin-left:525px; [/newclass] [newclass=.xo-credit a] font:bold 7px roboto!important; [/newclass]
[attr="class","abc-selk-link"]
[attr="class","lnr lnr-link"]
[attr="class","lnr lnr-link"]
[newclass=.selk-xo .abc-selk-contain h1, .selk-xo .abc-selk-hash a, .selk-xo .abc-selk-rules h2]color:#A30413!important;[/newclass]
[newclass=.selk-xo .abc-selk-link]background-color:#A30413!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]
[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=Roboto+Slab:400]
[newclass=.xo-moodboard] --xo-accent:#A30413; [/newclass]
[attr="class","xo-moodboard"]
[attr="class","xo-title"]
[attr="class","th th-broken-heart-o"]
hey "tear chaser"
[attr="class","xo-board"]
[attr="class","xo-credit"]SELKIE
[newclass=.xo-moodboard] width:610px; background-color:#eee; border-radius:5px; overflow:hidden; [/newclass]
[newclass=.xo-title] padding:25px 0px; background-color:#aaa; background-color:var(--xo-accent); display:flex; align-items:center; justify-content:flex-end; [/newclass]
[newclass=.xo-title h1] margin:0px 25px 0px 0px; max-width:510px; text-align:right; padding:25px 25px; border-radius:5px; font:400 25px/25px roboto slab; text-transform:uppercase; background-color:#eee; color:#aaa; color:var(--xo-accent); text-shadow:-1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; display:flex; [/newclass]
[newclass=.xo-title h1 span] display:inline; font-size:25px; line-height:25px; margin-right:10px; [/newclass]
[newclass=.xo-board] height:585px; padding:25px 0px 0px 0px; width:610px; display:flex; flex-flow:row wrap; align-items:flex-start; justify-content:flex-start; [/newclass]
[newclass=.xo-board div] padding:10px; background-color:#ddd; margin-left:25px; margin-bottom:25px; border-radius:5px; [/newclass]
[newclass=.xo-board img] display:block; border-radius:5px; [/newclass]
[newclass=.xo-credit] font:bold 7px roboto; margin-left:525px; [/newclass] [newclass=.xo-credit a] font:bold 7px roboto!important; [/newclass]