Single post in Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides > Site Skins: How-To, and Helpful CSS >
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! ~