Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

I dont think you need to make anything customizable device type or capability specific at all, you simply have your default icons as you do now - and in the prefrences you add an option to upload custom icons or images to each of your given devices with a max dimensions/size/etc ehich then acts as an override for just the tile linked to that one device…

1 Like

These are the commands I use in the CSS to use a fan-ish Icon for one of my fan.

.switch[data-device='**device ID**'] .icon i.active:before {color: yellow; content: "✼";font-size:1.3em;line-height:2em;width:100%;margin-top: -1em;} /*  Fan item specific:icon  and color */                                                      
.switch[data-device='**device ID**'] .icon i.inactive:before {content: "✼";font-size:1.3em;line-height:2em;width:100%;margin-top: -1em;} /*  Fan item specific icon and color */
1 Like

That is, in fact, pretty much what we have specd out as the minimum feature request. No release stream targeted, though.

1 Like

@chrisb I was trying to do the exact same thing. Here is a link to a post in this thread from last May when I posted my solution. If you scroll back from there you will find lots of advice on how this was done. I think that @DarcRanger’s example above will give you a starting point to play.

Be careful, this is addicting.

1 Like

Has anyone considered using their floorplan as a “broad” overview of what state each connected item is? It may be too hard to do or not even helpful, but heres my thought:

Upload a floorplan layout, assign the rooms what devices are in it and have that room display overview of connected devices (maybe color coded?)
To control something in that room, you tap said room and it brings up each item for you to control independently

Think of this:

Somehow incorporating each device to its actual room for a quick glance instead of trying to remember what the name of a specific device icon actually controls?

I mean, everyone knows their floor layout, right? the view can be scaled to have multi floor domiciles all displayed on the “home screen”

Im no coder so I dont know HOW to do it, but…

I dont know, it was a thought I had and it may not be feasible or that useful, but thought Id share the idea (if it hasnt been shared already).

1 Like

It’s a great idea, actually, even though it has definitely come up before (I’ll maybe link the Topics in if I can find it).


Floor plan based User Interfaces are popular option from the luxury vendors (Crestron, Control4, Savant)… Some or all of which provide certified developers an official API with which to control their “Things”, and the developers have built extensive frameworks and tools to make customized views. The other popular view is even a photograph of each room where you can tap on the image of the lights, etc.

These developer / dealers earn $ thousands per Customer to provide and maintain the customized view / interface.

SmartThings doesn’t provide a very robust client API… SmartTiles barely makes do, though we’re overhauling the back end to do better in Version 6.

With the new V6 back-end (no release date), we may end up with a platform that Floorplan or other “skins” may be eventually be possible. Not sure what the effort will cost… Or if SmartThings’s Customers are willing to pay closer to the luxury, high-margin vendor prices.


I guess I was under the impression smarttiles was headed in that direction but at a much less cost (or free for private use). My apologies.

Thanks for the link, Ill check it out.

1 Like

I just added another linked discussion above that went into more detail.

But…as for SmartTiles direction… We’re headed somewhere, but it really depends on the balance between what is feasible to produce affordably, while being attentive to user’s feature requests.

But I ask respectfully and seriously: Why would we do this for “free”?

I didnt mean it to be disrespectful, I was basing that comment on the context under your “license” heading on the homepage for smarttiles.

I personally would pay for something that I could customize to fit my home. Not Creston money, because my wife would be my ex-wife if I did that, but I would pay.

Not to practical may be for people with 100-200 devices? :wink:

No disrespect or offense taken… SmartTiles was and is currently “free”, though we appreciate donations that help encourage support and ongoing development effort. Donations are a bit like “crowdfunding” our major Version 6 overhaul and release currently under development.

Like any product or service, SmartTiles will become more and more responsive to its users or customers, including more and more customizable if we can find a profitable market and efficient cost of development.

Floorplan mode (as per the linked discussions), is relatively difficult, and SmartThings doesn’t have enough Customers to build this for economies of scale, and SmartThings’s target market is very low-price ($99) compared to the current vendors that do offer this feature ($10,000 to $80,000 and more…).

But we still love the idea and maybe us or someone will get there!

1 Like

Like this?


What’s that thing? :wink:

periodic table? 20chars


Knew I saw that before

1 Like

it is absolutely amazing. Just sent my donation via paypal.
Just a quick question, how could I change the 2 colors of the theme (blue and white) into a different blue and orange?


In have tried several times to change the CSS with no success, basically nothing happens.
Here is what I would like to do.
For every tile being able to change the background and the font color. Plus being able to change those colors according to the the status (e.g. if the nest thermostat is Heating change the background color or if the wemo switch (deumidificatore) change the background color or again if the battery sensor is lower than 50% change the background color)
can someone give me some hints on how to do it?
thanks a lot

I find that using a desktop browser inspect / debug tool really helps.

Here’s an overview of how to use Chrome Dev Tools:

You literally can see the CSS that applies to the Element(s) you select, and edit them on-the-fly (temporarily until you refresh…). Then you can copy the edited CSS references to the Custom CSS.

In the sample screen I paste below, you can see I selected a tile, see in the bottom left panel that it is in <div class="title">...</div>, and see in the bottom right panel that I edited CSS descriptor to be color orange:

.theme-cobalt .tile, .theme-cobalt a i {
    color: orange;

I did not test pasting this into my “Custom CSS” for this dashboard yet. Sometimes you need to use the “!important” override flag, etc., as per various detailed examples earlier in this Topic.

1 Like

Look nice and clean that colour scheme

1 Like