❝ By Mirzam ❞
https://pokefarm.com/forum/post/6000778
✧ Three panels in a row ✧
CODE
[pkmnpanel=3mc8] [pkmnpanel=Jg30] [pkmnpanel=kv3l9]
[style]
/* These default to the VIEWER's skin colors */
/* To customize them, just set hex color codes instead */
@platform-base: @col-bg1;
@platform-border: @col-border1;
@name-color: @col-fg1;
@name-background: @col-bg3;
@name-border: @col-border3;
@berry-background: @col-flavour-up;
@berry-border: @col-fg1;
/* 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: @platform-base;
border-color: @platform-border;
}
.helditem {
display: @display-item;
.itemsprite {
cursor: unset;
}
.tooltip_content {
display: none;
}
}
}
.name {
background-color: @name-background;
border: 1px solid @name-border;
border-radius: 5px;
margin-top: 1px;
height: 16px;
display: flex;
flex-wrap: nowrap;
a {
color: @name-color;
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: @berry-background;
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: @berry-border;
}
}
[/style]
Shorter code for signature
[sc=platform-party][pkmnpanel=3mc8][/sc] [sc=platform-party][pkmnpanel=Jg30][/sc] [sc=platform-party][pkmnpanel=kv3l9][/sc]
[style]
/* These default to the VIEWER's skin colors */
/* To customize them, just set hex color codes instead */
@pparty-platform-base: @col-bg1;
@pparty-platform-border: @col-border1;
@pparty-name-color: @col-fg1;
@pparty-name-background: @col-bg3;
@pparty-name-border: @col-border3;
@pparty-berry-background: @col-flavour-up;
@pparty-berry-border: @col-fg1;
/* Set to "block" to show, "none" to hide */
@pparty-display-item: block;
@pparty-display-berries: block;
@import "skins/user/b/7/q/sharedcss/__extra";
[/style]
⭑⭒⭑⭒⭑⭒⭑⭒⭑⭒⭑⭒⭑⭒⭑⭒⭑⭒⭑⭒⭑⭒⭑⭒⭑⭒
❝ By Winterbraid ❞
https://github.com/Winterbraid/pokefarm-custom-css#aboutme-pokepanel-templatecss
✧ Three panels in a row ✧
➺ ‟ 𝓒𝓒𝓢 I use for my About section.
Turns default interactive pokepanels ([pkmnpanel=XXXXX]) into compact buttons (fits 3 per line).
Wrap everything in [center] tags for tigher vertical spacing, use unordered lists for text. ”
Style part for About Me Section
[style]
* {
color: #040;
}
a {
color: #00c;
}
a:visited {
color: #808;
}
a:active {
color: #c00;
}
.center {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
ul {
width: 300px;
margin: 1px;
padding: 8px 0;
background-color: #e2ffcd;
border: 2px solid #9ec690;
border-radius: 8px;
font-size: 10pt;
text-align: center;
}
li {
padding: 0;
margin: 0;
}
li::before, li::after {
content: '⭐';
}
li::marker {
content: none;
}
.party,
.party div,
.party img,
.party a {
margin: 0;
padding: 0;
box-shadow: none;
background-color: transparent;
border-style: none;
border-width: 2px;
border-color: #9ec690;
}
.party {
margin: 1px;
display: inline-block;
}
.party,
.party > div {
width: 100px!important;
}
.party .pkmn::before,
.party .helditem,
.party .expbar,
.party .taste,
.party .tooltip_content,
.party .extra {
display: none;
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
}
.party .pokemon {
width: 96px;
height: 96px;
background-color: #d2e8af;
background-position: center center;
border-radius: 50%;
border-style: solid;
}
.party .name {
width: 90px;
height: 18px;
position: absolute;
bottom: 0;
left: 0;
background-color: #e2ffcd;
border-style: solid;
border-radius: 8px;
padding: 0 3px;
}
.party .name:hover {
border-color: #004000;
}
.party .name img {
position: relative;
bottom: 1px;
pointer-events: none;
}
.party .summarylink {
width: 58px!important;
color: #004000;
font-family: arial;
text-decoration: none;
font-size: 10pt;
font-weight: normal;
letter-spacing: 0;
}
.party .summarylink::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 22px;
margin: -2px;
}
.party .action {
width: 32px;
height: 32px;
position: absolute;
top: 0;
right: 0;
}
.party .berrybuttons > *,
.party .action > table {
display: none;
}
.party .berrybuttons[data-up='any'] > [data-berry='aspear'],
.party .berrybuttons[data-up='sour'] > [data-berry='aspear'],
.party .berrybuttons[data-up='spicy'] > [data-berry='cheri'],
.party .berrybuttons[data-up='dry'] > [data-berry='chesto'],
.party .berrybuttons[data-up='sweet'] > [data-berry='pecha'],
.party .berrybuttons[data-up='bitter'] > [data-berry='rawst'] {
display: block;
width: 32px;
height: 32px;
background-color: #e2ffcd;
border-radius: 50%;
border-style: solid;
}
.party .berrybuttons > a:hover {
border-color: #004000;
}
.party .action.working .berrybuttons > a {
background-color: #6c6;
}
.party .action.working .berrybuttons > a > img {
content: url('https://pfq-static.com/img/pkmn/heart_2.png')!important;
}
.party .berrybuttons > a::after {
content: none;
}
.party .berrybuttons > a > img {
display: block;
width: 24px;
height: 24px;
position: absolute;
top: 50%;
left: 50%;
margin: -12px;
}
[/style]
The above is only for the style section.
For proper full code, you might need to add something like:
[h3]About Me[/h3]
[ul][li]ABC[/li][/ul]
[pkmnpanel=Z2154][pkmnpanel=Z2154][pkmnpanel=Z2154]
[pkmnpanel=Z2154][pkmnpanel=Z2154][pkmnpanel=Z2154]
Actual CODE
[pkmnpanel=ZGMkS][pkmnpanel=Z-xSp][pkmnpanel=ZR-vw][pkmnpanel=ZGMkS][pkmnpanel=Z-xSp][pkmnpanel=ZR-vw]
[style]
.party,
.party div,
.party img,
.party a {
margin: 0;
padding: 0;
box-shadow: none;
background-color: transparent;
border-style: none;
border-width: 2px;
border-color: #9ec690;
}
.party {
margin: 1px;
display: inline-block;
}
.party,
.party > div {
width: 100px!important;
}
.party .pkmn::before,
.party .helditem,
.party .expbar,
.party .taste,
.party .tooltip_content,
.party .extra {
display: none;
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
}
.party .pokemon {
width: 96px;
height: 96px;
background-color: #d2e8af;
background-position: center center;
border-radius: 50%;
border-style: solid;
}
.party .name {
width: 90px;
height: 18px;
position: absolute;
bottom: 0;
left: 0;
background-color: #e2ffcd;
border-style: solid;
border-radius: 8px;
padding: 0 3px;
}
.party .name:hover {
border-color: #004000;
}
.party .name img {
position: relative;
bottom: 1px;
pointer-events: none;
}
.party .summarylink {
width: 58px!important;
color: #004000;
font-family: arial;
text-decoration: none;
font-size: 10pt;
font-weight: normal;
letter-spacing: 0;
}
.party .summarylink::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 22px;
margin: -2px;
}
.party .action {
width: 32px;
height: 32px;
position: absolute;
top: 0;
right: 0;
}
.party .berrybuttons > *,
.party .action > table {
display: none;
}
.party .berrybuttons[data-up='any'] > [data-berry='aspear'],
.party .berrybuttons[data-up='sour'] > [data-berry='aspear'],
.party .berrybuttons[data-up='spicy'] > [data-berry='cheri'],
.party .berrybuttons[data-up='dry'] > [data-berry='chesto'],
.party .berrybuttons[data-up='sweet'] > [data-berry='pecha'],
.party .berrybuttons[data-up='bitter'] > [data-berry='rawst'] {
display: block;
width: 32px;
height: 32px;
background-color: #e2ffcd;
border-radius: 50%;
border-style: solid;
}
.party .berrybuttons > a:hover {
border-color: #004000;
}
.party .action.working .berrybuttons > a {
background-color: #6c6;
}
.party .action.working .berrybuttons > a > img {
content: url('https://pfq-static.com/img/pkmn/heart_2.png')!important;
}
.party .berrybuttons > a::after {
content: none;
}
.party .berrybuttons > a > img {
display: block;
width: 24px;
height: 24px;
position: absolute;
top: 50%;
left: 50%;
margin: -12px;
}
[/style]