I’m doing that now but I have 6 tiles and I want them all located using the same top number .
get the position right on one of your tiles, then copy and paste the icon between each of your super tiles and it will keep the position
I did that but when you need to edit the variable tiles on mobile it has a tendency to move them. That’s why I’m wanting to set it with css.
Btw the code provided is allowing the desired effect.
I don’t think you’re going to find generic css to accomplish that sort of thing. You might be able to find the internal ids for each of the items with your browsers inspector and then target some css to those but it sounds complex compared to the alternatives.
Here a horrible picture of those items from what I can tell each item does not have any kind of unique ID.
My bad. I thought there might be ids for each one. If its always the first item you added to your super tiles what about using :nth-child?
I think it would be
.super-tile .item:nth-child(1) { top: 7%!important }
1 Like
Awesome that has work wonderfully.
My next question adding the theme style should only affect super tiles with that style applied to them correct
.--theme-style-weather-tile .super-tile .item:nth-child(1) { top: 7%!important }
When targeting multiple classes on the same element, you wouldn’t have a space between them (eg. .tile.super-tile). So you probably need to drop the space between .--theme-style-weather-tile and .super-tile since they are both classes on the same element. Or since you’re already using a custom named style, you could just drop the .super-tile part if you don’t need that extra level of targeting.
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;}
1 Like