Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides >
I have some CSS that used to sort the shelter into a grid with the highest level pokemon being in the top left. The level part is not working anymore. Could it maybe conflicting with the QoL script?
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;
}
naïve collector | budding IV breeder
Signature image is free-to-use, by Lagomorphas. Avatar is by Temporal.
QUOTE originally posted by krookodilehunter
I have some CSS that used to sort the shelter into a grid with the highest level pokemon being in the top left. The level part is not working anymore. Could it maybe conflicting with the QoL script?
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;
}
I'm back with another question about "big" sprite replacement (aka party/field/shelter, not the minisprites).
DrWho fixed my issues with replacing all albino Plusle & Minun with another image.
Now I'm wondering if I can replace all albino Spiritomb with a hue-rotated version of the new sprite? Including the Platform version? (the current platform isn't replaced)
AKA can I hue-rotate all Albino Spiritomb, not just the specific one I own?
Here's the code I grabbed from the first page and used to edit a single sprite:
Result is this, but so far only on the summary page, and not the dex or platform
CSS
//-----START Replace Albino Spiritomb Sprite-----
.party>div[data-pid*="FYMBH"]>.pkmn>.pokemon, #field_party>div>div.slot[data-id*="FYMBH"]>div, #field_field>div.field>.fieldmon[data-id*="FYMBH"]>img {
filter: hue-rotate(60deg);
}
//-----END Replace Albino Spiritomb Sprite-----
Avatar credits: Melan Plusle & Minun Galaxy avatar made by Sharpy, (for my use only)
Yes you can, using a combination of the "replace all sprites" code and the regular hue-rotate code.
where /h/3/k is the code for regular Skarmory, my test subject (and of course feel free to adjust the 90deg hue rotate to your preference).
I just tried this on my field of Skarmories and all of them are hue-rotated. The Pokedex image is also hue-rotated. The only place where it doesn't work is platform codes.
edit: the code for albino Spiritomb is /2/i/6, so sub that in
edit 2: It seems platform codes are images custom-generated by the server and can't be globally modified in the same way. They can still be changed for individual Pokemon though, bearing in mind that hue-rotating a platform code image will also hue-rotate the name label and the oval platform background behind it.
Demonstration with my platform:
Code
img.big[src*='/h/3/k'], .pokemon[style*='/h/3/k']{
filter: hue-rotate(90deg) !important;}
☆ trade shop ☆
summon rerolls
charms
s/a/m/d
and more! |
☆ art shop ☆
pixel art
banners
signs
and more! |
she/her
avatar and signature art by me
QUOTE originally posted by Tarashia
QUOTE originally posted by krookodilehunter
I have some CSS that used to sort the shelter into a grid with the highest level pokemon being in the top left. The level part is not working anymore. Could it maybe conflicting with the QoL script?
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;
}
QUOTE originally posted by QuirkyRabbit
Yes you can, using a combination of the "replace all sprites" code and the regular hue-rotate code.
where /h/3/k is the code for regular Skarmory, my test subject (and of course feel free to adjust the 90deg hue rotate to your preference).
I just tried this on my field of Skarmories and all of them are hue-rotated. The Pokedex image is also hue-rotated. The only place where it doesn't work is platform codes.
Demonstration with my platform:
Code
img.big[src*='/h/3/k'], .pokemon[style*='/h/3/k']{
filter: hue-rotate(90deg) !important;}
Alchemist's Fire, I hate to break it to you but the other code doesn't work on platform images either, so even if you go through the effort of editing the sprite manually, it still would show up as normal.
This is because, as I mentioned earlier, these images are custom-generated by the server. That means before displaying them, it asks "what does this Pokémon look like", "what is its name" etc and puts all that information together. The important point is that it asks Sally and not your CSS, and as far as I can tell, there's no CSS in existence that could interfere with that process. You could only modify the final output of that process, which is what I already previously suggested.
Another possibility would be to edit the platform image of your Albino Spiritomb and use the edited image's URL instead of the server-generated image's one if you want to show off your Pokémon in a thread or signature or whatever. However, this would still only be able to substitute your own platform image and not anyone else's.
On the bright side, I suppose you wouldn't really look at platform images very often, unless you browse other people's Albino-Spiritombs-for-sale threads on a daily basis.
QUOTE originally posted by krookodilehunter
QUOTE originally posted by Tarashia
QUOTE originally posted by krookodilehunter
I have some CSS that used to sort the shelter into a grid with the highest level pokemon being in the top left. The level part is not working anymore. Could it maybe conflicting with the QoL script?
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;
}
Always looking for quirky pokemon!
- Typerace
- Shop
Current Type
Current Points 0
Clicklist
Next month=
My shop! I offer shelter hunts, free fields, shiny/albino, variants/exclusives and more. Please post in shop rather than send a pm.
Buying
Spectral Leiomano
for anywhere between 20 - 40zc depending on market price - send pm to see if i have enough money ^.^CCS Exclusives
Could anyone help me with a list of exclusives for me to find in the shelter? :)
I'm kinda new and dont know yet how everything works.
Would really appreciate some help:)
Cannot post: Please log in to post