[WIKI] Custom CSS snippets, verified on SharpTools

Avi_Kalderon · November 24, 2020, 11:19pm

.tile .title { font-size: <specify size in points or em units>; }
-and-
.tile .title-footer { font-size: <specify size in points or em units>; }

should to the trick
Note: if you don’t see any changes, you may need to add !important clause before the semicolon to force these styles to override other definitions
Example:
.tile .title { font-size: 2.5em !important; }

mark_price · November 25, 2020, 1:35am

Okay. thanks a lot. i will work with these to see what I get. I have some non-themed dashes.

Stan_Silverman · November 27, 2020, 6:05am

Does anyone know the syntax for the font size of the value on the NUMBER variable tile. It doesn’t seem to be icon.

Thanks.

Chris_C · November 27, 2020, 8:13pm

The starting size is ‘3’, so the following will double the size:

.tile.variable.variable-number .main-content > span { font-size: 6em;  }

I added it to the top wiki post too.

Stan_Silverman · December 2, 2020, 5:13am

I’m not sure I understand the use of adjusting margins.

(More accurately - I am sure I don’t understand it!)

josh · December 3, 2020, 8:08pm

This one?

kampto:

Adjust the margins on top/bottom or left/right

Make the top/bottom and side margins symmetrical or indiviually adjust using em or other
.grid.dashboard { margin-top:0; margin-bottom:0; }
.force-full-width, body div#app div.container.full-width { padding-left:0; padding-right:0; }

It’s removing the whitespace around the dashboard.

Here’s a screenshot of that snippet applied:

just_jake · January 10, 2021, 3:48pm

Does anyone know the css code for the Tiles background color. I’m wanting to have a different color and transparency other than the preset colors.

Michael · January 10, 2021, 5:11pm

.tile {background-color: RGBA(130, 0, 0, 0.5)!important;} Blue with a 50% transparency

Color value/transparency is specified as: RGBA(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

just_jake · January 10, 2021, 5:33pm

Thanks how do you determine the active vs inactive tiles? @Michael

Michael · January 10, 2021, 6:49pm

Under Custom CSS enter:

.tile.--theme-style-default{background-color: RGBA(128,128,128,1.0)!important;}
.tile.--theme-style-active{background-color: RGBA(255,0,0,0.5)!important;}

Then edit the individual tiles and check the Style option

josh · January 10, 2021, 6:51pm

Most tiles will also add an ‘active’ class to the tile if you want to target things more generically.

Eg.

.tile.active {
  background: red;
}

Please note that any custom CSS snippets provided are not officially supported and may need to be adjusted with potential future changes to the SharpTools web app.

just_jake · January 10, 2021, 7:07pm

Thank you @josh and @Michael. This has helped so much. However I was hoping
.toast.green {background: pink; }
would work but I was wrong.

Michael · January 10, 2021, 7:15pm

You can change it…
.toast.green{ background-color: pink!important; }

josh · February 17, 2021, 10:58pm

A user on Facebook was asking how they could have a Konnected Siren (switch) only show the Label (title) as the main content and no icon, so I wanted to share the snippet here for reference:

.tile.switch .icon { 
  display: none;  /* hide the icon */
}
.tile.switch .title { 
  font-size: 2em; /* 2x font size */
  height: 100%; /* fill the full tile height for centering */
  top: 0; /* align to the top of the tile; remove top padding from title */
  display: flex; /* enable vertical centering */
  align-items: center; /* horizontally align */
  justify-content: center; /* vertically align */
}
/* The style below targets everything in the title 
    to make it have a ellipsis if the text overflows  */
.tile.switch .title * { 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Please note that any custom CSS snippets provided are not officially supported and may need to be adjusted with potential future changes to the SharpTools web app.

Bloodtick_Jones · March 6, 2021, 9:46pm

Updated wiki including showing custom themes. Thanks @Michael for description.

Bloodtick_Jones · March 13, 2021, 12:58pm

Added Weather Tile footer size to the wiki list.

Jason_Wise · March 31, 2021, 4:01pm

Hello, I am using the Thermostat Tile setup as 1 tile wide and 2 tiles high. I would like to make some changes to the text size and possibly move things around. Is there any known code for Thermostats that I can start with?

Michael · March 31, 2021, 8:35pm

Thermostat Classes:

.tile.thermostat .title {css-instructions;}
.tile.thermostat .temperature {css-instructions;}
.tile.thermostat .temperature svg {css-instructions;} / * icon * /
.tile.thermostat .control-lower, .control-raise {css-instructions;}
.tile.thermostat .current-temperature {css-instructions;}
.tile.thermostat .humidity {css-instructions;}
.tile.thermostat .status {css-instructions;}
.tile.thermostat .actions {css-instructions;}

Font (text) size can be set using the following CSS:
font-size: 3em;

Please note that any custom CSS snippets provided are not officially supported and may need to be adjusted with potential future changes to the SharpTools web app.

Jason_Wise · April 1, 2021, 1:10am

Thank you, exactly what I was looking for.

Jason_Wise · April 1, 2021, 1:58am

Wondering what I am doing wrong. Everything else worked perfect except for the title. This is what I used, but did not change anything. Any ideas?

.tile.thermostat .title { font-size: 5em; }