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

[Carlos_Juarez]

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 !

[James]

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 }

.

[Bloodtick_Jones]

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; }

[Carlos_Juarez]

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

[Bloodtick_Jones]

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

And then in Themes, click on “Advanced”:

And then finally at the bottom:

[Carlos_Juarez]

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

[Carlos_Juarez]

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.

[Bloodtick_Jones]

@Bloodtick_Jones

.tile .tile-footer { text-align: center; }
.tile .tile-footer .status span.right { float: inherit!important; }

You need both of these as per @josh

[Carlos_Juarez]

@Bloodtick_Jones

.tile .tile-footer { text-align: center; }
.tile .tile-footer .status span.right { float: inherit!important; }

Rocks !!!..Thanks my friend !

[Ryan_Mclellan]

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

[James]

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.

How to move text / labels in tiles with CSS

See below for the CSS snippets that I moved the icon down in the top tile, and moved the variable value to the top in the bottom tile, and hide the footer display of the top tile as well. However. the challenge is I had to keep the top tile’s icon 1em away from the bottom otherwise the “glow” would be cut off assuming you are doing @Carlos_Juarez’s trick using RGB device to glow different color based on the STHM status accordingly, because the glow style is assigned dynamically when color is cha…

[Max_Tay]

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

[josh]

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

512×512 40.6 KB

This is a community maintained wiki of Custom CSS code snippets that have been tested as working on Sharptools. CSS snippet lines can be added to the bottom of your Theme. Feel free to edit this wiki post or reply in the thread with your examples. Adjust the title text line spacing and allow title wrapping Default is 150% and 100% = no space .tile .title { line-height: 100%; } Allows title wrapping including the Hero attribute .tile .title { white-space: normal; } Adjust the title text font…

[Max_Tay]

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; }

[Eric_Dunn]

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!

[josh]

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

[Bernhard_Boennemann]

How do I add a background gradient to my theme?