Chicken's F2U Templates!
Forum Index > Other > Other Art >
Howdy! I've recently taught myself CSS and I've been wanting to make a few free templates for people to use!
I only have fairly basic knowledge, so these will be fairly basic templates, but I hope that someone will be able to gain some use from them!
Rules!
- Do not edit any of the code without my permission. All edits must comply with our Legibility Rules and Art Usage and Crediting Rules. Please PM me the edited code before you use it so I may approve it. If there is an issue with my code that needs to be fixed, please let me know and I will fix it.
- Do not use the templates in places they were not intended for, nor use elements that I have stated are not compatible with the code.
- I do not take requests.
- These templates may be changed or removed at any time, at my own discretion. If I have removed a template, do not redistribute it.
- Do not sell these templates nor claim them as your own.
About Me Templates!
 |
 |
 |
 |
 |  |  |  |
Forum Templates!
 |  |  |
 |
Signature Templates!
Multi-Use Templates!
Howdy!
This is an About Me template themed after Team Aqua! Click the images at the top to move between tabs, and hover over the Kyogre icon in the bottom corner to see credit!
You are not allowed to change any of the code without my permission. This template is also ONLY for About Me's, do not use it as a forum or signature template!
When using any templates made by yourself or other users, make sure they follow all of our legibility guidelines! Please report anything that does not follow our guidelines, as they break our site rules (yes, even if they're made by a mod; we're not exempt!)
Check the second tab to see examples of how things look in this template!
[Link to the code!]
This is a link.
This is what bold text looks like.
This is what italics looks like.
This is what underlined text looks like.
This is what tips look like.
MAX
This is a tip!
This is a hidebox
This is content inside a hidebox!
This is a display.
This text is being displayed.
- tab 1
- 2
- 3
this text is in a tab box
contents 2
contents 3
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
Poisonium Z
Z-Crystal
(
: 0)
A crystallised form of Z-Power. It can be used to boost Albino rates for Poison-type Eggs.
Sells for 
1,000
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sweet food
MAXJolly nature
This is the maximum height the template goes! If you continue entering text past this point it will cut off.
Changelog:
6/Sep/2021 - Added PKMN Panel code bc i forgot :'D
Howdy!
This is an About Me template themed after Team Magma! Click the images at the top to move between tabs, and hover over the Groudon icon in the bottom corner to see credit!
You are not allowed to change any of the code without my permission. This template is also ONLY for About Me's, do not use it as a forum or signature template!
When using any templates made by yourself or other users, make sure they follow all of our legibility guidelines! Please report anything that does not follow our guidelines, as they break our site rules (yes, even if they're made by a mod; we're not exempt!)
Check the second tab to see examples of how things look in this template!
[Link to the code!]
This is a link.
This is what bold text looks like.
This is what italics looks like.
This is what underlined text looks like.
This is what tips look like.
MAX
This is a tip!
This is a hidebox
This is content inside a hidebox!
This is a display.
This text is being displayed.
- tab 1
- 2
- 3
this text is in a tab box
contents 2
contents 3
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
Poisonium Z
Z-Crystal
(: 0)
A crystallised form of Z-Power. It can be used to boost Albino rates for Poison-type Eggs.
Sells for 1,000
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sweet food
MAXJolly nature
This is the maximum height the template goes! If you continue entering text past this point it will cut off.
Changelog:
6/Sep/2021 - Added PKMN Panel code bc i forgot :'D
Howdy!
This is a template based off of the text box in Heart Gold/Soul Silver! The pointer GIF is from HGSS.
You are not allowed to change any of the code without my permission. Please make sure to use the appropriate code in the appropriate location!
When using any templates made by yourself or other users, make sure they follow all of our legibility guidelines! Please report anything that does not follow our guidelines, as they break our site rules (yes, even if they're made by a mod; we're not exempt!)
This is a link.
This is what bold text looks like.
This is what italics looks like.
This is what underlined text looks like.
This is what tips look like.
MAX[Link to FORUM POST code!]
[Link to ABOUT ME code!]
This is a tip!
This is a hidebox
This is content inside a hidebox!
This is a display.
This text is being displayed.
- tab 1
- 2
- Changelog
this text is in a tab box
contents 2
7/Sep/2021 - made GIF credit clearer
13/Feb/2022 - removed signature code as it is too many characters to work, may rework later
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
Poisonium Z
Z-Crystal
(: 0)
A crystallised form of Z-Power. It can be used to boost Albino rates for Poison-type Eggs.
Sells for 1,000
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sweet food
MAXJolly nature
GIF from HGSS
code by Gumshoe
Here's how it looks with a short post!
Pretty nifty!
GIF from HGSS
code by Gumshoe
Radiant Pokeball
Template
- Info
- Preview
- Code
- Changelog
Howdy!
This is a tabbed Forum template inspired by a Cool Image™ I came across! It can support any number of tabs and any length of title. Hover over the star in the bottom corner to see credit!
You are not allowed to change any of the code without my permission. This template is also ONLY for the Forum, do not use it as an About Me or signature template!
When using any templates made by yourself or other users, make sure they follow all of our Legibility Rules! Please report anything that does not follow our guidelines, as they break our site rules (yes, even if they're made by a mod; we're not exempt!)
Check the second tab to see examples of how things look in this template, and check the third tab to find the code!
This is a link.
This is what bold text looks like.
This is what italics looks like.
This is what underlined text looks like.
This is what tips look like.
MAX
This is a tip!
This is a hidebox
This is content inside a hidebox!
This is a display.
This text is being displayed.
- tab 1
- 2
- 3
this text is in a tab box
contents 2
contents 3
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
Poisonium Z
Z-Crystal
(: 0)
A crystallised form of Z-Power. It can be used to boost Albino rates for Poison-type Eggs.
Sells for 1,000
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sweet food
MAXJolly nature
Here is the code!
Code
[style]
//Do not change anything besides the Title, Tabs, and Tab Contents without my (Gumshoe's) permission!
[/style][
][sc=container][sc=header][img]https://i.imgur.com/jiptyNo.png[/img][/sc][
][sc=title]Title[/sc][
][sc=body][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=☆]F2U Code + Art by [url=https://pokefarm.com/forum/thread/322214/Chicken-s-F2U-Templates]Gumshoe[/url]
Inspired by [url=https://www.rawpixel.com/image/2866923/free-illustration-vector-moon-shine-hand]this art[/url][/pit][/sc][/sc][/sc][
][style]
//You are not allowed to change any of the code below without my (Gumshoe's) permission!
//----------------------------------------------------------//
@backcolor: #1f1f1f;
@textcolor: #d6a966;
@linkcolor: #ffd494;
@bordcolor: #ad864b;
@unseltext: #b58c4f;
@unselbord: #876a45;
@unselback: #141414;
.container {background:#1f1f1f;}
.title {
min-height:85px;
max-width:45%;
font-size:25pt;
text-align:center;
position:relative;
margin:auto;
bottom:90px;
color:#ad864b;
font-family: 'Supermercado One';
margin-bottom:-85px;
background:#1f1f1f;
cursor:default;
}
.mq15 & .title {
max-width:100%;
bottom:0px;
margin-bottom:0px;
min-height:0px;}
.body {
padding:3px;
font-size:11pt;
font-family: 'Spartan';
.tabbed_interface>ul li {
text-align:center;
margin: 3px 3px;
background-color:@unselback;
border-color:@unselbord;
border: 1px solid @unselbord;
color:@unseltext;
cursor: pointer;
padding: 6px 4px 3px 4px;
min-width:100px;
font-size:110%;
font-weight: bold;
}
.tab-active {
box-shadow: 0px 0px 0px .5px @bordcolor;
color:@textcolor!important;
border-color: @bordcolor!important;
background-color:@backcolor!important;}
.tabbed_interface>ul {background-color: inherit;}
.tabbed_interface>div {
line-height: 1.3;
color:@textcolor;
margin: 8px 5px 3px 5px;
box-shadow: none;
padding:8px 0px 0px 0px;
background-color:@backcolor;
border: 1px solid @bordercolor;
border-right: none;
border-left: none;
border-bottom: none;
a {color:@linkcolor; transition:.3s;}
a:hover {color: #ffebcc;}
.tabbed_interface>ul li {
margin: 0px;
padding:4px 4px 0px 4px;
font-size:100%;
cursor:default;
}
.tabbed_interface>div {
border-right: 1px solid @bordercolor;
border-left: 1px solid @bordercolor;
border-bottom: 1px solid @bordercolor;
border-top: none;
padding: 5px 5px;
margin: 0px 0px;
}
.tab-active {border-bottom:none;
box-shadow: none;}
.tabbed_interface>ul li:last-child {padding-right:0px;}
.panel {
background:@unselback;
border: solid 1px @bordcolor;
border-radius:0px;
box-shadow:none;
> h3 {
> a {color: @textcolor; transition:0s;}
cursor:default;
font-size:110%;
border: solid 1px @bordcolor;
background: @backcolor;
color: @textcolor;
border-radius:0px;
text-align:center;
padding:5px 4px 2px 4px;
}
> div {
color: @textcolor;
padding-top:7px;
}
}
table {border: solid 2px @bordcolor;}
table th {
background: @unselback;
border: solid 1px @unselbord;
padding:4px 4px 2px 4px;
}
table td {
border: solid 1px @unselbord;
padding:4px 4px 2px 4px;
}
div.tooltip_content {
background: @unselback;
color: @textcolor;
border: solid 1px @bordercolor;
border-radius:0px;
padding:4px 4px 2px 4px;
font-size:11pt;
padding: 7px 4px 3px 4px;
}
.bbcode_tooltip {border-bottom: 1px dotted @unselbord;}
.expbar {
background: @unselback;
color: @textcolor;
border: solid 1px @bordercolor;
border-radius: 0px;
cursor:default;
padding: 7px 4px 3px 4px;
> div {
background: @backcolor;
border-right: solid 1px #564a38;
}
}
//pkmnpanel
.party > div {
background: @backcolor;
border: 1px solid @bordercolor;
border-radius:0px;
box-shadow:none;
}
hr {border: 1px solid #ad864b;}
}
.mq15 & .party > div {margin-left:-8px;}
.credit {
text-align:right;
color: @textcolor;
padding: 0px 3px 3px 0px;
font-size:15pt;
div.tooltip_content {
background: @unselback;
color: @textcolor;
border: solid 1px @bordercolor;
border-radius:0px;
bottom:25px;
right:3px;
font-size:10pt;
padding: 7px 4px 3px 4px;
}
.bbcode_tooltip {border-bottom: 1px dotted @unselbord;}
a {color:@linkcolor; transition:.3s;}
a:hover {color: #ffebcc;}
}
}
/* latin */
@font-face {
font-family: 'Supermercado One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/supermercadoone/v20/OpNXnpQWg8jc_xps_Gi14kVVEXOn20H9MQ.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;
}
/* latin */
@font-face {
font-family: 'Spartan';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/spartan/v10/l7gAbjR61M69yt8Z8w6FZf9WoBxdBrGFuV6JABQ.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]
03/Mar/2022 - Adjusted credits slightly
- intro
- preview
- code
- changelog
Hello? Hello, hello!
This is an About Me template themed after the original FNAF game! It can support any number of tabs. Hover over the Freddy GIF in the bottom corner to see credit!
You are not allowed to change any of the code without my permission (including the GIF above). If you would like a version without the FNAF GIFs, please use the code for it which I have included. This template is also ONLY for About Me's, do not use it elsewhere!
When using any templates made by yourself or other users, make sure they follow all of our Legibility Rules! Please report anything that does not follow our rules (yes, even if they're made by a mod; we're not exempt!)
Check the second tab to see examples of how things look in this template, and the third tab to see the code!
This is a link.
This is what bold text looks like.
This is what italics looks like.
This is what underlined text looks like.
This is what tips look like.
MAX
This is a tip!
This is a hidebox
This is content inside a hidebox!
This is a display.
This text is being displayed.
- tab 1
- 2
- 3
this text is in a tab box
contents 2
contents 3
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
Poisonium Z
Z-Crystal
(: 0)
A crystallised form of Z-Power. It can be used to boost Albino rates for Poison-type Eggs.
Sells for 1,000
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sweet food
MAXJolly nature
code with GIFs
[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]
code without GIFs
[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=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=credits][url=https://assets.clip-studio.com/en-us/detail?id=1719532]static effects[/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:black;
@backtext:white;
@bordercolor:white;
@bordercolordim:grey;
@backlink:#B3B3B3;
@boxcolor:black;
@titlecolor:white;
@titleback:#333333;
@tipback:black;
@shadowsize:10px;
.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:912px;
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 {
font-size:10pt;
text-align:right;
margin-right:2px;
padding-bottom:2px;
padding-top:3px;
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;
img {height:23px; opacity:70%;margin-bottom:1px;}
.tooltip_content {
bottom: 20px;
right:0px;
font-size:10pt;
text-shadow:none;
}
.bbcode_tooltip {border-bottom: 1px dotted @backlink;}
}
[/style]
03/Mar/2022 - Adjusted credits slightly
static effects
gifs are official FNAF art
F2U code by Gumshoe
Howdy!
This is an About Me template themed after FNAF: Security Breach! Click the images at the top to move between tabs, and hover over the plush icon in the bottom corner to see credit!
You are not allowed to change any of the code without my permission. This template is also ONLY for About Me's, do not use it as a forum or signature template!
When using any templates made by yourself or other users, make sure they follow all of our Legibility Rules! Please report anything that does not follow our rules (yes, even if they're made by a mod; we're not exempt!)
Check the second tab to see examples of how things look in this template, the third tab for the code, and the last tab for the changelog!
This is a link.
This is what bold text looks like.
This is what italics looks like.
This is what underlined text looks like.
This is what tips look like.
MAX
This is a tip!
This is a hidebox
This is content inside a hidebox!
This is a display.
This text is being displayed.
- tab 1
- 2
- 3
this text is in a tab box
contents 2
contents 3
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
Poisonium Z
Z-Crystal
(: 0)
A crystallised form of Z-Power. It can be used to boost Albino rates for Poison-type Eggs.
Sells for 1,000
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sweet food
MAXJolly nature
Here is the code!
Code
[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]
Changelog
19/Feb/2022 - Updated credit link for head icons
03/Mar/2022 - Adjusted credits slightly
head icons
checkerboard pattern edited by Gumshoe
rest is official FNAF art edited by Gumshoe
F2U code by Gumshoe
- intro
- display
- code
- changelog
- title 5
- title 6
Howdy!
This is a tabbed About Me template themed after Togekiss! It can support any number of tabs. Hover over the Togekiss GIF to see credit!
You are not allowed to change any of the code without my permission. This template is also ONLY for About Me's, do not use it elsewhere!
When using any templates made by yourself or other users, make sure they follow all of our Legibility Rules! Please report anything that does not follow our rules (yes, even if they're made by a mod; we're not exempt!)
Check the second tab to see examples of how things look in this template, and check the third tab to find the code!
This is a link.
This is what bold text looks like.
This is what italics looks like.
This is what underlined text looks like.
This is what tips look like.
MAX
This is a tip!
This is a hidebox
This is content inside a hidebox!
This is a display.
This text is being displayed.
- tab 1
- 2
- 3
this text is in a tab box
contents 2
contents 3
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
Poisonium Z
Z-Crystal
(: 0)
A crystallised form of Z-Power. It can be used to boost Albino rates for Poison-type Eggs.
Sells for 1,000
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sweet food
MAXJolly nature
Here is the code!
Code
[style]
//Do not change anything besides the Titles and Tab Contents without my (Gumshoe's) permission! You may remove the star images from the titles if you wish.
//This is an About Me template, do not use it elsewhere!
[/style][
][sc=container][sc=textbox][sc=tabbed_interface horizontal][ul]
[li]title 1[/li]
[li]title 2[/li]
[li]title 3[/li]
[li]title 4[/li]
[li]title 5[/li]
[li]title 6[/li]
[/ul][
][sc=tab-active]contents 1[/sc][
][sc=tab]contents 2[/sc][
][sc=tab]contents 3[/sc][
][sc=tab]contents 4[/sc][
][sc=tab]contents 5[/sc][
][sc=tab]contents 6[/sc][
][/sc][sc=g][pit="[img]https://i.imgur.com/UDLAhg0.png[/img]"]official pokemon sprite
[url=https://pokefarm.com/forum/thread/322214]F2U code[/url] | [url=https://www.rawpixel.com/image/393582/free-illustration-vector-cloud-sky-color-splash]background[/url]
[url=https://www.deviantart.com/gasara/art/Glass-Star-Bullet-Pink-478494381]red star[/url] [url=https://www.deviantart.com/gasara/art/Glass-Star-Bullet-Blue-478494372]blue star[/url][/pit][/sc][/sc][/sc][
][style]
//You are not allowed to change any of the code below without my (Gumshoe's) permission!
//----------------------------------------------------------//
@t:#181926;
@tl:#372820;
@tb:#f2ede3;
@c:#dacec3;
@b:white;
@bd:#95897e;
@l:#313496;
@lh:#812c2c;
.container {
background-image:url("https://i.imgur.com/HVx0ah6.jpg");
width:290px;
background-size:cover;
background-position:50% 100%;
padding:10px;
border-radius:10px;
}
.textbox {
font-family: 'Cabin';
.tabbed_interface>ul li {
margin: 2px 3px;
text-align:center;
color:@t;
background:white;
border:none;
border: 2px solid #4284ef;
img {margin-bottom:4px;margin-right:4px;}
border-radius:50px;
cursor:default;
padding:1px 5px 0px 5px;
}
.tabbed_interface>ul>li:nth-child(odd)::before {
content: url("https://i.imgur.com/CeaFaRO.gif") " ";
}
.tabbed_interface>ul>li:nth-child(even)::before {
content: url("https://i.imgur.com/RS7niWU.gif") " ";
}
.tabbed_interface>ul>li.tab-active {border: 2px solid #ce4a31;}
.tabbed_interface>ul {background:none;}
.tabbed_interface>div {
margin-top:4px;
background:rgba(255, 249, 235, .6);
border:2px dashed @b;
border-radius:10px;
color:@t;
a {color:@l; transition:.3s;}
a:hover {color:@lh; transition:.3s;}
padding:5px;
box-shadow:none;
max-height:824px;
overflow:hidden;
font-size:11pt;
.panel {
background: @c;
border: solid 1px @b;
box-shadow: 0 0 6px 0px gray;
> h3 {
> a {
color: @tl;
}
border: solid 1px @b;
background: @tb;
color: @tl;
text-align:center;
cursor:default;
}
> div {
color: @t;
}
}
//tabbed in tab
.tabbed_interface>ul li {
border-radius:6px;
margin: 2px 2px;
background:@tb;
box-shadow: 0 0 6px 0px gray;
}
.tabbed_interface>ul>li:nth-child(odd)::before {
content: none;
}
.tabbed_interface>ul>li:nth-child(even)::before {
content: none;
}
.tabbed_interface>div {
box-shadow: 0 0 6px 0px gray;
margin-top:2px;
background:@c;
border: 2px solid @b;
border-radius:6px;
}
table {
border: solid 2px @b;
box-shadow: 0 0 6px 0px gray;
}
table th {
border: solid 1px @b;
color: @t;
background: @tb;
border: solid 1px @bd;
}
table td {
border: solid 1px @bd;
background: @c;
color: @t;
}
.expbar {
box-shadow: 0 0 6px 0px gray;
background: @c;
color: @t;
border: solid 2px @b;
cursor:default;
> div {
background: @tb;
border-right: solid 1px @bd;
}
}
div.tooltip_content {
background: @c;
color: @t;
border: solid 1px @b;
}
.bbcode_tooltip {
border-bottom: 1px dotted @bd;
}
//pkmnpanel
.party > div {
background: @c;
border: 2px solid @b;
box-shadow: 0 0 6px 0px gray;
}
.party > div {
width:89%;
margin-left: 0px;
.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:160px;
position:absolute;
top:15px;
right:10px;
}
}
}
.g {
margin-bottom: -5px;
margin-top:5px;
text-align:right;
a {color:@l; transition:.3s;}
a:hover {color:@lh; transition:.3s;}
div.tooltip_content {
right:100px;
bottom:0px;
font-size:10pt;
background:rgba(255, 249, 235, .7);
color: @t;
border: dashed 2px @b;
text-align:right;
}
.bbcode_tooltip {border-bottom: 1px dotted rgba(255, 233, 209, .85);}
}
@font-face {
font-family: 'Cabin';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cabin/v18/u-4X0qWljRw-PfU81xCKCpdpbgZJl6XFpfEd7eA9BIxxkV2EH7alxw.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]
19/Feb/2022 - Fixed PKMNpanel width
23/Feb/2022 - Learned how to automatically put the star images in the titles \o/ + changed cursor hover for display headers
03/Mar/2022 - Adjusted credits slightly + removed the star images from the non-title tabs whoops
02/Apr/2022 - Changed width so previewing is easier
contents 5
contents 6
Howdy!
This is a tabbed About Me template themed after a file folder!
You may customize the color of the tabs, but please be mindful and do not choose bright saturated colors. You may also remove tabs if you wish. This template is also ONLY for About Me's, do not use it elsewhere!
This template has a fixed height, so be careful your text does not get cut off.
When using any templates made by yourself or other users, make sure they follow all of our Legibility Rules! Please report anything that does not follow our rules.
Check the second tab to see examples of how things look in this template, and check the third tab to find the code!
This is a link. Bold text. Italics. Underlined. Tipped.
MAX
This is a tip!
This is a hidebox
This is content inside a hidebox!
This is a display.
This text is being displayed.
- tab 1
- 2
- 3
this text is in a tab box
contents 2
contents 3
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
Poisonium Z
Z-Crystal
(: 0)
A crystallised form of Z-Power. It can be used to boost Albino rates for Poison-type Eggs.
Sells for 1,000
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sweet food
MAXJolly nature
Here is the code!
Code
[style]
//Do not change anything besides the Tab Contents without my (Gumshoe's) permission! Do not put text into the Tab Buttons as it will not display properly.
//This is an About Me template, do not use it elsewhere!
[/style][
][sc=folder][sc=tabbed_interface horizontal][ul][li][/li][li][/li][li][/li][li][/li][li][/li][li][/li][/ul][
][sc=tab-active][sc=page]contents 1[/sc][/sc][
][sc=tab][sc=page]contents 2[/sc][/sc][
][sc=tab][sc=page]contents 3[/sc][/sc][
][sc=tab][sc=page]contents 4[/sc][/sc][
][sc=tab][sc=page]contents 5[/sc][/sc][
][sc=tab][sc=page]contents 6[/sc][/sc][
][/sc][sc=credit][url=https://pokefarm.com/forum/thread/322214/Chicken-s-F2U-Templates]credit[/url][/sc][/sc][
][style]
//You may change the tab colors here, but please do not use overly bright/saturated colors.
@tab1:#ba2c2c;
@tab2:#edf033;
@tab3:orange;
@tab4:#339935;
@tab5:#5d61ea;
@tab6:#803b81;
//You are not allowed to change any of the code below without my (Gumshoe's) permission!
//----------------------------------------------------------//
@page:#f7f3ed;
@text:black;
@tb:#efdab5;
@tbd:#d8c199;
@hl:rgba(241, 241, 23, 0.55);
.page {
background:@page;
margin:15px 2px 0px 10px;
height:500px;
padding:4px;
box-shadow:4px 3px 8px rgba(0,0,0,.3), 1px 1px 4px rgba(0,0,0,.2);
overflow:hidden;
line-height:1.12;
}
.folder {
font-size:10.6pt;
font-family: 'Courier Prime';
border:none;
width:310px;
height:558px;
background:#86785f;
position:relative;
border-radius:10px 0px 0px 10px;
.tabbed_interface>ul li {
position:absolute;
width:32px;
height:80px;
margin-left:3px;
border:1px solid rgba(0, 0, 0, .7);
z-index:1;
border-radius: 8px 0px 0px 8px;
cursor:pointer;
}
.tabbed_interface>ul>li.tab-active {
border-right:none;
z-index:3;
}
.tabbed_interface>ul li:nth-child(1) {top: 10px;background:@tab1;}
.tabbed_interface>ul li:nth-child(2) {top: 100px;background:@tab2;}
.tabbed_interface>ul li:nth-child(3) {top: 190px;background:@tab3;}
.tabbed_interface>ul li:nth-child(4) {top: 280px;background:@tab4;}
.tabbed_interface>ul li:nth-child(5) {top: 370px;background:@tab5;}
.tabbed_interface>ul li:nth-child(6) {top: 460px;background:@tab6;}
.tabbed_interface>ul {background:none;}
.tabbed_interface>div {
position:absolute;
width:271px;
margin-left:31px;
height:550px;
padding:4px;
margin-top:0px;
z-index:2;
background:linear-gradient(0deg, rgba(215,192,152,1) 0%, rgba(240,219,182,1) 100%);
color:@text;
border:none;
box-shadow:none;
border-radius: 10px 0px 0px 10px;
a {color: @text; background:@hl;}
.tabbed_interface>ul li:nth-child(1) {background:@tbd;}
.tabbed_interface>ul li:nth-child(2) {background:@tbd;}
.tabbed_interface>ul li:nth-child(3) {background:@tbd;}
.tabbed_interface>ul li:nth-child(4) {background:@tbd;}
.tabbed_interface>ul li:nth-child(5) {background:@tbd;}
.tabbed_interface>ul li:nth-child(6) {background:@tbd;}
.tabbed_interface>ul li {
position:static;
height:inherit;
width:inherit;
border-radius:8px 8px 0px 0px;
margin-left:inherit;
margin: 0px 1px;
border:1px solid black;
cursor:default;
text-align:center;
color:@text;
padding: 2px 2px 0px 2px;
}
.tabbed_interface>ul li:first-child {margin-left:0px;}
.tabbed_interface>ul li:last-child {margin-right:0px;}
.tabbed_interface>ul>li.tab-active {
background:@tb;
border-bottom:0px;
}
.tabbed_interface>ul {background:none;}
.tabbed_interface>div {
position:static;
width:inherit;
margin-left:inherit;
margin-top:-1px;
height:inherit;
padding:inherit;
z-index:inherit;
background:#efdab5;
border-radius: 0px;
border:1px solid black;
padding:3px;
}
.panel {
box-shadow:none;
background: @tb;
border: solid 1px black;
> h3 {
> a {color: @text; background:none;}
border-bottom: none;
background: @tbd;
color: @text;
text-align:center;
padding:3px 3px 1px 3px;
cursor:default;
}
> div {
color: @text;
padding:3px;
}
}
table {border: none;}
table th {
border: solid 1px black;
color: @text;
background: @hl;
border: solid 1px black;
padding:4px 2px 0px 2px;
}
table td {
border: solid 1px black;
color: @text;
padding:4px 2px 0px 2px;
}
.expbar {
background: @page;
color: @text;
border: solid 1px black;
padding:4px 3px 0px 3px;
cursor:default;
> div {
background:@hl;
border-right: solid 1px rgba(0,0,0,.2);
}
}
.party > div {
background: @tb;
border: 1px solid black;
box-shadow: none;
width:81%;
margin-left: 0px;
a {color: @text;background:none;}
.action a[data-berry]:after {border: none;}
.berrybuttons > a {display: none;}
.berrybuttons[data-up='sour'] > a[data-berry='aspear'],
.berrybuttons[data-up='spicy'] > a[data-berry='cheri'],
.berrybuttons[data-up='dry'] > a[data-berry='chesto'],
.berrybuttons[data-up='sweet'] > a[data-berry='pecha'],
.berrybuttons[data-up='bitter'] > a[data-berry='rawst'],
.berrybuttons[data-up='any'] > a[data-berry='pecha']{
background: @hl;
display:block;
position:absolute;
right:15px;
padding:0px 40px;
border-radius:8px;
}
}
.party > div > .name {
position:absolute;
right:0px;
top:0px;
letter-spacing:.5px;
}
.party > div > .action {
position: absolute;
right:1px;
bottom:30px;
}
.party > div > .extra > .nature {
position: absolute;
right:-10px;
bottom:5px;
}
.party > div > .expbar {
width:150px;
position:absolute;
top:15px;
right:10px;
}
div.tooltip_content {
background: @tb;
color: @text;
border: solid 1px @bord;
font-size:10.6pt;
padding:3px;
}
.bbcode_tooltip {border-bottom: 1px dashed rgba(0,0,0,.3);}
}
.credit {
font-size:10pt;
z-index:9;
position:absolute;
bottom:0px;
right:3px;
color:#402611;
a {color:#402611; text-decoration: none;}
background:#d7c098;
}
}
/* latin */
@font-face {
font-family: 'Courier Prime';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/courierprime/v5/u-450q2lgwslOqpF_6gQ8kELawFpWg.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]
Changelog:
Nothing yet!
contents 5
contents 6
- intro
- examples 1
- examples 2
- examples 3
- code
- changelog
Howdy!
This is a tabbed About Me template I got the idea for when I accidentally made a "lever" animation for tab titles, haha.
This template has very limited height, so be careful your text is not cut off. The lever text must be kept short as well.
You can also remove the blinking GIF if you want; I just think it looks cool :D 
link. bold. italics. underline. tips.
This is a tip!
This is a hidebox
This is content inside a hidebox!
This is a display.
This text is being displayed.
- tab 1
- 2
- 3
this text is in a tab box
contents 2
contents 3
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
Poisonium Z
Z-Crystal
(: 0)
A crystallised form of Z-Power. It can be used to boost Albino rates for Poison-type Eggs.
Sells for 1,000
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sweet food
MAXJolly nature
Here is the code!
Code
[style]
//Do not change anything besides the Tabs and Tab Contents without my (Gumshoe's) permission! You may remove the blinking GIFs if you'd like.
//This is an About Me template, do not use it elsewhere!
[/style][
][sc=tv][sc=stuff][sc=tabbed_interface horizontal]
[ul]
[li]tab 1[/li]
[li]tab 2[/li]
[li]tab 3[/li]
[li]tab 4[/li]
[li]tab 5[/li]
[li]tab 6[/li]
[/ul][
][sc=tab-active]contents 1 [img]https://i.imgur.com/vvA3BBP.gif[/img][/sc][
][sc=tab]contents 2 [img]https://i.imgur.com/vvA3BBP.gif[/img][/sc][
][sc=tab]contents 3 [img]https://i.imgur.com/vvA3BBP.gif[/img][/sc][
][sc=tab]contents 4 [img]https://i.imgur.com/vvA3BBP.gif[/img][/sc][
][sc=tab]contents 5 [img]https://i.imgur.com/vvA3BBP.gif[/img][/sc][
][sc=tab]contents 6 [img]https://i.imgur.com/vvA3BBP.gif[/img][/sc][
][/sc][sc=credit][pit=credit]f2u code + art by [url=https://pokefarm.com/forum/thread/322214/Chicken-s-F2U-Templates]Gumshoe[/url][/pit][/sc][/sc][/sc][
][style]
//You are not allowed to change any of the code below without my (Gumshoe's) permission!
//----------------------------------------------------------//
@text:#79bf40;
@rbg:#0a1a21;
@bg:#181716;
@bg2:#212522;
@link:#d6d6d6;
@bord:#487722;
.tv {
color:@text;
background:@rbg;
background-image: url("https://i.imgur.com/KZlDNuX.png");
background-repeat: no-repeat;
a {color:@link;}
max-width:310px;
height:367px;
font-size:10pt;
border-radius:4px;
}
.stuff{
position:relative;
.tabbed_interface>ul li {
cursor:pointer;
text-align:center;
padding:1px;
color:black;
border:2px solid black;
position:absolute;
width:81px;
height:17px;
border-radius:8px;
transition:.3s;
overflow:hidden;
background:#658486;
}
.tabbed_interface>ul li:nth-child(1) {top: 266px;left:13px;}
.tabbed_interface>ul li:nth-child(2) {top: 266px;left:111px;}
.tabbed_interface>ul li:nth-child(3) {top: 266px;left:210px;}
.tabbed_interface>ul li:nth-child(4) {top: 309px;left:13px;}
.tabbed_interface>ul li:nth-child(5) {top: 309px;left:111px;}
.tabbed_interface>ul li:nth-child(6) {top: 309px;left:210px;}
.tabbed_interface>ul>li.tab-active {
margin-top:18px;
transition:.3s;
}
.tabbed_interface>ul {
background:none;
}
.tabbed_interface>div {
color:@text;
background:none;
box-shadow:none;
border:none;
border-top:none;
overflow:hidden;
position:absolute;
left:24px;
top:18px;
width:262px;
height:200px;
.tabbed_interface>ul li {
color:@text;
background:@bg;
border:1px solid @bord;
position:static;
width:inherit;
height:inherit;
border-radius:0px;
cursor:default;
}
.tabbed_interface>ul li:first-child {border-radius:6px 0px 0px 0px;}
.tabbed_interface>ul li:last-child {border-radius:0px 6px 0px 0px;}
.tabbed_interface>ul>li.tab-active {
margin-top:0px;
transition:.3s;
background:@bg2;
}
.tabbed_interface>ul {
background:none;
}
.tabbed_interface>div {
position:static;
background:@bg;
color:@text;
border:1px solid @bord;
border-top:none;
overflow:hidden;
width:inherit;
height:inherit;
border-radius: 0px 0px 6px 6px;
padding:4px;
}
hr {border: 1px solid @bord;}
.panel {
background: @bg;
border: solid 1px @bord;
color: @text;
box-shadow:none;
> h3 {
> a {color: @text;}
font-size:110%;
border: solid 1px @bord;
background: @bg2;
color: @text;
text-align:center;
cursor:default;
}
> div {color: @text;}
}
.expbar {
background: @bg2;
color: @text;
border: solid 1px @bord;
cursor:default;
> div {
background: @bg;
border-right: solid 1px #375a1b;
}
}
div.tooltip_content {
background: @bg;
color: @text;
border: solid 1px @bord;
font-size:10pt;
}
.bbcode_tooltip {
border-bottom: 1px dotted @text;
}
table {
border: solid 1px @bord;
}
table th {
border: solid 1px @bord;
color: @text;
background: @bg2;
}
table td {
border: solid 1px @bord;
background: @bg;
color: @text;
}
.party > div {
background: @bg;
color: @text;
border: 1px solid @bord;
box-shadow: none;
a {color: @link;}
.action a[data-berry]:after {border: none;}
width:84.5%;
margin-left: 0px;
.berrybuttons > a {display: none;}
.berrybuttons[data-up='sour'] > a[data-berry='aspear'],
.berrybuttons[data-up='spicy'] > a[data-berry='cheri'],
.berrybuttons[data-up='dry'] > a[data-berry='chesto'],
.berrybuttons[data-up='sweet'] > a[data-berry='pecha'],
.berrybuttons[data-up='bitter'] > a[data-berry='rawst'],
.berrybuttons[data-up='any'] > a[data-berry='pecha']{
background:@bg;
border:2px solid @bord;
display:block;
position:absolute;
right:15px;
padding:0px 40px;
border-radius:8px;
}
}
.party > div > .name {
position:absolute;
right:0px;
top:0px;
letter-spacing:.5px;
}
.party > div > .action {
position: absolute;
right:1px;
bottom:30px;
}
.party > div > .extra > .nature {
position: absolute;
right:-10px;
bottom:5px;
}
.party > div > .expbar {
width:150px;
position:absolute;
top:15px;
right:10px;
}
}
.credit {
right:2px;
bottom:-352px;
position:absolute;
color:#6dad38;
div.tooltip_content {
background: @bg;
color: @text;
border: solid 1px @bord;
border-radius:6px;
bottom:14px;
right:0px;
font-size:10pt;
padding: 4px;
width:168px;
}
.bbcode_tooltip {border-bottom: none;}
a {color:@link}
}
font-family: 'Bai Jamjuree';
}
/* latin */
@font-face {
font-family: 'Bai Jamjuree';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/baijamjuree/v9/LDIqapSCOBt_aeQQ7ftydoa0reHelJo0.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]
03/Mar/2022 - Adjusted credits slightly
credit
f2u code + art by Gumshoe
Cannot post: Please log in to post