Customising dashboards with CSS

Hi

I’m in the process of setting up a hub for my parents and I’m trying to make the Dashboards as easy to navigate as possible.

I’ve set up a series of Dashboards with tiles on that allows them to move between them, but I’m looking at customising them with CSS to make them more user-friendly.

So, for example, I’d like to make a title tile at the top (easy) but styled with CSS to make it bevelled and to make it a bit shorter.

I’ve managed the height thing, but the bevel doesn’t seem to be working and although the title tile is shorter, there is still a big gap before the tiles below it.

So, is there a way of reducing the height of a tile and allowing the others to move up to maintain the standard gap. And for the bevel effect, is standard CSS okay, or do I need to do something special?

Finally, is there a way of conditionally rendering tiles - e.g. I don’t want the Christmas Lights tile on display all year…

Thanks

Chris

This (very) new package may help you…

2 Likes

I used AI (a lot) when I was adding CSS to my dashboards. It was still quite tedious with a lot of trial and error but it did help.

If you just want to stick with CSS this is the spot. Long read but a quick search should get you what you need.

2 Likes

I forgot to answer this specifically because I feel the same way. But, it’s back to CSS. I just “hide” my Christmas tiles with a CSS command of visibilty: hidden. I got that and many other things from the thread I mentioned.

1 Like

Hi

Thanks for this - I tried it at first with limited success, because it wouldn’t let me make a button that was half-height.

Just tried again today and discovered the solution is to resize the actual rows of the grid.

Thanks
Chris