@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.
2 Likes
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.
Title positioning
.tile .title { top:60%; }
Icon positioning
.tile .icon { display: unset; position: relative; top:15%;}
Footer positioning
.tile .tile-footer { text-align: center; bottom: unset; top:75%; }
.tile .tile-footer .status span.right { float: inherit!important; }
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:
.tile.--theme-style-bulb-inactive .tile .icon svg {width: 75%; height: 75%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
Unfortunately, that doesn’t work. The style is actually Bulb-Inactive so I removed the upper case, but still no luck.
.tile.–theme-style-bulb-inactive .tile .icon svg {width: 75%; height: 75%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
Looks like you had an extra .tile in the css selector.
2 Likes
Yup, that was exactly it… Good spot James, thank you!
1 Like
@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.
Can you share the Custom CSS you have in your Theme? Might help identify where the issue is.
Thanks. It’s quite simple. It is the one James helped me with - about 2 messages ago
@simon so you would like the CSS to be applied to all tiles, except this weather tile? Create a new style called exception in the same theme you are using, update the css snippets to use :not() to exclude the css from being applied to the specific elements. Then the original CSS mentioned earlier would be like these:
Title positioning
.tile:not(.--theme-style-exception) .title { top:60%; }
Icon positioning
.tile:not(.--theme-style-exception) .icon { display: unset; position: relative; top:15%;}
Footer positioning
.tile:not(.--theme-style-exception) .tile-footer { text-align: center; bottom: unset; top:75%; }
.tile:not(.--theme-style-exception) .tile-footer .status span.right { float: inherit!important; }
However, while :not() is powerful and handy sometimes, I personally prefer to specify the css on whatever elements needed. For example, you can create a style called “center-aligned”, and change the css snippet to apply the styles to the tiles using this style. (As you’d guessed, the selector would be .tile.--theme-style-center-aligned in this example.)
ok, I think the second approach makes more sense. So I started playing around and got a little confused.
When I added the original code I did not specify a theme name for it, just placed in the custom css section:
.toast.green { display: none }
.tile .title { top:70%; }
.tile .icon svg {width: 60%; height: 60%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);}
.tile .tile-footer { text-align: center; bottom: unset; top:85%; }
.tile .tile-footer .status span.right { float: inherit!important; }
These settings seem to be applied to the Active tile style? So I was able to switch the weather tile to Default and it displayed fine. But still the city information is too low, so I set about creating css for a tile style “center-aligned”. Ideally I want to take the default as the starting point. How do I find all of the settings for the default tile style?
Hopefully that makes sense! Thanks.
The original css snippet is actually applied to all tiles, not just the “Active” ones.
So if you think most of the tiles will be using this “centered” style, then the :not() trick mentioned above might be the easier way. Just keep in mind that when you add a new Style in the Theme, and you don’t want these title, icon and footer customizations to be used in this new Style, you will need to add another exclusion :not(.--theme-style-XXXX) in the css snippet. (This works more like using the centered style as the starting point that you described.)
I ended up going the route of creating a style just for this tile as it has some unique properties that made more sense going this route than the not. One of these is that the following command doesn’t adjust the icon size when I change the width and height percentage:
.tile.–theme-style-weather .icon svg {width: 100%; height: 100%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);}
Is there something that could be preventing this happening? Thanks
@simon you will need update the CSS selector in the snippet based on the element’s class. See below for example that the Weather Tile uses temperature-and-icon, instead of just icon`.
Here is the proof-of-concept css snippet updates that also move the temperature text a bit to accommodate the bigger icon size.
.tile.--theme-style-weather .content-holder {width: 100%;}
.tile.--theme-style-weather .temperature-and-icon svg {width: 35%; position: absolute; top: 45%; left: 35%; transform: translate(-50%, -50%);}
.tile.--theme-style-weather .temperature-holder {position: relative; left:20%;}
Thanks, I have never played with css so enjoying this. Lots of googling but occasional road blocks.
Next I am trying to change the size of the City (title) font. I tried applying the modifier "font-size: 2em; " , didn’t work.
I see in the source that this is listed as “title truncate”. Reading up on the truncate I do see that this is use to truncate with ellipse but I don’t see anything with just truncate, instead text-truncate.
What am I doing wrong here? Thanks.
To adjust the tile title’s font size, you can just use the built-in style option - Header Font Size, instead of the custom CSS. 
1 Like
