The Noob's (in)complete guide to CSS for Hubitat

[sburke781]

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.

[chad.andrews]

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}

[wolferjerry]

Chad thanks! I will give it a go later today.
Great work!

[wolferjerry]

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

[sburke781]

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.

[sburke781]

@sburke781

Anyone ever looked at the possibility of programmatically adding tiles?

Exporting and importing a dashboard looks promising..... technically not CSS related, so have setup this topic. Should probably finish a few other projects first....

[alan564923]

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

[markbellkosel84]

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.

[alan564923]

@markbellkosel84

#tile-1 material-icons{
position: relative;
top: 10px;
}

Worked great! Thanks!

[mvdmunnik]

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?

[sburke781]

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?

[mvdmunnik]

It is de LEVEL template (in code called level-step). It uses an integer ranging from 0 to 100. I am using it in conjunction with a Eurotronics TRV.

[sburke781]

You may be interested in this post by @kahn-hubitat:

Ecowitt Tiles

i used smartly but added my own values for color.. you need one for every value.. this is for temp see the layout under dashboard tile advanced basically each of these sets the template tile color.. the state = the value of the tile being displayed.. in the case below the temp is 99 degress { "template": "temperature", "bgColor": "#bc2323a6", "state": "99" }, { "localization": "English", "roundedCorners": 20, "dateFormat": "MM/DD/YYYY", "hideLabels": false, "customColors": [ { "te…

[alan564923]

I'm back, sort of like a bad penny.

This time, I'm attempting to work with the weather attribute to show current information:

I'm attempting to enlarge the font. Here is inspection from the tile:

I've attempted several different items, but to no avail.

Appreciate it!

[sburke781]

Without being in front of my PC to test it, I would try #tile-67 .weatherHumidity { font-size: 23px; }

Replacing weatherHumidity with whichever item you want to adjust and 23px with the font size you want.

You may also want to expand those div's to see what's inside if you need to get more targeted with the font settings.

[mvdmunnik]

Thanks for the suggestion, but I want to keep everything local and independent of cloud providers. I know that makes stuff harden in some cases, but I like the added security this gives me and is also helps with the WAF (wife acceptance factor) So, Sharptools is not an options. Any suggestions on how to solve this with "basic" CSS and native HE functionality?

[sburke781]

that post only talks about updating the layout jsin, not using Sharptools. He talks about having used smartly, but that doesn't come into play for what you need. Scroll down to the temperature template settings to see what I mean.

[mvdmunnik]

@sburke781
Aaahhhh I see now... I found another post a while back that also used "state" as the basis for changing colours on a tile. Unfortunately, the "level-step" template only uses 1 state (default). I am pretty sure I can add " extra states, but since there is no attribute that contains the value of the level, I don't see how I could use it to trigger the wanted colour change.

I feel like such a nOOb. Sorry

[sburke781]

What about the integer you mentioned previously, is that not an attribute on the device? Or am I missing the point... Maybe some screenshots would help

[markbellkosel84]

Of course I couldn't stay away for long.....

I have and iFrame Advanced dashboard I am building for our hot tub.

I have two tiles I am going to link to timers for Chlorine and Filters. I want the "on" color to stand out from the other controls. I have that taken care of but when I turn them on my title disappears. Very odd.