Following. I've seen some others do this probably in the css, but an explanation would be priceless.
1 Like
You can shrink the hubitat icons till they are invisible and then use your own icons as the background image for the tile. Crude but it works.
1 Like
I use base-64 PNGs in my apps/drivers to keep their images local. I’ll test if this works with dashboards tomorrow 
The good news is that it doesn’t seem like the dashboards are parsing out base-64 images, and I think I can nail down some CSS once I get back on my laptop.
1 Like
I think the OP was referring to the action icons Adam
The icons in the center of each tile—correct? I was just testing to see if I could load a completely local element into the dashboard via base-64 The goal being to use that as the icon. I’ll figure out the styling for that in a bit.
2 Likes
It can be done! First image is the CSS to disable the font icon and inject a background PNG in lieu of it (which I've removed in the image because it can't fit all of the required text). The second image is of the classic Garfield Thanksgiving Special icon I injected with base 64 encoding. This is sloppy CSS. I know there's another way to do this, but I just wanted to do a proof-of-concept, more than anything.
This is 100% local, so you'll never need to worry about icons going missing or anything.
2 Likes
Looks great! Can you make the icon dynamic?
Also as I have no clue how/where the CSS code is to be inserted. The documentation appears to be sparse to non existent as to how to implement custom CSS in the dashboard as far as I can tell from searching.
TBH user icons should really be an included feature - the average user is never going to be able to do this.
2 Likes
Sure! Just use the different class selector for each of the active icons.
CSS is under the advanced settings tab. I’d love to see all of this built out in the dashboard, but for now, if none of the built-in icons will work, this will have to do.
Thanks, unfortunately there's nothing in that tab when I looked so no examples as to what to do. Any chance you could provide the sample xml for the icon you posted to see how it hangs together?
I was really happy to find this and wanted to post a little more detail how to get across the finish line. Here is some sample code you can use. Just add this to the CSS tab in the advanced section. You just put regular css selectors in there. These are for a bulb template on and off states. You'll have to base64 encode your own images and embed them. You can also target specific tiles, or all of the bulb templates with teh right combination of CSS selectors.
/* Bulb On Template */
.tile.bulb .tile-primary.on i {
text-shadow: none !important;
color: rgba(0, 0, 0, 0) !important;
background-image: url([base 64 image here]);
}
/* Bulb Off Template */
.tile.bulb .tile-primary.off i {
text-shadow: none !important;
color: rgba(0, 0, 0, 0) !important;
background-image: url([base 64 image here]);
}
2 Likes
Thanks for posting this. The 2 styles are identical though, is the second one meant to be .tile-primary.off?
You code will set it as a background but how do you set it as the icon?
@adamkempenich how did you get it to replace the tile icon with the base64 image? Also being that the base 64 coding is lengthy does this break cloud dashboard access (character limitation).
Is there any other method to using custom icon in HE that any has found?
What it is doing is making the text of it icon transparent then setting the background image for the icon to the base64 encoded image. You could include an image URL and it would probably work. You just want to host the images somewhere to make sure they always work. Base64 encoding then embeds the images into the code so the links will never break.
I can’t speak to cloud access issues.
I’ve been working on a phone specific layout, you can see my custom on/off light icons here. I haven’t gotten to the tiles on the left yet.
1 Like
I got it to work using
#tile-0 .tile-primary i.material-icons:before {content:url ('data:image/svg+xml;base64, BASE64 DATA HERE )
}
but I think the base64 data is going to be too large for cloud access. Would like to point it out to a hosted url, but I cannot figure that one out.... yet.
EDIT: OK got it. This is setup using file manager, change url as needed for cloud access.
#tile-0 .tile-primary i.material-icons:before{
content: "";
background-image:url("http://10.13.9.12/local/gandbsmbin-01.svg");
background-size: 100% 100%;
display: inline-block;
/*size of your image*/
height: 52px;
width:52px;
/*if you want to change the position you can use margins or:*/
position:relative;
top:5px;
}
2 Likes
Where did you get/find those thin tile for the dimmers? I love that layout and would love to use those.
I made them. If you open your dashboard from the hubitat, click on the gear on the top right, choose advanced on the top right of the popup, then CSS near the top left, you can customize the look of the dashboard which is all just HTML & CSS. If you're not familiar with CSS and web design, it may be a little daunting. Here is everything I have in mine. I've moved so I'll need to build a whole new dashboard, but I am fond of the thin sliders on a phone screen.
.tile.bulb {
overflow: visible !important;
font-weight: bold !important;
background-color: rgba(128, 128, 128, 0.5) !important;
}
.tile.bulb .tile-primary {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.tile.bulb .tile-primary i {
font-size: 25px !important;
position: absolute;
left: 10px;
top: 8px;
color: rgba(0, 0, 0, 0) !important;
text-shadow:none;
background-repeat: none;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAxQAAAMUBHc26qAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALUSURBVEiJpVRNSFRRFP7OeW8czVpkCoHzxjs/YgVCi9kUtHDRooiIduWyTYsgIs0WrqIgA9sEQYsMImlnIBXUIqNNtTASBZ86M2/GyQgLkyxS57132ow183xvZqADd/Od73zfPffce0lEUG90RuMnAWBhMTtebw37CnV2hvdHInu8uGjSIpq0eHEiolQqFarbwLbt3UU99LSHenSvR2lVRLxDDf9YWTlUt4FlWV8gePJJ5frLcT0cHtPD4bEK8Wj8CCBt89nsm7oNAMBYVLchslyOmaa5ZprmWjmmMbo2HedikA5tDTmZTBrpdLrgR0oqdRjAMQh1C4NJaJoZL4J2Xa71zyAWGwKwT2wezBQy0wDQ3t6+oykUugmhBmY8cJhNbCLKmrPTBZ8jEbvxd3PfzPLMTwBIGIlu0txrJMgt5K1LFUeUtqwBBxhg3e3dwpr0hhEQPU/nrfPzlvWeN3gX6e4FAQ0TYArJ+Hrzr9G/W2f3jMt0dUu8ogNvJJTqJUClc7kb286ViBNR1QfgAEgWCPi+kMvd9dMJHDKBeo18bMgvJyJuOm/dAmODRZsS8NkgHV+D0v2nCZmwgwoBAI52R8g9DmDdMIymug1yKtcKYLWqOIBMITMrhDVAvjZr2l5fkoj4rkSHehWU8+G+RWme3lVtBitdhtFeq4sSZ1UCbkuwAcl1h/X7RKQFc0izWR+BuINBnECDecv6CNCzuFL9QZykUleI5GU6n58M4lQ9WwAU71DvIpFIizcXjUZ3JzrUBwBcTSOwg5K5MORhoxY67c3pzKcI8khE3Goa3v9+WxDRpAu5nIzFvlXggqMgulervqaB6PqsbNozRJSqwEVMhzD13wbkOAeJcQKuZCtwomSI8BqA75ddv0GxmAHrn0HwvFQpUNHO1KqvOmQAmCsUlsB4DCrjEpiERucKhaVa9TU7AAAItQHSLEARAEgQclla6yn9A4SeiBY2z7y/AAAAAElFTkSuQmCC')
}
.tile.bulb .tile-primary.on i {
background-repeat: none;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAMuSURBVEiJpZNdaFNnGMf/z3u+kub0w1SS1drmnBzKEDu8qUP3cTsQxJvhmLIN5sWm9KLrQNHinehA0THGFAaOwRjuajgpKH6sUHFzrhfdWKGQJllqmsR0TbcmaZvmnPPuQgNNek5PxAfei/f5+P/e933ehzjnaNaigegBAEiUEzearWFOzn7ql/UtekejnxMPcuLBRj8R0QANSE0DVtXVDqriJyISGhnPVp1pAe1iQS3sbRowU5zJE3BdD+jDdckyu674lR/X+6Jt0TcZ0JUoJsadtMA5d1wAhGhL5IhbvLb0Fv0jQzVCbnGqNdloN/ri/8VjTofo64i+Feq0DhHR7meH+j2/IFyL/Zu47ZRvtBi98eX4LIB1AFX/nAM7ibOReDk+AQBG0GgPtdvfDeyyXv/wXTOoR2xknxBWVghXr4mFyb/ofqHof396frr4VMN4hcM+S0A8XkoOb3iiiBrZoQW0z2r7PVrvo9tXtpl8Ksz5VJhnx17iI+9t52/v6eVfn+rmo19sM1/TI7/W8rWAdk5v1V92fKJGezWiDx3cXz1zfNBsbYzZNvDtDyKmZxhaVV4avSON/JZKfOmk4/iLAMAn24OfHt0oDgCMAUcOm1AUjr0DtipJ9pCbjiOgh3r8qgpVaJyCBvvgHRNjDxhaAzzwXIMm+sRwaOvm4gBgRDj8fiAcAl8ILHQ2DUiuJP9OPYbpBWAMOP1JFekMVZKlZK5pAABU1iiTmycvBnLzhEoFc66HcAtk83T02Ak5b9nu4pYNDJ6U87kn/OPnBiRLycm5LJ3/6qq05JZz+RuxlM7hYqyYmnLLcZ2Dmr1haKnR7yu9HW31eUtFwr7DytwviVQP30TE9QY1WzPpyq17bEPDb/7MTLOKy5uJA4DoBSgs8vF794XVYBDqev/dcaGSX6QHXvWeAJ9P/fPRZPncxB+krPfbnFWYxCZfGFAulfvD3eGhru6uuv+UTWfYUiY/BuDhCwEssmYty5rJpOfqZtu2+T8ixLRXvWeTZ8uzmeJi8YLABFGWZFmWZFlgglhaKl2KLcc8AZ43AADFr+iCJKiy/LQNZnUNik/Rmqn9H2xOjXeTdp54AAAAAElFTkSuQmCC')
}
.tile.bulb .dimmer {
width: 40%;
position: absolute;
right: 25px;
top: 2px;
}
.tile.bulb > .tile-title {
width: 45%;
margin-left: 35px;
text-align: left;
bottom: 8px;
}
.tile.bulb .dimLevel {
position: absolute !important;
right: -2px !important;
top: 10px !important;
}
3 Likes
That is awesome! Thank you so much for sharing.
wow...... Should you change anything in the css code? I didn't work for me..
