[Abandoned] Dashboard Menus and Tile Examples - CSS

Michael · January 21, 2021, 1:50am

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

corner.png
corner
off.png, on.png
off
device_type_bkgrd.png, device_type_bkgrd_bronze.png, default.png, active.png

default active
bkgrd.png, badge_circle.png

menu_bkgrd.png

menu_border_default.png, menu_border_active.png

menu_border_active

Gary_Collier · January 22, 2021, 4:41pm

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

Michael · January 22, 2021, 7:40pm

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?

Gary_Collier · January 22, 2021, 8:31pm

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

Thanks Mike!

Jason_Clemens · January 30, 2021, 6:29pm

@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!

cmderden79 · May 25, 2021, 9:55pm

@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?

cmderden79 · May 25, 2021, 10:52pm

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

Alan_Hymes · November 5, 2022, 3:20am

Hello, I am new to this so sorry for the basic questions… I see a lot of folks sharing CSS code for cool looking TILES (I think that is what you call them). and I see from above you do the following:

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

What I seem to be missing is HOW do you get a NEW STYLE to use the CSS code. For example I found this CSS code SharptoolsCssFile.txt which references cool tiles. But how do I get a tile/style to use this code?

Or putting it another way, how do I connect a piece of code to a tile? For example in that code there is a tile:

/** tile3 EXAMPLE 3 Large Icon and gradient**/
.tile.–theme-style-tile3 {border-radius: 10px; background-image: linear-gradient(to right, #666666, #000000); color: #FFFFFF !important;}
.tile.–theme-style-tile3 .icon svg {width: 75%; height: 75%; position: absolute; top: 10%; left: -25%;}
.tile.–theme-style-tile3 .title {position: absolute; top: 40%; left: -15%; text-align: right; font-size: 200% !important; color: #999999 !important; font-weight: bold; z-index: 1 !important;}
.tile.–theme-style-tile3 .tile-footer {font-size: 125%; color: #FFFFFF !important;}

.tile.–theme-style-tile3.active {border-radius: 10px; background-image: linear-gradient(to right, #000082, #000033) !important;}
.tile.–theme-style-tile3.active .title {position: absolute; top: 40%; left: -15%; text-align: right; font-size: 200% !important; color: #999999 !important; font-weight: bold; z-index: 1 !important;}

Now how to I use this to make the “tile3”?

I think what I am missing is you say:

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

WHERE DO I ADD THE REFERENCE??? Thanks so much!!

Thanks
Alan

Chris_C · November 5, 2022, 4:16am

In your theme. Then select that style for a tile.

Alan_Hymes · November 5, 2022, 1:45pm

Thank you! That is the part I was missing. Actually I was changing the name as you pointed out, but it was the very last step of SELECTING that style for the tile when using it that messed me up. Also I was expecting the PREVIEW to show the new style but it doesn’t?

Chad_Ceasor · April 3, 2024, 11:03pm

I feel stupid. Am i missing where the CSS code is located for Michaels dashboard snip it? If someone could provide it would be greatly appreciated.

Thanks,

josh · April 3, 2024, 11:15pm

Michael removed their code snippets / file links and is no longer supporting them. I’m going to go ahead and close this thread and update the title to make that more clear.