Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides >
i wanted to thank you for your CSS, they are wonderful
as i´m not really good with codes and all that i was a little unsure if i should try them, but it was so easy and the CSS are so helpful
so thank you, thank you, thank you, thank you, thank you, thank you, ...
have a great day ^^
rowlet avatar made by Gumshoe
I hope I'm at the right place? If not please let me know where to post.
In an attempt to learn a bit more about CSS I eventually made my own custom CSS. These changes are purely visual but I found them useful.
#counters>#counterlist>.zophan>div>span{
background: #33CCFF!important;
height:16px;
width:50px;
font-weight: bold!important;}
#counters>#counterlist>li>.tooltip_content>h3>a{ text-decoration:none;}
#counters>#counterlist>li>.tooltip_content{border-radius:0px!important;}
#counters>#counterlist>li>.tooltip_content>img{
border-radius:0px!important;
border: 1px solid #89CD62;
background:#D7FFBF;}
#counters>#dailybonus>li>a{text-decoration:none!important;}
#counters>#counterlist>li>.counter_item>.m{background:grey; opacity:0.85;}
#counters>#counterlist>.active>.counter_item>span{
background:#FFDE77 !important;
height:16px;
width:50px;
font-weight:bold !important;}
#counters>#counterlist>.active{
border-left:2px solid inherit!important;
border-right:2px solid inherit!important;
height:56px;}
#counters>#counterlist>.zophan{
border-left:2px solid #3cf!important;
border-right:2px solid #3cf!important;
height:56px;}
#dcegglist>li{
border-radius: 0px!important;}
#dcegglist>li>button{
background-color:#76A3F8 !important;
font-weight: bold;
height:45px;}
#dceggs>p>button{
font-weight: bold;
height:25px;}
To change button colours, change the #000000 to one you like. Keep in mind it'll make all buttons same colour. If you want every button to be different colour, let me know and I'll make a code for it.
If you don't want to change colour, just remove background-color:#000000!important;
You won't be able to make buttons bigger than this. 11px padding in the first code is maximum before breaking.
#field_nav>button{
padding:10px!important;
background-color:#000000!important;}
#field_nav>button:nth-last-child(1) {height: 34px!important;padding:2px!important;}
#field_controls{display:none;} <this line just removes that help button it annoyed me since it's useless after so many years on this site
#field_nav>button:nth-last-child(2), #field_nav>button:nth-last-child(3) {
padding:31px!important;
width:140px!important;}
#field_nav>button:nth-last-child(1) {height: 34px!important;padding:2px!important;}
#field_controls{display:none;}
#orderlist>.panel>div>p>button:nth-last-child(2){
background-color: #76A3F8!important;
font-weight:bold!important;
padding:24px!important;}
#orderlist>.panel>div>p>button:nth-last-child(1){
padding:4px!important;}
And a small code
Activated Counters Show Better
#counters>#counterlist>.zophan>div>span{
background: #33CCFF!important;
height:16px;
width:50px;
font-weight: bold!important;}
#counters>#counterlist>li>.tooltip_content>h3>a{ text-decoration:none;}
#counters>#counterlist>li>.tooltip_content{border-radius:0px!important;}
#counters>#counterlist>li>.tooltip_content>img{
border-radius:0px!important;
border: 1px solid #89CD62;
background:#D7FFBF;}
#counters>#dailybonus>li>a{text-decoration:none!important;}
#counters>#counterlist>li>.counter_item>.m{background:grey; opacity:0.85;}
#counters>#counterlist>.active>.counter_item>span{
background:#FFDE77 !important;
height:16px;
width:50px;
font-weight:bold !important;}
#counters>#counterlist>.active{
border-left:2px solid inherit!important;
border-right:2px solid inherit!important;
height:56px;}
#counters>#counterlist>.zophan{
border-left:2px solid #3cf!important;
border-right:2px solid #3cf!important;
height:56px;}
Changes in Garden
I found it useful to have bigger button for quicker manual watering.
#garden_content>ul>li>.cmd>button{
background-color:#FFEE82 !important;
height:40px;
border:none;}
#garden_content>ul>li>.soil{font-weight: bold;}
#garden_content>ul>li{
background-color:#93DA90 !important;
border-radius:0px!important;
border:2px solid #85DA82!important;}
#garden_content>ul>li>.cmd>button{
background-color:#FFEE82 !important;
height:40px;
border:none;}
#garden_content>ul>li>.soil{font-weight: bold;}
#garden_content>ul>li{
background-color:#93DA90 !important;
border-radius:0px!important;
border:2px solid #85DA82!important;}
Bigger Daycare Adop Button
#dcegglist>li{
border-radius: 0px!important;}
#dcegglist>li>button{
background-color:#76A3F8 !important;
font-weight: bold;
height:45px;}
#dceggs>p>button{
font-weight: bold;
height:25px;}
Bigger Field Buttons
To change button colours, change the #000000 to one you like. Keep in mind it'll make all buttons same colour. If you want every button to be different colour, let me know and I'll make a code for it.
If you don't want to change colour, just remove background-color:#000000!important;
You won't be able to make buttons bigger than this. 11px padding in the first code is maximum before breaking.
#field_nav>button{
padding:10px!important;
background-color:#000000!important;}
#field_nav>button:nth-last-child(1) {height: 34px!important;padding:2px!important;}
#field_controls{display:none;} <this line just removes that help button it annoyed me since it's useless after so many years on this site
Even Bigger Field Buttons
#field_nav>button:nth-last-child(2), #field_nav>button:nth-last-child(3) {
padding:31px!important;
width:140px!important;}
#field_nav>button:nth-last-child(1) {height: 34px!important;padding:2px!important;}
#field_controls{display:none;}
Bigger Supplier Buttons
#orderlist>.panel>div>p>button:nth-last-child(2){
background-color: #76A3F8!important;
font-weight:bold!important;
padding:24px!important;}
#orderlist>.panel>div>p>button:nth-last-child(1){
padding:4px!important;}
Shadow Around Header Avatar
It just adds shadow around avatar, nothing special.
#head-avatar>.profilepic{
-webkit-box-shadow: 0px 0px 6px 1px rgba(154,154,154,1);
-moz-box-shadow: 0px 0px 6px 1px rgba(154,154,154,1);
box-shadow: 0px 0px 6px 1px rgba(154,154,154,1);}
#head-avatar>.tooltip_content{
background:#aec9ed;
border-radius:0px!important;
border:1px solid grey;}
Offering 20.000
for 6IV Ditto
Disclaimer: I'm not native English speaker. Please read my posts and messages in calm and friendly tone, and do ask for further clarification in case of confusion. Thank you! ~
Rebecca: thanks for sharing! I ❤️ The big button for watering. On my iPad, whenever I would not hit the small “target”exactly right, the whole page would magnify and start shifting around when I tried to continue, losing my place in the process.
On Aug 3 2018 11:27 AM CDT per TeeTurtle.com
Permission granted to use avatar image
●○
Trading CR/GP for ZC ❗️ Send PM
Forum Games
○●
flybynyx: I'm so happy to hear you find my code useful!
And I jut finished this code because I remembered I had it on my tasklist but never got to it. Basically, instead of hitting adopt, I tend to hit release button on mobile in Daycare so this makes button bigger.
You can of course change sizes to your liking but I found this to work for me.
#dcegglist>li{
border-radius: 0px!important;}
#dcegglist>li>button{
background-color:#76A3F8 !important;
font-weight: bold;
height:45px;}
#dceggs>p>button{
font-weight: bold;
height:25px;}
I'll be working on making Fields next/previous buttons bigger. If someone did this already, please share.
Daycare Adop Button
#dcegglist>li{
border-radius: 0px!important;}
#dcegglist>li>button{
background-color:#76A3F8 !important;
font-weight: bold;
height:45px;}
#dceggs>p>button{
font-weight: bold;
height:25px;}
omg rebecca you are amazeballs.
i really love the adop button. made a few tired mistakes with accidently releasing a bunch of my ekans eggs in previous hunt.
so that one is gonna be a lovely charm.
i know i shouldn't but rebecca is it possible if i can ask for a code, for a big next button sign, so that i can click more officient on my tablet (ipad) ?
its kinda small :) so i would love to have a big boy on the side, just ready to be clicked upon. never really use previous, as i am 100 % sure i clikc all in their fields ^^
again tahnk you for your small experiments and contributions.
profile picture made by the lovely Terabbit~
Albino colors belong to pfq~
This is what I use for Field Clicking. Moves all Pokemon to under the Next Button and creates a Padding large enough to cover the Next Button. Just place your finger on top of it and click away
The bottom two lines are just me changing the preferred and hated berry colors cause I couldn't stand them flashing when doing others unsorted Fields.
Also note that dad never quite managed to make this work with Mobile.
Code
#field_field>div.field>.fieldmon>img{opacity: 1;} #fs_pokemon>.field>.fieldmon>img{opacity: 1;}
/* stacks */
#field_field[data-mode="public"]>div.field>.fieldmon {padding:110px 25px 110px 25px!important; margin-top:-110px!important; margin-left:-25px!important; left:90%!important;top:0%!important; animation: none; transform:translate(0%)!important; max-height: 50px;}
#field_field[data-mode="public"]>div.field>.fieldmon>img {padding:110px 25px 110px 25px!important; margin-top:-110px!important; margin-left:-25px!important; animation: none; transform:translate(0%)!important; background-color: lightgoldenrodyellow; max-height: 50px;}
.cormyr, .goaway {background-color: lightgoldenrodyellow; max-height: 50px;}
.nothungry {background-color: lightgoldenrodyellow; display: none; max-height: 50px;}
Aliit Ori'shya Tal'din || Tai'shar Manetheren!
SamanthaNBishop on Archive of our Own and Wattpad!
Gaming || Writing || Pokemon Fan Fic: Angel of the Shadows
Avatar of Trainer, Alexandria "Angel" Flamel, by Me
Banner for me by Furret on PokeHeroes. Do not use without permission.
as interesting as it sounds, i alas click in a way other fashion.
i prefer my fields to be centerlined, so that i can use 4-5 fingers (3 on left, 2 on right) and then quickly go through in a few seconds, to then quickly click the next button , and prefered berry if needed. it goes pretty fast that way for me.
sadly the next button to proceed is placed awkwardly in proportion to other buttons, and thus i try to hit the next button many times in my speed, to sadly never hit it, because its really small on ipad.
i was thinking about adjusting it so as screen, it was pulled down to align with berries + it's size alone adds up to the berry bars size.
here is the example i though of.
edit: but yours is really smart too, i do like it, but not what i sadly look for :)
Sanae Kochiya: I'm so happy you like my little code! :D
I'm actually working on it but so far it's not going well as, like I said, I'm self taught and lack experience and knowledge. I can't promise but I'll do my best to make it work though I'll most likely have to make both buttons bigger.
However, I think that I can't physically move buttons next to the berries as that requires more background coding which I don't have access to. If you do know someone who is more knowledgeable in coding, you should ask them for help.
I'll post update if I succeeded or not. Hopefully I will. ^^;
EDIT: Here is the code! Let me know how it works.
To change button colours, change the #000000 to one you like. Keep in mind it'll make all buttons same colour. If you want every button to be different colour, let me know and I'll make a code for it.
If you don't want to change colour, just remove background-color:#000000!important;
You won't be able to make buttons bigger than this. 11px padding in the first code is maximum before breaking.
#field_nav>button{
padding:10px!important;
background-color:#000000!important;}
#field_nav>button:nth-last-child(1) {height: 34px!important;padding:2px!important;}
#field_controls{display:none;} <this line just removes that help button it annoyed me since it's useless after so many years on this site
Bigger Field Buttons
To change button colours, change the #000000 to one you like. Keep in mind it'll make all buttons same colour. If you want every button to be different colour, let me know and I'll make a code for it.
If you don't want to change colour, just remove background-color:#000000!important;
You won't be able to make buttons bigger than this. 11px padding in the first code is maximum before breaking.
#field_nav>button{
padding:10px!important;
background-color:#000000!important;}
#field_nav>button:nth-last-child(1) {height: 34px!important;padding:2px!important;}
#field_controls{display:none;} <this line just removes that help button it annoyed me since it's useless after so many years on this site
its perfect, omg i love it <3
Since one user contacted me that the code didn't work for them, I updated it and added an option to change colours. To anyone using my codes, let me know how it works and if there is anything you want to add or change.
Cannot post: Please log in to post