Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Wiki Projects & Stories
, , , ,
41

How do you charge it?

42

There is space for the cable between the frame and the wood strip. The cable simply runs down the wall, the plant hides the cable. I would run it through the wall but I am in a rental property and would prefer not to patch it up when I move.

43

Is there any config to hide the refresh button, or should I just hack up some custom CSS to do so?

I want more flexibility with customizing the page, so I’m going to create multiple dashboards (one for doors, one for switches, etc. etc) then make them iframes within a controller page.

44

[quote=“jazzyjayx, post:43, topic:11222”]
I’m going to create multiple dashboards (one for doors, one for switches, etc. etc) then make them iframes within a controller page.
[/quote]This is a great idea. Let me know how that goes.

To remove the refresh tiles, add this to your CSS block:
.refresh.tile {display: none}

3 Likes
45

I just submitted a Pull Request on github. I basically created a “Show refresh button?” toggle in the preferences page.

46

Finally had a chance to post my basic setup. I bought a ‘Dragon Touch’ tablet from Amazon for about $50. It’s OK at best so it will get the job done for now. Obviously the main factor is for the wife to accept it which she has.

I used some 3M velcro squares to mount on a future volume control box for our whole house audio system. So the good thing is that it covers the ugly wall plate. Battery life isn’t all that great so as of right now it’s more of a show and tell when someone comes over than actual everyday use. Using an iPort in wall system will probably be the next step down the long expensive road.

Thanks again Alex for your hard work. I’m not much of a technical computer guy, but it was pretty easy to cut and paste the code to make this work. A donation will be soon to come!

FullSizeRender.jpg3264×2448 1.34 MB
IMG_1534.JPG3264×2448 1.39 MB
IMG_1535.JPG3264×2448 1.16 MB

4 Likes
47

@625alex, would there be a way in the custom css to change the icon for a
specific Dashboard link? For example, I setup a separate copy just for
my cams and link to that dashboard from the main. I would like to change
the icon from FA-TH to FA-VIDEO-CAMERA. I was able to do this
temporarily by just changing the "getTileIcons () for “dashboard” which
obviously sets it for all dashboard links, which is fine for me for now.

I change the other tiles using:

.tile.switch[data-device='26c79be6-4dd9-4bf7-90cc-cc07213c772b'] .icon i.inactive:before {content : ""}

but don’t know how to handle the data-device for the dashboard links.

If this is not possible, that’s perfectly fine. I just didn’t know if
you had a quick answer. Please don’t spend any time on this, I’m sure
you have 10,000 other things you are doing

Thanks for everything!

3 Likes
48

@Eduardo_Veras asked me to post what I had done to create SmartAlarm Arm, Disarm and Stay tiles in SmartTiles. I showed it here

Basically what I did was created 3 separate on/off virtual switched in the IDE for each of the mode. Then I wrote a 3 smartapps (with the help from others), one for each mode. Since I use Magic Home, I basically have 4 different modes I use: Home Day, Home Night, Away Day, Away Night and Bedtime. The smartapp switches to the correct mode based off of Sunrise/Sunset. The apps also monitor mode changes and changes the tiles if the mode has been changed other ways. This is my first smartapp creation and I have no programming skills so it was a struggle and I needed help so don’t mind how it looks or works :slight_smile: I had to hard code the modes in the apps since I didn’t know how to do it otherwise, I do plan to fix that later since @chuck_pearce gave me alot of help.
Here are the apps I made:

I could probably combine all of these into one, but dont know how yet…lol
You would have to change the mode names in each to adapt to your setup.

and then here is the custom css for SmartTiles for those 3 tiles:

.tile.switch[data-device='fb5ed1c6-0b3d-404d-a303-7ec74e65998b'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='fb5ed1c6-0b3d-404d-a303-7ec74e65998b'] .icon i.active:before {content : "";color:#00FF00}
.tile.switch[data-device='70128288-f048-4700-b20c-c1eaee22130f'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='70128288-f048-4700-b20c-c1eaee22130f'] .icon i.active:before {content : "";color:#FF0000}
.tile.switch[data-device='71c4d9de-0cd2-4a67-ae32-7782e805ea2e'] .icon i.inactive:before {content : ""}
.tile.switch[data-device='71c4d9de-0cd2-4a67-ae32-7782e805ea2e'] .icon i.active:before {content : "";color:#FA500}
1 Like
49

Has anyone found a way to remove the frame from the video tile?? i want it to take the complete tile :smile:

50

Is there a way to change the color of the temp in the temperature tile?

1 Like
51

I wanted my tablets to have a flush look so i am using 3 first generation iPad mini’s with this wallmount. The wife allowed me cut holes in sheetrock once i told her she will be able to control our multi-room audio and make FaceTime calls without having to pull out her iPhone which she can never find. After i installed the first one in kitchen she loved it so much she asked for one in the master and the entry. Here are some pics of my setup, I spent a little under $500 for all 3 iPads and the mounts.

IMG_4835.JPG3264×2448 1.25 MB

IMG_4838.JPG2448×3264 2.55 MB

IMG_4836.JPG2448×3264 2.4 MB

20 Likes
52

Nice. Where did you get flush mounts from ?
Do you have charger behind it ?

Can you post picture of in process installation ?

53

These look great! And Gen1 iPad Minis can be had cheap. How are you powering them? Just curious about the electrical behind the scenes.

54

I purchased them form amazon for $28 last May but it seems they are currently out of stock. I have a charger behind 1 for them since there is no attic space above. Although it’s against code i tapped into a wall outlet in the adjacent room and created an outlet for the charger behind the mount. For the others i ran some new thermostat wire to a wall plug in the attic. I will take one apart and post a picture of the installtation tomorrow.

55

Thank you for sharing this @swindmiller I will give this a go for sure.

1 Like
56

On previous versions of the dashboard, when a switch was off the switch icon remained white. On the latest version the switch icon becomes entirely gray when it’s off. Is there a way to change it back to the old style?
Old

New

57

I will update it to take the whole frame. ETA about 2 weeks.

2 Likes
58

Richard, this looks fantastic!

Do you mind if I use your images on my site?

59

Try this, where 1 is the index of your dashboard link:

.tile.dashboard[data-link-i='1'] .icon i{content : ""}

1 Like
60

Add this to your custom CSS block:

.fa-toggle-off {opacity: 1}

1 Like