Hubitat Dashboard customization

I've tried to get my head around the inbuilt Hubitat Dashboard a few times but always give up as I can't get it to look the way I want and I don't find it user friendly.

That rules out SharpTools which although web/cloud based does pretty much everything you could wish for. Also Josh and James are always on the ball and ultra helpful from a support perspective.

I thought similar but the 'Hubitat Dashboard for Android' by Joe Page is superb, constantly being improved and tweaked and is really user friendly, easy to configure and get the way want and local. The newer Hubivue looks promising and has an advantage that it will work across multiple platforms - Android, Fire OS, iOS, Windows, Mac and Web.

All doable in Hubitat Dashboard for Android

Also very easy in Hubitat Dashboard for Android.

1 Like

There are ways to customize lots of things with CSS, and you may have noticed that Dashboard lets you specific custom CSS.

Is this an easy way to do what you want? Probably not. But lots of users have figured out creative things they can do it with it. Most browsers have a "developer inspector" tool that should be helpful for figuring out the right CSS selectors to use, but you'll also, of course, need familiarity with CSS itself.

I will check this app.
I hope any clouds or accounts are not involved.
Otherwise this is no go.

I saw a lot of CSS related topics.
Unfortunately I have no idea what it is but maybe it is time to learn something new.

No account needed. Free on App Store or download and update directly from app. Everything is controlled locally. Of course you can add elements to the dashboard that do use an internet connection if you wish - such as web tiles for weather or links to YouTube etc. If you donโ€™t want to be able to use your dashboards while away from home using the internet you would just setup the maker api set to local only.

Might take a look at:

1 Like

You can do everything you are after with my css editor, without needing to write the css yourself. One thing I do need to work on, however, which was a problem for me recently is that text overrides are also applied when using one tile as the template for other tikes, like you want to do here.

Let me see if I can update this in some way over the weekend.

1 Like

@johnwill1 @bertabcd1234 @thebearmay @sburke781

Very BIG Thanks to all of you for the quick response and very useful suggestion.
Now I have to think a bit which pass to take.

The reason for this project is to create something very simple and
easy to use for my wife on her Android Tablet.
Up to now she had a Remote with 4 buttons.
For her multi-function for the Buttons is absolutely no-go.
I had to program each possible button action (press, double-click
and hold) the same way, so any possible button usage will do the same job.
Right now I need to add 2 more buttons but could not find a suitable remote.
Hubitat Dashboard is a solution for the problem but "as is" does not look right.

2 Likes

No cloud...no account. It's all direct to your Hubitat using the Maker API app.

I did read a lot about Dashboard Tiles Customization.
I guess, I will try CSS option and will try to use CSS Editor because this will
be just one place for all customization. And no any apps is needed on the
phones and/or tablets.
But one thing I still cannot understand clearly: How to replace a default
Icon with Custom Icon?
There are many tricks how to use a custom background images.
But is it possible to change just an Icon itself?

I'm sure it is, just not directly through my editor. Are you referring to an icon you provide yourself, or would a different icon available in HE be enough? You can choose different icons typically through the tile edit dialog.

Could be both but my preference will be to use something existing.

I did not figure out how to do this.
Could please provide me an example or just a link?

Here is my creation for my wife (this is not yet customized version):

I would like to replace all these standard Button Icons with the Icon
corresponding to the label and keep label visible. For instance
Icon for the Y Start Coffee should be cup of coffee, etc.
From the labels I want to remove all prefixes (Y, Bd).
I guess, I know how to do this.
And it will be nice to combine Door Open/Close Control and
Door Status tiles into one single tile. The same will be nice for the
Ceiling Lights Dimer and Switch. And I guess, I know how to play
with colors.

If you want to change to an included icon, there is a checkbox (labelled Custom Icon) when you go to the tile edit screen that allows you to select them.

1 Like

This worked just fine. Thank you.
Is it any way to add custom Icon collection?

Might be able to set them as a background image

i am trying to use Simple CSS Editor on my two hubs: Spare C-5 and Mane C-7.
In both cases I am having the same results.
Pressing "Save Settings & Export CSS" button says "Update Complete".
However nothing is actually saved.
I don't see any files in the "File Manager" and of course always getting this:
"Warning: The CSS Settings JSON file was not found".
Exactly the same behavior on both hubs.
What I am doing wrong and or missing?

That is odd....

I might need to look at it in more detail in a few hours...

In the meantime, if you wanted to look in the browser console / developer section you may see some logs indicating what the issue may be. If you are not familiar with this don't worry, I can give you some more instructions later.

Also, do you use hub security (I forget the correct term for this)? From memory I don't cater for this in saving the file, which is likely not mentioned in the instructions.... Which I will need to look at.

Here are few error reported (192,168.20.90 is an IP for the Test/Spare C5):

DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/content_scroll_mid_detection.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/iframe_form_check.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/iframe_form_detection.map: System error: net::ERR_BLOCKED_BY_CLIENT
SimpleCSSEditor.html:1 Access to XMLHttpRequest at 'http://192.168.20.90:8080/hub/fileManager/upload' from origin 'http://192.168.20.90' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
SimpleCSSEditor.html:937
SimpleCSSEditor.html:1103 POST http://192.168.20.90:8080/hub/fileManager/upload net::ERR_FAILED 302
writeCSS @ SimpleCSSEditor.html:1103
onclick @ SimpleCSSEditor.html:1339
SimpleCSSEditor.html:1 Access to XMLHttpRequest at 'http://192.168.20.90:8080/hub/fileManager/upload' from origin 'http://192.168.20.90' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
SimpleCSSEditor.html:1169
SimpleCSSEditor.html:1310 POST http://192.168.20.90:8080/hub/fileManager/upload net::ERR_FAILED 302
writeSettings @ SimpleCSSEditor.html:1310
writeCSS @ SimpleCSSEditor.html:1105
onclick @ SimpleCSSEditor.html:1339

It could be the way you are accessing the dashboard... let me check...