Not natively. It would require custom CSS.
Correct, I am using custom css. It move a icon on a stock tile like a lock. During the edit section but then it clips the icon onced saved. Please keep in mind that this is just a test and size and placement are extreme.
Would this help?
.tile.–theme-style-[YOUR STYLE] .icon svg {width: 70%; height: 70%; margin: 0; position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%);}
Returns this:
I don’t think so.
What I want to do is increase the size of the weather icon to just barely extend past the tile canvas. For the forecast tiles, these are supertiles if that matters.
I can adjust the font sizes using this. Works great.
/* Weather SuperTile Text Size*/
.--theme-style-weather-tile .main-content {font-size: 125%!important;}
Now my next hurdle is the Supertile has 3 items in it. How can you access them individually.
I ask this because I want to set exact values for the top of each item. I tried the code below but that doesn’t work.
.--theme-style-weather-tile .main-content .item {top:-7%%!importat;}
Also one of those items contains a icon.
Please note the images are not stock icons they are custom images.
Also would it be to much to ask for a break down on how to access element like in this post.
The overflow is hidden, so you have to override it if you want stuff to show up off the tile. Not sure what else this might break so buyer beware.
.super-tile.tile { overflow: visible!important }
.super-tile > .main-content { overflow: visible!important }
@Chris_C thank you for the reply. As you can see above I have 3 elements in my supertile. 2 text and one image. That will affect all elements inside the main-content container correct? So if I just want the weather icon. To hang off the outside edge how would I move just it.
Just drag the icon partially off the super tile and make sure the rest of the content is completely within the super tile. During editing the overflow would still be hidden but it would look right on a dashboard with the custom css
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.