Dashboard Themes - CSS

I’m not sure how much interest there is in ‘Themed Dashboards’, or if it’s more about the properties (css) behind it but I’ve gone ahead and created a few themes that you’re welcome to try or use the style sheet to create your own - Hopefully I’ve covered/styled the majority of the tiles. While there’s a lot more ‘styling’ you can do (through css), I just wanted to keep the focus on color stories (themes). I’ve also included a few more tile (Things - i.e Lights/Switches) examples/css.

How to:
Style Sheet Links: Click on the link and right click Save as
Create a new Theme and copy and paste the provided style sheet into the custom CSS section - Open your dashboard and select the newly created theme from the list.

Themes: Each tile/type will automatically get styled the moment you add it to the dashboard. Depending on you dashboard size, you may need to change the Label, and or Dashboard tiles (content/label size).

midnight_chart
Midnight

moss_chart
Moss

nautical_chart
Nautical

neon_chart
Neon

pink_chart
Pink

retro_chart
Retro

spice_chart
Spice

Tile examples: In addition to pasting in the code, you will need to click ADD STYLE and add the following (just need the reference)…
ex1-left-tile
ex1-right-tile
ex2
ex3
ex4

Example 1 (ex1-left-tile, ex1-right-tile): Uses a combination of a Things tile and Label (side by side) - Your dashboard needs to be set with No Gap tile spacing.
Notice the rounded corners only on the top/bottom left tile.
Ex 2 (ex2): Moves the icon and title
Ex 3 (ex3): Moves the icon, title and placing the title to the front - Gradient background
Ex 4(ex4): Sets a color and transparency for both the background and icon/title (separately) + border

After you add your ‘things’, you will need to change the style states to reflect the desired look (i.e. ex2) for both. Note: The default/active state will use the same style reference.

Tile Example - CSS

4 Likes