CSS Targeting Specific Super-Tile

[rap18one]

I’m interested in knowing how to target a specific super-tile with CSS in a style-agnostic way. I believe it might have to do with getting an ‘ID’ for the tile and putting that into the CSS tag something like “.tile.super-tile.id=####”, but I’m not sure.

Note that I do not want to include the style in the tagging. This is because I want the style to be applied to be variable-dependent so that the CSS applies regardless of which style is applied (according to the variable).

My use case is that I have a super-tile which has a 12 x 4 table where each row is a time period that I use for HVAC. Columns for each row include the time period’s name, start time, heat setpoint, and cool setpoint - call based on variables passed from Hubitat. There is also a default-transparent background -tile to each row. So I make 12 styles within the theme and apply them to the background-tile according to a variable indicating which time period is active. This way I can highlight te row that is active (I also change the font color of the name and time to contrast the activated background color). That’s a little klunky, but it works. Meanwhile, I want the heat setpoint and cool setpoint text to always be red and blue respectively. I could simply add those to each of the 12 styles. But that’s 24 child-tile CSS statements to add to each of 12 styles. Seems like inefficient coding. Thus, what I want is to set the red and blue text for the setpoints generically to the super-tile once by targeting that specific tile. Then my 12 styles only need the stuff that is different (background-tile highlight and name, time text color). Note that there are other super-tiles on the same dashboard so I can’t just target all super-tiles - I need to target a specific on.

So my main question remains: how do I target a specific super-tile without referenceing the applied style.

I’m also open to alternative ways to achieve the same end result. Thanks for any suggestions!

[josh]

Check out the following discussions as there’s a few approaches community members have used:

Navigation menu between dashboards

Hi! Im trying to create a navigation menu to navigate between different dashboards. I can see that this topic has been discussed in the forum before and that there is no native way to create this menu right now. I have created a solution/hack that works for me, but I would like to check that the solution will not break suddenly. I have created a supertile with my menu items. [Skjermbilde 2023-05-26 kl. 12.31.50] I then add this tile to all of my dashboards. This means that I can update the …

Need CSS help to duplicate using Supertile

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. [Screenshot_20221127_203003_Chrome] Btw the code provided is allowing the desired effect.

[rap18one]

Thanks, that got me in the right direction.

For those following at home, here’s what I did:

1. I opened Inspector and found the element in question by clicking though until the desired tile highlighted on my dashboard.
2. The element looked like: “<div data-v-250784ac class=“main-content” style=“font-size: 600%;”>”
3. That data-v number didn’t help me.
4. But when I right-clicked and chose ‘copy selector’, I got the following on my clipboard: “#tile-holder-sejWUd0l > div > div.main-content”
5. That turns out to be the useful thing
6. In my theme I added the following CSS: “#tile-holder-sejWUd0l .tile .main-content .item:nth-child(14) {color: #ff0000;}”. The bold part is the selector I pulled from the inspector, tweaked to apply, the rest targets a specific tile within the super-tile and changes its color.
7. The ‘#’, '.'s, and spaces must be formatted just so.

This seems to have done it. I’ve seen some discussion that these tile-holders may not be around for the long-haul. What is the status on that? If they are to be eliminated, is there a more future-proof way I should approach this?

[josh]

@rap18one

I’ve seen some discussion that these tile-holders may not be around for the long-haul. What is the status on that? If they are to be eliminated, is there a more future-proof way I should approach this?

It’s included in the linked thread.

@josh

The IDs are unique to the tiles on your dashboard so the IDs themselves won’t change, but we may change the DOM structure in the future. For example, we’ve been considering getting rid of the wrapped ‘tile holder’ as it was originally in place for a different reason and isn’t needed anymore. As such, you might consider using the .tile[data-entity-idx="XXX"] selector instead of the #tile-holder-XXX one.

Another approach would be to use the “named styles” approach where you would create a few different named styles, then you could apply the relevant style to the navigation tile in each dashboard and write your Custom CSS accordingly. .

One other thing you might find helpful is most browser Dev Tools usually have a “Select Element” type of feature where you can then click an item on the page and it will bring up the matching element within the “Elements” (DOM) structure.

Sometimes it’s helpful to then take a moment to review the structure to get a feel for how it’s laid out. In this case, you can see the data-entity-idx mentioned in the previous post which could be used with CSS selector mentioned in that post.

[rap18one]

Thanks for the tips, Josh. The element selector worked much better than just scanning. And I was able to find the ID higher up in the hierarchy. I’ve also adjusted the element targeting code to eliminate the soon-to-be-deprecated wrapper. Hopefully I’m all set now!