Well, it's not as nice as the one our friends @sburke781 and @ymerj have, but it will already serve the initial purpose. Thank you @chad.andrews for all the help.
2 Likes
The challenge is how to remove the decimal place from the temperature.
I think @ymerj did something because he just change the values show. Can you help?
With today's teachings, and a little bit of thinking, I have improved temperature and humidity, but I am still left wanting to remove the decimal places, or get it adjusted to 1 position.
I took a brief look online earlier today and it feels like you would be best to handle this with a device or variable in HE, rather than CSS. I expect you could:
- Setup a simple rule in Rule Machine to be triggered by a change in the temperature reading
- Record the rounded value in a variable
- Make that variable available in the dashboard
- Add a tile to the dashboard that uses the variable, replacing the area where you are displaying the 31.65 in your screenshot
1 Like
Great idea, nothing like talking to experts 
Problem solved, but instead of using the Rule Machine that has limitations and could not do the update, I used the Multi-Sensor Reactor (similar WebCore).
2 Likes
I've released my Simple CSS Editor if anyone is interested in taking a look. It can do a lot of the common stuff, and I plan to add much more to it over time. Feel free to check it out and offer any suggestions.
Simon
1 Like
Yes! will do. Thanks for your great help.
My current question is how to change text color(s) on a tile.
For example:
The Code shown here is what I get when clicking on Inspect on the thermostat tile.
What CSS code can be added to change “78 F and cooling” text from white to different color?
And other Text if I chose to.
I will try to take a look in the next day or two (maybe tonight if you're lucky). What I would suggest is expanding those div elements to see the text inside them to give you an indication of which ones you need to reference in your css.
I'd also suggest you look at the recent discussion on this thread between Chad and Wilson to see how they referenced different thermostat elements.
Thanks, I don't know why I didn't expand the div elements? Trying to figure out what div means.
Yah looked at the thread between Chad and Wilson but just have not figured it out yet.
Bingo!!
You will need to reference those in your css. I will need to look at it later if you still need a hand, but try right clicking the element in the dev tools window from your screen shot and try one of the copy path type options. You should see something similar to some of Chad's suggestions to Wilson. That will form the first part of the CSS entry, then inside the curly braces you need to use settings like font-family or size or color from memory. Try googling html css font and look at any w3schools links that show up. Alternatively, if you have installed my editor, adjust some text on another tile to get some examples for the text styling.
Try this,
#tile-0 div.flex.flex-col.w-full.text-center.h-full.justify-center.items-stretch {color: red; !important}
#tile-0 div.absolute.bottom-0.text-center.w-full {color: red; !important}
1 Like
Chad thanks! I will give it a go later today.
Great work!
1 Like
Chad! thanks you really made it easy for me.
Just got a chance this AM to try your fix.
Worked on first try.
Great help, again thanks Jerry
2 Likes
Anyone ever looked at the possibility of programmatically adding tiles? Say by calling some JS function or something within the dashboard page. I'm expecting the answer is no, you can't do it, but thought I'd ask. I know that we can mess with the layout, like what Smartly Inject allows for, but I am interested in creating a new tile.
Exporting and importing a dashboard looks promising..... technically not CSS related, so have setup this topic. Should probably finish a few other projects first....
Q for the group.
Can I move the icon down on the tile? (I've tried the nudge function on Smartly, but it moves it too far).
Alan
Not sure which one but try one of these.....
#tile-1 div div {
position: relative;
top: 10px;
}
#tile-1 .tile-primary{
position: relative;
top: 10px;
}
#tile-1 material-icons{
position: relative;
top: 10px;
}
Maybe also try absolute instead of relative.
1 Like
Worked great! Thanks!
1 Like
First a disclaimer, I understand a lot of programming concepts, but I lack a lot of talent when it comes to actually programming so please bear with me.
I am trying to change the background colour behaviour of the a few tiles that are based on the LEVEL-STEP template. The challenge is to change the background colour based on the level value. Problem is, this value is not kept in a separate attribute but part of a nested class of the template, a few levels deeper than the class used to set the background colour.
The behaviour I would like is;
value 0 = "bgColor": "rgb(7,150,9)"
value 1-15 = "bgColor": "rgb(255,152,0)"
value 15+ = "bgColor": "rgb(255,255,65)"
Can someone please give me a few pointers on how to get this sorted?
Are they integer increments and how far above 15 can it go? And what type of device / driver are you trying to use in the tile?
