Josh that worked perfectly for targeting certain tiles. Now my finale hurdle is adjusting the image size. I’ve tried font-size… That definitely didn’t work because it’s not a font/vector. Height and width only moved it. Some I’m assuming it’s another layer deep as it appears inside the another div.
.--theme-style-weather-tile2.super-tile .item:nth-child(1) { top: 40%!important;}
Hopefully you can help.
Here another horrible image of the code. Its a img.
I tried
.--theme-style-weather-tile2.super-tile .item:nth-child(1) .img { height: 2000%!important;}
But it didn’t work.
You can adjust the size of the icon item by dragging its handles and the image within it will increase in size. When an icon item is selected, you can also use the (font) size adjustments in the Super Tile editor toolbar and that will increase the size of the icon within its container.
Thank you, I am aware of that. However the controls are very clunky while on mobile.
If it scales with the height and width of the item then setting the height and width of the item like you did the top should do it. Was your css on the img instead of the .item?
.--theme-style-weather-tile2.super-tile .item:nth-child(1) { height: 200%!important;}
Only moves it vertically. I believe it’s targeting the container and not the image.
This is inside the nth-child.
Did you do the height AND the width?
Height and width fixed it. Thank you.
Edit: I was so close, no DOT.
.--theme-style-weather-tile2.super-tile .item:nth-child(1) img {object-fill: cover!important;}
@Chris_C all of your suggestions have worked perfectly. I have a question. Using the object inspector I can object-fit: cover to the img element and it fills the image to the whole tile.
However I can’t get it in Sharptools. I was hoping you can help out… again because I have no css skills.
Neither work.
.--theme-style-weather-tile2.super-tile .item:nth-child(1).img {object-fill: cover!important;}
.--theme-style-weather-tile2.super-tile .item:nth-child(1) .img {object-fill: cover!important;}
I have a supertile with multiple variables. I have successfully been able to target the color of the text of a specific variable in the supertile using the CSS .item:nth-child. I would like to add a background color to this same variable instead of changing the color of the text. Is this possible?
edit for clarification
I finally figured it out!
.tile.--theme-style-THEME NAME .item:nth-child(15) .value { background-color: #06c238 !important;}
Could you show me the CSS to target a variable text colour in a supertile, Thanks
.tile.--theme-style-THEME NAME .item:nth-child(15) .value { color: #HEX COLOR CODE !important;}
Replace the (15) with whatever level your variable is at.
Worked great, Thanks