Single post in Mossy F2U Templates
Forum Index > Other > Other Art > Mossy F2U Templates >
- Home
- Examples
- Code (6)
- Code (8)
- Tab 5
- Tab 6
17.12.2022. edit: Added Mirzam's Pkmnpanel code.
Decided to release this About Me template since people have been asking about it, so here it is, ta-daaa!
Check Tab 2 for examples of how tables and boxes look in this template. This was strictly made as an About Me template and it shouldn't be used in forum posts or signatures.
You're allowed and encouraged to change around colors, images and other things, I just ask that the final result isn't completely incomparable to original template! ^^'
While doing so please don't forget about Legibility guidelines and credit images you use!
Feel free to use "◊" to add image credits if you don't use Journal for it, you can change it to another symbol or even item if you'd prefer, but don't delete my credits.
This is a link.
This is bolded text.
This is italicized text.
This underlined text.
This is what tip text looks like.
47%
This is a tip!
Display box
Text in display box
Hidebox
Text in hidden box
| Tab 1 | Tab 2 | Tab 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
| Cell 7 | Cell 8 | Cell 9 |
Snow Jewel
Forme-Change Item
(
: 0)
A delicate jewel that seems to be frozen.
Sells for 
325
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Any food
47%Quirky nature
Code for 6 tabs
[sc=template][sc=header][/sc][sc=avatar][/sc]
[sc=horizontal tabbed_interface][
][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]
Tab 1 text[/sc][
][sc=tab]
Tab 2 text
[/sc][
][sc=tab]
Tab 3 text
[/sc][
][sc=tab]
Tab 4 text
[/sc][
][sc=tab]
Tab 5 text
[/sc][
][sc=tab]
Tab 6 text
[/sc][/sc]
[sc=credit][tip="Header image from [url=https://unsplash.com/photos/6x8mBPAIBrk]Unsplash[/url]
Pokemon images are official artwork
Pkmnpanel code by [url=https://pokefarm.com/forum/thread/307452/Codes-and-things/post/6000778]Mirzam[/url]
Code by [url=https://pfq.link/~M0Hg]MossDragon[/url]"]◊ [/tip][/sc][/sc]
[style]
@bg: #211818;
@bg2: #522525;
@bg-table-header: #361818;
@txt: #b87a7a;
@txt-title: #c49292;
@border: #afafaf;
@links: #dbb25a;
@links-active: #e6bf6b;
@links-hover: #edce8a;
.header { position:absolute;
background-image:url("https://media.discordapp.net/attachments/853290632944418816/1033486714695585952/unknown.png");
border-radius:10px;
width:310px;
height:130px;
background-size: 310px;
-webkit-mask-image:-webkit-linear-gradient(270deg, (rgba(0,0,0,1)) 80%, (rgba(0,0,0,0)));
}
.avatar { position:absolute;
background-image:url("https://media.discordapp.net/attachments/853290632944418816/1033673124329308300/unknown.png");
background-size: 120px;
width:120px;
height:120px;
border-radius:70px;
border:2px solid @border;
margin:1px 0 0 180px;
}
@font-face {
font-family: 'Pangolin';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/pangolin/v11/cY9GfjGcW0FPpi-tWMfN79w.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;}
// Anything beyond this point shouldn't be touched unless you know what you're doing!!!
.template { width:310px;
background:@bg;
background-size: 310px;
border-radius:8px;
font-family:'Pangolin';
font-size:10pt;
color:@txt; }
.tabbed_interface { margin-top:-17px;
>ul { background:none;
width:175px;
>li { display:inline-block;
cursor:pointer;
margin:10px 4px 0 5px;
padding:5px 0 1px 1px;
width:75px;
height:22px;
background:@bg;
border:none;
border-radius:8px;
font-family:'Pangolin';
font-size:13pt;
color:@txt;
text-align:center;
letter-spacing:1px; }
li:hover { text-shadow: 0 0 10px #f2d287;
-webkit-transition: all 0.5s ease-in-out; }
>li { &.tab-active { box-shadow:none;
color:@links-active;
text-shadow: 0 0 10px #f2d287;border:none; }
}
}
>div { box-shadow:none;
min-height:100px;
margin-top:15px;
padding:4px;
width:302px;
background:@bg;
border:none;
border-radius:2px 2px 7px 7px;
font-family:'Pangolin';
font-size:12pt;
color:@txt;
text-align:center; }
}
a { color:@links;
-webkit-transition: all 0.5s ease-in-out; }
a:hover { color:@links-hover;
-webkit-transition: all 0.5s ease-in-out; }
.tooltip_content { background:@bg;
padding:6px;
border-radius:4px;
border:1px solid @border;
font-family:'Pangolin';
font-size:11pt;
color:@txt;
text-align:center; }
table { background:none;
margin:0px auto;
border:0px; }
th { padding:5px;
background:@bg-table-header;
border:1px solid @border;
font-size:11pt;
color:@txt-title;
text-align:center; }
td { padding:5px;
background:@bg2;
border:1px solid @border;
color:@txt-title;
text-align:justify; }
.panel { box-shadow:none;
background:@bg;
color:@txt;
border:1px solid @border;
border-radius:8px;
> h3 { background:@bg2;
border:none;
color:@txt-title;
border-radius:8px;
letter-spacing:1px;
> a { color:@links;
-webkit-transition: all 0.5s ease-in-out; }
> a:hover { color:@links-hover;
-webkit-transition: all 0.5s ease-in-out; }
}
> div { color:@txt;
}
}
.expbar { background: @bg;
border: solid 1px @border;
color: @txt-title;
letter-spacing: 1px;
> div { background: @bg2; }
}
.credit { text-align:right;
font-size:13pt;
.tooltip_content { bottom:-1px; }
}
/* Display code by Mirzam */
.party {
display: inline-block;
margin: 10px;
width: unset !important;
color: @txt;
a {
color: @link;
}
>div {
background: @bg;
border-color: @border;
box-shadow: none;
width: 250px;
margin: 0;
overflow: hidden;
&:hover>.action a[data-berry]:after {
border-color: @border;
color: @link;
}
>.pkmn:before {
background-color: @bg2;
border-color: @border;
}
>.name a {
margin-bottom: 5px;
max-width: 140px;
}
>.expbar {
width: 140px;
height: 25px;
margin-top: 2px;
background-color: @bg;
border-color: @border;
color: @txt;
>div {
border-color: @border;
background-color: @bg2;
}
}
>.extra {
>.happy {
display: none;
}
>.nature {
width: 165px;
margin-left: 5px;
}
}
>.action {
width: 140px;
height: 30px;
>.berrybuttons {
>a {
background-color: @bg2;
display: none;
width: 100%;
height: 30px;
padding: 3px;
box-sizing: border-box;
>img {
height: 25px;
vertical-align: top;
}
}
}
>.berrybuttons[data-up="any"]>a[data-berry="aspear"] {
display: inline-block;
border-radius: 20px;
}
>.berrybuttons[data-up="sour"]>a[data-berry="aspear"] {
display: inline-block;
}
>.berrybuttons[data-up="spicy"]>a[data-berry="cheri"] {
display: inline-block;
}
>.berrybuttons[data-up="dry"]>a[data-berry="chesto"] {
display: inline-block;
}
>.berrybuttons[data-up="sweet"]>a[data-berry="pecha"] {
display: inline-block;
}
>.berrybuttons[data-up="bitter"]>a[data-berry="rawst"] {
display: inline-block;
}
}
}
}
[/style]
Code for 8 tabs
[sc=template][sc=header][/sc][sc=avatar][/sc]
[sc=horizontal tabbed_interface][
][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]
[li]Tab 7[/li]
[li]Tab 8[/li][/ul][
][sc=tab-active]
Tab 1 text[/sc][
][sc=tab]
Tab 2 text
[/sc][
][sc=tab]
Tab 3 text
[/sc][
][sc=tab]
Tab 4 text
[/sc][
][sc=tab]
Tab 5 text
[/sc][
][sc=tab]
Tab 6 text
[/sc][
][sc=tab]
Tab 7 text
[/sc][
][sc=tab]
Tab 8 text
[/sc][/sc]
[sc=credit][tip="Header image from [url=https://unsplash.com/photos/6x8mBPAIBrk]Unsplash[/url]
Pokemon images are official artwork
Pkmnpanel code by [url=https://pokefarm.com/forum/thread/307452/Codes-and-things/post/6000778]Mirzam[/url]
Code by [url=https://pfq.link/~M0Hg]MossDragon[/url]"]◊ [/tip][/sc][/sc]
[style]
@bg: #211818;
@bg2: #522525;
@bg-table-header: #361818;
@txt: #b87a7a;
@txt-title: #c49292;
@border: #afafaf;
@links: #dbb25a;
@links-active: #e6bf6b;
@links-hover: #edce8a;
.header { position:absolute;
background-image:url("https://media.discordapp.net/attachments/853290632944418816/1033486714695585952/unknown.png");
border-radius:10px;
width:310px;
height:160px;
background-size: 310px;
-webkit-mask-image:-webkit-linear-gradient(270deg, (rgba(0,0,0,1)) 80%, (rgba(0,0,0,0)));
}
.avatar { position:absolute;
background-image:url("https://media.discordapp.net/attachments/853290632944418816/1033673124329308300/unknown.png");
background-size: 120px;
width:120px;
height:120px;
border-radius:70px;
border:2px solid @border;
margin:15px 0 0 180px;
}
@font-face {
font-family: 'Pangolin';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/pangolin/v11/cY9GfjGcW0FPpi-tWMfN79w.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;}
// Anything beyond this point shouldn't be touched unless you know what you're doing!!!
.template { width:310px;
background:@bg;
background-size: 310px;
border-radius:8px;
font-family:'Pangolin';
font-size:10pt;
color:@txt; }
.tabbed_interface { margin-top:-17px;
>ul { background:none;
width:175px;
>li { display:inline-block;
cursor:pointer;
margin:10px 4px 0 5px;
padding:5px 0 1px 1px;
width:75px;
height:22px;
background:@bg;
border:none;
border-radius:8px;
font-family:'Pangolin';
font-size:13pt;
color:@txt;
text-align:center;
letter-spacing:1px; }
li:hover { text-shadow: 0 0 10px #f2d287;
-webkit-transition: all 0.5s ease-in-out; }
>li { &.tab-active { box-shadow:none;
color:@links-active;
text-shadow: 0 0 10px #f2d287;border:none; }
}
}
>div { box-shadow:none;
min-height:100px;
margin-top:15px;
padding:4px;
width:302px;
background:@bg;
border:none;
border-radius:2px 2px 7px 7px;
font-family:'Pangolin';
font-size:12pt;
color:@txt;
text-align:center; }
}
a { color:@links;
-webkit-transition: all 0.5s ease-in-out; }
a:hover { color:@links-hover;
-webkit-transition: all 0.5s ease-in-out; }
.tooltip_content { background:@bg;
padding:6px;
border-radius:4px;
border:1px solid @border;
font-family:'Pangolin';
font-size:11pt;
color:@txt;
text-align:center; }
table { background:none;
margin:0px auto;
border:0px; }
th { padding:5px;
background:@bg-table-header;
border:1px solid @border;
font-size:11pt;
color:@txt-title;
text-align:center; }
td { padding:5px;
background:@bg2;
border:1px solid @border;
color:@txt-title;
text-align:justify; }
.panel { box-shadow:none;
background:@bg;
color:@txt;
border:1px solid @border;
border-radius:8px;
> h3 { background:@bg2;
border:none;
color:@txt-title;
border-radius:8px;
letter-spacing:1px;
> a { color:@links;
-webkit-transition: all 0.5s ease-in-out; }
> a:hover { color:@links-hover;
-webkit-transition: all 0.5s ease-in-out; }
}
> div { color:@txt;
}
}
.expbar { background: @bg;
border: solid 1px @border;
color: @txt-title;
letter-spacing: 1px;
> div { background: @bg2; }
}
.credit { text-align:right;
font-size:13pt;
.tooltip_content { bottom:-1px; }
}
/* Display code by Mirzam */
.party {
display: inline-block;
margin: 10px;
width: unset !important;
color: @txt;
a {
color: @link;
}
>div {
background: @bg;
border-color: @border;
box-shadow: none;
width: 250px;
margin: 0;
overflow: hidden;
&:hover>.action a[data-berry]:after {
border-color: @border;
color: @link;
}
>.pkmn:before {
background-color: @bg2;
border-color: @border;
}
>.name a {
margin-bottom: 5px;
max-width: 140px;
}
>.expbar {
width: 140px;
height: 25px;
margin-top: 2px;
background-color: @bg;
border-color: @border;
color: @txt;
>div {
border-color: @border;
background-color: @bg2;
}
}
>.extra {
>.happy {
display: none;
}
>.nature {
width: 165px;
margin-left: 5px;
}
}
>.action {
width: 140px;
height: 30px;
>.berrybuttons {
>a {
background-color: @bg2;
display: none;
width: 100%;
height: 30px;
padding: 3px;
box-sizing: border-box;
>img {
height: 25px;
vertical-align: top;
}
}
}
>.berrybuttons[data-up="any"]>a[data-berry="aspear"] {
display: inline-block;
border-radius: 20px;
}
>.berrybuttons[data-up="sour"]>a[data-berry="aspear"] {
display: inline-block;
}
>.berrybuttons[data-up="spicy"]>a[data-berry="cheri"] {
display: inline-block;
}
>.berrybuttons[data-up="dry"]>a[data-berry="chesto"] {
display: inline-block;
}
>.berrybuttons[data-up="sweet"]>a[data-berry="pecha"] {
display: inline-block;
}
>.berrybuttons[data-up="bitter"]>a[data-berry="rawst"] {
display: inline-block;
}
}
}
}
[/style]
Tab 5 text
Tab 6 text
◊
Header image from Unsplash
Pokemon images are official artwork
Pkmnpanel code by Mirzam
Code by MossDragon
❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆