Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

There’s also the “car mount” version, which doesn’t have the pedestal. It may work better for wall mounting. Bonus with this mount: the tablet could be easily moved between magnetic bases on the wall and the tabletop.


Jintorcio - were you ever able to make this work? I, too, would like to hyperlink from a still image frame capture to the live camera feed in another dashboard. Right now I need to click the 2nd dashboard button, but this is not optimal.

Nice Boston :slight_smile:
How do you charge it? just plug in the cable?

Not yet!

  • ->>> John <<<-*

Thanks, that’s King Leonidas - ruler of the smart home.

Yeah, I usually just plug it in directly to the wall or I have an Anker Portable Charger that I just connect it to, once fully charged the battery runs forever since it’s only running that one page and screen is only turned on when there is touch/motion.

Here is a screen shot of my 1st floor dashboard (kitchen and living room). It runs on a $39 DigiLand 7" Android. I’m still playing around trying to get motion/touch activation working. For now, it runs continuously.


Damn that is nice.

I think I can see how the buttons were placed, but what is the CSS code used for the blue print layout, or is it just the background image giving that layout.

Yes, it is the background image with transparent buttons. Only works on one size/resolution tablet.

1 Like

Immensely, was trying to figure out a browser that would work, perfect. Definitely worth pitching the extra money to the developer for the Plus version.



I would like to change my mode icon color to red if the mode is anything other than Away. Is there a way to do this with the custom CSS?

Alternatively, I have a custom mode of Disarmed, if I could figure out how to have the icon for disarmed be red that would work great as well.

Thanks! Jeff

How did u setup activating? Motion or touch? Can you share? I just ordered a Samsung tab e lite on Black Friday and I need to figure out what to do… thanks

Damn, I need to get on my icons but I figured I would add the radar and post up. I used to have Amazon music linked but when they updated the app, the linking went away. I really need to figure out how to integrate a music control in here, short of Sonos.

Family Room Nexus with Motion activation in home made flush mount:

Kitchen, old iPad but I need to find a solution for login like the Nexus Fully Kiosk:

Folded up, almost flush:


cool!!! how do you integrate the “web parts” on the right side?

Found the directions in this thread but basically a stop motion tile with a gif link from my local news station :nerd_face:

1 Like

I am having trouble getting the slider on my dimmer switch to color right. I used the css code from SmartTiles but nothing is changing. I am trying to get the inactive slider to be the dark yellow.


Can you show the CSS you have for the slider? That will make it easier to help.

This is on the CSS guide over on the SmartTiles page:

/* Modes using Font Awesome */

.icon.Home i::before {content: " ";} /* Although all you see is a box here, this is actually a Font Awesome icon. You can put any Font Awesome icon from the cheatsheet in here and have it displayed. It goes in between the 2 sets of double quotes. /
.icon.Away i::before {content: " ";}
.icon.Night i::before {content: " ";}
.mode.Away .fa {color: gray;} /
This will change the color for your Font Awesome icons. You can change it per mode. */
.mode.Home .fa {color: white;}
.mode.Night .fa {color: #003399;}


How did yo do the floor layout? Seriously cool! I would love to learn how you did this.

I hope this helps @ludwig76.

If you have a theme set you will need to amend the beginning of the script for each CSS command, like I did below. It should be the same theme you are using to override the default settings. Just replace “quartz” with the them you are using.

.theme-quartz .ui-page-theme-a .tile.active .ui-slider-track .ui-btn-active {background-color: white; opacity: 1.0;} /* Left Slider bar - Active */
.theme-quartz .ui-page-theme-a .tile.active .ui-bar-inherit {background-color: #4682b4; opacity: 1.0;} /* Right Slider bar - Active */

.theme-quartz .ui-page-theme-a .ui-slider-track .ui-btn-active {background-color: green; opacity: 0.7;} /* Left Slider bar - Inactive */
.theme-quartz .ui-page-theme-a .ui-bar-inherit {background-color: #3EFF00; opacity: 0.7;} /* Right Slider bar - Inactive */

The first two lines should change the slider bar when the dimmer is active. The second line is for the right side of the bar. The next set is for when the dimmer is inactive, since the slider bar is still visible.

1 Like


can you please tell me how you got your icons to their size and overlap on to other tiles?