Single post in Codes and things
Forum Index > PokéFarm > Journals > Codes and things >
CSS snippets for skins
Fast/compact party clicking
This is my version of the stacked/rapid party clicking mod. This is *not* compatible with the QoL party features.
You must be in compact mode for the code to take effect. (This way you can easily turn it off!) The code forces the compact check to appear even on mobile.
Screenshot
Code
/* Collapse party for quick clicking in compact mode */
.multi-compact #multiuser {
.fieldslink, .party .pkmn, .party .name, .party .working,
.berrybuttons .tooltip_content, .compact-view-toggle+label {
display: none !important;
}
#profilepage {
overflow: visible;
display: flex;
flex-direction: column;
align-items: center;
}
#partybox .party {
margin-top: 15px;
margin-bottom: 15px;
height: 50px;
position: relative;
/* Show party icons along side of click area */
> div[data-pid] .pkmn {
display: block !important;
}
> div:nth-of-type(1) .pkmn {
left: -50px;
top: -20px;
}
> div:nth-of-type(2) .pkmn {
left: -50px;
top: 30px;
}
> div:nth-of-type(3) .pkmn {
left: -50px;
top: 80px;
}
> div:nth-of-type(4) .pkmn {
left: 265px;
top: -20px;
}
> div:nth-of-type(5) .pkmn {
left: 265px;
top: 30px;
}
> div:nth-of-type(6) .pkmn {
left: 265px;
top: 80px;
}
> div {
position: absolute;
top: 0;
left: 0;
> .action {
float: none;
width: 100%;
height: 39px;
a, table {
width: 100%;
position: absolute;
left: 0;
top: 0;
}
a {
z-index: 98;
}
.berrybuttons[data-up='sour']>[data-berry='aspear'],
.berrybuttons[data-up='spicy']>[data-berry='cheri'],
.berrybuttons[data-up='dry']>[data-berry='chesto'],
.berrybuttons[data-up='sweet']>[data-berry='pecha'],
.berrybuttons[data-up='bitter']>[data-berry='rawst'] {
z-index: 99;
}
}
}
}
#partybox .mu_navlink.prev {
margin-left: 30px;
}
#partybox .mu_navlink.next {
margin-right: 30px;
}
/* Fix checkbox position */
.compact-view-toggle {
margin-left: 30px;
margin-top: 10px;
width: 50%;
text-align: left;
}
}
/* Force compact toggle to always appear */
.compact-view-toggle {
display: inline-block !important;
}
/* Fix a bug where the prev/next buttons are duplicated */
.prev+.next+.prev, .prev+.next+.prev+.next,
.compact-view-toggle+label+.compact-view-toggle,
.compact-view-toggle+label+.compact-view-toggle+label,
.compact-view-toggle+.compact-view-toggle {
display: none;
}
Enlarge field click zone
This code stacks all Pokemon in a field, then enlarges the click zone to fill the entire field area. The green/red background will still appear small, but the entire area will be clickable once a berry is selected. Great for touch screens!
This is *not* compatible with the QoL and other field stack/sort codes.
Code
/* Increase click zone when berry is selected */
#field_field>div.field>.fieldmon {
transition: none !important;
}
#field_berries.selected+#field_field>div.field>.fieldmon {
left: 0 !important;
top: 0 !important;
margin: 0 !important;
width: 60% !important;
height: 100% !important;
padding-left: 40% !important;
.small { display: none !important; }
.big { display: block !important; }
}
Change berry images
Changes the berry images in parties, fields, and summary pages, including the drag berry icon for the field click accessibility tool. Does *not* change the berries for pkmnpanels in forums & signatures... the code conflicted too much with the common pkmnpanel customizations people use.
Change the background-image URLs to customize. You shouldn't need to change anything else, the images will auto-resize, but try to choose appropriately sized images to prevent resize distortion.
This code was updated Jan 1 2024 to work better with holiday changes. Please feel free to contact me if you notice any problems. The new version cannot be used in the QoL CSS box without being compiled first, but should work fine in skins.
Pi day pie sprites on Wiki
Code
/* --- CHANGE ME --- */
/* big berries */
@sour-big: url("/img/pkmn/e/e/b.png");
@spicy-big: url("/img/pkmn/5/l/t.png");
@dry-big: url("/img/pkmn/b/g/x.png");
@sweet-big: url("/img/pkmn/6/v/3/l.png");
@bitter-big: url("/img/pkmn/4/w/v.png");
/* small berries */
@sour-small: url("/img/pkmn/f/h/l.png");
@spicy-small: url("/img/pkmn/v/m/7.png");
@dry-small: url("/img/pkmn/i/v/j.png");
@sweet-small: url("/img/pkmn/3/o/5/5.png");
@bitter-small: url("/img/pkmn/2/z/e.png");
/* --- do not change below this line --- */
/* small berries */
#profilepage .berrybuttons {
a[data-berry="aspear"] img,
a[data-berry="cheri"] img,
a[data-berry="chesto"] img,
a[data-berry="pecha"] img,
a[data-berry="rawst"] img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
height: 0;
padding-top: 24px;
width: 24px;
}
a[data-berry="aspear"] img {
background-image: @sour-small !important;
}
a[data-berry="cheri"] img {
background-image: @spicy-small !important;
}
a[data-berry="chesto"] img {
background-image: @dry-small !important;
}
a[data-berry="pecha"] img {
background-image: @sweet-small !important;
}
a[data-berry="rawst"] img {
background-image: @bitter-small !important;
}
}
/* big berries */
#partypage .berrybuttons,
#summarypage .berrybuttons,
#field_berries {
a[data-berry="aspear"] img,
a[data-berry="cheri"] img,
a[data-berry="chesto"] img,
a[data-berry="pecha"] img,
a[data-berry="rawst"] img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
height: 0;
padding-top: 52px;
width: 40px;
}
a[data-berry="aspear"] img {
background-image: @sour-big !important;
}
a[data-berry="cheri"] img {
background-image: @spicy-big !important;
}
a[data-berry="chesto"] img {
background-image: @dry-big !important;
}
a[data-berry="pecha"] img {
background-image: @sweet-big !important;
}
a[data-berry="rawst"] img {
background-image: @bitter-big !important;
}
}
/* field drag may not work during holidays */
.berrydragghost {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.berrydragghost[style*="/img/items/aspearberry.png"] {
background-image: @sour-small !important;
}
.berrydragghost[style*="/img/items/cheriberry.png"] {
background-image: @spicy-small !important;
}
.berrydragghost[style*="/img/items/chestoberry.png"] {
background-image: @dry-small !important;
}
.berrydragghost[style*="/img/items/pechaberry.png"] {
background-image: @sweet-small !important;
}
.berrydragghost[style*="/img/items/rawstberry.png"] {
background-image: @bitter-small !important;
}
Halloween candy image URLs
Big:
https://pfq-static.com/img/events/halloween/sour.candy.big.png
https://pfq-static.com/img/events/halloween/spicy.candy.big.png
https://pfq-static.com/img/events/halloween/dry.candy.big.png
https://pfq-static.com/img/events/halloween/sweet.candy.big.png
https://pfq-static.com/img/events/halloween/bitter.candy.big.png
Small:
https://pfq-static.com/img/events/halloween/sour.candy.png
https://pfq-static.com/img/events/halloween/spicy.candy.png
https://pfq-static.com/img/events/halloween/dry.candy.png
https://pfq-static.com/img/events/halloween/sweet.candy.png
https://pfq-static.com/img/events/halloween/bitter.candy.png
Christmas treat image URLs
Big:
https://pfq-static.com/img/events/christmas/sour.sweet.big.png
https://pfq-static.com/img/events/christmas/spicy.sweet.big.png
https://pfq-static.com/img/events/christmas/dry.sweet.big.png
https://pfq-static.com/img/events/christmas/sweet.sweet.big.png
https://pfq-static.com/img/events/christmas/bitter.sweet.big.png
Small:
https://pfq-static.com/img/events/christmas/sour.sweet.png
https://pfq-static.com/img/events/christmas/spicy.sweet.png
https://pfq-static.com/img/events/christmas/dry.sweet.png
https://pfq-static.com/img/events/christmas/sweet.sweet.png
https://pfq-static.com/img/events/christmas/bitter.sweet.png
Valentine's candy image URLs
Big:
https://pfq-static.com/img/events/valentine/sour.dessert.big.png
https://pfq-static.com/img/events/valentine/spicy.dessert.big.png
https://pfq-static.com/img/events/valentine/dry.dessert.big.png
https://pfq-static.com/img/events/valentine/sweet.dessert.big.png
https://pfq-static.com/img/events/valentine/bitter.dessert.big.png
Small:
https://pfq-static.com/img/events/valentine/sour.dessert.png
https://pfq-static.com/img/events/valentine/spicy.dessert.png
https://pfq-static.com/img/events/valentine/dry.dessert.png
https://pfq-static.com/img/events/valentine/sweet.dessert.png
https://pfq-static.com/img/events/valentine/bitter.dessert.png
