Single post in Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides > Site Skins: How-To, and Helpful CSS >
Here are 3 styles:
1. To center pokemon within fields
2. To stack party buttons on top of each other for fast party clicks
3. To Stack shelter pokemon in a grid
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
Avatar by Kaelwolfur.
Sent from my PokéNav