Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Wiki Projects & Stories
, , , ,
1392

So how would I go about changing the color of the tile by the device id?

1393

Somewhere ( I think) I remember reading how someone used CSS to change color of borders around tiles. Possibly use that to group items with different colored borders. Maybe one of the resident guru’s can find it or remind us how?

1394

@jgirvine,

This post describes coloring borders around individual tiles. I use this to group common tiles and by room.
Border tiles.

You can individually color tiles like this using the data-device code for each item. You would need to do this for each device for each room grouping.

.tile[data-device='xxx'] {background-color: #FF0000;} /* Back Room One */
.tile[data-device='xxx'] {background-color: #FF0000;} /* Back Room Three */
.tile[data-device='xxx'] {background-color: #FF0000;} /* Back Room Two */
.tile[data-device='xxx'] {background-color: #FF0000;} /* Back Room Virtual*/

If you need help finding the data device code, that information can also be found under this topic.

2 Likes
1395

I was about to post a long complicated solution but I wanted to test a theory that would make it much easier. When I finished testing came back to post it I found that @DarcRanger already found and posted the shortcut. (You only need .tile and the device ID not each individual type I.e. .tile.momentary, .tile.contact, etc.)

His example uses hex codes for color but you can also use color names so that when starting out it makes it easier to make frequent changes. Check out this site for a good reference. HTML Color Names

As he does above I would recommend you document in your CSS what each line changes so as your CSS grows and gets more complicated you can remember what each line does. Your code might look something like this:

/* Living Room */
tile[data-device=''] {background-color: slateblue;}   /* ceiling fan */
tile[data-device=''] {background-color: slateblue;}   /* desk lamp  */

/* Bedroom */
tile[data-device=''] {background-color: pink;}   /* ceiling fan */
tile[data-device=''] {background-color: pink;}   /* lights  */

Don’t forget to post a screenshot to show off your accomplishment.

Have fun and enjoy the addiction!

1 Like
1396

Ok, I sorta follow your post and DarcRangers post, and the post he linked. But let me ask you to verify a couple of steps. So I go into my IDE and find the device network ID, got that… now I need to edit the CSS. I found this: http://www.smarttiles.click/help/customizing-css/. So as I read it I take the URL for my SmartTiles and I change a couple letters in the address bar. I get a screen that says enter custom CSS here and a save option.
So I would type in something similar to this:

.tile[data-device=‘0A’] {background-color: #FF0000;} /* Bedroom */

and hit save?

?? am I on the right track?

Thanks

1397

Got my Tab A 9.7" all mounted:

IMG_8850.JPG1224×1632 162 KB

IMG_8851.JPG1632×1224 530 KB

5 Likes
1398

@jgirvine,

A quick follow-up question. Do you have a Tool Tile at the bottom of you dashboard? The update to 5.8 changed how one accesses the CSS page, the url method no longer works. The current method is to click on the tools tile will bring up a directory of options. You can access the CSS page from there.

EDIT: Although it seems you can replace the word “launch” at the end of the URL with “css” after logging in to your dashboard.

From there you can enter your code.

.tile[data-device=‘0A’] {background-color: #FF0000;} /* Bedroom */

Friom there you can hit save.

1 Like
1399

Well, I have version 5.7

I tried, and nothing happened. This is what my CSS looks like:

/enter custom css here/
/* Bedroom /
tile[data-device=‘0A’] {background-color:#FF0000;} / ceiling fan /
tile[data-device=‘0B’] {background-color: slateblue;} / lights /
tile[data-device=‘16’] {background-color: slateblue;} / shades */
tile[data-device=‘02’] {background-color: slateblue;} /*blanket /
/ END CUSTOM CSS */

It says I should click save and then done… I have a save option, but not a done… I am using my windows desktop to do this… I assume that is not the issue?

Thanks

1400

Is your device code really “0A” and “0B” or are they placeholders for public viewing?

Also there should be a “.” before the word tile, “**.**tile[data-device…”

1401

Here is what it says in the IDE:

Name Z-Wave Switch
Label Bedroom Fan
Type Z-Wave Switch
Version Published
Device Network Id 0A
Status ACTIVE
Hub Home Hub

I assume that is where I should be getting the Device Network ID???

I added the “.” before tile, but still nothing changes…

I decided to start with trying to change just one tile. So this is what it now reads:

/enter custom css here/
/* Bedroom /
.tile.switch[data-device=‘16’] {background-color: #464646;}
/ END CUSTOM CSS */

I still don’t have a “done” option after I click save…

I really do appreciate you working with me…

1402

To find the device ID, open the smarttiles URL on any browser and use inspect element. Move the cursor over the tile/device of interest and you should see the device ID in the html code.

2 Likes
1403

The Device ID is the issue.

The IDE method you are using is the starting at the place.

On that page go to the event and click list events. Then click on any visible event.
On that page you should see the deviceId.

The other options involve a right mouse click on the dashboard webpage.

Select Inspect element on the dashboard can also reveal the deviceID, AKA data-device.

Or Select View Source from the dashboard webpage will expose you custom CSS code and the CSS code for the webpage. Near the bottom of that page you should be able to find the data-device for all your tiles in one place.

2 Likes
1404

WOOO HOOOO… got it… thanks guys!!

1405

BTW Does anyone know a good place to host icons to use on smarttiles…I am currently hosting them on my Synology webserver but when I use VPN…Smartiles don’t get the icons…Is there a free place to keep icons ?

1406

Ok, so I got the color tiles figured out… so how does one change the icon? Say I want to make it a ceiling fan… I found this:
You can also use the SmartThings icons from here: http://scripts.3dgo.net/smartthings/icons/. For these, just copy and paste the full web address in the bottom box for each icon.

Ok, so where do I paste the web address???

Thanks

1407

You’re close, you have the data-device number wrong. It should be in the format

.tile[data-device='xxxxxxxx--xxxx-xxxx-xxxx-xxxxxxxxxxxx'] {background-color: blue;} /* location */

To find the number in the IDE:

  1. Log in
  2. Select My Devices
  3. Select the device you need an ID for
  4. Select List Events
  5. Select any timestamp
  6. Cut and paste the number next to deviceId into your code
  7. DO NOT post your device ID online, use a mask or substitute

There are easier ways to find this number using a browser. If you tell us what browser/OS you use someone can walk you through it.

1 Like
1408

Got it… using the IDE and cutting and pasting

Now how do I change the ceiling fan icon??? Loving this…

1409

.tile.contact .icon i.inactive:before {content : url(http://xxxxxxx/Door.png); position: relative; left: -5px; top: 20px;}
.tile.contact .icon i.active:before {content : url(http://xxxxxxx/Doorc.png); position: relative; left: -5px; top: 20px;}

Use this to change the icon…You will have to play around with number to position the icon at the center…Enjoy…

1410

Now I am moving on to changing the individual icon… What is wrong with my code? The URL is from Smartthings.

.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;}

1411

I want to change the icon on one certain tile… so would I not need the device ID? As I read the code you posted that will change the contact icons?