Single post in Chicken's F2U Templates!
Forum Index > Other > Other Art > Chicken's F2U Templates! >
Fancy Title Woah
- Info
- Examples
- Code
- Changelog
Howdy!
This is another tabbed Forum template because I can't help myself, I love this color combo/aesthetic too much 😩 It can support any number of tabs and any length of title. There is also a tabless version available. Hover over the flower 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 elsewhere!
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
- tab 2
- tab 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's the code!
Tabbed Code
[style]
//Do not change anything besides the Title, Tabs, and Tab Contents without my (Gumshoe's) permission!
//This is a Forum Template, do not use it elsewhere!
[/style][
][sc=the][sc=title]Title[/sc][sc=textbox][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 by [url=https://pokefarm.com/forum/thread/322214/Chicken-s-F2U-Templates]Gumshoe[/url]
[url=https://www.rawpixel.com/image/2405332/free-illustration-png-black-and-gold-pattern-peony]Background[/url] edited by Gumshoe[/pit][/sc][/sc][/sc][
][style]
//You are not allowed to change any of the code below without my (Gumshoe's) permission!
//----------------------------------------------------------//
@shadow: 5px;
@text:white;
@bg:black;
@bg2:#2e0a1a;
@bg3:#210813;
@link:#c7a260;
@linkhl:#fed081;
@bord:#9e804b;
@bordim:#78613b;
.the {
background-image:url("https://i.imgur.com/RGdNxE8.png");
background-color:@bg;
padding:10px;
padding-bottom:37px;
div.tooltip_content {
background: @bg;
color: @text;
a {color:@link; transition:.3s;}
a:hover {color:@linkhl; transition:.3s;}
border: solid 1px @bord;
font-size:11pt;
border-radius:0px;
}
.bbcode_tooltip {
border-bottom: 1px dotted @link;
}
}
.title {
font-size:25pt;
color:white;
text-align:right;
cursor:default;
font-family: 'Lobster';
text-shadow: 2px 0 1px black, -2px 0 1px black, 0 2px 1px black, 0 -2px 1px black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black;
float:right;
clear:left;
margin-right:3px;
position:relative;
z-index:9;
}
.textbox {
font-family: 'Bitter';
font-size:11pt;
background:none;
border:none;
.tabbed_interface>ul li {
text-align: center;
padding:3px;
margin: 4px 4px;
color:@link;
background:@bg3;
border: 1px solid @bordim;
cursor:default;
}
.tabbed_interface>ul>li.tab-active {
border-color:@bord;
color:@linkhl;
background:@bg2;
}
.tabbed_interface>ul {
background:none;
display:inline-flex;
flex-direction: row;
margin-left:-2px;
}
.tabbed_interface>div {
box-shadow:none;
color:@text;
background:rgba(0,0,0,.6);
border-radius:0px;
padding:8px;
border: 4px double @bord;
margin-top:3px;
a {color:@link; transition:.3s;}
a:hover {color:@linkhl;transition:.3s;}
.tabbed_interface>ul li {
cursor:default;
padding:1px 5px;
background:@bg3;
border:1px solid @bord;
margin:3px 3px;
min-width:50px;
}
.tabbed_interface>ul>li.tab-active {
background:@bg2;
color:@linkhl;
}
.tabbed_interface>ul {
background:none;
display:flex-inline;
flex-direction: inherit;
margin: 0px -3px;
}
.tabbed_interface>div {
margin-top:3px;
color:@text;
background:@bg;
box-shadow:none;
border:1px solid @bord;
padding:4px;
}
.panel {
background: @bg;
border-radius:0px;
border: solid 1px @bord;
color: @text;
box-shadow:none;
> h3 {
> a {color: @link;}
border: solid 1px @bord;
border-radius:0px;
background: @bg2;
color: @link;
text-align:left;
cursor:default;
}
> div {
color: @text;
a {color: @link;}
}
}
.expbar {
background: @bg2;
color: @text;
border: solid 1px @bord;
cursor:default;
border-radius:0px;
> div {
background: @bg;
border-right: solid 1px @bordim;
}
}
table {
border: solid 2px @bord;
}
table th {
border: solid 1px @bordim;
color: @link;
background: @bg2;
}
table td {
border: solid 1px @bordim;
background: @bg;
color: @text;
}
.party > div {
background: @bg;
border-radius:0px;
color: @text;
border: 1px solid @bord;
box-shadow: none;
.action a[data-berry]:after {border: 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: none;
border:1px solid @link;
display:block;
position:absolute;
right:40px;
padding:0px 40px;
border-radius:0px;
}
hr {border: 1px solid @bord;}
}
}
.mq15 & .textbox {
.party > div {
width:86%;
margin-left: 0px;
.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']
{right:21px;}
}
.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 {
font-size:15pt;
margin-top:5px;
color:@link;
background:black;
position:absolute;
right:15px;
border-radius:0px;
border:1px solid @bord;
padding:1px 2px;
div.tooltip_content {
position:absolute;
bottom:-1px;
right:28px;
width:198px;
font-size:10pt;
text-align:right;
}
.bbcode_tooltip {border-bottom: none;}
}
/* latin */
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/bitter/v25/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8fbfOLjOXQ.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: 'Lobster';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lobster/v27/neILzCirqoswsqX9zoKmMw.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]
Tabless Code
[style]
//Do not change anything besides the Title and Text without my (Gumshoe's) permission!
//This is a Forum Template, do not use it elsewhere!
[/style][
][sc=the][sc=title]Title[/sc][
][sc=textbox]text[/sc][
][sc=credit][pit=❁]F2U code by [url=https://pokefarm.com/forum/thread/322214/Chicken-s-F2U-Templates]Gumshoe[/url]
[url=https://www.rawpixel.com/image/2405332/free-illustration-png-black-and-gold-pattern-peony]Background[/url] edited by Gumshoe[/pit][/sc][/sc][
][style]
//You are not allowed to change any of the code below without my (Gumshoe's) permission!
//----------------------------------------------------------//
@shadow: 5px;
@text:white;
@bg:black;
@bg2:#2e0a1a;
@bg3:#210813;
@link:#c7a260;
@linkhl:#fed081;
@bord:#9e804b;
@bordim:#78613b;
.the {
background-image:url("https://i.imgur.com/RGdNxE8.png");
background-color:@bg;
padding:10px;
padding-bottom:37px;
font-family: 'Bitter';
font-size:11pt;
div.tooltip_content {
background: @bg;
color: @text;
a {color:@link; transition:.3s;}
a:hover {color:@linkhl; transition:.3s;}
border: solid 1px @bord;
font-size:11pt;
border-radius:0px;
}
.bbcode_tooltip {
border-bottom: 1px dotted @link;
}
}
.title {
font-size:25pt;
color:white;
text-align:right;
cursor:default;
font-family: 'Lobster';
text-shadow: 2px 0 1px black, -2px 0 1px black, 0 2px 1px black, 0 -2px 1px black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black;
float:right;
clear:left;
margin-right:3px;
position:relative;
z-index:9;
}
.textbox {
box-shadow:none;
color:@text;
background:rgba(0,0,0,.6);
border-radius:0px;
padding:8px;
border: 4px double @bord;
margin-top:36px;
a {color:@link; transition:.3s;}
a:hover {color:@linkhl;transition:.3s;}
.tabbed_interface>ul li {
text-align: center;
padding:3px;
margin: 4px 4px;
color:@link;
background:@bg3;
border: 1px solid @bordim;
cursor:default;
}
.tabbed_interface>ul>li.tab-active {
border-color:@bord;
color:@linkhl;
background:@bg2;
}
.tabbed_interface>ul {
background:none;
display:inline-flex;
flex-direction: row;
margin-left:-2px;
}
.tabbed_interface>div {
box-shadow:none;
color:@text;
background:rgba(0,0,0,.6);
border-radius:0px;
padding:8px;
border: 4px double @bord;
margin-top:3px;
a {color:@link; transition:.3s;}
a:hover {color:@linkhl;transition:.3s;} }
.tabbed_interface>ul li {
cursor:default;
padding:1px 5px;
background:@bg3;
border:1px solid @bord;
margin:3px 3px;
min-width:50px;
}
.tabbed_interface>ul>li.tab-active {
background:@bg2;
color:@linkhl;
}
.tabbed_interface>ul {
background:none;
display:flex-inline;
flex-direction: inherit;
margin: 0px -3px;
}
.tabbed_interface>div {
margin-top:3px;
color:@text;
background:@bg;
box-shadow:none;
border:1px solid @bord;
padding:4px;
}
.panel {
background: @bg;
border-radius:0px;
border: solid 1px @bord;
color: @text;
box-shadow:none;
> h3 {
> a {color: @link;}
border: solid 1px @bord;
border-radius:0px;
background: @bg2;
color: @link;
text-align:left;
cursor:default;
}
> div {
color: @text;
a {color: @link;}
}
}
.expbar {
background: @bg2;
color: @text;
border: solid 1px @bord;
cursor:default;
border-radius:0px;
> div {
background: @bg;
border-right: solid 1px @bordim;
}
}
table {
border: solid 2px @bord;
}
table th {
border: solid 1px @bordim;
color: @link;
background: @bg2;
}
table td {
border: solid 1px @bordim;
background: @bg;
color: @text;
}
.party > div {
background: @bg;
border-radius:0px;
color: @text;
border: 1px solid @bord;
box-shadow: none;
.action a[data-berry]:after {border: 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: none;
border:1px solid @link;
display:block;
position:absolute;
right:40px;
padding:0px 40px;
border-radius:0px;
}
hr {border: 1px solid @bord;}
}
.mq15 & .textbox {
.party > div {
width:86%;
margin-left: 0px;
.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']
{right:21px;}
}
.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 {
font-size:15pt;
margin-top:5px;
color:@link;
background:black;
position:absolute;
right:15px;
border-radius:0px;
border:1px solid @bord;
padding:1px 2px;
div.tooltip_content {
position:absolute;
bottom:-1px;
right:28px;
width:198px;
font-size:10pt;
text-align:right;
}
.bbcode_tooltip {border-bottom: none;}
}
/* latin */
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/bitter/v25/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8fbfOLjOXQ.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: 'Lobster';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lobster/v27/neILzCirqoswsqX9zoKmMw.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]
6/17/2022 - Fixed an issue regarding background colors on some official site skins.
❁
F2U code by Gumshoe
Background edited by Gumshoe