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

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. :slight_smile:

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?

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.

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

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

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

msedge_T2G5le7eb5

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

msedge_7tai7W9pox

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

Appreciate it!

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.

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) :slight_smile: So, Sharptools is not an options. Any suggestions on how to solve this with "basic" CSS and native HE functionality?

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.

@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 :slight_smile:

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

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

I have and iFrame Advanced :wink: 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.


Capture2

Worked. I had been trying to do it at the layer above and the individual values.

1 Like

Do you need the position settings? Or could you just have the background color settings? Maybe they are somehow moving the title?

I was getting "off" color showing around the edges with out it.

Did you get this working at all? Does seem odd...

I kind of band aided it by .tile-title z-index 999

Probably a much more elegant way

1 Like

Here's an interesting one....

Variable interactions. I assume I can change how they appear. Question is...how?

I figured out how to make it wider but I want to make it overall bigger.

#input-0.text-black.outline-none

Not sure I follow, you want to make the "Tap here to enter a message" box bigger?

1 Like