Mossy F2U Templates
Forum Index > Other > Other Art >
very beautiful templates, using the post one in my journal with edited images and colors (: thank you for sharing!
x0
Nanab Berry
Berry
(
: 0)
Bitter, but with a trace of sweetness, the Nanab Berry was the seventh to be discovered in the world.
Flavour: Bitter
Colour: Pink
Firmness: Very Hard
Growth time: 8 hours
Sells for 
20
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sweet food
27%Timid nature
hello! I’ve been using the typhlosion one for a month[with edited colours and background] and it’s worked beautifully! thank you for making these and happy holidays~ ^^
Using your template for my about me :3
Thank you for providing these ❤️
Ashe | She/Her | 32
Selling everything in my visible fields :3
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]
❄
❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆ 
EDIT I figured it out lol. I'm a lil dumb /joke
epic! using the typhlosion one }:)
avatar drawn by me <3
the sun will shine on us again. -loki laufeyson
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sweet food
MAXTimid nature
edit: nvm im so sorry
sig got removed, ill update when i have motivation
pfp is jirachi plush
Oh no you're correct, it is very off, I forgot to check the code in an actual About me so it's weirdly cut off, I'll edit this post when I fix the code.
Edit: Ok I've fixed it now! Should look normal now if you copy and paste the updated code (and ofc adjust the colors and pics you used to have)
Hey I'm currently using the one forum template without tabs in my journal! I love it o:
I had a question with the tabbed one as I would love to use it for my shop as well, am I allowed to remove tabs if there's one too many?
Type Race Points: 0 credit
Background from Rune Factory Series
F2U code by Gumshoe
Yee ofc, I put 8 tabs just to show off how they'd look but you're welcome to remove or add as many tabs as you'd like!
Cannot post: Please log in to post