Version 2.0.9 added custom CSS support to the dashboard, but I have seen no threads on this, or how to even implement its use.
Any ideas how to use it? Docs or the like. Would we use a code inspector such as that found in chrome and override class definitions, etc.
Has anyone used this and if so, how did you implement it?
Scott
Was just playing with this. You can insert your own css and when you save it, it is inserted and works. Something like the CSS below gets rid of the god awful text shadows but upon refresh or any page change the custom CSS does not appear to get reinserted. Looking at dev tools and it doesn't appear that precedence is wrong, the custom CSS is just not even inserted.
.tile { text-shadow: none; }
Either there is some restrictions not disclosed or it's just not working yet.
I can confirm the same issue. When I create some custom css, it works upon the first save. However, every subsequent visit to the Dashboard with the custom css, it fails to inject itself.
@patrick, is there any docs or tips for custom css in the dashboards?
Confirmed a bug for loading custom css on certain browser. Will be fixed next release.
This is something people asked for, so have to look to those that asked for it to get any tips or information on adding custom css to dashboard.
If I had CSS that I wanted in dashboard, I would put it in dashboard. But if others have overrides or any css they want to share to improve dashboard, happy to look at it.
Thanks for the info.
@patrick any update on this? There's been a release since your comment, but I'm not seeing this fixed in 2.1.0.123. I tried adding custom css in chrome, firefox, and silk (amazon webkit) with no success.
If I open the options and click "Save CSS", the styles are applied, but otherwise my custom styles don't appear (even as overridden).
Personally, I'm trying to get rid of the text shadow.
.tile-primary, .tile-contents, .tile-title, .material-icons {
text-shadow: none !important;
}
Sometimes bugs take longer to fix than the 2 week release cycle we are on. Some elements on the page are working and some are not. Unfortunately to fix this it will take additional time to unscope a bunch of css specific to tiles.
Appreciate your patience, but this one is going to take awhile to resolve fully and may not make it into the next release as well.
It seems that this bug was fixed in 2.1.0 or 2.1.1. I don't see any mention in the release notes, but it seems to work now. Thanks!
Release Notes:
2.1.0: Hub Update 2.1.0
2.1.1: Hub Update 2.1.1
For those developer types I am sure CSS makes total sense for detailed customization of tiles in the dashboard, but this can’t be the long term solution for the average HE user unless HE is intended to be a developer hobbyist platform only.
If you want universal market appeal for your hub, you need to make many enhancements to the dashboard to make it possible to do many complex customizations on individual tiles through interface only configuration and keep the code in the background. You can always support the powerful coding options too for those actually LIKE coding, but your average mass market will never go this way, and I am sure that Hubitat owners want to appeal to more than the developer hobbyist.
If processor power on the hub is the issue for a fancy WYSIWYG tile development environment then it would seem to me to be ok to build the dashboard configuration tool in the cloud and simply save the templates and CSS and other code to the Hubitat when completed.
LJ
I cant tell you how happy this makes me. Seriously this was my biggest complaint(i know its minimal), and now its beutifully clean!
so much easier to read things without the shadow! I don't understand why they made that a default.
Is there a way to use a website as a dashboard background?
How can I space text in a text tile?
Want " Hi [space here] Low " NOT "Hi Low"
Thanks
Download the Hubitat app
