Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

@hajar,

Try removing the space between momentary and [data-device…].
It should look like this:

tile.momentary[data-device=‘eeec51c0-eb2d-4848-af67-0ed9af4a159d’] {background-color: white;}

Otherwise look for another code snippet that changes the background color of the momentary tile.

I second what @DarcRanger said:

I would also stress to remove the quotes and retype them too as some text editors don’t transfer properly into the custom CSS.

I did one of my devices to test out the string, you will notice I used the double quote for mine:
.tile.momentary[data-device=“31f1a2e5-9e54-4903-a8d2-58ca148a1de5”] {background-color: white;}

Try taking a look at our Custom CSS page on www.SmartTiles.click

1 Like

Been there. That’s where I started. I was using the wrong CSS for the active and inactive state. The Custom CSS page didn’t have the breadcrumb I needed for momentary buttons. (Or I missed it)
Read some forums, google searches and tried a few things on my own before I asked. I knew @DarcRanger or someone would know the answer. That page is VERY HELPFUL for a rookie like me trying to learn. I have used it as a guide for MOST of the stuff I’ve done. I appreciate the people who sacrifice their time to make guides for people like me.

2 Likes

Woman here! Happy to beta test. House full of us :slight_smile:

3 Likes

Hi folks!

[huckster] Are your double-height thermostat tiles taking up too much space on your SmartTiles screen? Would you prefer a smaller, single-tile thermostat that allowed you to easily monitor your heat/cooling in a smaller space. Would you like a clear visual that your thermostat is on and heating/cooling? How about a blue background for cooling and a red one for heating? Now, what if I told you that you could tap on this single-sized tile and it would become a double-sized tile so that you could interact and adjust the temperature? How much would you pay? What if I told you that it was all completely free? Well I’ve got just the custom CSS for you! [/huckster]

The size of this thread was a bit overwhelming, and I’ve found it difficult to monitor comment threads when things get this long, so I posted my custom CSS code over here. Enjoy!

2 Likes

Thanks, Jeff!

We have a “Custom CSS Gallery” on our website that @keatonhoskins generously has built. Perhaps he’ll look into adding this example when he gets an opportunity.

1 Like

Is this page broken? it times out for me…

Thank you @lobo5519 it looks like the site might be down or their might be issues with the server host I will have @625alex and @tgauchat look into it.

1 Like

I have actually been trying to hit this page for 3 days just and FYI

I did some tuning and also split the Gallery into 2 pages (FYI: @keatonhoskins). The 2 pages seem to be loading better now, but then again, it is late night so perhaps the server is less busy.

Let’s see how it goes.

http://www.smarttiles.click/help/customizing-css/custom-css/

Does anyone know how I might pull the UVindex from the SmartWeather Station Tile 2.0 and display it in SmartTiles?

Thanks

Looks good! What is the case/wall mount you used?

SmartTiles currently only supports Attributes from the official SmartThings “Capabilities” list (and not even all of them… it’s a feature prioritizing task).

We’re thinking of ways that custom / ad hoc Attributes and Commands may be handled in the future, since the Capability list evolves too slowly.

1 Like

The nest weather device (part of nest manager 2.5) does export uvindex an attribute.

The earlier answer that SmartTiles will not look for it still holds…, but you could write your own smartapp to read it (if you use nest manager)

1 Like

looks good - thanks!

1 Like

Traffic!

Whilst looking at some CSS examples here: http://www.smarttiles.click/help/customizing-css/custom-css-gallery-page-2/ I noticed that @DarcRanger had a link within his CSS comments to a Google traffic page , that got me thinking. I’m aiming to put a SmartTiles tablet by the front door and having traffic as part of the SmartTile panel really appeals. So, here’s the results of my tinkering:

First of all the only way to accomplish this I’m aware is to utilise an image and then link that image using the “Stop Motion Video Stream” within SmartTiles. I think @625alex and @tgauchat maybe working on the ability to embed a web page but until then here’s a solution that may be of interest to the community.

Unfortunately I’ve not found a way to do this with Google Maps as they don’t provide a static map (an image) and allow you to overlay traffic information. Microsoft Bing groan however, do. You have to use their API but it’s not difficult to set up.

Here’s one of my SmartTiles showing you how it looks.

Head here to setup yourself with a Bing Maps API key: https://www.bingmapsportal.com
Sign in (you’ll need a Microsoft Login)
Select My Account -> My Keys
Click to create a new key
Give it a name
Ignore the Application URL
Key type=Basic
I selected DEV/TEST
Copy your newly created key

Next head over here: http://staticmapmaker.com/bing/

Use this useful page to generate the URL you will supply to the stop motion video feed in your tile. The easiest way to do this is use Google Maps, centre your required map and then copy the co-ordinates from the Google Maps URL, then paste that info into the above site. Change the rest of the settings to your needs (don’t forget to select traffic). Once you’re happy copy the URL and use that as your stop motion video feed.

Further info:

Bing Maps is not free, but if you consume fewer than 125,000 transactions in a 12-month period you shouldn’t have an issue. Either way read the T’s and C’s:

http://www.mapslicensing.com

So, if you refreshed the map every 15 minutes that would be 96 times a day which is about 35,000 transaction per year, If my calculations are right that’s well within your free usage rights (I think).

If you have other stop motion cameras then it might be useful to understand if you can apply a different refresh rate to the traffic tile via custom CSS in order that it is refreshed less than your cameras thus avoiding excessive API calls.

6 Likes

Maintaining Theme Colors when Customizing CSS Icons

I’ve been customizing my dashboard which is based on Onyx Theme Thanks to @diehllane for the guide. How I get the customized Icons to follow the Theme’s color rules? All of the changed icons only change from grey to white instead of red.

1 Like

Custom icons will need to be created and uploaded/stored with the different color options so you can select what you need.

The FA (FontAwesome) icons work with CSS to change the color because they are regarded as a character (since it’s a font) rather than an image.

1 Like

Does anyone know if it is possible to have different refresh periods for static image video cameras?