is there a way to move the icon farther down below the tile’s label? For instance:
I would like to have Patio further away from the icon representing it.
Thank you!
You may be able to do it using the custom_css introduced in the recent Themes & Styles feature. However, I think the tile’s size is just too small to properly display the content. What are the tile size used in the dashboard settings?
it’s 50px, and the tile is 1x1 - so pretty small, but it is OK for me size-wise, just that the text & icon collide - moving them apart will help.
I can’t access the “Themes & Styles feature” link above - was it supposed to be this one? Themes and Styles
Or maybe I need to be a beta user?
Sorry, yes I linked to the beta thread by mistake, and corrected it. You had the right link.
Here’s a snippet you can play with:
.tile[data-custom-height="1"] .icon { margin-top: 10%; }
As always, any Custom CSS snippets provided aren’t officially supported and you may have to tweak them if we adjust things in the future
This snippet basically expects you to be using an extra small tile size (like you are with the 50px) and specifically targets tiles which are explicitly set to a Dimension of 1x in Height. It basically just adds a bit of margin to the top of the icons for those tiles so it moves the icon down a bit instead of centering it in the tile.
hmm ok - here are my results, but I am not sure we are affecting what I am trying to do?
Default:
with your css entry (10%):
With the entry set at: tile[data-custom-height=“1”] .icon { margin-top: 20%; }
40%:
So I am not seeing a change at all… am I doing it wrong? I am putting it into the section here:
Thank you for the help!
Are the tiles explicitly set to a height a 1x? They can’t be empty or default sized. In the red circle in my screenshot, you would need to see a 1x:
That was it - thank you - I had to go explicitly set the size to 1 high, and then it worked great!
1 Like