CSS for Super Tiles

Noob here… Trying to apply background-color to a Super Tile. Searched and tried several suggestions, but no love.
I have one theme named Mountain which has a background image. Within theme Mountain there were 2 styles: Default and Active.

Found this:

Custom Background Color when using Themes

When using themes including adding custom styles (for example: ‘warning’ is custom)

.tile.--theme-style-default { background-color: #2f3f6f!important; }
.tile.--theme-style-active { background-color: rgba(130, 0, 0, 0.5)!important; }
.tile.--theme-style-warning { background-color: red!important; }

Within Mountain theme, I created a new style named Super and added the following css to the Custom CSS section:

.tile.—theme-style-default { background-color: #000000!important; }
.tile.—theme-style-active { background-color: rgba(255,0,0,0.5)!important; }
.tile.—theme-style-super { background-color: rgba(0,255,0,0.5)!important; }

Despite having tiles containing default, active and super styles, in the super tile, the CSS does not take effect. The default and active style css does not getnoverwritten. Tried without background image - same story,

Can someone please point out the error of my ways??

Thank you

This is what I use. You shouldn’t need the .tile part.

/*Flip Clock Tile Background Color */
.--theme-style-flip-clock {background-color: rgba(0 ,0 ,0, .8)!important;
border-radius: 5px;}

Nope. With or without the .tile doesn’t work.

I appreciate your help, tho.

Thank you

Yes it does work.

/*Flip Clock Tile Background Color */
.--theme-style-flip-clock {background-color: rgba(255 ,0 ,0, .8)!important;
border-radius: 5px;}


Are you assigning the style to the super tile?

Yes. Looks like yours. Except for variable name of course.

Post a pic where your assigning the style like I did. If it’s not applying its because a condition isn’t being met.

1 Like

I’m gonna delete this supertile and start anew. Will advise

1 Like

So, I killed and start over. Only one device - the hub. Condition matches and I got my red overlay. Sorry for the trouble. Thank you for your help

1 Like

Awesome, if you want it to work regardless of the condition. Choose any variable and have it not match != Either a empty target field or I sometimes put nill if it’s a string variable.

Thank you for the tip. I picked a condition I knew would always be true, but just for troubleshooting. My plan is to color icons based on state. Thanks again.

1 Like