Single post in Mossy F2U Templates
Forum Index > Other > Other Art > Mossy F2U Templates >
- 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
◊
❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆ ❆