Inside the style add:
height:154px; width:174px; position:relative; top:0px; left:0px;
May have to adjust the height and width...
Thanks for the suggestion.
I changed the height and width but the red color still does not cover the whole tile.
Here is the format I used in piston:
<div style=background-color:red;height:180px; width:200px; position:relative; top:0px; left:0px;>Very High</div>
Here is the tile:
@thebearmay
Thanks for the help and for your time. I'm happy to have such a solution.
Maybe I'll play around with the configuration.
May need to go negative on the top and left, then increase height and width, and add something similar to:
border-radius: 10px
to round your corners
1 Like
@thebearmay
Thanks for the "radius" suggestion. Finally the tile is in the format as I expected.
1 Like
Apologies for not doing an extensive search on this, but can we adjust the background colour on the dashboard using rgba? The main options screen only has the preset colours by name...
EDIT - Achieved this with a background image hosted locally on the hub with the colour I wanted. would be nice to achieve it without this though...
In the CSS tab:
.dashboard {
background-color:rgba(0,0,255,0.3)
}
1 Like
Another random question (without proper investigation...)
How do I hide the "title" for a tile displaying a global variable? The normal hide CSS doesn't seem to work...
#tile-54 .tile-title {visibility: hidden; display: none;}That one might be .tile-secondary, if using chrome on a PC a right-click | inspect should expose the element structure.
1 Like
Thanks @thebearmay, close but not quite....
It seems #tile-54 div>div is close, taken from text tile adjustments.... But only adjusts the entire tile text, not the "title" I was wanting to clear...
Which variable template are you using?
Variable String for just the title should be:
#tile-54 .variable-string {display:none}
or if you want to eliminate both the top and bottom:
#tile-54 .flex-grow-0 {display:none}
2 Likes
variable string is the template, the first option you provided did not achieve what I wanted.... i.e.
#tile-54 .variable-string {display:none}
But the second option did, excellent 
Thanks @thebearmay
#tile-54 .flex-grow-0 {display:none}
1 Like
Is there a way to move a tile title to the centre of the tile, can't seem to find a way...
horizontal or vertical???
Both, I am kind of achieving what I need with some text tiles, but it is an ugly way to do it...
If you use
display:block;
top: ypx;
left: ypx;
it may give you the control you need
Thanks, I'll get something going with the text tiles, then see if I can change it over to this method, will be much neater if it works.
It's to much for me...
I'm trying to scale the words on my dashboard and icons.
I try to explain more since my english isn't that good.
I make dashboard on pc with icons, text, weather app etc
Just perfect... even used This Thing here
but when i want to open the dash on my phone/tablet everything is different... Icons and text are huge making the dashboard useless.
think you see the difference...
I tried some tips that I found but it's not working for me and "bobbD" couldn't help... or won't.
Can somebody PLS help?
I want to make a dashboard on the pc and make it scale down for tablet/phone... and not making 3 dashboards (pc, tablet, phone)
Take a look at this:
You can use vh or vw to set font sizes, and they will respond to your viewport size.
I did. I tried but I don't even know some words...
.header { position: absolute; width: 100%; }
.header span:last-child span { z-index: 5; }
.dashBack { z-index: 5; cursor: pointer; }
.wrapper { height: 100vh; width: 100vw; margin: 0px !important; }
.tile { grid-area: unset !important; position: absolute !important; transform: translate(-50%, -50%); overflow: unset !important; }
.tile-title { position:absolute; background: inherit; transform: translate(-50%, 0%); left: 50% !important; bottom: unset !important; right: unset !important; top: -2em; width: max-content; visibility: hidden }
.tile-contents { height: 100%; width: 100%; }
.tile-primary { height: 100%; display: overflow: unset; }
.tile-secondary { position: unset; display: none; table-row; }
.tile-tertiary { position: unset; text-align: unset; display: none; table-row; }
.tile:hover .tile-title { visibility: visible; }
.vue-slider:hover { width: 10em !important; },
That is the the start of my css code followed by some tiles and positioning of them like this...
/* lamp 1 */
#tile-2 { top: 20.49760601915185%; left: 2.117106132209301%; min-height: 7.060533515731874%; min-width: 3.125%; }
/* lamp 2 */
#tile-3 { top: 20.49760601915185%; left: 16.26709004243215%; min-height: 7.060533515731874%; min-width: 3.125%; }
It's hard for me to figure it out. I've seen px, vh, vw, %, body, translate, transform,... 
What, where, how... 
