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

[BrianP]

@FLGuy

#tile-[ID] {background-size: contain !important;} but that doesn't work

That works for me, in Firefox and Chrome.

Make sure you don't have something else overriding that elsewhere.

[thebearmay]

If it's an image tile the background size is hardcoded in the div element and won't allow an override through normal means.

[FLGuy]

Got it fixed
I used
.tile {background-size: contain !important;} to globally set the background image then #tile-[ID] {background-size: cover !important;} to turn it off on any tiles I wanted.
Thanks

[krisjordan]

Is it possible to change the color for a contact sensor from red on open and green on closed. I know you can change the template, but I'm only looking to do it for one device on a dashboard.

[thebearmay]

Up around post 214 just change div.switch to #tile-ID.contact and use red, red in the linear-gradient

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

That would be cool. I tried something like this editing the Layout JSON: "customColors": [ { "template": "switches", "bgColor": "linear-gradient(red,yellow)", "iconColor": "", "state": "on", "customIcon": "" } ], Unfortunately, that didn't work. This is what happens if you set a custom color in the Templates section: "customColors": [ { "template": "switches", "bgColor": "rgba(250,242,0,0.87)", "iconColor": "", "state": "…

[BrianP]

Maybe adapt my suggestion for the linear-gradient above:

div.switch[style*="background-color: rgba(250, 242, 0, 0.87)"] { 
  background: linear-gradient(red,yellow);
}

change it to something like:

#tile-1[style*="background-color: rgba(200, 0, 0, 0.67)"] { 
  background-color: rgba(0, 200, 0, 0.67) !important;
}
#tile-1[style*="background-color: rgba(0, 200, 0, 0.67);"] { 
  background-color: rgba(200, 0, 0, 0.67)  !important;
}

That should switch the color from red to green and green to red. Might need to add !important to the end of background-color if it doesn't work. Also those are the default colors, it would be different if you've changed them.

I edited this after trying it out a bit. This should work OK now. Change the #tile-1 to whatever your tile number is, and if your colors aren't defaults, change the colors based on what's used in the tile style tag.

[cdikland]

@BrianP

div.switch[style*="background-color: rgba(250, 242, 0, 0.87)"] { 
  background: linear-gradient(red,yellow);
}

This trick works very well and would like to use this for things besides on/off switches,
How did you determine the default background colors (rgba(250, 242, 0, 0.87)) for a switch?

[thebearmay]

Easiest way (for me) is to use the Right-Click Inspect on a tile and look at the style information...

[cdikland]

@thebearmay

Easiest way (for me) is to use the Right-Click Inspect on a tile

Perfect, thank you.
Now why didnt I think of that.

[krisjordan]

Worked, just what I was looking for. Thanks

[TechMedX]

Does anyone know how to combine content from separate div's into one?

I'd like to make the date tile more streamlined, and put the day, week, year into the same div to save space. I can target each separately to change font/color/alignment, but I cannot figure out the right code to combine them together.

[harriscd]

I couldn't find a way to combine div with css but this looked like a nice way around the formatting of dates:

[RELEASE] Formatted Date and Time on Dashboard Tiles

EDIT: Personally I feel like, while there are differences in the implementation, I would suggest people start by looking at @jshimota 's driver. It provides a more rich set of attributes for display on dashboards and use in rules. I wanted to adjust the formatting of the date and time on my dashboards, so I have setup a small device driver to achieve this, along with help from @luarmr. The driver provides: Ability to adjust formatting preferences for date and time display Selection of a tim…

[markbellkosel84]

I scanned through but didn't see anything about this particular case.

How exactly would I format an attribute tile based on the current contents of it?

Example: I have a tile for saying when the dryer is done and it uses an attribute (idle, running, finished).

I want to have Running and Finished change the appearance of the tile. Mainly just color.

[thebearmay]

Generally there is a class that reflects the value, usually around the .tile-primary class

[markbellkosel84]

So then I would just use that followed by my rgba specs?

[thebearmay]

It's a starting point, but only covers about 85% of the tile. Up around post 211 there is a neat trick that might get you 100% coverage.

@BrianP

There is a way to get this to work. Set the background of whatever you're interested in changing to a specific value in the Templates section , then filter on that, since in Templates it sets the background-color in the in-line style attribute. I'm using the default yellow "on" color below:

div.switch[style*="background-color: rgba(250, 242, 0, 0.87)"] { 
  background: linear-gradient(red,yellow);
}

Using that Custom CSS would change any switch that is colored rgba(250, 242, 0, 0.87) (the default "on" color) to a linear gradient background.

[rocketwiz]

Currently working with displaying a text variable (using a virtual omni sensor). Inspection shows none of the usual tile.primary etc divs but a flex div.

I can use CSS to affect the entire tile using

.flex {
blah blah (eg visibility:hidden) ;
}

but cannot act on the variable itself or hide the title or secondary. I would also like to left align the primary text but none of the usual commands work.

The only post on this is #161 above by @BrianP but not sure how to make it work.

[thebearmay]

Try something like:

#tile-12 .tile-secondary, #tile-12 .tile-title {display:none}
#tile-12 .tile-primary {display:contents;}
#tile-12 .tile-contents {
    text-align:left;
    display:block;
    height:100%;
    width:100%;
    top:33%;
}

[rocketwiz]

The problem is that a text tile (either pure text or anything with text attribute (including text variables) doesn't contain the usual .tile-** divs.

An inspection of the html shows something like this.

div class="flex flex-col w-full text-center h-full"

and what we would normally expect to see as .tile-title appears like this (Variable String being the title of the tile.

div class="flex-grow-0 w-full pt-1 variable-string"> Variable String

[thebearmay]

Sorry for some reason I read Variable template. For the Text template we have to get a little trickier;

#tile-20 .flex {display:contents;}
#tile-20 .tile {
    text-align:left;
}
#tile-20 .flex::before {
    content:" ";
    font-size:50px;
//use this to adjust vertical position
}