How to move text / labels in tiles with CSS

I think I saw this in another thread. Is it possible ti use custom CSS to move the text on a variable tile to the top rather then the middle, and move the icon to the top or bottom of another tile. I was looking to do some advanced customization of one of my panels. I have an icon that changes state and was going to put in a variable tile that also would display the text, but with the spacing of the tiles and were the icon and text site its too far apart for my liking so was looking if this would be possible with CSS. If anyone had any examples would be great as I’m not too fluent in custom CSS but would like to learn of the coding is done.
Thanks all for your suggestions.

See below for the CSS snippets that I moved the icon down in the top tile, and moved the variable value to the top in the bottom tile, and hide the footer display of the top tile as well. However. the challenge is I had to keep the top tile’s icon 1em away from the bottom otherwise the “glow” would be cut off assuming you are doing @Carlos_Juarez’s trick using RGB device to glow different color based on the STHM status accordingly, because the glow style is assigned dynamically when color is changed. (You can still tell the glow was cut off a bit even 1em away from the bottom.)

.tile.--theme-style-sthm-icon .tile-footer { display:none }
.tile.--theme-style-sthm-icon .main-content .icon { align-items: flex-end; position: relative; bottom: 1em;}
.tile.--theme-style-sthm-variable .main-content .value {justify-content: unset}

:warning: Please note that any custom CSS snippets provided are not officially supported and may need to be adjusted with potential future changes to the SharpTools web app.

Note that I have custom style applied to these tiles, so I can make the CSS to be applied for these two tiles only.(sthm-icon and sthm-variable are the custom style name in the theme I used, and you will need to change the CSS accordingly based on the style names you created.)

I also set the the tile gap to 0 in the Dashboard settings, and removed the border of the tiles to make them look like one tile.

image

2 Likes

I see, so this is a work around to apply CSS to a single time and not the whole dash? Was looking for a away to do that. Is it worth a feature request to get CSS added to the Style customizations?

You can target Custom CSS to specific Named Styles using the approach James mentioned above.

He has a style named sthm-icon which is applied to the tile and he targets it in Custom CSS with the format .--theme-style-{{style-name}} so in this case it’s .--theme-style-sthm-icon

Since it’s just normal CSS under the hood you can use any of the CSS selectors that are available in Custom CSS. You could target specific Tile Types since they are included in the classes applied to each tile and really any other attribute in the DOM. Each tile technically has it’s own ID that is persisted, so you could even target a specific tile (without a Named Style) applied if you wanted.

Thank you Josh,
Can you provide a link to something that would have different CSS sripts that would work. I’m not to familiar with CSS so I’m not sure what to put in to say move text more to the top of the tile vs the middle or bottom

The community has been putting together some examples in the following thread. If you can share some details around specific things you’re trying to accomplish (and on what type of tiles), I’m sure the community can help you out. :smiley:

PS. You might want to post it in the linked thread as it seems like there’s a number of people following that thread and helping out.

1 Like

As always thank you for the help

Im not having much luck with this. I made tow new tile styles and named then Alarm-Icon and Alarm-variable. I copied your code only changed the style names.
.tile.–theme-style-Alarm-icon .tile-footer { display:none }
.tile.–theme-style-Alarm-icon .main-content .icon { align-items: flex-end; position: relative; bottom: 5em;}
.tile.–theme-style-Alarm-variable .main-content .value {justify-content: unset}
This is what I get for a display. I’m still new to CSS coding but based only your example I dont think its supposed to look like this
image

Can you take a screenshot of the custom CSS in the Theme editor? Not sure if the double dash -- before the theme-style-alarm-icon was changed to – by the community editor or you actually had – in the CSS, and the name should be all lower case.

.tile.–theme-style-Alarm-icon .tile-footer { display:none }
:point_down:
.tile.--theme-style-alarm-icon .tile-footer { display:none }

I uploaded a screen shot of the code pleas let me know if I have something wrong
Thank you

@James I think I got it figured out. I double checked the – and up I cannot use a “A” in the name only “a”. This I did not know I was trying to make it spelled the same. Either way I think I got everything moved to how I want them.
Thanks again.

2 Likes

@james this is kind of what I’m hoping to do. I just want to change the glow color. Yet my Css skills are lacking.

What kind of tile are you trying to change the glow color of?

The screenshots in James’s example are using Virtual RGB devices. It’s a neat trick @Carlos_Juarez came up with to use a virtual RGB device and adjust the color based on various conditions using rules.

@josh my light tiles. The yellow doesn’t look good on a pink time… Yes yes I know… Pink…? But that’s what the wife wants. Aslo I have the css code to change the default tile to what ever rgb want but I can’t figure out the active tile. Can you help

I’m away from my computer at the moment so my apologies for the brevity, but here’s a snippet for changing the glow color to white:

/* adjust the glow color and intensity */
.tile .icon.glow-yellow {
    -webkit-filter: drop-shadow(0 0 8px white) drop-shadow(0 0 20px white);
    filter: drop-shadow(0 0 8px white) drop-shadow(0 0 20px white);
}

As always, any custom CSS snippets provided aren’t officially supported and may need to be adjusted with potential future changes to the SharpTools web app.

2 Likes

So I am starting to play around with the look of my tiles. I like the layout of this tile. What would I need to do change the standard layout of my Tiles to put the title and icon in the middle this way. Ideally I would place any variable values just below the title. Thanks.

@simon, please note that the “tile” shown in the screenshot is actually made by stacking two tiles together. So the short answer for any way to change all tiles to this style would be no. But you do have the option to customize the tiles in this way if you want. The CSS snippet provided moves the icon from the top tile down toward to the bottom, and moves the variable value from the bottom tile up toward to the top. So they look like “centered” when two tiles are stacked together.

To apply a CSS to all variable tiles and adjust the position of value shouldn’t be too complicated. I may be able to provide the more specific suggestion if you can show me a mock up or a screenshot of your variable tiles, and explain how you want to position the value in more details.

Thanks for the help - This is kind of what I was trying to do.

A few CSS tricks mentioned by the community CSS Wiki can be applied here with some modification. See below for the positional example based on your mockup, but please note that the following css snippets are custom modification and may need to be adjusted with the potential future dashboard updates.

image

Title positioning

 .tile .title { top:60%; }

Icon positioning

.tile .icon { display: unset; position: relative; top:15%;}

Footer positioning

 .tile .tile-footer { text-align: center; bottom: unset; top:75%; }
 .tile .tile-footer .status span.right { float: inherit!important; }

I’ve been having a play with custom CSS for specific theme styles and I haven’t had much success yet. What I’m trying to do is change the icon size for a specific style, with this custom css:

.tile.--theme-style-bulb-inactive .tile .icon svg {width: 75%; height: 75%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

Unfortunately, that doesn’t work. The style is actually Bulb-Inactive so I removed the upper case, but still no luck.