Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Can anyone answer this?

I’m curious what you are using to set the bit for “Aubree Woks” in SmartThings. I’m looking into something similar for the wife but the best I can come up with is an external link to her GCal.

Suggestions?

Are you using the direct link buried in with the “links to other dashboard” and not the dashboard link itself under “View dashboard & URL?”

I’ll have to check that. Thanks.

That was exactly the problem. Thank you so much.

2 Likes

I currently have 2 methods set up. My original that is linked on the tablet is using a Tasker profile on the tablet to set a smartthings virtual switch through sharptools. It works pretty reliably except when the tablet is having issues or off.

I just installed a smart app in smartthings that is supposed to accomplish the same thing. I have only had it installed for a few days. It appears to be working with the exception of all day events. I am on am work cycle so haven’t really had time to track it’s reliability.

It’s not supported anymore, and probably used by very few. So you won’t get any help with it. I had a few issues setting it up as the directions were not step by step or super clear.

It creates virtual.switches in smartthings that look.like this:

Note my daughter is working again as I type this.

My daughters switch is used just for information. Her schedule in the family calendar is also used to send her SMS reminders that she has to work or when her next college class starts.
Me and my wife’s switch is used to determine when some lights go off in the morning depending on who works that day.

PM me if you have more questions or need more details.

1 Like

Anyone had trouble getting custom background color to work? I’ve tried it on several simulated switches and a dimmer, and I get nothing.

Neither of these work:

.tile.dimmerLight[data-device='8e576e0b-d784-4477-aab2-c0fd61c7e8f5/16'] {background-color: #FF0000}
.tile.switch[data-device='VS-CAS23'] {background-color: #FF890E} 

but, this does:

.tile.tools {background-color: gray;} /* This will change the background color for the Refresh tile. */

EDIT:
It looks like I can’t do anything using a device ID. Any of the built-in styles work as expected though.

EDIT 2:
I also can’t seem to be able to resize a custom icon, but I can re-position it.

This works for positioning, but not size:

.dimmerLight .icon i.active:before {content: url(http://xxxxxxx/light11-icn@2x_white.png); width: 60px; height: 60px; position: relative; left: -20px; top: 5px;}
.dimmerLight .icon i.inactive:before {content: url(http://xxxxxxx/light11-icn@2x_gray.png); width: 60px; height: 60px; position: relative; left: -20px; top: 5px;}

Figured it out.

In the HTML source, the device ID doesn’t match the device ID in the IDE devices page, as I assumed it would. Once I looked at the source and found the internal ID for each device, it works as expected.

Thanks to @krlaframboise for suggesting I look at the HTML source!

2 Likes

Now if there was just a way to edit the HTML and replace the title for each tile… :slight_smile:

I’m trying to assign an FA to my custom modes, but it doesn’t work. No matter what I try, the mode tile still shows the text. (And, not in the color I’m trying to use).

/* Mode */
.tile.mode {background-color: #505050 ;}
.mode.Away .fa {color: #00FF00;}
.mode.Home .fa {color: #00FF00;}
.mode.Night .fa {color: #00FF00;}
.mode.Asleep.fa {color: #00FF00;}
.icon.Asleep i::before {content: "";}
.mode.Movie.fa {color: #00FF00;}
.icon.Movie i::before {content: "";}

ActionTiles has a new feature to allow customizing the label of Thing Tile(s).

That would be great if it was available. :smiley:

5 Likes

Any ideas @tgauchat ?

I’m not very useful when it comes to customizing CSS, I’m afraid, sorry.

I’m sure to become an expert in the customization features we add to ActionTiles… But folks in this thread are bound to be helpful in the meantime.

You cannot create icons for custom modes, it is the way this tile is coded in the smart app. It will always be text. I am not sure about the color issue, it has been a while since I been deep into the CSS code.

1 Like

I just posted instructions on how to get Google Sheet based charts into SmartTiles … Google Sheets Charts

3 Likes

Any icons, or just FA fonts?

Any Icons on that tile.

1 Like

This is very nice.

This means people can finally get their steps or weight onto their dashboard (if they use something like IFTTT to send that data to a Google Sheet) easily.

Another use I can see if for people who use Automatic or Dash or one of the other IFTTT capable car trackers for mapping distance driven, time driven, gas spent, etc. Any of those measure metrics by those systems would be viewable in a graph.

1 Like

I am having trouble now getting my icon for the garage door to work in smarttiles. For all of my tiles I have been creating custom icons and using url’s for the tiles. I have the garage door setup in smarttiles as a switch but can’t get the icon to show up. It just shows a default slider.

Here is the code I am using for the icon.
.tile.switch[data-device="ac243a70-cad8-4ef4-9fc8-beb21482e1ae’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Garage%20Door%20Open_zps1raam4cl.png); position: relative; left: -46px; top: 20px;}
.tile.switch[data-device="ac243a70-cad8-4ef4-9fc8-beb21482e1ae’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Garage%20Door%20Closed_zpsk9yr4axi.png); position: relative; left: -46px; top: 20px;}

Here are the icons I am trying to add.

Here is a picture of the dashboard.

2 Likes