Dashboard Menus and Tile (Things) Examples - CSS

I wanted to share some menu (dashboard type) and tile (things) examples, along with the CSS to create these.

UPDATED EXAMPLES & CSS

How to:
Links/Images: Click on the CSS link and right click Save as / right click on an image and Save image as…

Create a new Theme (Account > Manage Resources – Enable Advanced),and copy and paste the provided style sheet into the custom CSS section. 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, ex5, ex6, ex6a, ex7, ex9, ex10, ex11, ex11a, ex13, ex14, ex14a

Menu & Tile examples: Open your dashboard and select the newly created theme from the list. After adding your Thing or Dashboard link > Edit the tile and change the style state for both to reflect the example (e.g. ex10). Note: The default/active state will use the same style reference.

NOTE: Example Configuration Settings
Sizing: Scalable
Columns: 12 - I used 1X3 for all tiles except Menu 1 (2x4)
Tile Spacing: No Gap (used for examples 1, Menu 1, Menu 2, Menu 3)

Edit the CSS code to fit your project if necessary.

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 places the title to the front - Gradient background
Ex 4 (ex4): Sets a color and transparency for both the background and icon/title (separately) + border
*Ex 5 (ex5): Moves icon and title. Uses background images (tile_bkgrd.png, corner.png)
*Ex 6 (ex9): Moves icon and title. Uses background images (tile_bkgrd.png, off.png, on.png)
*Ex 7 (ex13): Moves icon and title. Uses background images (device_type_bkgrd.png, device_type_bkgrd_bronze.png, default.png, active.png)
*Menu 1 (ex10): Moves icon and title. Uses background images (bkgrd.png, badge_circle.png)
*Menu 2 (ex6, ex6a, ex7): Moves icon and title. Uses background images (menu_bkgrd.png) Note: ex6a represents an active dashboard – ex7 a blank tile.
Menu 3 (ex11, ex11a) Note: ex11a represents an active dashboard.
*Menu 4 (ex14, ex14a): Moves title. Uses background images (menu_border_default.png, menu_border_active.png). Note: ex14a represents an active dashboard.

*REQUIRES A URL TO POINT TO THE IMAGE

CSS:
CSS Examples
Images: You can edit/change the colors accordingly
tile_bkgrd.png
tile_bkgrd
corner.png
corner
off.png, on.png
off on
device_type_bkgrd.png, device_type_bkgrd_bronze.png, default.png, active.png
device_type_bkgrd
device_type_bkgrd_bronze
default active
bkgrd.png, badge_circle.png


badge_circle
menu_bkgrd.png
menu_bkgrd
menu_border_default.png, menu_border_active.png
menu_border_default

menu_border_active

5 Likes

Hi Mike. Been playing around with this and it’s working for the most part. One issue I’m having is with the radius corners - border-bottom-left-radius: 10px; - this doesn’t seem to be working for me. Any thoughts?

Thanks

Does this issue only occur for this property (bottom left corner)?

If so:
1 Double check the spelling
2 Make sure EACH declaration as a semi-colon ( ; ) at the end
3 You may need to override a class/style - Enter: !important after the value and before the semi-colon (i.e. border-bottom-left-radius: 10px !important;)

If not:
What browser/version are you running?

1 Like

The !important did the trick. Now my next question. How to we get rid of Covid? :mask:

Thanks Mike!

@Michael Thank you! That !important trick was what I needed to mimic what you did with your weather. To have some tiles corners rounded and some not. Thanks!

@Michael been playing with this, but having issues with EX1 left/right. When I choose these I simply get a box tile with the header in the middle - no icon to the left as the example suggests. I started with a clean dashboard so no styles should have interfered. Any suggestions?

Never mind - I understand now - you must use a label beside the thing.