.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
I tried that but it didn’t change the size of the city name. That is why I started down the path that I was on. I am guessing this is a non-standard tile and that the city name is not the header?
The Header Font Size option should change the City(title) font size in the weather tile. Can you verify if you have a specific CSS snippet override the title’s font-size and have a higher priority in terms of the CSS selector, or have !important in the font-size property?
Can you share your complete CSS snippet so I can help take a look?
Here is the css:
.toast.green { display: none }
.tile .title { top:70%; }
.tile .icon svg {width: 55%; height: 55%; 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; }
.tile.--theme-style-weather .title { top:10%; }
..tile.--theme-style-weather .icon svg {width: 50%; height: 50%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);}
.tile.--theme-style-weather .tile-footer { text-align: center; bottom: unset; top:95%; }
.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%;}
It is working - when I set to tiny I get this:
And extra large results in this:
1 Like
You can also choose “Custom” and specify the % in the Header Font Size option too. (Extra Large is 125%, so you can try 150% in your case.)
Got it - BTW on Safari when I go back to edit the custom size it does not show me the line for the size entry. I have to click another option, then click back to size which is then reset and enter the new number.
As I add more tiles I find that I want to tweak certain tiles independently, as I did with the weather tile because my new theme messes with them. For example I want to play around with the title on the RSS feeds tile and move it back up to the top as I did on the weather tile.
In the example you started me off with you reference the tile with .tile.–theme-style-weather. I tried doing the same for the news feed tile, but couldn’t find in the code what the tile name is. I used the inspect code to see if I could find it but probably need some pointers here? Thanks.
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.
1 Like
Thanks. It’s a little tricky. I found the reference in the html to the tile so I am going to try this on a couple of other tiles to see how I make out.
1 Like
How do I address the text content in Label Tile? I looking to add a shadow to the text. I’m assuming it’s…
.tile.–theme-style-MYSTYLE .main-content .something???