Weather Tile - CSS Examples (no background images)

It occurred to me that not everyone can reference an image url. So, I’ve created some additional weather examples (mimic the examples with bkgrd img) and included the CSS. With these… you can easily change the colors (background, text) to fit your project/dashboard color story.

Notes:
1 The weather attributes reference a custom DTH found here: Custom DTH Info

2 After creating your Theme and adding in the Custom CSS - You will need to add the following style reference to your Theme.

ex2-1, ex2-2, ex2-3, ex2-4, ex2-5, ex2-6, ex2-7, ex2-8, ex2-9, ex2-10, ex2-11, ex2-12

3 Examples were created with the following settings:
Size: Scalable
Columns: 10
Spacing: No Gap (required for examples 1, 3 & 5)

While everything should scale, you may need to adjust the border radius based on your column width/device and or preference.

2 Likes