SmartThings Community

Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

dashboard
dashboardhardware
smarttiles.click
smarttiles
project_dashboard

(ActionTiles.com co-founder Terry @ActionTiles; GitHub: @cosmicpuppy) #449

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!


(ActionTiles.com co-founder Terry @ActionTiles; GitHub: @cosmicpuppy) #450

Like this?


(Ron S) #451

What’s that thing? :wink:


#452

periodic table? 20chars


(Dennis ) #453

Knew I saw that before


(ActionTiles.com co-founder Terry @ActionTiles; GitHub: @cosmicpuppy) #454

(fabrizio) #455

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?


(fabrizio) #456

Hello

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
Ciao
F


(ActionTiles.com co-founder Terry @ActionTiles; GitHub: @cosmicpuppy) #457

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.


(Kyle ) #458

Look nice and clean that colour scheme


#459

The old playbook seems to work, it re builds the list a bit slowly on refresh but does work. Im going to see if there is a different browser for it and see if that helps


(Paul) #460

I found an Android browser in App World (Boat Browser I think? PB isn’t on hand sorry) that seems to handle SmartTiles okay. It does take a little while to refresh the tiles and the keep screen on function doesn’t work but otherwise it is usable. Give that one a go.


(fabrizio) #461

Thanks Terry
I have changed both background and font color
I am still looking at how to change those colors when for example the thermostat is heating but I will do some tests!
Thanks again


(Kmugh) #462

Is it possible to add a “new row” after/before any particular tile? If so, I would appreciate some pointers on this.


(ActionTiles.com co-founder Terry @ActionTiles; GitHub: @cosmicpuppy) #463

No; though you might be able to force one with Custom CSS and pinpoint CSS selector of to that Device Tile and use the "\A" character in the :after portion.

Sorry for the vague answer. Custom CSS is not something I can provide detailed support on, but the clue above might be enough for you or somewhere here to run with.


(David) #464

I have the D-link cameras installed at my house. I was wondering if the dashboard will eventually be able to show the d-link video feeds like the dropcam does? Or am I missing something?


(ActionTiles.com co-founder Terry @ActionTiles; GitHub: @cosmicpuppy) #465

If the camera has an “http” MJPEG video stream URL/URI, then it will likely work in SmartTiles today.

Some documentation on the URL’s for various D-Link…


(David) #466

Thanks, I will have to do some research…


(fabrizio) #467

Hi

I was finally able to change colors.

/enter custom css here/
.theme-cobalt .tile, .theme-cobalt a i {
color: #F3A205;
}
.theme-cobalt .tile {
background-color: #24222D;
}
.switch.active .icon {color:#FFFF00!important}
.fa-toggle-on {opacity: 1!important}

I tried to add other 2 lines in order to change the color of the toggle-on when active but I can’t.
Could you pls suggest me how to do it. On top of that I was also trying to change the color of the thermostat tile when status is heating, how could I insert the if then?

thanks a lot for the help


(fabrizio) #468

I have made some changes (see below). I was able to change the color of both icon and text of the active tile but not the background, what am I doing wrong?

.theme-cobalt .tile.active .icon i.active {

color: #24222D;

}
.theme-cobalt .tile.active {

background-color: : #F3A205;
}

.theme-cobalt .tile.active, .theme-cobalt a i {
color: #24222D;
}

.theme-cobalt .tile, .theme-cobalt a i {
color: #F3A205;
}
.theme-cobalt .tile {
background-color: #24222D;
}