Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides >
Is there anyway I could hide the particular badge upgrade boxes on the wishforge page? I want to hide all the wishalloy ones so I can clearly see ones I'm actively working on
Avatar made circe ^^
Help with some research?
QUOTE originally posted by AuracleOfBacon
Does anybody know of a CSS that turns one kind of minispirte into another when hovered, ie. a Spectral Leiomano into a Marshadow when hovered over? I can see this not going well with mobile users if not coded correctly, but I can see this being useful for a bunch of Type Race Skins I made
Speaking of minisprites, is there a code, similar to the Type Race Egg Highlight codes, but for Summon Item minisprites?
Current Type Race Score: 0
Even if I'm offline for an extended period of time, that does not mean I lose intrest.70% of the world thinks Warrior Cats is stupid. 25% say: "Who cares?". Repost if you are part of that 5% that would take a hard cover copy of Warrior Cats and slap the other people saying: "STARCLAN IS OUT FOR REVENGE!”
Avatar is by me
Please visit the Vivillon Breeders' Directory to see which users hatch which Vivillon Pattern, or the Maravol Breeders' Directory for the Maravol patterns. Consider joining the Mythbusters PFQ Division! My Hero Academia: Wider World is looking for peospective students! 
QUOTE originally posted by AuracleOfBacon
Does anybody know of a CSS that turns one kind of minispirte into another when hovered, ie. a Spectral Leiomano into a Marshadow when hovered over? I can see this not going well with mobile users if not coded correctly, but I can see this being useful for a bunch of Type Race Skins I made
Speaking of minisprites, is there a code, similar to the Type Race Egg Highlight codes, but for Summon Item minisprites?
[style]
img[src*="summon image code"]{
border-radius: 50px;
box-shadow: 0px 0px 0px 5px @col-border1;
padding: 2px;}
[/style]
[style]
.hover{
height:30px;
width:30px;
background: url("summon image url") no-repeat;
}
.hover:hover {
height:30px;
background: url("pokemon image url") no-repeat;
}
[/style]
[sc=hover] [/sc]
QUOTE originally posted by DrWho
I think the problem is `#field_nav > button:nth-child(3)`. When you move a pokemon the 3rd button gets wrapped by a div.dragmask so you're no longer selecting the button w/ the field name and it shows in its full size. But I'm not sure why it stays when you're done moving the Pokemon, maybe a differnet part of your code causes that.
How about confining the entire #field_nav to a certain height instead?
#field_nav {height:32px; white-space: nowrap; overflow: hidden;}
image is official pokemon art; icon is official from witch's heart
thanks for the reply susie. on a clean skin (no other css active) this seems to do the job
button[data-action='jump'] {
white-space: nowrap;
}
could you try this and let us know how it goes? if there's still issues maybe post your whole css to see if a different part conflicts with it?
also, an alternative solution to the hover to change image. the advantage is you only need one block of css and can for any number of items
also, an alternative solution to the hover to change image. the advantage is you only need one block of css and can for any number of items
Code
[sc=change][item=Ancient Drive][pkmn=Genesect][/sc] [sc=change][item=Azure Flute][pkmn=Arceus][/sc]
[style]
.change {
display: inline-grid;
grid-template-areas: 1fr 1fr;
align-items: center;
img {
z-index: 1;
grid-area: ~"1 / 1";
opacity: 0;
}
img:first-of-type {
opacity: 1;
}
&:hover > img:first-of-type {
opacity: 0;
}
&:hover > img:last-of-type {
opacity: 1;
}
}
[/style]
Avatar by Kaelwolfur.
Sent from my PokéNav
Howdy y'all! I'm wondering if there's a css code I could use to change the notification noise to something like a Solgaleo call rather than a Absol call? If it's not possible then I'll be fine haha
Yo, I’m Gracie, and this is Disney channel. Local Shaymin hoarder and rpg fan.
Credits
Credits Signature by CatEnergetic,with help from Wardove.Official Pokemon Gif
I have this one that changes the notifs icon to an image when there are no notifs and to another when there are:
I want to add something for the noise too to this, it's possible?
#notifs > a > img { opacity: 0; } /*No notifications*/ #notifs > a[data-count='0'] { background-image: url('IMAGE1'); } /*Notifications available*/ #notifs > a { background-image: url('IMAGE2'); background-position: center center; background-size: cover; background-repeat: no-repeat; }
img official by Honkai Impact 3rd
The short answer: With CSS you cannot change the sound.
For the notification, an audio player loads the absol cry i.e.
<audio src='absol.mp3' type='audio/mpeg'></audio>
and triggers a play when appropriate. With javascript you could change the 'src' attribute to play a different file, like the pidgey cry hosted on pokemon showdown:
As a workaround however, you can play raw bytes. You can convert your custom notification sound to raw bytes. An example snippet to do this in python:
sorry this is stupidly complicated but i don't think you can get around the extra step of converting the audio files to raw bytes.
let notifPlayer = document.querySelector('#notification_sound')
notifPlayer.src = 'https://play.pokemonshowdown.com/audio/cries/pidgey.mp3'
but this won't work. for security reasons you can only play online mp3 files when they're hosted by Pokefarm. So your browser will refuse to load the file.
As a workaround however, you can play raw bytes. You can convert your custom notification sound to raw bytes. An example snippet to do this in python:
import base64
data = open('pidgey.mp3', 'rb').read()
result = base64.b64encode(data).decode('ascii')
print(result)
This will give you a long, base-64 encoded string like //tQxAAAB
... (I only pasted the first few characters here, the triple dots are not part of the string). Then you can replace the 'src' attribute with data:audio/mpeg;base64,//tQxAAAB
... in Javascript. Full code snippet to do this: (it's very long because it contains the pidget cry encoded in base 64):
Code
let notifPlayer = document.querySelector('#notification_sound')
notifPlayer.src='data:audio/mpeg;base64,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UKTqtN1bumtHl27LK9tPYP/7UsRJgApI4z0MsEeBQByn5YMJ2Kw6tP+qzi4VYx70p/r92hWcCuBsFVTRWJ3p9TJZJpMvqkWjI0Pi2vs00hllfLD7zzgM7t7ASBdZ9qNaQdVYQDCcpxMS0QUjFz5Ai87FzyXnk7ywi/Uzur2VEu1k621/Vaxze6UP7OtVxtNNCVJs8SyGWKIHK9ZCoLGSpOTLsYAZHEtP5R8zU9tt6i1Z8gJzAlErw2Ente8UY1z1sbizaUi2Y7n3P92pKDFil2yaannBZSv+utVIBLeoh2mt//tSxFYACmiFQ4wwR0FECai1h5gobSQDcuwlibz9FtoQFrhmcnZNaOjktUjyqRnHqt93K8sUdzs6kYoJGuNVEqZX8shZ6SbeSq6e9rjC70Fz2cH3uOtTQjcs6E1qZGrXSMD8psmeUANG6wTtOk1OLo5D4lbscctMdBII9FqVjP201QwvSaKf59gweGnDgWDI84faFhc6PJOrSgVyi9p461367rLBSv9laVt9Cur/HCRVd4ZUP7ZcK1T7jVSSF5am3EI/ruLJ2uCmDIj0CRyJSIH/+1LEYYAKVM1N57BF4TkOp7DzDSDLCzkNyvNnwZEMKddnsKtuWiP2SiOiUJfov/R9KTW6WX+urdbbTNnE2e+GXFWAOmu7ayOfRQAyBQQAC0lY8gWUGxEGSMxQaejQkqiSXrtderKvDblkY45UgoxlgbeZTxCCtp3O2ioqLNDWAiwDMlVNIzqjS4sLFbEK9tmoJfYjbxZqagCio3LK2mQADWhGm6a0M+ZNYWRRt3IJRRmKYSOKAgePBdygdNAqOiEJCp2hDFCERHipAOJBdV9uDf/7UsRvAAodMz/HjE+JTY7nMJMNyM0bfUhurlseZM1ZKxfxZiDRlXBz7kXaAgVsyASRU9HP3iu0VtvDBnFMc9k8NoNhe/d8Wut+qMAhQLWLhdnlol5j5lrV/3H87MkK/7+r4+3d9Xv/g138e7X/03tqL3s4avk/34U/wZUIOwW5ACEhRHFeYUa4YtWNSParszfQq8wMBQCzxEYTOzvJEZ4S8Oy1T7J4qlZ06Jaw0VhtXsLHlHiJ1TiVgM56oOyUqJaqpUJFXKUAIFQSCxy+y2GX//tSxHqACexVLaMEYMFACOQkEIzh5lRF9FRFI/0X/+VFVFZ2MVEXzFRFuzqir7lMDVDtqiqis/7PRUVUX///YxURU5lBIJDWKpMgsLisVFRY/8sLCutMQU1FMy45OS41VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVX/+1LEiIAJZGkZIIxSgSuo2lgwCYhVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVQ=='
Hello!
I apologize if this has been asked before, but is there any way of changing the background on the Shelter page (the grassy background) with CSS? I have a night mode based theme, and so, the Shelter is a bit of an eyesore due to the brightness.
Thank you in advance.
Perhaps returning?
Avatar (c) Splatoon/Nintendo (In-game/Promotional Screenshot)
Is there a way to make the shelter alert about legendaries, ditto, pfq fakemon, exclusives and variants including their eggs?
Cannot post: Please log in to post