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