[WIKI] Custom CSS snippets, verified on SharpTools

[Jason_Wise]

@Michael

{font-size: 5em !important;}

Bingo!!! Thank you, very much appreciated!!!

[Jason_Wise]

Is there code to change font color? The current temp reading is currently a slight grey on my dash and I would like to make it white to match the rest of the tile.

I figured it out color: color name

[Michael]

@Jason_Wise

The current temp reading is currently a slight grey

Note: You may be noticing a transparency

Use the opacity property to set the transparency level from 0-1, where 0 is completely transparent, 0.5 is 50% and 1 is fully opaque.

{opacity: 1;}

[Jason_Wise]

Ok, that fixed that issue. But looks like 1 last one has popped up. This is very weird, the control raise and lower icons, I have set perfect. But when my dashboard refreshes the icons go to a different position. I then have to go back in and save my code again and then they go back to the way I want them. Any idea how to fix that one?

[Michael]

I have a hunch! @Jason_Wise, Can you dm me your CSS - I can take a look at it later today.

[Bloodtick_Jones]

The Hero attribute tiles are truncating the title and not wrapping. This forces all tiles to wrap the title:

.tile .title { white-space:normal; }

[josh]

Thanks for sharing. Might be a helpful snippet for someone who only wants the title on certain tiles to be truncated or not. There’s a dashboard setting (hidden behind the advanced option) to enable or disable truncation of titles across all tiles in the dashboard:

Since you mentioned Hero Attribute Tiles, there’s a setting for the hero attribute tile to wrap or truncate the content on those too.

[Bloodtick_Jones]

@josh

there’s a setting for the hero attribute tile to wrap or truncate

This setting had no effect on the hero attribute title. It was truncated in both the Wrap and Truncate setting.

[josh]

Just pushed a hotfix to resolve the Hero Attribute title not respecting the dashboard’s truncate setting. Thanks for the heads up.

[Bloodtick_Jones]

Ha! I was thinking it was a bug that was missed and just not reported. Honestly took me some time to figure out why a couple of titles truncated and others did not, but only about 15 minutes snooping around the DOM to figure it out, so didn’t think to report it. Thanks for the quick fix!

[Jason_Wise]

Does anybody know if there is CSS code to add Glow or change the color of Glow on a tile?

[smart_tomlinson]

I use this for some icons I’ve assigned a specific style to.

#app .tile.--theme-style-dash-active:not(.spacer) .icon  {
   -webkit-filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
   filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
}

I’m just on phone, not computer so can’t tell if it’s formatted properly.

[Jason_Wise]

@smart_tomlinson

-webkit-filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);

I got it to work, thank you very much.

[Paul_Harrison]

If you want a shadow behind text (e.g. to improve contrast) here’s the CSS code I’ve used lately, that I don’t see listed. This is for main content (e.g. hero text on a thermostat tile), but works for title and footer too:
.tile .main-content { text-shadow: 2px 2px 8px #000000a0; }

The first two numbers set the shadow offset, the third sets the shadow blur size and the fourth is the shadow color (transparency works, so this is black with a transparency of A0 (160 in decimal, out of 255, where 0 is fully transparent, 255 or ff is totally opaque).

This works with theme style specific CSS too, which is probably where it is best used.

[Terri]

Can you use CSS on an individual tile? I have 1 or 2 tiles on a dashboard that I want to change the text size on but I don’t want it applied to everything.

Also, how do you adjust the font size of the default Month calendar?

[Paul_Harrison]

@Terri

Can you use CSS on an individual tile? I have 1 or 2 tiles on a dashboard that I want to change the text size on but I don’t want it applied to everything.

Yes you can, you have the set those tiles to use a custom style, and then you can use the technique in this thread to apply CSS only to that style: How to move text / labels in tiles with CSS

[Paul_Harrison]

@Paul_Harrison

For hero text on a thermostat tile for example, to change the font size (font-size doesn’t work):
.tile .main-content { transform: scale(125%, 125%); }

My apologies, this code is inconsistent (it works in Chrome on Windows, but does not work in Chrome on Android or Fully Kiosk Browser on Fire OS). After a bit more playing around, this does work for hero text:
.tile .main-content { font-size: 2.35em!important; }
However, be sure to test it on the platform you’re using, as I’ve found the results to be variable (I get a slightly larger font on Android and Fire OS than I do on Windows, I’ve no idea why, and its not much different, but do be sure to check).

[JiiPee]

Is there a way to add text in tile footer?

[josh]

You could use the :before pseudoselector along with the content property.

.tile.switch .tile-footer .status > span:before {
   content: "Switch is "
}

.tile.lock .tile-footer .status > span:before {
    content: "Lock is ";
}

.tile.door-control .tile-footer .status > span:before {
    content: "Door is ";
}

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.

[JiiPee]

Might be stupid question, but how do I find out tile.type?
Examples seems to be stwitch, lock and door-control. How do I know the right type for certain tiles in my dashboard?