HE Dashboard Design – Is this possible?

  1. Dashboard background image any USER photo.
    2)HE Dashboard Template(s)Tile Type that can be a USER photo (transparent and resized) that can replace the picked (Pick A Device) Device and Template form the “Pick a Template” list. IE. A transparent HE Dashboard photo that is a specific device that can be inactive and active by clicking on it. Examples:

    Icon example

The hubitat dashboard app is somewhat limited unless you're comfortable editing the css, it seems. I would check out these two threads and perhaps post on one if you don't get a response here...

try "smartly"
https://hubitat.ezeek.us/archive/1.08/smartly/

1 Like

It's definitely possible for switches, or at least a representation of a switch, I have done it for a lighting dashboard, but I don't have it anymore. I'm sure I had posted the CSS, but can't find it.....

Thanks, yes looked at those links.
Ops, I should have asked are there apps/tools already that work with HE that can complete my objective here?
For example, could CSS do it all? or a combination of known tools that work with HE.
My experience has been I start a project with a learning curve only to find out the tool I'm using doesn't do the complete job.
This community turns out to have very experienced people, like yourself(s) that I was hoping could tell me what tools I need to work with HE to do my objective.

The 3rd party stuff seems to come and go, while the ones I looked at kind of say use my final project that leaves me with some programing on my own to finish?

I will look at Smartly.

Without fully analyzing your request, I’d say that you could do 85-90% of what you’re asking with CSS,

1 Like

thebearmay thanks for weighing in on this you have really help on educating me how to use HE apps.
I looked at the Dashboard Advanced setting then CSS but see it is blank. I would guess its blank because there is no CSS modification code installed.
Looked at the Noob's guide but didn't notice a basic guide how to put CSS code into HE dashboard and where into the template or device existing code is.
Great info in Noob's guide, but for a Newbie like me to HE needs to know where to put the code in the first place. And how to find the code to modify? The Noob thread may even have it in various places but is there a 1,2,3,4 step process to use CSS in HE? thebearmy and sburke781, here, gave me great encouragement it can be done with just CSS.

With your dashboard open...

To add CSS, click the cog icon, typically situated in the top right hand corner of your dashboard

In the dialog displayed click Advanced and then select CSS.

You should see a blank text area where you can add your CSS.

Once you have finished, click the Save button at the bottom of the screen.

The CSS area starts out blank and you add content to it pretty much the way you’d code CSS between <style></style> tags for a webpage. I like to use the developer options in chrome to expose the code that is already in use and figure out what tags to modify.

1 Like

I'm also trying to build a tool to make this a little easier, which is coming along slowly....

3 Likes

I knew I'd put it somewhere....

And here's the visual of what I was doing.

1 Like

That is great starting point for me to look how you did the "Show Off Your Dashboard"....

1 Like