Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Wiki Projects & Stories
, , , ,
1412

Add the url where you specify the color:

.tile[data-device='xxxxxxxx--xxxx-xxxx-xxxx-xxxxxxxxxxxx'] {background-color: blue; content: url(http://fan.url.here ); position: relative; left: -2px; top: 20px;} /* location */

Since you are using the URL method you will probably need to adjust the position so I included that above. I also had difficulty with being able to access the URL so I had to put them on my github and link to there.

A great source of replacement icons is on the font awesome site. They are actually fonts so you can change their color as well. A little harder to use initially, but worth it. If you are interested we can walk you through it.

1413

Why do you consider Device (Object) IDs to be sensitive information? Devices are not accessible without a login or access token to your SmartThings Account.

1414

If you want to change ALL the tiles of a certain type you specify the type and leave off the device id.

.tile.momentary {...}
.tile.contact {...}
.tile.weather {...}
1 Like
1415

Yes you would need to put the device ID if you are making it for a specific tile…your code seem to be correct…however this will change the icon for active state only…plus i guess device id should be in “”"

.tile.switch[data-device=“33be3679-2b76-4622-b293-72a703a807ce”] .icon i.active:before {content: url(http://cdn.device-icons.smartthings.com/Lighting/light24-icn@2x.png);position: relative; left: -20px; top: 27px;}

1416

I don’t know. :confused:

I was told that way back when I first got addicted to all of this and everyone always masks it so I never questioned it.

1 Like
1417

ha ha…:).

Can anyone suggest a free place holder for icons that I can use with custom CSS ?

1418

http://fontawesome.io/cheatsheet/

This site I use for most of my icons for my tiles.

1 Like
1419

  • If you use an “access_token”, that token is critically sensitive and must be masked at all times.

  • The “app.id” (middle of the SmartTiles URL) is very slightly sensitive, since it is a bit like an email address in that an attacker trying to find vulnerable SmartApp endpoints using a found access_token would start with known Application IDs.

  • To the best of my knowledge, I would say that Device ID, Location ID, etc., are not sensitive or secret information; though SmartThings is not bulletproof and if a vulnerability is found then these IDs could then become a part of the attack strategy. One theory is that a SmartApp which is granted access to a particular specific Device in Preferences could maliciously attempt to access unauthorized Devices via their IDs. I think this is not generally possible.

1420

Thanks, but I would like to use colorful icons…I’ll post a snapshot when I go home :slight_smile:

1421

You can color the Font Awesome Icons.

3 Likes
1422

@tgauchat
Is there a way to modify the clock through CSS?
If you press on the clock - is that also a refresh button?

1423

  1. Yes… The clock does trigger a refresh, for convenience in case you elect to not include the Refresh Tile.

  2. Use the “Inspect” (right click using Chrome) or other browser debugger to see the CSS applied to the Clock Tile and its elements.

1424

That is the nice thing with Font Awesome… it’s technically a font, so you can actually color them using the CSS!

1 Like
1425

For storage, TinyPic is my go to.

From the CSS Guide on the SmartTiles site:

For custom icons, I definitely recommend using TinyPic if you aren’t sure about re-sizing them. You can use the Avatar option and it will resize it to 100px x 75px, which is perfect for a standard 1×1 small tile.

1 Like
1426

Great I’ll try that. For now here is a screenshot of my Smarttiles. Also pics of Galaxy Tab 8" mounted. I used magnets to hold the tablet and a QI charger behind the blank plate that keeps the tablet charged all the time.

9 Likes
1427

Beautiful!

I have to plagerize a bunch of these installation photos to feature them on the SmartTiles.click website. Hmmm… Gotta make a gallery of some sort. :thinking:

4 Likes
1428

When you stick a tablet behind a 2 way mirror to get that cool ghost control panel…how do you access the tablet to make adjustments, updating software, etc.

Do you have to make the tablet easily removable? Or is there an easy way to take control like you can on a PC with Remote Desktop or VNC?

Mouse?

1 Like
1429

There are a few different remote control apps for Android.

TeamViewer is available I believe.

Personally, I use Vysor.

2 Likes
1430

can also add in github.

1431

Sorry for my ignorance…that’s the first thing I tried but wasn’t able to find how to upload the icons there :-(…