Single post in ๐ ๐ฟ๐. ๐๐ฎ๐ฒ๐ด๐ฎ๐ฟ'๐ ๐ฅ๐ฒ๐ด๐ถ๐บ๐ฒ
Forum Index > PokรฉFarm > Journals > ๐ ๐ฟ๐. ๐๐ฎ๐ฒ๐ด๐ฎ๐ฟ'๐ ๐ฅ๐ฒ๐ด๐ถ๐บ๐ฒ >
helpful links and templates / css
:)
- forum templates
- about me templates
- important links
- css skins
free trade shop template by waterwolf600
[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]
minimalist journal by waterwolf600
[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]
fnaf about me by Gumshoe
[style]
//Do not change anything besides the Tabs and Tab Contents without my (Gumshoe's) permission!
//This is an About Me template, do not use it elsewhere!
[/style]
[sc=headercover][img]https://i.imgur.com/e14HJox.png[/img][/sc][sc=header][img]https://i.imgur.com/AgKwYtS.gif[/img][/sc][
][sc=fnaf1code][sc=tabbed_interface horizontal][ul]
[li]tab 1[/li]
[li]tab 2[/li]
[li]tab 3[/li]
[li]tab 4[/li]
[/ul][
][sc=tab-active]contents 1[/sc][
][sc=tab]contents 2[/sc][
][sc=tab]contents 3[/sc][
][sc=tab]contents 4[/sc][
][/sc][sc=credit][pit="[img]https://i.imgur.com/YAdFUs6.gif[/img]"][url=https://assets.clip-studio.com/en-us/detail?id=1719532]static effects[/url]
gifs are official FNAF art
F2U code by [url=https://pokefarm.com/forum/thread/322214]Gumshoe[/url][/pit][/sc][/sc][
][style]
//You are not allowed to change any of the code below without my (Gumshoe's) permission!
//---------------------------------------------------//
@backcolor:black;
@backtext:white;
@bordercolor:white;
@bordercolordim:grey;
@backlink:#B3B3B3;
@boxcolor:black;
@titlecolor:white;
@titleback:#333333;
@tipback:black;
@shadowsize:10px;
.header {max-width:100%;}
.headercover {position:absolute; max-width:100%; opacity:70%;}
.fnaf1code {
position:relative;
color:@backtext;
font-family: 'Inconsolata';
max-width:100%;
background-color:black;
background-image: url("https://i.imgur.com/t1zipFY.png");
.tabbed_interface>ul li {
text-align:center;
margin: 5px 2px 2px 2px;
background-color:black;
border-color:white;
border: 1px solid @bordercolordim;
color:@backlink;
cursor: pointer;
transition: .3s;
padding: 1px 2px;
}
.tabbed_interface>ul>li.tab-active {
border: 1px solid white;
color:@titlecolor;
}
.tabbed_interface>ul {background-color: inherit;}
.tabbed_interface>div {
color:@backtext;
margin: 5px 7px 2px 7px;
max-height:692px;
box-shadow: none;
padding:8px 10px;
background-color:@backcolor;
background-image: url("https://i.imgur.com/OlyShjL.png");
border: 1px solid @bordercolor;
font-size:10.5pt;
overflow: hidden;
a {color:@backlink; transition:.3s;}
a:hover {
color:@backtext;
transition:.3s;
text-shadow: 0px 0px 5px gray, 0px 0px 3px @backlink;
}
.tabbed_interface>ul li {
color:#bfbfbf;
background-color: #121212;
background-image: url("https://i.imgur.com/axIZ63Y.png");
text-shadow: 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor;
min-width: auto;
border: 2px solid #5a5a5a;
padding:2px;
font-size:120%;
}
.tabbed_interface>ul>li.tab-active {
border: 2px solid @bordercolordim;
opacity:100%;
background-color: @titleback;
color:@titlecolor;
}
.tabbed_interface>ul {
background-color: inherit;
}
.tabbed_interface>div {
border: 1px solid @bordercolordim!important;
box-shadow: none;
background: @boxcolor;
margin: 2px 2px;
padding:4px 5px;
}
}
.panel {
background: @boxcolor;
cursor: default;
box-shadow: none;
border: solid 1px @bordercolordim;
border-radius: 0px;
color:@titlecolor;
> h3 {
text-align:center; letter-spacing: .5px;
text-shadow: 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor;
border-radius: 0px;
> a {color: @titlecolor;}
> a:hover {text-shadow: 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor;}
border: solid 1px @bordercolordim;
background-color: @titleback;
background-image: url("https://i.imgur.com/axIZ63Y.png");
color:@backtext;
}
> div { .page; color:@backtext;}
}
.expbar {
background: @boxcolor;
cursor: default;
color: @titlecolor;
text-shadow: 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor, 0px 0px @shadowsize @backcolor;
border: solid 1px @bordercolordim;
border-radius: 0px;
box-shadow: none;
letter-spacing: .5px;
> div {
background-color: @titleback;
background-image: url("https://i.imgur.com/axIZ63Y.png");
border-right: solid 1px gray;
}
}
.bbcode_table {
border: 2px solid @bordercolordim;
box-shadow: none;
background: @boxcolor;
th {background-color: black;
border-color:#575757; letter-spacing:.5px;
}
td {border-color:#575757;}
}
.tooltip_content {
background: @tipback;
color: @backtext;
border: solid 1px @bordercolordim;
border-radius: 0px;
box-shadow: none;
font-size:10pt;
a {color:@backlink; transition:.3s}
a:hover {color:@backtext; transition:.3s;
text-shadow: 0px 0px 5px gray, 0px 0px 5px @backlink;}
}
.bbcode_tooltip {border-bottom: 1px dotted @backlink;}
//pkmnpanel
.party > div {
width:89%;
margin-left: 0px;
background: @boxcolor;
border: 1px solid @bordercolordim;
border-radius: 0px;
box-shadow: none;
.action a[data-berry]:after {border:none;}
}
.party > div > .name {
position:absolute;
right:0px;
top:-3px;
letter-spacing:.5px;
}
.party > div > .action {
position: absolute;
right:1px;
bottom:30px;
}
.party > div > .extra > .nature {
position: absolute;
right:0px;
bottom:5px;
}
.party > div > .expbar {
width:150px;
position:absolute;
top:15px;
right:10px;
}
/* latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inconsolata/v21/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp7c8WR32lw.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;
}
//end of fnaf1code
}
.credit {
text-align:right;
margin-right:2px;
padding-bottom:2px;
img {height:23px; opacity:70%;margin-bottom:1px;}
.tooltip_content {
bottom: 25px;
right:3px;
font-size:10pt;
}
.bbcode_tooltip {border-bottom: 1px dotted @backlink;}
}
[/style]
fnaf sb about me by gumshoe
[style]
//Do not change anything besides the Tab Contents without my (Gumshoe's) permission!
//This is an About Me template, do not use it elsewhere!
[/style][
][sc=fnafsccode][sc=tabbed_interface horizontal][ul]
[li][img]https://i.imgur.com/VUnOh2W.png[/img][/li]
[li][img]https://i.imgur.com/zEGc5iJ.png[/img][/li]
[li][img]https://i.imgur.com/8P4mHTV.png[/img][/li]
[li][img]https://i.imgur.com/bMThwBR.png[/img][/li]
[/ul][
][sc=tab-active]contents 1[/sc][
][sc=tab]contents 2[/sc][
][sc=tab]contents 3[/sc][
][sc=tab]contents 4[/sc][
][/sc][sc=credit][pit="[img]https://i.imgur.com/rjGxLIv.png[/img]"][url=https://pokefarm.com/forum/post/6290528]head icons[/url]
[url=https://commons.wikimedia.org/wiki/File:Checkerboard_Pattern_8x6.svg]checkerboard pattern[/url] edited by [url=https://pfq.link/@92x]Gumshoe[/url]
rest is official FNAF art edited by [url=https://pfq.link/@92x]Gumshoe[/url]
F2U code by [url=https://pokefarm.com/forum/thread/322214]Gumshoe[/url][/pit][/sc][/sc][
][style]
//You are not allowed to change any of the code below without my (Gumshoe's) permission!
//---------------------------------------------------//
@backcolor:rgba(0, 0, 0, 0.7);
@backtext:white;
@bordercolor:#FD7AFF;
@bordercolordim:#A855AA;
@backlink:#FD7AFF;
@boxcolor:black;
@titlecolor:white;
@titleback:#241B27;
@tipback:black;
.fnafsccode {
position:relative;
color:@backtext;
font-family: 'PT Sans';
max-width: 100%;
background-size: 333px auto;
background-image: url("https://i.imgur.com/HEVV6MM.png");
background-position: 50% -10px;
padding-top:280px;
padding-bottom: 4px;
b {letter-spacing:.5px;}
h1, h2, h3 {letter-spacing:.5px;}
.tabbed_interface>ul li {
padding-bottom: 2px;
border-radius: 12px;
border-top:0px;
border-right:0px;
text-align:center;
margin: 2px 2px;
background-color:inherit;
cursor: pointer;
img {height:73px; margin-top:0px;transition: .2s;}
opacity:60%;
transition: .3s;
}
.tabbed_interface>ul li:hover {transition: .3s;}
.tabbed_interface>ul>li.tab-active {
opacity:100%;
img {margin-top:-5px;}
}
.tabbed_interface>ul {background-color: inherit;}
.tabbed_interface>div {
color:@backtext;
margin: 2px 7px;
max-height:590px;
box-shadow: 0px 0px 7px @bordercolor;
padding:8px 10px;
border-radius: 12px;
background-color:@backcolor;
border: 1px solid @bordercolor;
font-size:10.5pt;
overflow: hidden;
a {color:@backlink; transition:.3s;}
a:hover {
color:@backtext;
transition:.3s;
text-shadow: 0px 0px 5px #a04ea2, 0px 0px 5px #a04ea2, 0px 0px 5px #a04ea2;
}
.tabbed_interface>ul li {
color:#c4b6c9;
background-color: #19131b;
background-image: url("https://i.imgur.com/cPD84i1.png");
min-width: auto;
border: 2px solid #753b77;
padding:2px;
font-size:120%;
opacity:100%;
border-radius: 8px;
}
.tabbed_interface>ul>li.tab-active {
color:@backtext;
border-color: @bordercolordim;
background-color: @titleback;
}
.tabbed_interface>ul {background-color: inherit;}
.tabbed_interface>div {
border: 1px solid @bordercolordim;
box-shadow: none;
background: @boxcolor;
border-radius: 8px;
margin: 2px 0px;
padding:4px 5px;
}
}
.panel {
background: @boxcolor;
box-shadow: none;
border: solid 1px @bordercolordim;
color:@titlecolor;
> h3 {
> a {color: @titlecolor;}
> a:hover {text-shadow: none}
text-align:center;
cursor: default;
border: solid 1px @bordercolordim;
background-color: @titleback;
background-image: url("https://i.imgur.com/cPD84i1.png");
color:@backtext;
}
> div { .page; color:@backtext;}
}
.expbar {
background: @boxcolor;
cursor: default;
color: @titlecolor;
border: solid 1px @bordercolordim;
box-shadow: none;
letter-spacing: .5px;
> div {
background-color: @titleback;
background-image: url("https://i.imgur.com/cPD84i1.png");
border-right: solid 1px #594559;
}
}
.bbcode_table {
border: 2px solid @bordercolordim;
box-shadow: none;
background: @boxcolor;
th {background-color: @titleback;
background-image: url("https://i.imgur.com/cPD84i1.png");
border-color:#824E83; letter-spacing:.5px;
}
td {border-color:#824E83;}
}
.tooltip_content {
background: @tipback;
color: @backtext;
border: solid 1px @bordercolordim;
box-shadow: none;
font-size:10pt;
a {color:@backlink; transition:.3s}
a:hover {
color:@backtext;
transition:.3s;
text-shadow: 0px 0px 5px #a04ea2, 0px 0px 5px #a04ea2, 0px 0px 5px #a04ea2;}
}
.bbcode_tooltip {border-bottom: 1px dotted @bordercolor;}
//pkmnpanel
.party > div {
width:88%;
margin-left: 0px;
background: @boxcolor;
color: @textcolor;
border: 1px solid @bordercolordim;
box-shadow: none;
a:link, a:visited {color: @linkcolor}
.action a[data-berry]:after {border:none;}
}
.party > div > .name {
position:absolute;
right:0px;
top:-3px;
letter-spacing:.5px;
}
.party > div > .action {
position: absolute;
right:1px;
bottom:30px;
}
.party > div > .extra > .nature {
position: absolute;
right:0px;
bottom:5px;
}
.party > div > .expbar {
width:150px;
position:absolute;
top:15px;
right:10px;
}
//end fnafcode
}
.credit {
text-align:right;
margin-right:2px;
img {height:20px; opacity:90%;}
.tooltip_content {
bottom: 20px;
right:3px;
font-size:10pt;
}
}
/* latin */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ptsans/v12/jizaRExUiTo99u79D0KExQ.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;
}
[/style]
old about me
[css=background: white;padding:1px;min-height: 26px; max-height: 26px;][styleclass=background][styleclass=alignleft][colour=white]____[/colour] [img]https://i.imgur.com/GbsLSkW.gif[/img][/styleclass][styleclass=alignright][img]https://i.imgur.com/QIXXGVH.png[/img][img]https://i.imgur.com/pX4Efvy.png[/img][img]https://i.imgur.com/86K8HYh.png[/img][/styleclass][/styleclass]
[sc=thatbox][center]
[sc=links]content[/sc][/center]
[sc=tabbed_interface horizontal][ul]
[li]tab[/li]
[li]tab[/li]
[li]tab[/li]
[/ul][
][sc=tab-active][sc=links]content
[/sc][/sc][
][sc=tab][sc=links]content
[/sc][/sc][
][sc=tab][sc=links]content
[/sc][/sc][
][/sc]
[center][img]https://64.media.tumblr.com/a9e9c217aac2ab075396b3b9aa0f63f5/tumblr_nu4gmttiqj1toaonyo1_500.jpg[/img][/center][/sc][/css]
[css=background:white; -moz-border-radius: 0px 0px; border-radius: 0px 0px; padding: 5px;][sc=credits][css=text-align:right][size=8][url=https://pokefarm.com/forum/thread/71695/Free-About-Me-Templates]credits[/url][/size][/css][/sc][/css]
[style].credits{a:link { font-weight: normal; font-size:9px;color: black; }
a:visited {font-weight: normal; color: #3E3838; }
a:hover { font-weight: normal;color: black; letter-spacing: 0px; transition: 1s; }
a:active { font-weight: normal;color: black; }}
.alignleft {
float: left;
margin-left:5px;
margin-top:2px;}
.alignright {
float: right;
}.alignleft {
float: left;
margin-left:5px;}
.alignright {
float: right;
}
.background {background: #3E3838; -moz-border-radius: 10px 10px; border-radius: 2px 2px; padding-top: 5px;
padding-right: 12px;
padding-bottom: 5px;
padding-left: 3px;
min-height: 17px; max-height: 17px;
font-size:12px;
font-family:courier;
}
.thatbox{
background-color:white;
width:100%;
float: left;
margin: -18.5px 0px 0px -1px;
padding:9px;
color:#3E3838;
font-size:13.5px;
font-family: Garamond;
letter-spacing:1px;
position: relative;
margin-top:-18px;
}
ul { background: white; }
ol>li { background: white; border: #645F5F; margin: 0px; text-align: center;}
li, li.tab-active {background: #645F5F; box-shadow: none;color: white; border: 1px solid #645F5F; border-radius: 0px; margin: 4px auto; padding: 5px; max-width: 20%; text-align: center; margin-left:6px;}
li.tab-active { background: #3E3838; color: white;border: 1px solid #3E3838; }
.tab, .tab-active { color: #3E3838; box-shadow: none;border-radius: 0px; border: 1px solid white; padding: 5px; background: white; margin: 0.5% 3%; }
a:link { color: #121010; text-decoration:none; font-weight:bold; transition: 2s;}
a:hover { color: #121010; letter-spacing: 1.5px; transition: 1s;}
[/style]
tabbed about me/ forum by sceptios
https://pokefarm.com/forum/thread/161261/Free-Tabbed-About-Me-Template
[sc=sceptios-about-me][sc=avatar][img]<avatar_image>[/img][/sc][
][sc=top-am-links][ul][li][url=<link_1_url>]Link 1[/url][/li][li][url=<link_2_url>]Link 2[/url][/li][li][url=<link_3_url>]Link 3[/url][/li][li][url=<link_4_url>]Link 4[/url][/li][/ul][/sc][
][sc=tabbed_interface horizontal wrap][ul][li]Tab 1[/li][li]Tab 2[/li][/ul][
][sc=tab tab-1 tab-active][
]Tab 1 content[
][/sc][
][sc=tab tab-2][
]Tab 2 content[
][/sc][/sc][
][sc=credits]avatar by [url=<avatar_creator_url>]<avatar_creator_name>[/url] ([url=<avatar_permission_url>]permission[/url])
code by [url=/user/sceptios]sceptios[/url] ([url=/forum/thread/161261/Free-Tabbed-About-Me-Template]free to use[/url])[/sc][/sc][
][style]
.sceptios-about-me {
width: 100%;
overflow: hidden;
}
.avatar {
display: inline-block;
overflow: hidden;
float: left;
height: 72px;
width: 72px;
border-style: solid;
border-color: @col-border2;
border-width: 3px;
margin-right: 4px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
&>img {
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
filter: brightness(90%);
}
}
.top-am-links {
width: 224px;
display: inline-block;
overflow: hidden;
&>ul, {
width: 100%;
padding: 0;
margin: 0 0 0 1px;
&>li {
display: block;
&>a {
position: relative;
float: left;
padding: 2px 4px;
margin: 3px 0px 2px 5px;
color: @col-link1;
font-size: 10pt;
text-align: center;
line-height: 13px;
height: 13px;
width: 95px;
border-color: @col-border2;
background-color: @col-bg3;
border-style: solid;
border-width: 1px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
filter: brightness(95%);
&:hover {
filter: brightness(80%);
color: @col-fg2;
background-color: @col-bg2;
}
}
}
}
}
.tabbed_interface {
&>ul, {
background-color: inherit;
&>li {
display: block;
padding: 8px;
margin: 1px;
border-width: 2px;
border-style: solid;
font-size: 10pt;
text-align: center;
cursor: pointer;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
line-height: 4px;
height: 4px;
width: 60px;
border-color: @col-border2;
&.tab-active {
filter: brightness(85%);
border-bottom-color: @col-border2;
}
&:not(.tab-active):hover {
color: @col-fg1;
background-color: @col-bg1;
}
}
}
&>.tab {
box-shadow: none;
background-color: inherit;
margin: 4px 0px;
padding: 8px 4px;
border-color: @col-bg2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border-width: 3px 1px;
border-style: solid dotted;
}
}
.credits {
background-color: @col-bg3;
font-size: 10pt;
float: right;
text-align: right;
padding: 1px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
vertical-align: middle;
}
:after {
height: 0;
}
[/style]
free templates
helpful journals
BBCode / Styleclass / CSS / QOL
Guide to CSS:Beginner to Expert
Site Skins:How-To, and Helpful CSS
Guide to BBCode
Styleclass and You: An Introduction
Codes for Journals
A list of items in tables
QOL I use
Guides / Planners / Calculators
Wishforge Guide
PFQ Tips and Tricks
Tournament Guide
Complete Guide to Contests
Guide to Battles
Item Pricing Guide
Hunt Planner
Calculator for eggs/wishforge/currency/gems
Melanistic Odds calculator
cool css skins
these were all found on the public use site skin css forum
how to make your own site skin
wWt/cotton-candy - cotton candy themed by Ledyba
JF/def-absol - absol colors by Methos
9t5/trainer-card - light purple and grey/white by ZelenPixel
X1C/vaporwave - vaporwave by Cognitohazard
bPV/darkskin - all black/grey by Aemilia
Jb8/grayblue - less intense black and grayblue by Ganorith
Mfn/valentine-s - valentines with luvdisc notification head by Sciana
VPz/lore-sdark - another dark but with brighter link colors by Lorentius
Mfn/searene - blue and pink searene by Sciana
bG3/shinysnivy - shiny snivy by RedPhobos
bG3/snivy - snivy by RedPhobos
bG3/melan-snivy - melan snivy by RedPhobos
bG3/albino-snivy - albino snivy by RedPhobos
VhM/velvet - dark red shade by Peter
credit | free to use
