try box-shadow instead...
nope. That just adds a shadow onto the black box. I tried "box-shadow: 5px 10px #888888;" to see its affects:
You can see the light grey shadow on the right side, but the darker grey is still there.
Thanks for your help though! It is greatly appreciated.
Hmmm that’s the only two properties that I can see that make sense; how comfortable are you with the right-click inspect command? If you right-click on the element and select inspect from the menu you should be able to look at the style tab to see what is active.
I have been digging into the Inspect and trying to compare an "attribute" tile with a different type, but can't seem to see anything other than what was tried.
If I put this dashboard into Smartly, it makes some changes (that I cannot figure out) that seems to resolve it. Problem is the Smartly CSS code is all jumbled up together and hard to easily dig through it line by line without my eyes and brain hurting!
Been there a few times myself
When I do an overlay tile I use the following to create a transparent tile:
text-shadow:none;
background-color:transparent;
border:none;I guess Smartly doesn't fix the problem.
I thought I had a solution working, but can't replicate it. I was playing with tile opacity. I set the opacity on one temperature tile to 0.0 with rgba 64, 64, 64, 0.0 in CSS. I then moved the tile over to the text bar next to it that is the same grey color. When I did that the tile went into the background, behind the text field and acted like an overlay. When I did this the 3 dots for that tile was not clickable. This showed that the tile was indeed behind the text tile. When I tried to replicate that to the 2 other temperature tiles, it wouldn't work.
I am not sure how in the heck that one tile moved to the background, as there does not seem to be a CSS setting to make that happen.
I am so confused on what is going on with this CSS code.
Normally if you move a tile over another, it becomes the top one, but you can override using z-index (give the tile you want in front a higher z-index, i.e. z-index:99).
The attribute tile has a gray background. When you adjust the div, you are not adjusting the tile background, which is gray. If you want the whole tile to have no background, try something like this in custom CSS:
#tile-0, #tile-1, #tile-2 {
background: none;
}
Change the number to whatever tile numbers those are. Then the whole tile will have no background, not just the tile-contents div.
Thanks, I went a different approach and seem to have gotten it where I like it.
But have another CSS style issue.
Just wondering if anyone knows how to inject a CSS element.style change?
I want to change the color of the active dashboard being displayed on my screen,
I want for example "HEATING" to be in red.
Right now I have a global color setting of 0,0,0 for the dashboard template. I need to override that to be 255,0,0 so that it is highlighted in red like this (manually updated the CSS code in Chrome Inspec)
Hello,
is it possible to add attribute of device to tile?
I'm using a Thermostat tile with my trvs and there is attribute valve (% of valve stroke) which I would get on tile?
Can’t do that directly, but you could use multiple tiles and some CSS to create overlays. The below is a set of 3 tiles:
CSS:
Summary
#tile-5 .tile-title, #tile-6 .tile-title, #tile-7 .tile-title {
display: none
}
#tile-5 {
background:linear-gradient(180deg,black,navy,blue,gray);
border: 3px outset #ffffcc;
}
#tile-6 {
background-color:transparent;
border:none;
height: 50%;
width: 50%;
align-self:end;
}
#tile-6 .material-icons, #tile-7 .material-icons{
color:transparent;
text-shadow:transparent;
}
#tile-7 {
background-color:transparent;
border:none;
height: 50%;
width: 60%;
justify-self:end;
align-self:end;
}
1 Like
Or use either Supertile or Tile Master, which will allow multiple attributes to be displayed on 1 tile
1 Like
I have managed to change the background of a switch tile to a certain color when it is off, but how do i go about to change the background color of ".switch" when it is on?
The thing is i need css, but i dont know how to get it to work on the "active" or "on" state of the button, i have some background gradients when it is "off" state, but i dont know how to address the "on" state
Not where I can check it right now, but when the switch value changes the dashboard changes the CSS class to match. If you turn the switch on and then go to the tile and do a right-click and select inspect you should see a class named similar to switchOn, us that with the tile id to set your properties, i.e.
#tile-99 .switchOn { background.....}
It doesn't quite work that way. Here's a switch that is off:
<div id="tile-1" class="tile switch" style="grid-area: 19 / 25 / 23 / 29; font-size: 12px; border-radius: 6px; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden;">
<div class="tile-title"> Front porch lights </div>
<div class="tile-contents"><!---->
<div class="tile-primary off">
<i class="material-icons he-lamp_hanging" style="font-size: 28px;"> </i>
<div> Off </div>
</div>
</div><!---->
</div>
The .tile-primary class gets the .off class when the switch is off. But the entire tile doesn't get that class, so CSS like this would only adjust the .tile-primary div:
.switch .off {
background-color: #000;
}
That would look like this since the tile-primary div doesn't take up the whole thing:
It does the same thing when the switch is on:
.switch .on {
background-color: #888;
}
It's kind weird this way, and Smartly improves on that if you want to use it.
