That's just one place it shines 
I cannot even get all the options in one screen shot but you get the idea.
You can do it via CSS manually to but why when smartly makes it so easy?
1 Like
I'm not ruling out using Smartly some time, but I'd really love to learn the technique of doing it myself in the CSS, if you are able to tell me how? Just that one tweak.
You can also do it via templates in HE
If we must do it via CSS it would look like....
#tile-6 .tile-primary.off i.material-icons:after {content:"\$FD85";font-family:"Material Design Icons" !important;visibility:hidden}
#tile-6 .tile-primary.off i.material-icons:before{content:"\FD85";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}
#tile-6 .tile-primary.on i.material-icons:after{content:"\$FB2F";font-family:"Material Design Icons" !important;visibility:hidden}
#tile-6 .tile-primary.on i.material-icons:before{content:"\FB2F";font-family:"Material Design Icons" !important;left:0;position:absolute;right:0;visibility:visible}
The codes listed are for the smartly font icons you would replace the content with what you were trying to use.
Save yourself a lot of trouble, copy your entire JSON (Advanced > Layout) and paste into a new dashboard to create a duplicate. Then run that dup through smartly and check it out without messing up your 'production dash'. You'll be glad you did.
If you want to learn CSS read this thread. Good stuff in there.
1 Like
Ok let me try that and get back to you, thanks. I was actually using the switch template as I mainly wanted to get rid of the dimmer bar, as the device is actually a normal smartplug with a lamp plugged in (non-smart bulb) The switch template actually suits the device capabilities better
you can do the same thing for switches in templates
1 Like
For self hosted icons check out this post. but again it won't work via cloud when you host them internally.
Just adding some notes- the 'custom icon' functionality in HE itself only allows for a single stock HE icon (no different icons per state, only a few hundred stock icons to pick from), also doesn't allow for changing icons of music, video tiles or adding icons to attribute tiles.
smartly does though! a clarification that's worth making is that smartly takes the dashboard json, gives you an interface to make these CSS changes, generates CSS for those changes and then spits it back out. there is nothing ultimately special about the CSS it generates, so it really is a good learning tool.
I agree with @techmedx, making a copy of your dashboard and then running it through smartly is a great way to learn how the CSS works.
as far as it 'running on HE' or not, the fonts are on AWS and the themes use a background image hosted on AWS. to host those 2 things locally is simple, but as tech mentioned, by doing that, the fonts and image won't load when viewing via cloud.
I do appreciate the advice but really all I want to do is swap between the Hubitat inbuilt he-bulb_on and he-bulb_off icons as the switch is turned on and off. I am afraid for the moment, using another entire service feels over complicated. Why would I use other images, either locally or hosted elsewhere when the ones I want are already here? If what you're saying is it's not possible to swap between two HE existing images then I will keep it to just the one bulb image and make do with the tile changing colour like it does.
Anyway the CSS example did work, so that was nice to learn that. Not the images I wanted but anyway I have the general idea now 
1 Like
It's possible to set an On and Off icon through Settings > Templates > 'Switch' or 'Bulb' or 'Dimmer', but the icons you choose for On and Off state in that template will affect every tile of that type. To change the icon for a specific tile only within the HE interface, that's where the 'Custom Icon' feature is limited to just a single icon, no On and Off states. This is done when editing the tile itself.
If you haven't changed the icons within the 'dimmer' template and you want to change a specific switch tile to use a bulb icon using CSS, you can use the following CSS. Change '99' to the tile number you're targeting.
#tile-99 .he-switch_2:before {
content: "\ebe4"
}
#tile-99 .he-switch_2_flipped:before {
content: "\ebec"
}
I see this notation... how does one find out which code to use for which icon?
You'd use your browser 'inspector' to see what code HE is currently using for an icon. I think there may be a thread for that, @techmedx might know. Once you get comfortable doing that, you could potentially open up the icon chooser in HE dashboard, search for an icon you like them inspect it to find the code.
I already tried that with the custom icon picker. Inspector gave me the names of the icons I chose not a 4-character code - I assume that's a hex number?
I'd have to see a screenshot it what you're seeing.
The \xxxxx codes are Unicode.
1 Like
eh, a select few of them are word-based "codes" but most every one will be Unicode. that screenshot is of the classes, not the css itself.
Ok I'll play around with it a bit more and see what happens. I think I've taken up enough of everyone's time for now
1 Like
Yeah you interfering with my vital Tropico time!! 
El Presidente all the way!
1 Like
Well the upshot is that I couldn't find a way to reference the inbuilt icons in CSS, so I have decided to edit the Relay template ( which I am highly unlikely to need to use for itself) for use as a non-dimming non-colour changing light. Seems to work ok.
2 Likes
Good thinking, simple and effective
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
