Single post in Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides > Site Skins: How-To, and Helpful CSS >
@Cele The PartyStack code should be what you're looking for:)
QUOTE originally posted by DrWho
recently i posted a centre field stack but lack of degradation control made it inadequate, so i reworked it + some more styles. i tested those by removing modern properties or making feature queries fail, then observing the changes.
as always, please feel free to contribute, comment on, use or share this in any way.
FieldStack
Effect: Centers Pokemon within fields. The hitbox can be extended and may be as large as the field. Achieves centring without blur.
code
#field_field[data-mode='public'] .fieldmon > img {
/*Increases the hitbox size, please check next block as well*/
padding: 3em;
}
#field_field[data-mode='public'] .fieldmon {
/*set these four values to the negative of your
padding, 0, 0 and the negative of your padding.*/
margin: -3em 0 0 -3em !important;
top: 45% !important;
left: 45% !important;
}
@supports (display: flex) {
#field_field[data-mode='public'] > div.field {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding-top: 0;
}
#field_field[data-mode='public'] > div.field:before {
/*moving the aspect ratio trick here*/
display: block;
content: "";
padding-top: 57.576%;
}
#field_field[data-mode='public'] .fieldmon {
margin: 0 !important;
left: unset !important;
top: unset !important;
}
}
Fallbacks:
Occurs when flex is not supported. The top left edges line up, rather than the centre.
PartyStack
Effect: In multiuser mode, this stacks all 'Hold the Egg' and berry buttons as well as the 'next' button. Only shows the preferred berry, if the pokemon likes 'any' berry it shows the first. As soon as one action is performed the button disappears, so it effectively allows for massclicking parties. The next button is moved slightly to the left, so you can quit out of mass clicking by clicking on the right of a button. Your mouse will stop on the page rather than the 'next' button.
This should work everywhere, so no fallbacks.
code
#multiuser #partybox {
position: relative;
}
#multiuser #partybox .party > div {
position: static;
}
#multiuser #partybox .action {
position: absolute;
/*allows for collapse when done*/
min-height: 0;
height: auto;
top: 0;
left: 0;
z-index: 2;
}
#multiuser #partybox .action > a,
#multiuser #partybox .action > div,
#multiuser #partybox .mu_navlink.next {
padding: 0;
margin: 0;
height: 3em;
line-height: 3em;
width: 8em;
}
#multiuser #partybox .mu_navlink.next {
position: absolute;
top: 0;
left: 0;
/*move 'next' button slightly to the left so you
can quit out of mass clicking by clicking on the right*/
-webkit-transform: translate(-25%, 0);
transform: translate(-25%, 0);
}
#multiuser #partybox .action:empty,
#multiuser #partybox .action > table,
#multiuser #partybox .action.working,
#multiuser #partybox .berrybuttons > .tooltip_content {
/*hide action when it is empty, shows 'Thank you!',
is processing and the berry tooltips*/
display: none;
}
#multiuser #partybox .berrybuttons > a {
/*only 1 berry per berrybuttons*/
display: none;
height: 100%;
width: 100%;
line-height: 3em;
}
#multiuser #partybox .berrybuttons[data-up='sour'] > a[data-berry='aspear'],
#multiuser #partybox .berrybuttons[data-up='spicy'] > a[data-berry='cheri'],
#multiuser #partybox .berrybuttons[data-up='dry'] > a[data-berry='chesto'],
#multiuser #partybox .berrybuttons[data-up='sweet'] > a[data-berry='pecha'],
#multiuser #partybox .berrybuttons[data-up='bitter'] > a[data-berry='rawst'],
#multiuser #partybox .berrybuttons[data-up='any'] > a:first-of-type {
/*show only good berries*/
display: inline-block;
}
ShelterGrid
Organises shelter pokemon in a grid.
code
#shelterarea {
min-height: 350px;
display: flex;
flex-flow: row wrap;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(5, 70px);
}
.mq2 #shelterarea {
min-height: 175px;
grid-template-rows: repeat(5, 35px);
}
#shelterarea .tooltip_content {
position: absolute;
bottom: 0;
transform: translate(0, 100%);
}
#shelterpage #shelter #shelterarea > .pokemon {
position: static;
flex: 1 1 16%;
display: inline-block;
display: inline-flex;
justify-content: center;
align-items: center;
}
#shelterpage #shelter #shelterarea:before {
display: none;
}
Fallbacks:
Occurs when grid is unavailable. Uses flex for alignment, pokemon bounce once when the shelter reloads.
Occurs when neither grid nor flex are available
 411/500Gray Stones | |
 TR Score [0] |
)
Credit for art/images I use all across PFQ can be found in this post.