Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Just updated to the latest version and decided to use @625alex’s method for changing everything in the custom CSS only.
Here is what I have in the Custom CSS section:

/*** Custonm CSS Start ***/
.tile {background-color: grey}
.weather {background-color: #333333;}
.clock {background-color: #333333;}/*blue gray*/
.presence {background-color: #333333;}/*indigo*/
.lock {background-color: #333333;/*red*/}
.hello-home {background-color: #333333;}/*purple*/
.switch, .dimmer, .momentary, .light {background-color: #333333;} /*green*/
.contact {background-color: #333333;}/*pink*/
.refresh {background-color: #333333;} /*blue gray*/
.temperature {background-color: #333333;} /*amber 900*/
.mode {background-color: #333333;}/*deep purple*/
.motion {background-color: #333333;}/*blue*/
.humidity {background-color: #333333;}/*brown*/
.link {background-color: #333333;}
.thermostat {background-color: #333333} /*teal*/
.energy {background-color: #333333} /*l green 800*/
.power {background-color: #333333} /*l green 900*/
.water {background-color: #333333} /*cyan a900*/
.music {background-color: #333333} /*purple a700*/
.battery {background-color: #333333}
.camera{background-color: #333333} /*lime*/
.video {background-color:#333333} /*dropcam grey*/
.blank.tile{background:none;}
.dashboard {background-color: #FE0002;} /* red */

.switch.active .icon {color:#FFFF00}
.light.active .icon {color:#00FF00}
.lock.active .icon {color:#990000}
.dimmer.active .icon {color:#00FF00}
.motion.active .icon {color:#990000}
.contact.active .icon I {color:#990000}
.presence.active .icon {color:#59FF00}
.tile.switch[data-device='26c79be6-4dd9-4bf7-90cc-cc07213c772b'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='26c79be6-4dd9-4bf7-90cc-cc07213c772b'] .icon i.active:before {content : ""}
.tile.switch[data-device='0efbbf1e-0e00-42c8-9d5a-f5e497f36af5'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='0efbbf1e-0e00-42c8-9d5a-f5e497f36af5'] .icon i.active:before {content : ""}
.tile.switch[data-device='6102c684-898c-404b-b469-23882d33c827'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='6102c684-898c-404b-b469-23882d33c827'] .icon i.active:before {content : ""}
.tile.presence[data-device='2295e34d-0666-4515-a093-4dfbb539bcd5'] .icon i.inactive:before {content : ""}
.tile.presence[data-device='2295e34d-0666-4515-a093-4dfbb539bcd5'] .icon i.active:before {content : ""}
.tile.presence[data-device='5f181f7a-ca13-47a6-96c4-ddc3b05b147f'] .icon i.inactive:before {content : ""}
.tile.presence[data-device='5f181f7a-ca13-47a6-96c4-ddc3b05b147f'] .icon i.active:before {content : ""}
.tile.presence[data-device='b40cff46-b4c1-4079-b8bb-72e8d82c22b7'] .icon i.inactive:before {content : ""}
.tile.presence[data-device='b40cff46-b4c1-4079-b8bb-72e8d82c22b7'] .icon i.active:before {content : ""}
/*** Custonm CSS End *****/

Some of the background colors are unnecessary for me currently as I don’t have all of those devices but I left them in anyway.

Now when there is a new version I just overwrite everything but the Custom CSS.
Much easier, thanks @625alex!!

i’m lazy, i use the stock CSS and i have digiland tablets stuck to the wall with 3M velcro strips. i use an app called redeye to keep the tablets from going to sleep and i just keep the dashboard open all the time.

1 Like

Has anyone thought of an elegant way of mounting a cheap android tablet which displays the action dashboard? Assuming it has a power supply from the wall (internally wired) - Wasn’t able to find a tablet which has the power connection hidden somewhere behind it…so that when it is mounted on the wall , we see just the tablet - How about using the camera on the tablet for security monitoring?

1 Like

Yes, apparently unusually large picture frame borders do the trick. :flushed:



3 Likes

I’m hacking a Qi wireless charger to mount a Nexus 7 on a wall with no visible hardware or cables and minimal damage to the wall. I will post a picture once I finish.

I’m trying to relocate my Nest thermostat so that it would take a more focal point together with the dashboard.

1 Like

I created a frame similar to this. https://www.youtube.com/watch?v=nunw20h6W0I. So far it has worked well. I put a USB outlet in the wall.

8 Likes

I’m in the process of hacking a QI charger and using some magnets to mount mine. Parts are in the mail will post pics when I’m done to…

1 Like

I considered using magnets, but command strips will do for now. I didn’t want to wait a month for magnets to be shipped.

@swindmiller I copied your CSS overrides and I love it. I just added a couple of Cree bulbs but I can’t the tiles to look like your background.

Any pointer as to what to edit? Thanks!

Glad it worked for you.
I don’t have any bulbs…only switches. Can you copy the icon I show for switch to your bulb section?
Let me know.

Korban, I love your sweet kitchen! + how clean this looks.

Funny you should ask did alot of research and best value tablet is the Amazon Fire HD 6,

99$ and has almost retina display (252 ppi)!

Here’s it running ActiON:

Now unfortunately there is no wall mounting enclosures so I decided to make my own!

Going to get it 3d printed :wink:

5 Likes

Looks good. The price of the Fires is tempting but I worry about buying something that can’t be rooted, you know just in case.

3d printers is a great idea for making a wall mount.

1 Like

I got the bulb tile to look the same as the rest, too bad I can’t do any edits on IDE, it won’t let me save my changes. I will wait until Alex publishes his new version,

What browser are you using? I do everything thru Firefox but for some reason I can only save once in IDE thru Firefox. IE works great with IDE so I use that.

I’ve been using IE and Chrome but the error I’m getting is more related to the updates that was done to the IDE I believe from what I read in this thread…

Are you able to save changes you make to your dashboard?

The new version is days away. It includes a workaround to save changes.

2 Likes

Honestly I have not tried. I just know in the past that was my problem. I didn’t know there was a problem in IDE, hopefully they fix it soon.

Hi all. Fairly new to all this, but the ActiON dashboard has me jazzed about creating some sort of mounted control panel. I’m looking to create something smaller and more like the Wink Relay. I sort of started another thread about it. :grin:

3 Likes