You can target Custom CSS to specific Named Styles using the approach James mentioned above.
He has a style named sthm-icon which is applied to the tile and he targets it in Custom CSS with the format .--theme-style-{{style-name}} so in this case it’s .--theme-style-sthm-icon
Since it’s just normal CSS under the hood you can use any of the CSS selectors that are available in Custom CSS. You could target specific Tile Types since they are included in the classes applied to each tile and really any other attribute in the DOM. Each tile technically has it’s own ID that is persisted, so you could even target a specific tile (without a Named Style) applied if you wanted.
Thank you Josh,
Can you provide a link to something that would have different CSS sripts that would work. I’m not to familiar with CSS so I’m not sure what to put in to say move text more to the top of the tile vs the middle or bottom
The community has been putting together some examples in the following thread. If you can share some details around specific things you’re trying to accomplish (and on what type of tiles), I’m sure the community can help you out.
PS. You might want to post it in the linked thread as it seems like there’s a number of people following that thread and helping out.
Im not having much luck with this. I made tow new tile styles and named then Alarm-Icon and Alarm-variable. I copied your code only changed the style names.
.tile.–theme-style-Alarm-icon .tile-footer { display:none }
.tile.–theme-style-Alarm-icon .main-content .icon { align-items: flex-end; position: relative; bottom: 5em;}
.tile.–theme-style-Alarm-variable .main-content .value {justify-content: unset}
This is what I get for a display. I’m still new to CSS coding but based only your example I dont think its supposed to look like this
Can you take a screenshot of the custom CSS in the Theme editor? Not sure if the double dash -- before the theme-style-alarm-icon was changed to – by the community editor or you actually had – in the CSS, and the name should be all lower case.
@James I think I got it figured out. I double checked the – and up I cannot use a “A” in the name only “a”. This I did not know I was trying to make it spelled the same. Either way I think I got everything moved to how I want them.
Thanks again.
What kind of tile are you trying to change the glow color of?
The screenshots in James’s example are using Virtual RGB devices. It’s a neat trick @Carlos_Juarez came up with to use a virtual RGB device and adjust the color based on various conditions using rules.
@josh my light tiles. The yellow doesn’t look good on a pink time… Yes yes I know… Pink…? But that’s what the wife wants. Aslo I have the css code to change the default tile to what ever rgb want but I can’t figure out the active tile. Can you help
I’m away from my computer at the moment so my apologies for the brevity, but here’s a snippet for changing the glow color to white:
/* adjust the glow color and intensity */
.tile .icon.glow-yellow {
-webkit-filter: drop-shadow(0 0 8px white) drop-shadow(0 0 20px white);
filter: drop-shadow(0 0 8px white) drop-shadow(0 0 20px white);
}
As always, any custom CSS snippets provided aren’t officially supported and may need to be adjusted with potential future changes to the SharpTools web app.
So I am starting to play around with the look of my tiles. I like the layout of this tile. What would I need to do change the standard layout of my Tiles to put the title and icon in the middle this way. Ideally I would place any variable values just below the title. Thanks.
@simon, please note that the “tile” shown in the screenshot is actually made by stacking two tiles together. So the short answer for any way to change all tiles to this style would be no. But you do have the option to customize the tiles in this way if you want. The CSS snippet provided moves the icon from the top tile down toward to the bottom, and moves the variable value from the bottom tile up toward to the top. So they look like “centered” when two tiles are stacked together.
To apply a CSS to all variable tiles and adjust the position of value shouldn’t be too complicated. I may be able to provide the more specific suggestion if you can show me a mock up or a screenshot of your variable tiles, and explain how you want to position the value in more details.
A few CSS tricks mentioned by the community CSS Wiki can be applied here with some modification. See below for the positional example based on your mockup, but please note that the following css snippets are custom modification and may need to be adjusted with the potential future dashboard updates.
I’ve been having a play with custom CSS for specific theme styles and I haven’t had much success yet. What I’m trying to do is change the icon size for a specific style, with this custom css:
@James I added a nice weather app but unfortunately the changes I made above to my tiles disagree with it. I tried to figure out how to undo this on this one tile but couldn’t figure out how to do it. I thought of creating a new theme that I could apply just to this tile but I don’t think you can do that? Any pointers? Thanks.
