Is there a hidden box around the title text (Label)? If i drop my image down to the bottom it looks like this…
If I move it up so it is more centered in the tile, it looks like this… (chopped off)
Are you doing this with Custom CSS? It shouldn’t happen with the standard system features.
If so, it would be helpful to share the CSS snippet and what type of tile is this on. From what I gather from your other posts, you are using uploaded images as icons using state mapping, right? Presumably there’s some sort of custom CSS in play if you are shifting the position of things.
Yes.
It’s a Hero Tile.
.tile.–theme-style-gauge .icon img {width: 100%; height: 100% !Important; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tile.–theme-style-gauge .title { font-size: 3.5em !important; }
.tile.–theme-style-gauge .title { top:1% !important; }
.tile.–theme-style-gauge .title { line-height: 130%; }
.tile.–theme-style-gauge {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/xxxxxxxxxxxxxx.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; }
Correct
This is the named Style:
And this is the CSS for the entire Theme:
.tile.–theme-style-active-fan {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/xxxxxxxxxxxxxxx.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 600;}
.tile.–theme-style-active {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/xxxxxxxxxxxxxx.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 600;}
.tile.–theme-style-headers {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/xxxxxxxxxxx.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 600;}
.tile.–theme-style-default {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/xxxxxxxxxxxxxx.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 400;}
.tile .title { line-height: 90%; }
.tile .tile-footer { line-height: 80%; }
.tile.–theme-style-open-big-icon {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/xxxxxxxxxxxxxx.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 600;}
.tile.–theme-style-open-big-icon .icon svg {width: 70%; height: 70%; margin: 0; position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%);}
.tile.–theme-style-open-big-icon .icon {
-webkit-filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
}
.tile.–theme-style-closed-big-icon {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/xxxxxxxxxxxxxx.png); background-position: left center; background-repeat: no-repeat; background-size: 200%;}
.tile.–theme-style-closed-big-icon .icon svg {width: 70%; height: 70%; margin: 0; position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%);}
.tile.–theme-style-closed-big-icon .icon {
-webkit-filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
}
.tile.–theme-style-presence-yes {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/xxxxxxxxxxxxxx.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 600;}
.tile.–theme-style-presence-no {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/xxxxxxxxxxxxxxxx.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 400;}
.tile.–theme-style-power-on {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/xxxxxxxxxxxxxx.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 600;}
.tile.–theme-style-power-on .icon svg {width: 70%; height: 70%; margin: 0; position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%);}
.tile.–theme-style-power-on .icon {
-webkit-filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
}
.tile .tile-footer { text-align: center; }
.tile .tile-footer .status span.right { float: inherit!important; }
.tile.–theme-style-gauge .icon img {width: 100%; height: 100% !Important; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tile.–theme-style-gauge .title { font-size: 3.5em !important; }
.tile.–theme-style-gauge .title { top:1% !important; }
.tile.–theme-style-gauge .title { line-height: 130%; }
.tile.–theme-style-gauge {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/xxxxxxxxxxxxxxx.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; }
Ideally, I’d like to move the “LABEL” down AND on top of the image. I can move it down, but it is behind the image. I could not find CSS that would either bring the “LABEL” forward or send the image backwards. That would give me more flexibility on which image I use.
EDIT: I deleted all the CSS except for the CSS that targets this tile and it still does this:
EDIT-2: I figured out how to put the “LABEL” ON TOP of my image using the CSS “Z-index” but the top is still cropped off… “LABEL” circled in red
EDIT-3 I used a stock Icon in this tile and it is also cropped off. Just trying to rule out some things.
I want to preface the below with a reminder that Custom CSS is an advanced feature akin to custom programming (for styles) and is not something we can provide official support for.
Keep in mind that the Hero Attribute tile has some <div> tags that are used for positioning content which is slightly different than most normal tiles. The main purpose of this is to allow for content that might span multiple lines while allowing the content to appear to scroll ‘under’ the title while still being visually centered for regular short content.
As with any Custom CSS, it’s really helpful to understand HTML + CSS and have the ability to use your browser’s developer tools to inspect things.
From a brief review, it looks like the .main-content div shifts things down and then the nested .content-holder within that offsets things at the bottom to help with the centering. Depending on your goals, you would likely need to override those if you didn’t want the offsetting for the title space.
1 Like
So, changing the .dashboard.scalable .main-content[data-v-a68d993b] {
–header-footer-gap: 2em; }
to
.dashboard.scalable .main-content[data-v-a68d993b] {
–header-footer-gap: 1em;
}
Does what I want. (using the inspect tool in the browser. I cannot figure out how to target the header-footer-gap with CSS…
That’s technically valid CSS. 
The --header-footer-gap is a CSS variable defined on the Hero Attribute tile. CSS Variables are pretty neat in that they allow you to define a value once and then re-use it in several places, even cascading down into child elements if needed.
The beauty of this is we can use different CSS selectors to change the value based on what’s rendered. So in this case, it changes between rem and em units based on if you are using a scalable dashboard or not – that way it applies the appropriate spacing to the top and bottom to allow for the scrolling and alignment mentioned in my previous reply.
It’s certainly a reasonable approach to have your custom CSS change that value for your targeted needs! So rather than targeting that specific [data-v-XXXXX] identifier, you could try targeting it more generically.
For example, this approach uses the named style approach, but you could of course adapt it to a different selector as you see fit:
.--theme-style-hero-demo .main-content {
--header-footer-gap: 0!important;
}
As usual, any CSS snippets provided are not officially supported and may require tweaks with future updates of the app
Also keep in mind the reasoning for this --header-footer-gap value on the Hero Attribute tile per the response above as if you apply it to something that needs to scroll, it will likely cause issues.
Thanks for the bump in the right direction Josh! I tweaked that to target the named style I was looking to modify. That and a few other tweaks plus adding a “z-index” value to the title allows me to move the title to the bottom AND on top of my image so I can use the same gauge over and over without having to have one specific to each device.
By-the-way, I use Dreamweaver to view and play with the CSS. I suppose I cannot change, save or modify the HTML, just the CSS.
Josh-
Is the length and height of the title DIV set automatically? I would like to break this text after “1” so “TEMP” is centered below. I am assuming I can’t get it to break because the DIV is 88. I have not been able to over-ride this with CSS
I’m going from memory here since I’m on mobile, but the width is 100% and the height is auto (not explicitly set). It’s managed in CSS, so with the right syntax and targeting, you should be able to override it. You should be able to check with your browser developer tools, but as is implied by the name, the truncate class prevents text-wrapping, applies an ellipsis, and hides the overflow.
The title truncation is a dashboard setting: Title Truncation Dashboard Setting
I selected Wrap, but it is not respecting that selection. That’s why I was trying other solutions such as reducing the width of the DIV to force it to wrap.
That’s the hero attribute content. The tile’s title is what was shown as the target in your previous screenshot.
Make sure double check my linked post as it talks about the correct dashboard setting and how that Hero Attribute setting is different.
And the post just above mine in that linked thread has a community member sharing a CSS snippet on how to override the truncation on a custom basis for the title.
I got the truncation taken care of, (now title.truncate is just title) but no matter what I try to reduce the size of the Title DIV so it will wrap
div data-v-fcde95f4=“” data-v-1fcc4f41=“” class=“title”>GREENHOUSE 1 TEMP</div
it results in the DIV moving to the left. I’ve tried various CSS to center that DIV, but so far have been unsuccessful.
So, using this → .–theme-style-gauge .title {
width: 60%;!important; } results in the DIV width I need for the text to wrap:
No matter what I try, I can’t get that DIV to be in the center. I’ve tried margin; auto; margin: 0 auto; position: center; and probably 5 other things. I just can’t figure out why this DIV stays to the left.
Sometimes you just need to walk away for a bit… 
This did the trick!
.–theme-style-gauge .title {
width: 60%;!important; position: relative!important; transform: translate(0, -50%) }
.–theme-style-gauge .title {
margin: 0 auto!important; }
.tile.–theme-style-gauge .title { font: small-caps bold 15px/1 sans-serif; font-size: 1.55em !important; z-index: 1; }
.tile.–theme-style-gauge .title { top: 89% !important; }
.tile.–theme-style-gauge .title { line-height: 100%; }
1 Like