[WIKI] Custom CSS snippets, verified on SharpTools

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

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.

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.

2 Likes

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

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

This one?

It’s removing the whitespace around the dashboard.

Here’s a screenshot of that snippet applied:

2 Likes

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.

.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).

1 Like

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

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

1 Like

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.

2 Likes

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

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

1 Like

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.

3 Likes

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

3 Likes

Added Weather Tile footer size to the wiki list.

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?

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.

3 Likes

Thank you, exactly what I was looking for.

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; }

You may need to override a style - Enter: !important after the value and before the semi-colon

{font-size: 5em !important;}

1 Like