Single post in sempiternal [free to use templates]
Forum Index > Pokémon > Pokémon Art > sempiternal [free to use templates] >
minimalist
This one was more of an experimental template which also happens to be editable! This is a tabbed template and can be used for shops and the like. You can freely add or remove tabs as you wish! I don't believe there's a limit. (but it'll be painful going through them if so :o) The code is in the last tab. ^^
I worked the most into this so some feedback (coding terms, there's not much art-wise here) would be nice! ;o;
style testing
bold italics underlined striked
don't click me!
you clicked me!
nice link
| Table heading 1 | Table heading 2 | Table heading 3 |
|---|---|---|
| Table cell 1 | Table cell 2 | Table cell 3 |
| Table cell 4 | Table cell 5 | Table cell 6 |
- Tab
- Tab
- Tab
- Tab
- code
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Content 2
Content 3
content
[sc=top][font=comic sans][size=25]title here[/size][/font][/sc][
][sc=middle][size=10]some words here
[hr]
[sc=tabbed_interface horizontal][ul]
[li]Tab[/li]
[li]Tab[/li]
[li]Tab[/li]
[li]Tab[/li]
[li]Tab[/li]
[/ul][
][sc=tab-active]content[/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][
][/sc][/size][/sc][
][sc=bottom][url=https://pfq.link/~LDxq]credit[/url] | free to use[/sc]
[style]
//colour coding - editable area
//change the colours, but make sure that the words are still legible
@bkg: white;
@text: black;
@accent: #595959;
//code, don't touch unless you know what you're doing
.top {
background: @accent;
padding:10px;
max-height:auto;
color:@bkg;
text-align:center;
}
.middle {
background: @bkg;
padding:25px;
min-height:7%;
color: @text;
text-align:center;
font-size: 10pt;
}
.bottom {
background: @accent;
padding:10px;
max-height:auto;
color: @bkg;
text-align:left;
a, a:visited { color: @bkg; }
font-size: 10pt;
}
a {color: @accent;}
a:hover {letter-spacing: 2px; transition: all 1s; }
a:not(:hover){letter-spacing: 0px; transition: all 1s; }
.tooltip_content {
border: 0.5px solid @text;
background: @bkg;
min-width:1%;
width: fit-content;
color: @text;
font-size: 10pt;
padding: 5px; }
.panel {
background-color: @bkg;
border: 1px solid @accent;
border-radius:5px;
box-shadow: none;
width: 75%;
margin: 0 auto;
>h3 {
background: white;
border-bottom: 1px solid @accent;
font-size:10pt;
color: @accent;
font-weight:bold;
text-align: center;
padding:5px;}
>div {
color: @text;
padding: 10px;
}
}
.expbar {
padding: 5px;
background: @bkg;
color: @bkg;
border-radius: 0px;
width: 65%;
text-shadow:
1px 1px 0 @text,
-1px -1px 0 @text,
1px -1px 0 @text,
-1px 1px 0 @text,
1px 1px 0 @text;
border: 2px solid @accent;
}
.expbar div {
background: @accent;
border-right: 2px solid @accent
}
.expbar span {
color: @bkg;
}
.bbcode_table {
background: transparent;
border: 1px solid hidden;
}
table {
border: 4px solid @bkg;
padding: 4px;
border-collapse: separate;
th, td {
text-align: center;
padding: 5px;
border-radius: 8px;
border: 2px solid @accent;
color: @text;
}
th {
background-color: @accent;
color: @bkg;
}
td {
background-color: @bkg;
}
}
table {
margin: 0 auto;
}
.tabbed_interface {
border-collapse: separate;
>ul {
background: @bkg;
>li {
background: @accent;
color: black;
border: 1px solid @accent;
border-radius: 0px;
margin: 10px;
height: 15px;
font-size: 10pt;
min-width: 15%;
padding: 5px 0px;
text-align: center;
color: @bkg;
&.tab-active {
background: @bkg;
border: 1px solid @accent;
color: @text;
}
}
}
.tab, .tab-active {
background: @bkg;
color: @accent;
border: 1px solid @accent;
box-shadow: none;
}
}
hr {
width: 80%;
height: 0.5px;
border-radius: 10px;
background: @accent;
}
b,i{color: @accent;}
h1,h2{color: @accent;}
[/style]
credit | free to use
