Loading...

Top
PFQ Banner

This is PokéFarm Q, a free online Pokémon collectables game.

Already a user? New to PFQ?

berry garden css

Forum Index > PokéFarm > Guides >

eura's Avatareura
eura's Avatar
newbie.pngb+.png
anyone else sick of scrolling and watering plants so you can harvest some [REDACTED]? me too! here's CSS to make it easier. this is what it looks like. you can install it as a userstyle here, or put the following CSS into your site skin. it will, unfortunately, make all the other buttons on site look bigger as well, since I couldn't figure out how to isolate only the watering buttons.

button{ display: flex; align-items: center; justify-content: center; margin-top: 10px; padding: 20px; overflow: hidden; margin-right: -60px; } button:hover{ margin-right: 0; } #garden_content>ul>li>.status{ display: none; } #garden_content>ul>li>.soil{ display: none; } #garden_content>ul>li>.time{ display: none; } #garden_content>ul>li{ width: 10px; }
Neonyan's Avatarhypermode-12.pngNeonyan
Neonyan's Avatar
hypermode.pngarceus.pngb.png
I'm suprised no one has ever made a post in here before, but... would anyone be willing to help me figure out how to edit this code so that it only affects the berry buttons and not all site buttons? edit; i kind of see the issue now, the "water plant" buttons dont seem to have a button id like the others do...

★ Zachary ★ They/He ★ 22 ★

Quiet nature collector.
Free Eggdex Help + Free Pair Creation Help Free Forum Templatescredits

credits

Code & Divider @Neonyan Signature Pagedoll @Vehemourn on Toyhou.se Forum Icon @Kotatsu on Toyhou.se
DrWho's AvatarDrWho
DrWho's Avatar
master.pngc.png
If I understood right, add #garden in front of button, so it only applies on the buttons on the garden page: #garden button{ display: flex; align-items: center; justify-content: center; margin-top: 10px; padding: 20px; overflow: hidden; margin-right: -60px; } #garden button:hover{ margin-right: 0; } #garden_content>ul>li>.status{ display: none; } #garden_content>ul>li>.soil{ display: none; } #garden_content>ul>li>.time{ display: none; } #garden_content>ul>li{ width: 10px; }
Avatar by Kaelwolfur. Sent from my PokéNav
Neonyan's Avatarhypermode-12.pngNeonyan
Neonyan's Avatar
hypermode.pngarceus.pngb.png
Yeah, it did confine it to only the berry garden page! But the other buttons on said page that arent' supposed to be edited are still a bit wonky. better then nothing though!! Tysm
DrWho's AvatarDrWho
DrWho's Avatar
master.pngc.png
Happy to help, so you only want these guys to be affected? #garden .cmd button{ display: flex; align-items: center; justify-content: center; margin-top: 10px; padding: 20px; overflow: hidden; margin-right: -60px; } #garden .cmd button:hover{ margin-right: 0; } #garden_content>ul { margin-top: 100px; } #garden_content>ul>li>.status{ display: none; } #garden_content>ul>li>.soil{ display: none; } #garden_content>ul>li>.time{ display: none; } #garden_content>ul>li{ width: 10px; }

QUOTE

edit; i kind of see the issue now, the "water plant" buttons dont seem to have a button id like the others do...
Just wanted to add a little something on this - You're right IDs are a great way to uniquely identify an element, but that's not the only way. The 'Harvest' all button are the only buttons contained in a div with a 'cmd' class. So you can use #garden .cmd button which you can read right to left as > all button elements > > which are descendants of an element with the 'cmd' class > > > which are descendants of the element with the 'garden' id
Neonyan's Avatarhypermode-12.pngNeonyan
Neonyan's Avatar
hypermode.pngarceus.pngb.png
oh yeah, thats perfect! Thanks a million
Paula's AvatarPaula
Paula's Avatar
grandmaster.pnge+.png

Some code

#garden_content>button{ display: flex; align-items: center; justify-content: center; margin-top: 40px; padding: 60px; overflow: hidden; margin-right: -60px; } #garden_content>button:hover{ margin-right: 0; } #garden_content>ul>li>.status{ display: none; } #garden_content>ul>li>.soil{ display: none; } #garden_content>ul>li>.time{ display: none; } #garden_content>ul>li{ width: 10px; margin-top: 40px; }
I tweaked it a bit a bit ago and forgot about it :D. Might be relevant with current tourney EDIT: tweaked it some more for mobile users (fixes the buttons going too far left on the screen)

Some more code

#garden_content>button{ display: flex; align-items: center; justify-content: center; margin-top: 40px; padding: 60px; overflow: hidden; margin-right: -60px; } #garden_content>button:hover{ margin-right: 0; } #garden_content>ul>li>.status{ display: none; } #garden_content>ul>li>.soil{ display: none; } #garden_content>ul>li>.time{ display: none; } #garden_content>ul>li{ width: 20px; margin-top: 40px; } #garden_content>ul{ margin: revert; padding: revert; }
This is my shop - I am selling everything due to hiatus.

Cannot post: Please log in to post

© PokéFarm 2009-2024 (Full details)Contact | Rules | Privacy | Reviews 4.6★Get shortlink for this page