[WIKI] Custom CSS snippets, verified on SharpTools

[Chris_C]

I shared some tips on how to do this

How to move text / labels in tiles with CSS

The .tile.–theme-style-NAME is when you are trying to target a specific style name from your theme that you applied to a tile. You can also target the types of tiles and I do the same thing you mentioned and open the browser inspector, click the pointer button, click the tile and look for the classes. Looks like .tile.news-feed is what you’re looking for. [image]

[JiiPee]

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.

[Chris_C]

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

@kampto

Custom Background Color when using Themes

When using themes including adding custom styles (for example: ‘warning’ is custom)

.tile.--theme-style-warning { background-color: red!important; }

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

[JiiPee]

Alright I have to try that one out.

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

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)

[Rasmus_Agdestein]

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

[Chris_C]

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

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

[Rasmus_Agdestein]

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

/Rasmus

[Terri]

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.

[josh]

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.

[Terri]

Thanks so much. That worked after I added !important

[Dustin_bragg]

Does anybody know css code which will let me add my own jacks icons or do I have to use ones that are already installed

[Eric_Dunn]

@josh Is it possible to implement this box-shadow rendering order change into the STs custom CSS feature? I’m pretty new to CSS and just looking to be pointed in the right direction.

https://blog.dudak.me/2014/css-shadows-under-adjacent-elements/

[James]

Yes, you should be able to do this with the custom CSS, but I am curious what design are you trying to achieve?

[Eric_Dunn]

@James

I am curious what design are you trying to achieve?

I’m trying to add some visual depth to tiles that are clickable. Tiles that are informational only will remain visually flat. In the interest of getting the most of the real estate, I want to keep the tile spacing pretty tight. When I get the box-shadow parameters where I like, the shadow bleeds overtop of adjacent tiles making some appear stacked.

If there’s a better way to achieve this, I’m always open to suggestions.

[James]

it turns out much more tricky than I thought. Since the tile div is wrapped within a couple more divs, you cannot use the linked box-shadow trick. So you may either have to adjust the shadow size to avoid the overlap, or use something else like different color/border and etc.

[Eric_Dunn]

@James Thanks for confirming. I came to the same conclusion.

[Eric_Dunn]

Can CCS be used to replace icons with custom hosted versions?

[kampto]

Can CSS pull the attribute and change background color based on value? Like for a temperature tile change color based on a temperature. I know I can build a style states to do this but adding a blanket CSS would cover all tiles in a certain theme/style.

[Carlos_Juarez]

Hi friends, Does anyone can help me to CSS configure my text variables tiles? I just cannot get adjust them. In mobiles tile has something weird effect, that makes its icon scrolls top-down when tap-swipe on them. I had made that variable value was not displayed, but an icon and specific color for variable value:
.tile.–theme-style-iluminacionon .value {display: none;}

But:
.tile.–theme-style-iluminacionon .icon svg {font-size: 3em } does NOT work at all.

Does anybody knows why variable tile icon could has the scroll effect ?

THANKS IN ADVANCE !

[just_jake]

@josh

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

@josh would this work for hiding the icon for a hyperlink tile? Obviously it wouldn’t be .tile.switch

I ask because I’m wanting to make a hyperlink tile look like a label tile.