Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Okay, I got my icons from:


If I remember right when I downloaded them I selected custom and kept trying different sizes till I found the size that fit my layout best.

I then uploaded those icons to my tinypic account and used the Url it gives you in my css.

Here is 2 images of the tablet with various things on and off. Their not very good just taken quickly with my phone.

I didn’t want to post all my CSS as it would be cluttered. Here is a piece that shows the icon addressing to get them to show.

/Fish Tank Plug/
.tile.switch[data-device=‘9eca6a90-f8ec-4852-9f33-3c576854f483’] .icon i.active:before {content: url(http://i64.tinypic.com/2m3s3.jpg);position: relative; left: -5px; top: 25px;}
.tile.switch[data-device=‘9eca6a90-f8ec-4852-9f33-3c576854f483’] .icon i.inactive:before {content: url(http://i67.tinypic.com/35j2p.jpg);position: relative; left: -5px; top: 25px;}

I was going to go back and work in more icons. Just never got back to it.

I was working from my phone so sorry for any typo and errors. Any questions just ask. If I don’t know the answer someone else will.

4 Likes

That looks good.
Here where I have gotten my Dashboard to know for my tablet. I used the code above from #Arnqvist for the background and tile colors and the text.
I made all of my icons and for off they are at 50% opacity.

6 Likes

I didn’t see where this has been answered so here is what I used to resize my radar tiles. Match your data-link-i # to your radar tile.

.tile.video[data-link-i=“1”] {width:840px;height:480px;} /* Video Tile 7x4 */

These are on a secondary dashboard that just shows local radar and they fill up the screen in portrait mode. You can adjust the width and height to suit your needs.

You can also enlarge the image and shift it so only the “area / county” you want to see is centered in the video square of smarttiles.

/Video Tiles Size and Position Edits/
.video.tile[data-link-i=“1”] .video-container {
overflow: hidden;
}

.video.tile[data-link-i=“1”] img {
height: 130%;
left: -15%;
position: relative;
top: -5%;
width: 130%;
}

.video.tile[data-link-i=“2”] .video-container {
overflow: hidden;
}

.video.tile[data-link-i=“2”] img {
height: 200%;
left: -85%;
position: relative;
top: -80%;
width: 200%;

}

First is my forcast image . I zoomed and shifted it to hide some of the station logo and framework around their image.

Second is my radar image. I had to select a large region (what was available) and zoom , shift it to center the image around our local counties vice the whole region.

4 Likes

Very good. I have a need for this, thanks.

Hey guys…

New thread on Fire Tablet battery monitoring linked below. Not particularly high priority, but figured I’d cross-link the post for ideas…

I tried adding this to my css and it didn’t change anything so I would assume I did something wrong.
I changed the “1” to “2” because the radar tile in the second url I have under Stop Motion video streams.

Just a polite PSA folks. Remember that when v6 comes out (ActionTiles) there will be no CSS customization. I’ve invested a lot of time myself so not knocking anyone. Just reminding all that things will change.

4 Likes

Thanks for helping folks prepare for this change, @Nezmo.

@625alex and I repeat that we keep a constant watch on this thread/Topic and are incredibly amazed at the creativity, effort, and sharing that’s taken place. You all are maximizing and optimizing your SmartTiles configurations and help others do the same. We’re super appreciative of it and don’t take it for granted.

Obviously, getting ActionTiles released to the broad public is taking all our time and effort, including all the pesky administrative details, and having great interactions with our Beta testers.

We have a list of nearly 100 “Feature Requests”, but we’ve also ranked them by priority and will be polling our Customers after the launch to confirm this.

###Customizability will not fall off our radar…

Our advice in the meantime is to keep your ideas in mind, feel free to experiment and do “conceptual prototyping” using SmartTiles, keep sharing, and … do what you can to help promote us during the ActionTiles “kick-off” so that we’ll be well resourced to maximize new features in this and other areas.

5 Likes

Great post.

1 Like

Not sure but try

.video.tile[data-link-i=“1”] {width:840px;height:480px;} /* Video Tile 7x4 */

EDIT: I also just noticed that what you posted of what you tried you were missing the 1st period? Could be typo on what.you tried or what you said you tried?

Try it in a fresh/clean Dashboard for testing. I noticed in my Main Dashboard it was erratic depending on other tiles and their placement. Once I got it right in a test Dashboard I incorporated it into a new Dashboard. You might also check the Preferences>Video Tile Size (Small/Medium) as that seems to make a difference.

1 Like

Wanted to share mine as I’ve finally got it mostly cleaned up and looking decent. Thanks for all the inspiration and snippets of CSS I’ve grabbed from here and the SmartTiles website. Here’s what I did to get a mounted tablet in the hallway where we enter the house from the garage.

Hardware

  • Cut the drywall.
  • Added a recessed outlet with USB charger receptacle. – Had to pull wiring from elsewhere (not from the pictured switch) because the switch didn’t have a neutral.
  • Used the pad tab wall mount – but had to attach it to something raised in order to make room for the charging cable and the recessed outlet lip – so attached 1/4 inch plastic piece with drywall anchors, then mounted the pad tab on there.
  • Plugged in angled charging cable
  • Used old Nexus tablet and have Smarttiles, Tasker (to wake upon motion), Airfoil Commander (Home audio speaker selection with Airfoil & Airplay) and Spotify (using the Connect option to control the PC running Airfoil and distributing sound throughout the home). Would love if I could have Airfoil Commander and Spotify controls visible on the same screen with Smarttiles – any screen/app splitter out there for Android?
  • Added some picture frame spacers on the back so it wouldn’t wobble when touched.

I have an extra Android phone hanging around and would like to put it to use in another location…any easy options our for mounting? My current recessed outlet is probably too large and would like a bit of an easier project overall.

Regarding the dashboard design:
I’m new to CSS, so spent a bit of time trying to get the icons and button backgrounds to my liking as I wanted a more consistent color scheme, but still identify groupings by colors. Icons are mostly from Icons8.com, though I’ve also doctored up some of them – most were downloaded or I sized at ~60 pixels. Backgrounds are merely shapes and gradients that were made in Powerpoint. Images were uploaded to Tinypic.

For the most part, icons are dim when inactive, but icons that could have a different image do as well (door close/open, window close/open, garage closed/open, light bulb off/on). I can’t figure out how to do the CSS on custom modes I’ve created – such as: I want “Vacation” mode to have an airplane taking off instead of just showing the word “Vacation”. I’ve got it to work for “Away” & “Night” because those were created by SmartThings.

Hoping to add an IP camera, Skybell and maybe a door lock later this year and would like to include them on the dashboard as well.

Any other suggestions for the dashboard??

Please note: I have a few extra ghost sensors at the bottom of the dashboard that I can’t get rid of…let me know if any solves!

4 Likes

You should add some sparkling diamonds to your wife’s (I’m guessing) crown. :grinning:

Did she put you up to this?!?

haha – whatever makes her put up with this home automation stuff (especially once I start cutting into the walls like for this project :-P)

1 Like

I like the clean look of your wall mount. Do you find the MagBak iPad mount strips work well with a non-Apple product (i.e. LG Tablet)? I am looking for a mounting solution for a 10" generic Android tablet.

I had a generic Android tablet as well and wanted something cheap in case I changed out my tablet at some point. Check out Pad Tab as they were about as minimal & cheap as I found – no issues yet. It’s basically a plastic thing that sticks to the back of your case/device (supposedly removable without damage) and a small, clear tab that hangs on your wall (also, supposedly removable).

Just getting started with SmartTiles… can someone tell me where/how to find the HTML source for my dashboard, so I can edit the device names? In ST, I preface all of my virtual switches with “VS-”, but would like them to have something more readable on the tiles.

I used this on an iPad 2 for a while. Here’s my Amazon review:

"Does it’s job. I’m using it on a slightly textured wall which is not recommended. It’s holding my iPad 2 well. Be careful to get the pads straight as it’s a one-shot deal. I would prefer it if the iPad was exactly vertical once hung but it will slightly lean forward. I cured this by sticking two small, clear round pads on the bottom rear of the iPad. Of course that precludes me from easily rotating the iPad and hanging the other way. Also, the iPad can still ‘swing’ very slightly sideways but it’s minor.

Decent product but I feel it should be more like $10."

Now, it has since fallen off the wall. I cannot complain as it was on a textured wall (knock down). I just want to point that out to folks.

2 Likes

I’d say that’s accurate. Feels like a good, cheap option that leaves me open for a more permanent option in the longterm should I choose to change it up (without being sad about throwing it away).

1 Like