Single post in Mossy F2U Templates
Forum Index > Other > Other Art > Mossy F2U Templates >
- Home
- Examples
- ❀
- No Tabs Code
- With Tabs Code
- Tab 6
- Tab 7
- Tab 8
17.12.2022. edit: Added Mirzam's Pkmnpanel code.
Ok, so I really liked the look of this Template that I decided to create it into one for posts. I've created a version with and without tabs, so copy the code you need! You can find the version you want up there in "No Tab Code" and "With Tabs Code" tabs.
I think this Template is ideal for Journals, but ofc you're free to use it elsewhere (just don't forget to respect people's wishes of not posting with templates in their threads)
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.
27%
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 |
Mow Sparkplug
Forme-Change Item
(
: 0)
A strange sparkplug that has absorbed Grass power.
Sells for 
425
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Bitter food
27%Calm nature
Just showing off that you can also use characters instead of text in case that's your preference, mix and match and all that jazz!
Code without Tabs
[sc=template][sc=headerimg][/sc][sc=textbox]Text goes here
More text woohoo much text
[/sc]
[sc=credit][tip="Header img from [url=https://kakuusei.tumblr.com/post/173161057027]Sailor Moon[/url]
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: #295f8f;
@bg2: #1f3270;
@bg-tab-header: #1f3270;
@tab-active:#8a5087;
@txt: #e8e8e8;
@glow: #e8e8e8;
@border: #e8e8e8;
@links: #f5df73;
@links-hover: #bfb893;
/* latin-ext */
@font-face {
font-family: 'Chakra Petch';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/chakrapetch/v9/cIf6MapbsEk7TDLdtEz1BwkWkapgeL4.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face {
font-family: 'Chakra Petch';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/chakrapetch/v9/cIf6MapbsEk7TDLdtEz1BwkWn6pg.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; }
.template { background:@bg2;
width:90%;
margin-left:5%;
border-radius:3px;
font-family:'Chakra Petch';
color:@txt;
font-size:12pt;
text-align:center;}
.headerimg { background:url("https://media.discordapp.net/attachments/853290632944418816/1038507648645083216/image.png");
background-size:100%;
height:220px;
border-radius:3px;
-webkit-mask-image:-webkit-linear-gradient(270deg, (rgba(0,0,0,1)) 80%, (rgba(0,0,0,0)));}
// Anything beyond this point shouldn't be touched unless you know what you're doing!!!
a { color:@links;
-webkit-transition: all 0.5s ease-in-out; }
a:hover { color:@links-hover;
-webkit-transition: all 0.5s ease-in-out; }
.tabbed_interface { margin: 0;
>ul { background:none;
>li { cursor:pointer;
box-shadow:none;
background:@bg2;
margin:1%;
padding:1%;
border:1px solid @border;
border-radius:3px;
font-family:'Chakra Petch';
color:@txt;
font-size:13pt;
text-align:center; }
>li:hover { box-shadow:0px 0px 2px 1px @glow;
background:@bg;
text-shadow: 0 0 3px @txt;
-webkit-transition:all 0.5s ease-in-out; }
>li { &.tab-active { box-shadow:0px 0px 1px 1px @glow;
background:@tab-active;
-webkit-transition:all 0.5s ease-in-out; }
} }
>div { box-shadow:0px 0px 6px 1px @glow;
background:@bg;
width:90%;
margin:3% 0 0 2%;
padding:2%;
border-radius:3px;
border:4px @border double;
font-family:'Chakra Petch';
color:@txt;
font-size:12pt;
text-align:center; }
}
.textbox { box-shadow:0px 0px 6px 1px @glow;
background:@bg;
width:90%;
margin:3% 0 0 2%;
padding:2%;
border-radius:3px;
border:4px @border double;
font-family:'Chakra Petch';
color:@txt;
font-size:10pt;
text-align:center; }
.panel { box-shadow:none;
background:@bg;
border:1px solid @bg2;
border-radius:3px;
> h3 { background:@bg-tab-header;
font-size:11pt;
color:@txt;
border-radius:3px;
letter-spacing:2px;
padding-left:5px;
border: solid 1px @txt;
> a { color:@txt; }
}
> div { color:@txt; }
}
table { background:none;
margin:0px auto;
border:0px; }
th { padding:5px;
background:@bg-tab-header;
border:1px solid @border;
font-size:11pt;
letter-spacing: 2px;
color:@txt;
text-align:center; }
td { padding:5px;
background:@bg;
border:1px solid @border;
color:@txt;
text-align:justify; }
.expbar { background: @bg;
border: solid 1px @border;
border-radius:3px;
color: @txt;
font-size:11pt;
letter-spacing: 2px;
> div { background: @bg2; }
}
.tooltip_content { background:@bg;
padding:6px;
border-radius:4px;
border:1px solid @border;
font-size:11pt;
color:@txt;
text-align:center; }
/* 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;
}
}
}
}
.credit { text-align:right; padding-top:5px;
.tooltip_content { bottom:-1px; }
}
[/style]
Code with Tabs
[sc=template][sc=headerimg][/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 img from [url=https://kakuusei.tumblr.com/post/173161057027]Sailor Moon[/url]
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: #295f8f;
@bg2: #1f3270;
@bg-tab-header: #1f3270;
@tab-active:#8a5087;
@txt: #e8e8e8;
@glow: #e8e8e8;
@border: #e8e8e8;
@links: #f5df73;
@links-hover: #bfb893;
/* latin-ext */
@font-face {
font-family: 'Chakra Petch';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/chakrapetch/v9/cIf6MapbsEk7TDLdtEz1BwkWkapgeL4.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face {
font-family: 'Chakra Petch';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/chakrapetch/v9/cIf6MapbsEk7TDLdtEz1BwkWn6pg.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; }
.template { background:@bg2;
width:90%;
margin-left:5%;
border-radius:3px;
font-family:'Chakra Petch';
color:@txt;
font-size:12pt;
text-align:center;}
.headerimg { background:url("https://media.discordapp.net/attachments/853290632944418816/1038507648645083216/image.png");
background-size:100%;
height:220px;
border-radius:3px;
-webkit-mask-image:-webkit-linear-gradient(270deg, (rgba(0,0,0,1)) 80%, (rgba(0,0,0,0)));}
// Anything beyond this point shouldn't be touched unless you know what you're doing!!!
a { color:@links;
-webkit-transition: all 0.5s ease-in-out; }
a:hover { color:@links-hover;
-webkit-transition: all 0.5s ease-in-out; }
.tabbed_interface { margin: 0;
>ul { background:none;
>li { cursor:pointer;
box-shadow:none;
background:@bg2;
margin:1%;
padding:1%;
border:1px solid @border;
border-radius:3px;
font-family:'Chakra Petch';
color:@txt;
font-size:13pt;
text-align:center; }
>li:hover { box-shadow:0px 0px 2px 1px @glow;
background:@bg;
text-shadow: 0 0 3px @txt;
-webkit-transition:all 0.5s ease-in-out; }
>li { &.tab-active { box-shadow:0px 0px 1px 1px @glow;
background:@tab-active;
-webkit-transition:all 0.5s ease-in-out; }
} }
>div { box-shadow:0px 0px 6px 1px @glow;
background:@bg;
width:90%;
margin:3% 0 0 2%;
padding:2%;
border-radius:3px;
border:4px @border double;
font-family:'Chakra Petch';
color:@txt;
font-size:12pt;
text-align:center; }
}
.textbox { box-shadow:0px 0px 6px 1px @glow;
background:@bg;
width:90%;
margin:3% 0 0 2%;
padding:2%;
border-radius:3px;
border:4px @border double;
font-family:'Chakra Petch';
color:@txt;
font-size:10pt;
text-align:center; }
.panel { box-shadow:none;
background:@bg;
border:1px solid @bg2;
border-radius:3px;
> h3 { background:@bg-tab-header;
font-size:11pt;
color:@txt;
border-radius:3px;
letter-spacing:2px;
padding-left:5px;
border: solid 1px @txt;
> a { color:@txt; }
}
> div { color:@txt; }
}
table { background:none;
margin:0px auto;
border:0px; }
th { padding:5px;
background:@bg-tab-header;
border:1px solid @border;
font-size:11pt;
letter-spacing: 2px;
color:@txt;
text-align:center; }
td { padding:5px;
background:@bg;
border:1px solid @border;
color:@txt;
text-align:justify; }
.expbar { background: @bg;
border: solid 1px @border;
border-radius:3px;
color: @txt;
font-size:11pt;
letter-spacing: 2px;
> div { background: @bg2; }
}
.tooltip_content { background:@bg;
padding:6px;
border-radius:4px;
border:1px solid @border;
font-size:11pt;
color:@txt;
text-align:center; }
/* 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;
}
}
}
}
.credit { text-align:right; padding-top:5px;
.tooltip_content { bottom:-1px; }
}
[/style]
Tab 6 text
Tab 7 text
Tab 8 text
◊
❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆