[WIKI] Custom CSS snippets, verified on SharpTools

SharpTools.io (web)
52

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

53

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.

2 Likes
54

I got it to work, thank you very much.

1 Like
55

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.

1 Like
56

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?

58

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

1 Like
61

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

1 Like
63

Is there a way to add text in tile footer?

1 Like
64

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

image
image566×565 69.7 KB

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
65

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?

66

I shared some tips on how to do this

2 Likes
67

Thank’s @Chris_C . That works!
Is there a way to add custom css to specific tile? I have few switches in my dashboard and if I add css it will affect to every switch tile and I would only need customize one tile.

68

The last example from the wiki shows how you can use a custom style named ‘warning’ and the css to target it.

So its .--theme-style- and then your style name in lowercase.

69

Alright I have to try that one out.

I still have one question as you are now willing to answer all my stupid questions :smiley:

image

Is there a way to change color when mode changes to night or away and same thing for HSM when mode changes to Armed?

I used to have three tiles …each for location mode (Day, Away, Night). Now that I’m using mode changer tile (just on tile) it is always as grey as it is. I would like to get more attention with colors when for example HSM is armed (so that my kids do not open door accidentally when HSM is armed)

71

Hi All,

I’ have the dashboard in an iframe with some dynamic images behind it. I would therefor like to make the dashboard background transparent.
I almost got it working but on the tag i have this class: “grey darken-3 white-text”. Is there a way to overwrite or remove the grey and darken-3 class ? If so then it would be transparent.

/Rasmus

72

Make sure to use !important to override it. Something along these lines…

body.grey.darken-3 { background-color: transparent!important; }
1 Like
73

Hi Chris,

Thanks. Actually it turned out that it wasn’t the !important, but the way I had written it.
Apparently it has been to long since I fiddled width CSS last :slight_smile:

/Rasmus

1 Like
75

I am wondering if there is a way to set the color of the thermostat control arrows. What I would like to do is change the both arrows in red circle to red and both arrows in blue circle to blue to correspond with heating and cooling. I haven’t found a way to accomplish what I am trying to do.

image

76

Maybe something like:

.thermostat .heating-controls > a {
    color: red;
}
.thermostat .cooling-controls > a {
    color: blue;
}

And as always…

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.

…especially in this case since it’s a fairly narrowly targeted CSS selector that we might tweak in the future. :slight_smile:

1 Like
77

Thanks so much. That worked after I added !important

image

1 Like