Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides >
Hi there! I'm looking for a code that, on the multi-profile page, allows me to click a person's entire party without having to move my mouse. I don't really want the Next or Previous buttons moved up to be in the stack since I use A and D to move between users, but I'd at least like the Hold the Egg! messages to be stacked. Having only one berry visible (liked, or a single neutral berry if there's no preference) in the stack would be ideal for Pokemon. I hope that's not too much to ask, and hopefully it already exists. Thank you!
for Market equiv. 
sig code and sig bg image made by me
@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
 395/500Gray Stones | |
 TR Score [7,392] |
)
Credit for art/images I use all across PFQ can be found in this post.
there was a code on stylish a while back that made the text across pfq a little smaller, I was wondering if there was one around to use? I don't have a problem with the site anywhere but on my PC where the font is just a weeny bit too big for my preference
QUOTE originally posted by Shazi
there was a code on stylish a while back that made the text across pfq a little smaller, I was wondering if there was one around to use? I don't have a problem with the site anywhere but on my PC where the font is just a weeny bit too big for my preference
thank you, that's perfect!
also, if you want it to ONLY affect PC and not phones (if you use in your skin and not in stylish) then use this:
html.mq5 body {font-size: 80%;}
html.mq2 body {font-size: 100%;}
that will make it smaller on PC version but on most devices (which uses mq2 or smaller) it will be normal size for it.
QUOTE originally posted by Bishop
also, if you want it to ONLY affect PC and not phones (if you use in your skin and not in stylish) then use this:
html.mq5 body {font-size: 80%;}
html.mq2 body {font-size: 100%;}
that will make it smaller on PC version but on most devices (which uses mq2 or smaller) it will be normal size for it.
body {font-size: 95%;}
.mq2 body {font-size: 100%;}
If you want a more detailed description of the media query classes, check out my guide
PFP/BG/IMG from Golden Sun
Code Collection
Code Collection
Hey again~ I'm pretty sure there was a code to disable field animations for berry pref but I'm having trouble finding it ^^; Could someone hit me with it please if it's not to much trouble? XD;
(avatar credit)
Helioptile fanart drawn by me in the Colors3D 3DS app.
Actual sig coming eventually :p
Is there a way to get rid of the "sucess" popup that appears when you use target notification?
2196/7500 
Will take any unwanted ghost gems!
Vivillon
New goal: collect regular/shiny/albino versions of all Vivillon
R - regular S - shiny A - albino * - what i have already
Archipelago - */*/a ☆ Continental - */s/a ☆ Elegant - */*/* ☆ Fancy - */*/* ☆ Garden - */*/a ☆ High Plains - */*/* ☆ Icy Snow - */s/a ☆ Jungle - */*/* ☆ Marine - */*/a ☆ Meadow - r/s/a ☆ Modern - r/s/a ☆ Monsoon - r/s/a ☆ Ocean - r/*/a ☆ Pokeball - r/*/* ☆ Polar - */s/a ☆ River - */*/* ☆ Sandstorm - r/*/a ☆ Savanna - */*/a ☆ Sun - r/*/* ☆ Tundra - */*/*
QUOTE originally posted by CSDreamer
Is there a way to get rid of the "sucess" popup that appears when you use target notification?
Cannot post: Please log in to post