Mossy F2U Templates
Forum Index > Other > Other Art >
Since people seem to like some of my codes, I've decided to release them for use, I'll be making this fancier another time, but this'll do for now!
Q: Can I make changes to a Template? A: 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! If you're still unsure and worry it's too many changes, please PM me the finished template so I can approve it ^^' Q: Will you be making post/shop templates? A: Don't hold me onto this but I hope to make post templates some time in a bit distant future, my interests and motivation fly all over the place, but I'd like to make at least a couple of post templates eventually! Though they may be on a bit simpler side, as in, I won't be doing any graphics, art or stuff like that, just finding image to use as a header and inspiration to work off~ I'm open to other questions if there are any, but unfortunately I cannot offer help with broken codes because I overthink my replies and posts too much and I lose a lot of time like that x<
Rules
◊ Please don't send me PMs asking for help about codes if you break something, I unfortunately don't have time to help you! Do let me know if there's issues with my code though so I can fix them. ◊ Do try finding a solution in this extensive Guide to CSS, I'm sure you'll be able to figure it out! ◊ I don't take requests, my work and motivation are too sporadic and I take too long to work on things to promise on something, I get excited about things and burn out fast, so I'd rather not promise on things and then not deliver. ◊ You're allowed to change around colors and images of templates, but please don't forget about Legibility guidelines and credit images you use! ◊ Don't remove my credits or claim templates as your own or try selling them for profit.Q: Can I make changes to a Template? A: 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! If you're still unsure and worry it's too many changes, please PM me the finished template so I can approve it ^^' Q: Will you be making post/shop templates? A: Don't hold me onto this but I hope to make post templates some time in a bit distant future, my interests and motivation fly all over the place, but I'd like to make at least a couple of post templates eventually! Though they may be on a bit simpler side, as in, I won't be doing any graphics, art or stuff like that, just finding image to use as a header and inspiration to work off~ I'm open to other questions if there are any, but unfortunately I cannot offer help with broken codes because I overthink my replies and posts too much and I lose a lot of time like that x<
❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆ | About Me Templates | ||
|---|---|---|
 |
 |
 |
| Forum Templates | ||
|---|---|---|
 |
||
Reserved 2
- 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
- Home
- Examples
- ❀
- Code
- Tab 5
- Tab 6
- Tab 7
- Tab 8
17.12.2022. edit: Added Mirzam's Pkmnpanel code.
New day, old template!
I'm going through old templates and seeing what else could possibly be salvaged that looks interesting.
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 |
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Bitter food
47%Gentle 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!
[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:310px;
border-radius:3px;
font-family:'Chakra Petch';
color:@txt;
font-size:12pt;}
.headerimg { background:url("https://media.discordapp.net/attachments/853290632944418816/1038507648645083216/image.png");
background-size:310px;
height:150px;
border-radius:3px;
-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://archives.bulbagarden.net/media/upload/4/46/MDP_E_235.png");
background-size: 73px;
width:73px;
height:73px;
border-radius:3px;
border:1px solid @border;
margin:6px 5px 0px 230px; }
// 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;
height:20px;
width:20px;
margin:6px 5px 0px 230px;
border:1px solid @border;
border-radius:3px;
font-family:'Chakra Petch';
color:@txt;
font-size:12pt;
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:205px;
min-height:203px;
margin:-218px 0 0 5px;
padding:5px 2px 5px 2px;
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; }
.credit { text-align:right; padding-top:5px;
.tooltip_content { bottom:-1px; }
}
/* 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: @bg2;
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]
Tab 4 text
Tab 6 text
Tab 7 text
Tab 8 text
◊
woah that's so cool! I will use the typhlosion one~
”A knight’s duty goes beyond a sword."
-Kaeya Alberich
0 / 500, 15zc/ea
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:
Sour food
MAXBold nature
credits
credits
- Code @RAINB0W
- Pkmnpanel by @Mirzam & modified slightly by @RAINB0W
- Background by @peakpx.com
- Sprite of Silkï made by Indeedee
- 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
◊
I might use that one for my journal! ^^ I've also used the Typhlosion one for my about me
Shiver+ Starlight! | They/She/He+ Neopronouns, feel free to ask! | 19August 7th
Hisuian Zorua/Sprigatito enthusiast!
× 7 / 500 
💖credits
Type Race Score; credits
360
On the typhlosion template, are we allowed to change the tab names? Like instead of "tab 2" it's "hunts" and things like that?
sig got removed, ill update when i have motivation
pfp is jirachi plush
Of course, it'd be silly not to be allowed change tab names on a template like that, you can see in other templates their tab names are different so it's not forbidden, just make sure to keep them short as tabs don't expand.
Cannot post: Please log in to post