Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides >
Apologies if this has been asked before, but is there a way to change the type race icons? Or at least make them a little darker?
- Some Info
- Links
- Goal+TR
We're a plural system by the collective name of The Unified Programs or just Unity! I, Champion Spectra of the Draquaria region, and Champion(?) Maroon are the most common fronters here on PFQ!
And for those wondering, Draquaria is a fan region that came with me when I became a soulbond along with Maroon! And if that sounds confusing, a soulbond is basically an oc who becomes a headmate in a system!
We use plural prounouns to refer to ourselves collectively, not multiple people on the same account. Posts signed with initials of headmate(s) (typically CS or CM) who wrote them!
None currently
× 1 / 600Buying Death Wings at market price!
0
QUOTE originally posted by Champion Spectra
Apologies if this has been asked before, but is there a way to change the type race icons? Or at least make them a little darker?
QUOTE originally posted by Winterbraid
However, here's a tiny bit of CSS I wrote to make the new V~Wave icons a bit darker and more contrasting! I personally feel like it makes them a bit easier on the eyes and "pop out" a bit more with the default site skin.
Code
img[src*='pfq-static.com/img/types/v-'] {
filter:
brightness(90%)
contrast(125%);
}
- 🪪
- 📋
- 🔗
sapphire/they/23
Tournament Token (Ruby)
Event Item
(
: 0)
[LEGACY] A token earned from Weekly Tournaments Season 10 but it is too old to be valid.
Legacy items are old items that no longer serve a purpose and are only good for collecting.
Sells for 
10,000
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Dry food
MAXQuiet nature
430 eggs
Score: 0
credits
credits
- Code @Neonyan
- Pkmnpanel @Mirzam+modified by @Neonyan
- Background+Tab Icons @Pokemon
- Pagedoll @pkspsapphire
- TR code LycanKai+Hakano Riku
QUOTE originally posted by pkspsapphire
*snip*
winterbraid's got some css to increase the contrast and also make them a bit darker if youd like to use that!
QUOTE originally posted by Winterbraid
However, here's a tiny bit of CSS I wrote to make the new V~Wave icons a bit darker and more contrasting! I personally feel like it makes them a bit easier on the eyes and "pop out" a bit more with the default site skin.
Code
img[src*='pfq-static.com/img/types/v-'] {
filter:
brightness(90%)
contrast(125%);
}
QUOTE originally posted by Champion Spectra
We can't seem to get it to work? It gives an error about the line with "filter" on it.
code
img[src*='pfq-static.com/img/types/v-'] {
filter: brightness(90%) contrast(125%);
}
It looks like you can use the brightness filter, but not the contrast filter for some reason? I feel like I've seen bug threads about certain properties not being accepted by the PFQ LESS compiler/validator but I can't remember which ones...
It worked in the qol for us! Thanks so much! Also, as @Mirzam said, strangely can't use the contrast filter in site skins, but you can in qol. Anyways, now the icons look much better with our site skin, so thanks again!
I'm having trouble finding how to change the size of a pokemon icon.
in particular
in particular
79/700
I would do it like this. To make it smaller you can get away with only a css tag, but if you use the full sc/style you can go either bigger or smaller.
"imgsize" can be anything you want, as long as it matches in both places. If you want to make different images different sizes, you'll need a different class name for each one. I went ahead and popped the display line in there so it would share a line with other images etc. You can set both width and height if you prefer, but if you set only one it will auto-set the other and thus avoid skewing the image.
vs
Code
[sc=imgsize][pkmn=scatterbug][/sc] vs [pkmn=scatterbug]
[style]
.imgsize {
img {
width: 100px;
}
display: inline-block;
}
[/style]
Thanks, they look good.
12x 
9x 
Cannot post: Please log in to post