Yeah, if you weren't part of the object-orientated programming group, it may be a stretch.... But in time you can acquire and use the tools it provides.... If only via the CSS Editor.... 
My last language, Java is OO, But, I moved into management before CSS came into common usage. Before that FORTRAN IV, FORTRAN 77, C, Assembly. Yeah, I'm FTN4 years old.
@william2 came to the rescue @wiegout for hiding the tile title on your variable tile.
You can take the CSS from William's post and replace the tile id with your own. You can add this CSS either directly into the CSS for the dashboard, through the Settings dialog, or you can capture it in the CSS Editor I built, in the Custom CSS section for the tile.
1 Like
That got rid of the title. It's magic. Thanks everyone.
2 Likes
Thanks a lot @sburke781: this little editor is simply great, it's very useful to people like me who don't master CSS!
May i make a suggestion? It would be great if we could easily change the default icons per state of a template by pointing to icons or PNG files maintained in the File Manager.
Is it possible to implement this functionality in Simple CSS Editor?
1 Like
I'd imagine most things would be possible. Have you been able to do it already through CSS?
If so, you could include it in the custom CSS for a tile and then apply the formatting for that tile to other similar tiles, but it would mean other formatting would also be applied.
I would need to think through a little more about how best to handle smaller changes being applied in bulk like this.... Rather than just applying all the settings for one tile to another. But it should be doable... Time is also another factor...
1 Like
Yes, I was able to do it, but to replace a single icon for both states of the device.
But I saw at this post that is possible to adapt the CSS to display different icons per device states. I really tried to implement it, but wasn't able to make it work, I just messed the CSS - happily I made a security copy before trying...
The solution used there points to an image externally hosted, but I think that would be easier to use a locally stored image.
I'll take a look and see what I can work out. Can't promise anything though...
1 Like
Thanks in advance, no matter the result!
1 Like
Just an FYI that I haven't forgotten about this "project"... I do plan / want to get back to it soon at some point...
Templates and more generally easier dashboard editing have been a popular topic at times recently, aside from the obvious excitement about the C-8. There is also interest from users looking for dashboarding options, both built-in and third-party, with all is encouraging, in that there are people interested in serving up their smart home in some form for people to use, providing good examples for me to steal use as a starting point for new features in this editor
On that note, any requests are welcome if there is something cool you have seen here on the Community or that would make your use of HE dashboards easier.
I do also plan to rename this Enhanced HE Dashboard Editor.... But that may be a way off....
2 Likes
I think I have read through all the info about simple css but dont see anything. I installed and did some testing with a sample dashboard and all good. Then I continued and tried to improve one of my existing dashboards and it didnt work. After more testing and completely removing and reinstalling it I got it working again but after a time it quit again. So I think to ask these questions: If being used with multiple dashboards is a separate simple css device with different names needed for each dashboard or can the same be used on multiple? I use the same dashboard on multiple tablets simultaneously and was trying to edit while another was open. Is this an issue as I now assume they all use the same files saved on the Hubitat? And if it is a problem is it only while ccreating/editing with simple css or also with multiple copies of the same dashboard in use simultaneously that has simple css improvements?
Hi @buchanan.larry,
Glad to hear you have picked up this tool, but sorry that it has been a bumpy start. Hopefully we can sort out your issues relatively quickly.
You only need the one virtual device setup, even when using it across multiple dashboards. When the editor is launched it reads in the relevant files based on the name of the dashboard you are editing, which is why only one device is needed. You can even remove it from the dashboard completely once you have finished formatting the dashboard, it is only required to launch the editor on screen, not when viewing and using the dashboard day-to-day.
This should not be a problem, but I expect you will need to refresh the dashboard on each device once you have finished editing it, either by clicking the green tick or closing and re-opening the dashboard / app being used on each device. I was doing exactly this some time ago now, editing a dashboard on my laptop and then seeing how it displayed on my tablet, refreshing the tablet each time.
I will need a little more information about what you are experiencing when you say it stops working. Are your changes no longer taking effect when you view the dashboard, or updates you have made not appearing? Or is it when opening the editor you are having issues? Or could it be that you just needed to refresh the other instances of the dashboard on other devices?
One thing to note is that the typical use case I have targeted is storing the CSS in a local file on the HE hub. If you are viewing a cloud version of the dashboard at any stage, the import of the file using a local URL will not work. For these situations I would recommend either using a VPN to view the local dashboard, or, if that is not an option, copying and pasting the CSS from the file into the CSS section of the Advanced dashboard settings (in place of the file import). The copy-paste option is not great, and would really only suit occasional use of the editor.
I removed and reinstalled completely and started testing again today I could not experience the intermittent results I had yesterday. I am doing everything completely local so that didnt enter into my situation. At one point today it didnt seem to be right, but when I did something else and refreshed a second time it was OK, so maybe it was caching something occassionaly.
Since I dont really understand or wish to learn much about css this is a great tool. Thanks and thanks for getting back to me so quickly.
That's good to hear @buchanan.larry. Yes, it may just have been a caching issue, from what you have described. If you do continue to see intermittent issues, let me know and I can take a look.
Hi @marcusvrsilva ,
I played around with this a little bit this morning. Using the post with a few tweaks I was able to use some local SVG files on my HE hub to display different images for a virtual switch tile. I added the no-repeat option, position and size. I would have liked to make it a little bigger, but would need to play with it some more to see what I could do there.
I have not added this to the editor yet, but will look at including it once I get around to adding some state-based options, but I can't say when that may happen.
You can always include the CSS in the Custom CSS text box for the tile in the Simple CSS Editor pop-up. Adding it in my editor will mean to it is kept alongside other CSS generated by the editor, as well as it being applied as part of any template re-use across multiple tiles within the Simple CSS Editor.
/* Switch On Template */
.tile.switch .tile-primary.on i {
text-shadow: none !important;
color: rgba(0, 0, 0, 0) !important;
background-image: url("http://herules01.local/local/switch_on.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
/* Switch Off Template */
.tile.switch .tile-primary.off i {
text-shadow: none !important;
color: rgba(0, 0, 0, 0) !important;
background-image: url("http://herules01.local/local/switch_off.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
1 Like
@sburke781, you're the man!
Many thanks for your efforts. I know that Hubitat is focused on automation, but developers could look more carefully at dashboards.
Even though automations minimize the need for direct control of devices, sometimes this is necessary. At this point, the use of dashboards is mandatory. And why not make them more elegant, pleasant?
Your work shows that this is possible, so the question: why doesn't Hubitat's development team focus on this aspect?
Just a digression...
2 Likes
After I add the Dashboard Tile for the Virtual Device, I get:
Warning: The CSS Settings JSON file was not found, which per the steps above, is sooner than getting it after I open the editor, and it continues to appear every time I open this dashboard...
I tried to edit the Humidity tile by selecting "Secondary" as the default in the text settings, but nothing happens and I still get the error message when I open the dashboard.
I am simply trying to get a combined Temperature/Humidity tile, by sliding the humidity text UP, and the temperature text DOWN, and putting the tiles on top of each other. Is this possible? If so, is there place that explains how to do this?
Thanks for raising this @calinatl , I will try and take a look at the error message later today.
Re your temp/humidity setup, it may be easier to use two attribute tiles, selecting temperature on one and humidity on the other, then doing what you planned to make them appear together. Alternatively you could look at some of the tile apps like tile builder, etc.
Thank you. Yes, this was my plan. However, the temp and humidity appears in the same location on the default tiles. So I thought I could use this driver to move the humidity info up and the temp info down within each respective tile, then put them on top of one another. There is ample screen real estate for this, and combining these into one tile makes much more for sense to me. I'm just flabbergasted that the combined info is not a default tile...
I have tested the editor with a new dashboard and I do also see the warning show up for the settings file earlier than I originally noted in the installation instructions, but it does not seem to affect the use of the editor. I have moved this note and adjusted the explanation. Thanks for spotting this.
Unfortunately this is not currently available, aside from possible options to include hand-written CSS, which could also be done through the regular CSS section of the Advanced dashboard settings, though I would need to lookup / investigate how best to achieve this. I'll put a few more comments in your discussion with Velvetfoot on another topic.
Given the prevalence of combined temperature / humidity sensors, it is surprising this is not available.
