Cool thanks- never heard of flex boxes before!
How would you remove the top and bottom titles in the tile?
I'm not seeing any in the Text template
It does show up in the variable string template.
For the Variable template target tile-title and tile-secondary
#tile-12 .tile-title, #tile-12 .tile-secondary {display:none}
That works for any variable template except for "variable string" when it behaves like a text box.
EDIT - when using the virtual omni sensor device with the variable string template the name of the device shows up at the bottom of the tile but can't be accessed with tile-secondary (I think it's another flex box)
EDIT 2 - If I set the tile template to "attribute" + variable instead of "variable string" the tile behaves like a normal tile with all the .tile divs. This makes it easier to edit the CSS (plus html elements work as well in the actual variable text)
In any case solved my own issue! Thanks @thebearmay - I'll def experiment more with flexbox CSS.
1 Like
Now that I've got my Virtual Omni Sensor tile showing a text variable working properly, onto the next question.
The tile displays a text list of open contact sensors. If they're all closed the text will simply say "All closed". I'd like to be able to change the tile colour in response to any open sensors and back to normal otherwise. This should be possible (markus looks he did it in post 67) using RM but for the life of me can't figure this out.
EDIT: The bodge I just came out with involves setting the tile background to transparent and simply laying it over a virtual switch tile with no text. However I'd still like to know if anyone is able to set tile colours using RM as this would be a handy trick!
I am lost and frustrated. I am simply trying to replace some of the text on the tiles in the Dashboards. I have tried to copy/past the suggested CSS using "visibility: hidden" and "::after w/ content=" with no luck. I can get the ::after to work (it adds the new text after the existing text), but as soon as I add the "visibility: hidden" all of the text for that element disappears. Any suggestions? Here is a sample of the CSS I've using:
#tile-3 .tile-secondary {
visibility: hidden;
}
#tile-3 .tile-secondary:after {
content: 'Main';
}
The "visibility: hidden" will hide that part of the tile, at least that is my understanding. Could you not just remove that part of the CSS? Sorry if I am missing the point here... Were you wanting to only see "Main"? Perhaps some screenshots may also help?
Try:
#tile-3 .tile-secondary {
font-size:0px;
}
#tile-3 .tile-secondary:after {
content: 'Main';
font-size:8px;
}
1 Like
Could you not adjust the secondary content to be an empty string as another alternative?
Maybe I over looked this. Adding a custom color to the background of a tile. I have a set of four switches and would like each one to be a different color background.
#tile-xx {
background-color: #xxxxxx;
}
1 Like
I would like to ask for help/assistance to configure one of my dashboard tile that is reporting pollen status. What I want to set is the tile color that will change according to the pollen status (Very High=red, High=orange, Moderate=yellow , Low=light yellow, None=transparent).
Is it possible to set such a tile color change?
What tile template are you using for this?
I'm using the attribute template.
That’s what I was afraid of. No real way to key off of the tile content to set the CSS that I know of as the :contains selector never made it off the proposed list.
Thanks for the info.
Maybe I'll try to change the template type to something else.
Via webcore piston I'm collecting pollen status from web api and saving it to the virtual device with device driver Dashboard Variable Device that you developed.
Since you’re constructing the output, you could try to add the CSS with the data, i.e.
<div style=“background-color:red”>High</div>
Is this the correct CSS format to add the suggested line please?
#tile-122 {
<div style=“background-color:red”>Very High</div>
}Sorry, not in the CSS section of the Dashboard, but in webCoRE instead of just setting the very to Very High include everthing from the opening div through the closing one.
