Hey @josh is it possible to interact with individual elements of a Supertile? I’m looking to recreate the effect of the weather icon partially off of the tile.
You already have full control over the positioning of items in Super Tiles, but the tile itself is going to clip any content to keep it within the bounds of the tile. As such, getting CSS control over the individual items is unlikely to help in this particular situation.
In theory, that effect can be created without making an item fall outside the bounds of the tile though. To achieve it, the tile itself would need to be full transparent and a ‘background’ would need to be placed to make it look like the tile background to give the effect that an item was ‘off the canvas’. You could probably do this with Custom CSS, but you could also do it by uploading a custom icon that mimics the background effect and then position it and scale it as the lower most item in the Super Tile to mimic the effect.
Personally, I think this level of customization is probably best suited for a Custom Tile, but of course that would require the necessary HTML+CSS skills. If you wanted to poke around, the Open Weather custom tile could be a good starting point to poke around with.
In the editor, the tile appears to have a grey background, but when you add it to your dashboard, you could set the tile background to transparent and it would look like the icon was hanging off.
Previously it was possible to move items off the canvas correct? Because we were able to do that with the weather tiles that Michael had created.
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.