CSS Targeting Specific Super-Tile

[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.