berry garden css
Forum Index > PokéFarm > Guides >
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;
}
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.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
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
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;
}
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
QUOTE
edit; i kind of see the issue now, the "water plant" buttons dont seem to have a button id like the others do...
oh yeah, thats perfect! Thanks a million
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;
}
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