What is and how use "Custom CSS" for my Dashboards?

I have read about making some cool stuff with “Custom CSS”, but I have no idea what is it and how do it. Any explain Thanks !

Hi @Carlos_Juarez, see below for the quick explanation about CSS from www.w3.org

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents

It’s basically a style language for web elements. Ex: the following CSS is to hide the green toast message class which is basically the “Command Sent” message when a device tile is tapped.

.toast.green { display: none }

.

1 Like

Here are some examples I have collected:

.toast.green{ display: none; } 
.tile.weather .tile-footer { font-size: 0.8em; }  
.tile.clock .time { font-size: 1.8em; } .date { font-size: 2em; } 
.tile .title { text-shadow: none; } 
.tile .title { line-height: 110%; } 
.tile .tile-footer { text-align: center; }
.tile .tile-footer .status span.right { float: inherit!important; }
2 Likes

Thanks my friend, but Im lost where/how I code this ?!?..

Go to Account and “Manage Resources” and then “Themes”:

And then in Themes, click on “Advanced”:

And then finally at the bottom:

image

3 Likes

Great !!!..thanks a lot brother, I will try with the “Sent Message” green label ,this is cool !

Thanks brother, It worked !!! very cooool… Now dashboards avoid green message “Command Sent”!, but I tried center footer text, that one that display device status like ON, OPEN, CLOSE without success, I am using in CSS section:

.toast.green{ display: none; }
.tile .tile-footer { text-align: center; }

I thought last line was to center the footer but it did not work …

What am I missing ? TIA.

You need both of these as per @josh

3 Likes

Rocks !!!..Thanks my friend !

I see the CSS scripts and played around with the different settings , but can this be done only to specific tiles instead of all tiles

You can create a specific Style in the Theme, and apply the Style to the specific tile(s) you need apply custom CSS to. By doing so, it will add the Style’s name in the class of the tile’s DOM so you can target the css specifically. See the example in my response in the other thread.

1 Like

@James What are the CSS style type for icon color for default state and also active state?

Hey @Max_Tay - the CSS Wiki maintained by the community is a great place to find CSS snippets!

2 Likes

Just found the “active” state icon color but nothing to set the default (inactive) state icon color.

So to work around I have one line for the overall icon color changing both active and default colors, then add another line for the active color.

.tile .icon { color: rgb(40,180,255)!important; }
.tile.active .icon { color: rgb(255,223,0)!important; }
2 Likes

Not sure why I waited so long to try it, but these simple CSS mods let me target each group of tiles and soften everything. For me it was simply colors and transparency. Now just get the Home Assistant integration in my hands and it’ll be an awesome holiday season! :slight_smile:

2 Likes

@James is working away in his toy shop to get some presents ready for the holidays! :wink:

4 Likes

How do I add a background gradient to my theme?

1 Like