Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides >
QUOTE originally posted by Mirzam
If there's nested braces, it won't work in the QoL CSS box, which only supports vanilla CSS, vs the LESS formatting allowed here.
If you really want to use LESS formatted CSS without changing your skin, you'll need to convert it first, using a site like this:
https://lesscss.org/less-preview/
--snip--
That, uh, doesn't explain ValleyP's code not working in the QoL though tbh, I might look into that later but no promises that's kind of a weird feature
Added a couple lines and an extra curly brace, but I got ValleryP's code working in my site skin:
ValleryP site skin CSS
#shelterarea { .pokemon>
/* highlight 34 purple eggs */ img[src*=""],img[src*="pkmn/5/d/f.png"],img[src*="pkmn/g/d/0.png"],img[src*="pkmn/q/p/t/n.png"],img[src*="pkmn/c/w/0/j.png"],img[src*="pkmn/e/h/x.png"],img[src*="pkmn/l/l/q.png"],img[src*="pkmn/n/q/8.png"],img[src*="pkmn/f/b/0.png"],img[src*="pkmn/m/3/m.png"],img[src*="pkmn/m/q/f.png"],img[src*="pkmn/i/v/v.png"],img[src*="pkmn/n/a/i.png"],img[src*="pkmn/h/a/c.png"],img[src*="pkmn/j/f/u/s.png"],img[src*="pkmn/b/d/m.png"],img[src*="pkmn/y/r.png"],img[src*="pkmd/h/7/w.png"],img[src*="pkmn/6/u/u.png"],img[src*="pkmn/5/5/7/6.png"],img[src*="pkmn/h/8/p/u.png"],img[src*="pkmn/1/8/7.png"],img[src*="pkmn/h/w/j.png"],img[src*="pkmn/z/5/5/4.png"],img[src*="pkmn/2/l/p.png"],img[src*="pkmn/5/j/w.png"],img[src*="pkmn/s/5.png"],img[src*="pkmn/3/1/u.png"],img[src*="pkmn/1/w/r/3.png"],img[src*="pkmn/l/t/c.png"],img[src*="pkmn/m/m/g.png"],img[src*="pkmn/h/m/b.png"],img[src*="pkmn/8/9/p/k.png"],img[src*="pkmn/h/5/v.png"],img[src*="pkmn/i/i/f.png"],img[src*="pkmn/7/s/7.png"],{border-radius: 50px;opacity: 1;box-shadow: 0px 0px 0px 5px blue;}
}
Avatar credits: Melan Plusle & Minun Galaxy avatar made by Sharpy, (for my use only)
Ok so since I accidentally started this, I figured I'd poke around and see if I could fix it XD
What I found was:
This simple version of the code works fine in the QoL css
So I checked what was different in the big version I use, and it's just the extra set of {} and the very last comma! Take those out and it works fine through QoL.
I assume it's a similar problem with ValleryP's code: that comma at the end.
Edit: ValleryP's code needs the #shelterarea pre-facing code, otherwise it works everywhere those eggs show up (mostly daycare but I haven't checked all the spots)
Did more poking and this version also works in the site skins. That dang comma, man XD It's been an invisible problem for years and I just never noticed lol
#shelterarea .pokemon>img[src*="/pkmn/h/a/c.png"]{
height: 60px; -webkit-filter: drop-shadow(0px 0px 6px #220040);
}
fixed Purple code
#shelterarea .pokemon> img[src*=""],img[src*="pkmn/5/j/w.png"],img[src*="pkmn/n/q/8.png"],img[src*="pkmn/1/8/7.png"],img[src*="pkmn/7/s/7.png"],img[src*="pkmn/i/i/f.png"],img[src*="pkmn/n/a/i.png"],img[src*="pkmn/3/1/u.png"],img[src*="pkmn/f/b/0.png"],img[src*="pkmn/b/d/m.png"],img[src*="pkmn/5/d/f.png"],img[src*="pkmn/g/d/0.png"],img[src*="pkmn/6/u/u.png"],img[src*="pkmn/m/3/m.png"],img[src*="pkmn/h/5/v.png"],img[src*="pkmn/s/5.png"],img[src*="pkmn/h/a/c.png"],img[src*="pkmn/y/r.png"],img[src*="pkmn/l/l/q.png"],img[src*="pkmn/l/l/q.png"],img[src*="pkmn/h/m/b.png"],img[src*="pkmn/m/m/g.png"],img[src*="pkmn/l/t/c.png"],img[src*="pkmn/d/h/7/w.png"],img[src*="pkmn/2/l/p.png"],img[src*="pkmn/i/v/v.png"],img[src*="pkmn/m/q/f.png"],img[src*="pkmn/h/w/j.png"],img[src*="pkmn/c/w/0/j.png"],img[src*="pkmn/5/5/7/6.png"],img[src*="pkmn/q/p/t/n.png"]{
height: 50px; -webkit-filter: drop-shadow(0px 0px 6px #220040);
}
Did more poking and this version also works in the site skins. That dang comma, man XD It's been an invisible problem for years and I just never noticed lol
✩ [ Me
✩ [ avatar
Lex | They/Them pronouns
] ✩Hunt Chain! 18
Alastor; Hazbin Hotel ep1
] ★TR Score: 0
@BlackBlood1872: Haha I'm glad I saw your post, I was just playing around with the CSS for QoL and I figured the exact same thing out, just remove the outer set of curly braces and bam - fixed
I was able to do it with the last comma, and I duplicated the #shelterarea .pokemon> piece, but the shelter was squishing super-flat xDD Yours works much better!
Edit:
Now for the really fun part: How do I also get this to apply to eggs in the Lab? Rather than entering the long list into the QoL search xD
QUOTE originally posted by Alchemist's Fire
So I tried putting the code BlackBlood1872 shared into that "LESS" site, and it duplicated #shelterarea onto every line...
@Mirzam: We figured out how to shorthand vanilla a bit! Just removed the 2nd set of curly braces (the nesting) and it seems to work!
If I understand correctly for the lab, I'd just need to add a block like this?
I just wasn't sure what the element was for the lab page =D
Edit: Hot diggity, it worked! Thank you!
purple eggs for lab
#labpage .pokemon> img[src*=""],img[src*="pkmn/5/j/w.png"],img[src*="pkmn/n/q/8.png"],img[src*="pkmn/1/8/7.png"],img[src*="pkmn/7/s/7.png"],img[src*="pkmn/i/i/f.png"],img[src*="pkmn/n/a/i.png"],img[src*="pkmn/3/1/u.png"],img[src*="pkmn/f/b/0.png"],img[src*="pkmn/b/d/m.png"],img[src*="pkmn/5/d/f.png"],img[src*="pkmn/g/d/0.png"],img[src*="pkmn/6/u/u.png"],img[src*="pkmn/m/3/m.png"],img[src*="pkmn/h/5/v.png"],img[src*="pkmn/s/5.png"],img[src*="pkmn/h/a/c.png"],img[src*="pkmn/y/r.png"],img[src*="pkmn/l/l/q.png"],img[src*="pkmn/l/l/q.png"],img[src*="pkmn/h/m/b.png"],img[src*="pkmn/m/m/g.png"],img[src*="pkmn/l/t/c.png"],img[src*="pkmn/d/h/7/w.png"],img[src*="pkmn/2/l/p.png"],img[src*="pkmn/i/v/v.png"],img[src*="pkmn/m/q/f.png"],img[src*="pkmn/h/w/j.png"],img[src*="pkmn/c/w/0/j.png"],img[src*="pkmn/5/5/7/6.png"],img[src*="pkmn/q/p/t/n.png"]{
height: 50px; -webkit-filter: drop-shadow(0px 0px 6px #220040);
}
Wellll, that will sort of work, but technically the #labpage there isn't actually doing anything, since it will only apply to the first selector before the first comma, which is just the empty placeholder for copy/paste convenience. All the other image selectors should apply anywhere on site the eggs are displayed as image elements (vs background images, as is typical in party boxes)
But if you're ok with that, then the same code should work in shelter & lab, no mods necessary. It would also affect daycare most likely.
Edit: Like this will probably be highlighted too:
Haha, I'm so silly. I didn't even need to duplicate it - the #shelterarea code is affecting the lab as well
I duplicated the code and tried changing the way the lab eggs are highlighted, and it added my purple highlight but kept the egg large as it was for the shelter code xDDD
Although I guess it's still a good thing I tried, cause I learned something!
QUOTE originally posted by LavenderHues
Is there a way to make the "Next/Previous" buttons in the fields larger using CSS? I use touchscreens primarily to massclick and I always end up missing the button because it's so small, even when I'm zoomed in.
avatar is from kiki's delivery service
QUOTE originally posted by maruchu
hey there! i'm also a mobile clicker. personally, i changed this portion of the original css:
#field_nav button[data-action=next], #field_nav button[data-action=previous], #field_nav button[data-action=jump] {
position:relative;
z-index:10;
}
to this:
#field_nav button[data-action=next], #field_nav button[data-action=previous] {
position:relative;
z-index:10;
height: 100px;
}
you can change the height until you feel that it's comfortable for you :D
× 628 / 713apologies for the constant posts but i'd like to revise the field clicking code i'm using so the pokemon sprites are centered!
i've already attempted revising the code several times. changing the top and left properties (is that what they're called?) moved the pokemon to where i wanted them, but the clickbox moved along with it too.
edit - is there also a way to lower the opacity of the clickboxes? :o i like looking at the field backgrounds as i click :D
originally made by hayashi rin
#field_field:not([data-mode='private']) .fieldmon { transition: none !important; }
#field_berries.selected ~ #field_field:not([data-mode='private']) {
& > div.field {
display: flex;
margin: 0; padding: 0;
padding-top: calc((475% / 825) * 100);
justify-content: center; align-items: center;
user-select: none;
& > .fieldmon {
display: flex;
width: 100%; height: 100%;
top: 0 !important; left: 0 !important;
margin: 0 !important; padding: 0 !important;
justify-content: center; align-items: center;
transition: none !important;
&.cormyr { background-color: @col-flavour-up; }
&.goaway { background-color: @col-flavour-down; }
&.cormyr > img, & .goaway > img {
background-color: transparent !important;
}
}
}
}
Cannot post: Please log in to post