Single post in Mossy F2U Templates
Forum Index > Other > Other Art > Mossy F2U Templates >
Thank you all for kind words, I won't be replying to every single post here so I don't spam, but know that I appreciate them, they make my day and encourage me to eventually release more ;A; <3
It really makes me happy seeing people use them and modify to their likings! I'll be adding Mirzam's Pkmnpanel codes in previous templates as they look the best, I've tried making them myself but they were a mess xD
I hope for next release to make a post template! I have no idea what to make, but I'll see if I find any inspirations for it, it won't come out so fast as holidays are coming up and got other things to deal, so yeah! ^^
Anyways, Happy Holidays to everybody, hope y'all have a good one! ❄
name
info
info
info
info
- Home
- Examples
- Codes
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
Avatar on right
Avatar on left
[sc=template][sc=header][/sc][sc=avatar][/sc][sc=ribbon]name
info
info
info
info
[/sc][sc=horizontal tabbed_interface][
][ul][li]Tab 1[/li]
[li]Tab 2[/li]
[li]Tab 3[/li][/ul][
][sc=tab-active]Tab 1 text
[/sc][
][sc=tab]Tab 2 text
[/sc][
][sc=tab]Tab 3 text
[/sc][/sc][sc=credit][tip="[url=https://unsplash.com/photos/SH4GNXNj1RA]Header Credit[/url]
Piplup image - official art; [url=https://r00.tumblr.com/post/180676279978/christmas-piplup-icons]edit credit[/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: #0d1d33;
@bg-bar:#374a63;
@bg-tables:#292b36;
@bg-ribbon: #374a63;
@txt: #e3e3ff;
@title:#b1c0e3;
@border: #afafaf;
@link: #b3e3f4;
@link-hover: #d6fffb;
/* latin-ext */
@font-face {
font-family: 'Varela Round';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/varelaround/v19/w8gdH283Tvk__Lua32TysjIfqcuPP9g.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: 'Varela Round';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/varelaround/v19/w8gdH283Tvk__Lua32TysjIfp8uP.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 {width:302px;
font-size:10pt;
border-radius:3px;
padding:3px;
background:@bg;
color:@txt;
font-size:10pt;
font-family:'Varela Round';
}
.header {position:absolute;
background-image:url("https://media.discordapp.net/attachments/853290632944418816/1052935387204571167/photo-1511131341194-24e2eeeebb09.jpg");
height:100px;
width:299px;
background-size: 300px;
border-radius:10px 50px 50px 10px;
border:1px solid @border;
}
.avatar {position:absolute;
background-image:url("https://64.media.tumblr.com/3f1dd0d6f3d00de41d1169b3b850c6da/tumblr_pj1ox5KW991xzv69ro2_250.png");
background-size:100%;
width:100px;
height:100px;
border-radius:50px;border:1px solid @border;
margin:0px 0 0 200px;
}
.ribbon { width:95px;
height:100%;
background:@bg-ribbon;
border-radius:5px 50px 5px 5px;
border:1px solid @border;
padding:110px 3px 4px 0;
float:right;
color:@txt;
font-size:10pt;
text-align:right;
font-family:'Varela Round';
}
.tabbed_interface{ margin:102px 0 0 0;
>ul { background:none;
>li { background:none;
border:none;
cursor:pointer;
color:@title;
font-size:10pt;
text-align:center;
text-transform:uppercase;
font-family:'Varela Round';
margin:10px 0 10px 0;
}
li:hover { text-shadow: 0 0 10px @glow;
-webkit-transition: all 0.5s ease-in-out;}
>li {
&.tab-active { box-shadow:none;
color:@txt;
text-shadow: 0 0 10px @glow;}}}
>div{ box-shadow:none;
width:200px;
padding:2px;
background:none;
border:none;
color:@txt;
text-align:center;
font-family:'Varela Round';
font-size:10pt;
} }
.tooltip_content { background:@bg;
padding:6px;
border-radius:4px;
border:1px solid @border;
font-family:'Varela Round';
font-size:11pt;
color:@txt;
text-align:center;
}
.bbcode_tooltip { border-bottom: 1px dotted black; }
table { background:none;
margin:0px auto;
border:0px; }
th { padding:5px;
background:@bg-tables;
border:1px solid @border;
font-size:11pt;
color:@title;
text-align:center; }
td { padding:5px;
background:@bg-bar;
border:1px solid @border;
color:@txt;
text-align:justify; }
.panel { box-shadow:none;
background:@bg;
color:@txt;
border:1px solid @border;
border-radius:8px;
> h3 { background:@bg-bar;
border:none;
color:@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: @title;
letter-spacing: 1px;
> div { background: @bg-bar; }
}
a { color:@link;
-webkit-transition: all 0.5s ease-in-out;}
a:hover { color:@link-hover;
-webkit-transition: all 0.5s ease-in-out; }
/* Display code by Mirzam */
/* Set to "block" to show, "none" to hide */
@display-item: block;
@display-berries: block;
.party {
display: inline-block;
&,>div {
padding: 0;
margin: 0;
background: transparent;
width: 120px !important;
height: 120px;
overflow: hidden;
border: none;
border-radius: 0;
box-shadow: none;
}
>div {
&::after {
display: none;
}
.pkmn {
margin: 0 10px;
float: unset;
&::before {
background-color: @bg;
border-color: @txt;
}
.helditem {
display: @display-item;
.itemsprite {
cursor: unset;
}
.tooltip_content {
display: none;
}
}
}
.name {
background-color: @bg;
border: 1px solid @border;
border-radius: 5px;
margin-top: 1px;
height: 16px;
display: flex;
flex-wrap: nowrap;
a {
color: @link;
font-weight: normal;
margin: 0 2px;
width: 80px !important;
flex-grow: 99;
font-size: 12px;
}
img {
display: none;
}
img:nth-last-of-type(-n+2) {
display: inline;
margin: 0;
}
}
.action {
display: @display-berries;
position: absolute;
left: 88px;
top: 70px;
height: unset;
width: unset;
.berrybuttons[data-up="any"]>a[data-berry="aspear"],
.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"] {
display: inline-block;
}
.berrybuttons {
>a {
display: none;
width: 20px;
height: 20px;
line-height: 20px;
padding: 5px;
background-color: @bg-bar;
border-radius: 20px;
>img {
vertical-align: top;
max-height: 20px;
max-width: 20px;
}
}
>a[data-berry="pecha"] img {
/* this berry is short */
margin-top: 1px;
}
}
&.working {
opacity: 0.5;
}
table {
/* "thank you" message */
display: none;
}
}
.expbar, .taste, .extra {
display: none;
}
}
>div:hover>.action a[data-berry]:after {
border-color: @txt;
}
}
.credit { text-align:right; padding-top:5px;
.tooltip_content { bottom:-1px; }
}
[/style]
Avatar on left
[sc=template][sc=ribbon]name
info
info
info
info
[/sc][sc=header][/sc][sc=avatar][/sc][sc=horizontal tabbed_interface][
][ul][li]Tab 1[/li]
[li]Tab 2[/li]
[li]Tab 3[/li][/ul][
][sc=tab-active]Tab 1 text
[/sc][
][sc=tab]Tab 2 text
[/sc][
][sc=tab]Tab 3 text
[/sc][/sc][sc=credit][tip="[url=https://unsplash.com/photos/SH4GNXNj1RA]Header Credit[/url]
Piplup image - official art; [url=https://r00.tumblr.com/post/180676279978/christmas-piplup-icons]edit credit[/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: #0d1d33;
@bg-bar:#374a63;
@bg-tables:#292b36;
@bg-ribbon: #374a63;
@txt: #e3e3ff;
@title:#b1c0e3;
@border: #afafaf;
@link: #b3e3f4;
@link-hover: #d6fffb;
/* latin-ext */
@font-face {
font-family: 'Varela Round';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/varelaround/v19/w8gdH283Tvk__Lua32TysjIfqcuPP9g.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: 'Varela Round';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/varelaround/v19/w8gdH283Tvk__Lua32TysjIfp8uP.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 {width:304px;
font-size:10pt;
border-radius:3px;
padding:3px;
background:@bg;
color:@txt;
font-size:10pt;
font-family:'Varela Round';
}
.header {position:absolute;
background-image:url("https://media.discordapp.net/attachments/853290632944418816/1052935387204571167/photo-1511131341194-24e2eeeebb09.jpg");
height:100px;
width:302px;
background-size: 310px;
border-radius:50px 10px 10px 50px;
border:1px solid @border;
}
.avatar {position:absolute;
background-image:url("https://64.media.tumblr.com/3f1dd0d6f3d00de41d1169b3b850c6da/tumblr_pj1ox5KW991xzv69ro2_250.png");
background-size:100%;
width:100px;
height:100px;
border-radius:50px;border:1px solid @border;
}
.ribbon { position:absolute;
width:95px;
height:max;
background:@bg-ribbon;
border-radius:50px 50px 5px 5px;
border:1px solid @border;
padding:110px 0 4px 3px;
float:right;
color:@txt;
font-size:10pt;
text-align:left;
font-family:'Varela Round';
}
.tabbed_interface{ margin:102px 0 0 102px;
>ul { background:none;
>li { background:none;
border:none;
cursor:pointer;
color:@title;
font-size:10pt;
text-align:center;
text-transform:uppercase;
font-family:'Varela Round';
margin:10px 0 10px 0;
}
li:hover { text-shadow: 0 0 10px @glow;
-webkit-transition: all 0.5s ease-in-out;}
>li {
&.tab-active { box-shadow:none;
color:@txt;
text-shadow: 0 0 10px @glow;}}}
>div{ box-shadow:none;
width:202px;
min-height:32px;
padding:2px;
background:none;
border:none;
color:@txt;
text-align:center;
font-family:'Varela Round';
font-size:10pt;
} }
.tooltip_content { background:@bg;
padding:6px;
border-radius:4px;
border:1px solid @border;
font-family:'Varela Round';
font-size:11pt;
color:@txt;
text-align:center;
}
.bbcode_tooltip { border-bottom: 1px dotted black; }
table { background:none;
margin:0px auto;
border:0px; }
th { padding:5px;
background:@bg-tables;
border:1px solid @border;
font-size:11pt;
color:@title;
text-align:center; }
td { padding:5px;
background:@bg-bar;
border:1px solid @border;
color:@txt;
text-align:justify; }
.panel { box-shadow:none;
background:@bg;
color:@txt;
border:1px solid @border;
border-radius:8px;
> h3 { background:@bg-bar;
border:none;
color:@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: @title;
letter-spacing: 1px;
> div { background: @bg-bar; }
}
a { color:@link;
-webkit-transition: all 0.5s ease-in-out;}
a:hover { color:@link-hover;
-webkit-transition: all 0.5s ease-in-out; }
/* Display code by Mirzam */
/* Set to "block" to show, "none" to hide */
@display-item: block;
@display-berries: block;
.party {
display: inline-block;
&,>div {
padding: 0;
margin: 0;
background: transparent;
width: 120px !important;
height: 120px;
overflow: hidden;
border: none;
border-radius: 0;
box-shadow: none;
}
>div {
&::after {
display: none;
}
.pkmn {
margin: 0 10px;
float: unset;
&::before {
background-color: @bg;
border-color: @txt;
}
.helditem {
display: @display-item;
.itemsprite {
cursor: unset;
}
.tooltip_content {
display: none;
}
}
}
.name {
background-color: @bg;
border: 1px solid @border;
border-radius: 5px;
margin-top: 1px;
height: 16px;
display: flex;
flex-wrap: nowrap;
a {
color: @link;
font-weight: normal;
margin: 0 2px;
width: 80px !important;
flex-grow: 99;
font-size: 12px;
}
img {
display: none;
}
img:nth-last-of-type(-n+2) {
display: inline;
margin: 0;
}
}
.action {
display: @display-berries;
position: absolute;
left: 88px;
top: 70px;
height: unset;
width: unset;
.berrybuttons[data-up="any"]>a[data-berry="aspear"],
.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"] {
display: inline-block;
}
.berrybuttons {
>a {
display: none;
width: 20px;
height: 20px;
line-height: 20px;
padding: 5px;
background-color: @bg-bar;
border-radius: 20px;
>img {
vertical-align: top;
max-height: 20px;
max-width: 20px;
}
}
>a[data-berry="pecha"] img {
/* this berry is short */
margin-top: 1px;
}
}
&.working {
opacity: 0.5;
}
table {
/* "thank you" message */
display: none;
}
}
.expbar, .taste, .extra {
display: none;
}
}
>div:hover>.action a[data-berry]:after {
border-color: @txt;
}
}
.credit { text-align:right; padding-top:5px;
.tooltip_content { bottom:-1px; }
}
[/style]
❄
❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆