Icon size-dashboard

Does anyone know if you can change the icon size of just one of the tiles on the dashboard? I would like for the up, and down buttons to be larger on my thermostat without it making my other icons any larger.

Yes you CAN do this, but you have to do it via custom CSS

Here is a sample using the inspect in chrome. I do not know the exact CSS path, or I would post it for you. I use smartly so my Thermostat is fixed via it.

and here is what I use to make my Sonos buttons bigger.

}
#tile-17 .material-icons {
   position: relative;
    top: -7px;
   font-size: 43px !important;
}
#tile-17 .tile-primary > div.dimmer > div.trackDescription {
 position: relative;  
 top: 15px !important;
}
#tile-17 .tile-primary > div.music-player.playing {
 position: relative;  
 top: 3px !important;
}

YMMV these are just examples of what works for me.

Hopefully this get you pointing in the right direction.

1 Like

How can I revert my dashboard back to default?

That's a difficult question to answer not knowing where you stand. Since a "default" dashboard is technically a blank black screen, creating a new one is the only "reset to default" option available. I can offer some suggestions of now or in the future.

  1. Backup your JSON before making changes (copy/paste everything in the JSON windows to a Notepad doc and save it somewhere) if something gets messed up in HE, delete the current HE JSON and paste the backed up Notepad JSON into HE.

  2. Delete any custom CSS code to revert any changes made.

  3. Create a new dashboard and add the device back in (make lots of backups. see step 1)

@RhettTitus I decided to play with some today and figured it out. Copy the code to below into the CSS section of your dahsboard.

pl-3 is for the up arrow and pr-3 is for the down arrow. Enjoy!

.thermostat .pl-3 {
  font-size: 55px !important
}

.thermostat .pr-3 {
  font-size: 55px !important
}
1 Like