Single post in sempiternal [free to use templates]
Forum Index > Pokémon > Pokémon Art > sempiternal [free to use templates] >
i seem to be very good at impulsively doing things huh
it was a lil janky getting back into code, but it was a nice way to just destress a little bit. everything featured in this post right now has been styled, so you're free to use any of the bbcode i've used here without having to put together your own styles
kinda wanna maybe try to do shop or about mes? maybe if i get the time, i'll release one of those
style test
bold italics underline strikethrough
hover over me!
tooltip
click me!
test | test | test |
---|---|---|
test | test | test |
test | test | test |
Stardust
Treasure
(: 0)
Beautiful red sand. Can be sold at a high price. Rubbing it on Pokémon while feeding it candy is not recommended.
Sells for 1,000
Likes:
Sour food
27%
Relaxed nature
code
[img]https://i.imgur.com/grGyk8o.png[/img][
][sc=template]text goes here[/sc][
][sc=credit][url=https://pfq.link/~LDxq]credit[/url] | free to use[/sc]
[style]
// colours //
@bkg1: #ffffff;
@bkg2: #ECECEC;
@text: #000000;
@accent1: #EEC4C8;
@accent2: #9c323c;
@accent3: #3B111B;
// background //
.template {
border-radius: 0px;
background: @bkg1;
padding: 10px;
font-size: 10pt;
min-height: 7%;
color: @text;
text-align: center;
b,u,i { color: @accent3; }
hr {
border: 1px solid @accent2;
width: 70%;
}
// links //
a, a:visited {
color: @accent2;
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: 0px solid @accent2;
background: @accent1;
max-width: 80%;
color: @accent2;
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: @accent2;
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;
}
>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: @accent1;
color: @accent2;
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: @accent1;
color: @accent2;
border: 0px solid @bkg1;
border-radius: 0px;
margin: 10px 10px;
font-size: 10pt;
min-width: 15%;
width: fit-content;
padding: 7px 0px;
text-align: center;
&.tab-active {
background: @accent2;
border: 0px solid @bkg1;
color: @bkg1;
border-radius: 0px;
margin: 10px 10px;
font-size: 10pt;
min-width: 15%;
width: fit-content;
padding: 7px 0px;
text-align: center;
}
}
}
.tab, .tab-active {
background: @bkg1;
color: @text;
border: 1px 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: @accent3;
>div {
background: @accent1;
border-right: 1px 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: @accent1;
color: @accent2;
min-width: 100%;
border: solid 1px @accent2;
}
.bbcode_tooltip {
border-bottom: 1px solid @accent3;
}
}
.party > div > .pkmn:before {
border: solid @accent2;
background-color: @accent1;
}
.party > div > .expbar {
border: solid 1px @accent3;
color: @accent3;
background: @bkg1;
width: 60%;
>div {
background: @accent1;
border-right: solid 1px @accent1
}
}
}
.credit {
font-size: 10pt;
padding: 5px 0px 0px 10px;
}
[/style]
- tab
- tab
- tab
- tab
- tab
content
content
content
content
content
credit | free to use