binary
i'm surprised too, i don't ususally release templates often
here's a trade shop template! intended for those who want to keep their shop in one post, each icon below is it's own tab which you can use to customise to your liking! this was made with the intention of
images being used in them, but you could have text in there if you wanted
(obviously, you're not constricted to just using this as a shop template if you wanted to)
still quite customisable in terms of colours, please also just check that the colours you pick are ok!
style test
bold italics underline strikethrough
hover over me!tooltip
click me!
test |
test |
test |
test |
test |
test |
test |
test |
test |
code
[sc=template][sc=bar][sc=main][sc=font][h1]binary[/h1][/sc]
text goes here, you're not limited to just keeping the tabs, imgs + labels i've put in here, please change them to your heart's content
[sc=tabbed_interface horizontal][ul]
[li][img]https://pfq-static.com/img/farmbtns/farm_news.png/t=1535200173[/img][/li]
[li][tip=hunts][item=pokeradar][/tip][/li]
[li][tip=pokemon][img]https://pfq-static.com/img/navbar/party.png/t=1430540365[/img][/tip][/li]
[li][tip=breeding pairs][item=matchup checker][/tip][/li]
[li][tip=items][img]https://pfq-static.com/img/farmbtns/inventory.png/t=1535200174[/img][/tip][/li]
[li][tip=currency][item=money safe][/tip][/li]
[li][tip=boxes][item=deluxe box][/tip][/li]
[li][tip=summons][item=azure flute][/tip][/li]
[li][tip=gems][item=normal gem][/tip][/li]
[li][tip=megastones][img]https://pfq-static.com/img/items/keystone.png/t=1511636561[/img][/tip][/li]
[li][tip=relics][item=relic copper][/tip][/li]
[li][tip=dex trades][img]https://pfq-static.com/img/navbar/dex.png/t=1430540337[/img][/tip][/li]
[/ul][
][sc=tab-active][* leave this blank for a "close tab"-esque button *][/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][/sc][/sc][/sc][/sc][sc=credit][url=https://pfq.link/~LxwF]code[/url] | free to use[/sc]
[style]
@bkg1: #141414;
@bkg2: #3B3B3B;
@text: #ffffff;
@accent1: #F2F2F2;
@accent2: #6E6E6E;
@accent3: #7075FF;
@accent4: rgb(112, 117, 255, 0.5);
// background //
.template{
.main {
border-radius: 0px 7px 7px 0px;
background: @bkg1;
padding: 10px;
width: 90%;
min-height: 7%;
font-size:10pt;
color: @text;
text-align: center;
}
.bar {
border-left: 20px solid @accent3;
height:100%;
}
b,u,i { color: @accent3; }
hr {
border: 1px solid @accent3;
width: 70%;
}
// links //
a, a:visited {
color: @accent3;
text-decoration: none;
transition:all 100ms ease-in-out;
}
a:hover {
color: @accent3;
letter-spacing: 1px;
transition:all 100ms ease-in-out;
}
// tooltip //
.tooltip_content {
border: 1px solid @accent3;
background: @bkg1;
min-width: fit-content;
color: @accent1;
font-size: 10pt;
padding: 5px;
}
.bbcode_tooltip {
border-color: @accent2;
border-bottom: 1px solid @accent3;
}
// hide + accordion //
.panel {
background: none;
color: @text;
border: 0px;
box-shadow: none;
>h3 {
background: @accent1;
color: @bkg1;
border: 0px solid @bkg1;
border-radius: 0px;
padding: 5px;
margin-left: 6.5%;
min-width: 85%;
width: fit-content;
max-width: 85%;
text-align: center;
a, a:visited {
color: #212FF2;
}
}
>div {
color: @text;
text-align:left;
border-radius: 0px;
border: 1px solid @text;
margin: 0.5% 6.3%;
padding: 5px;
animation: fade 1.3s;
text-align: center;
}
}
// tables //
table {
margin: 0px auto;
border: 0px;
}
table th{
text-align: center;
vertical-align: middle;
padding: 7px;
border: 3px solid @bkg1;
background: @accent4;
color: @accent1;
border-radius: 7px;
}
table td {
text-align: center;
vertical-align: middle;
padding: 5px;
border: 3px solid @bkg1;
background: @bkg2;
color: @text;
border-radius: 7px;
}
// tabs //
.tabbed_interface {
border-collapse: separate;
>ul {
background: none;
>li {
background: none;
color: @accent1;
border: 0px solid @bkg1;
border-radius: 0px;
margin: 2px 2px;
font-size: 10pt;
min-width: fit-content;
padding: 5px 5px;
text-align: center;
filter:grayscale(100%);
> .bbcode_tooltip {
border-color: @accent2;
border-bottom: 0px solid @accent3;
}
&.tab-active {
background: none;
border: 0px solid @bkg1;
color: @bkg1;
border-radius: 0px;
margin: 2px 2px;
font-size: 10pt;
min-width: fit-content;
padding: 5px 5px;
vertical-align: center;
filter:grayscale(0%);
}
.li:hover {
filter:grayscale(0%);
transition: all 100ms ease-in-out;
}
}
}
.tab, .tab-active {
background: none;
color: @text;
border: 0px solid @text;
box-shadow: none;
margin: 10px 10px;
border-radius: 0px;
font-size: 10pt;
padding: 5px 5px;
}
}
// progress bar //
.expbar {
background: @bkg1;
border-radius: 7px;
width: 70%;
border: 1px solid @accent3;
color: @accent1;
>div {
background: @accent4;
border-right: 0px solid @accent1;
}
}
// pkmn panels //
.party > div {
background: @bkg1;
color: @accent3;
border: 1px solid @accent3;
font-size: 10pt;
box-shadow: 3px 3px 3px 3px @accent1;
.happy {display: none;}
.nature {display: none;}
.type {display: none;}
a:link, a:visited {
color: @accent3;
}
div.tooltip_content {
background: @bkg1;
color: @accent1;
min-width: 100%;
border: solid 1px @accent3;
}
.bbcode_tooltip {
border-bottom: 1px solid @accent3;
}
}
.party > div > .pkmn:before {
border: solid @accent2;
background-color: @accent1;
}
.party > div > .expbar {
border: solid 1px @accent3;
background: @bkg1;
width: 60%;color: @accent1;
>div {
background: @accent4;
border-right: 0px solid @accent1;
}
}
.font {
font-family: 'Space Mono';
color: @accent3;
letter-spacing: 0px;
transition: all 500ms ease-in-out;
}
.font:hover {
letter-spacing: 2px;
transition: all 500ms ease-in-out;
}}
/* latin */
@font-face {
font-family: 'Space Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/spacemono/v6/i7dPIFZifjKcF5UAWdDRYEF8RXi4EwQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.credit {
font-size: 10pt;
text-align: left;
margin-top: 3px;
margin-left: 5px;}
[/style]
hunts
pokemon
breeding pairs
items
currency
boxes
summons
gems
megastones
relics
dex trades
content
content
content
content
content
content
content
content
content
content
content