Page 1 of 1

Blocks - increase width for icon

Posted: Wednesday 10 February 2021 12:07
by DeVille70
In blocks, is there any way i can increase the width set aside for the icon? In understand that I can change the size of the icons as well as font size, but with the sizes I would like to use, the icon and texts of title and data comes on top of each other. Any way I can fix that, please?

Re: Blocks - increase width for icon

Posted: Wednesday 10 February 2021 13:47
by Lokonli
It depends on the block type. For Domoticz devices you can do it as follows:

1)
Add a custom class to the block, like:

Code: Select all

blocks[123] = {
  addClass: 'bigicon',
  ...
}
2) Define the css settings in custom.css:

Code: Select all

.mh.bigicon {
  height: 140px !important
}

.mh.bigicon .col-icon {
  width: 100px !important;
}

.mh.bigicon .col-icon .icon{
  font-size: 80px !important;
}

.mh.bigicon .col-data {
  width: calc(100% - 100px) !important;
}

.mh.bigicon img.icon{
  width: 80px !important;
  max-width: 80px !important;
}
This will work for font-awesome icons as well as images as icon.

Re: Blocks - increase width for icon

Posted: Wednesday 10 February 2021 15:36
by DeVille70
That gave me a few options to play around with. Thank you very much.