Need documentation for styles?

[gig4ls]

Tried adding css attributes to the styles option, none of them work. Examples are as follows:

Adding a background image, changing text color from default white to black:

styles: |
  ha-card {
    color: black;
    background-image: url('/local/img/litter-robot.png');
    background-size: contain;
  } 

Changing text color to red, per the example in #110 :

styles:
  '--ha-card-color': red;

Not sure if I'm missing something?

[EmJay276]

I had the same issue

styles:
  background-color: red

will work. The syntax is:

styles:
  <CSS Property>: <value>

See: https://www.w3schools.com/cssref/

[gig4ls]

I had the same issue

styles:
  background-color: red

Interesting, this doesn't work for me. Also, a similar syntax with background image doesn't work for me.

[EmJay276]

If a ha-card inside this ha-card will set the color, it will overwrite the color. I couldn't change the textcolor (was set inside again), so I just used the card mod plugin, which works perfect https://github.com/thomasloven/lovelace-card-mod

[ghost]

I had the same issue

styles:
  background-color: red

Interesting, this doesn't work for me. Also, a similar syntax with background image doesn't work for me.

same here - I'm trying to remove the borders that have been visible since about 2022.10

styles:
  border: none

I cannot find any style that works.

[ofekashery]

Hi @JCHH2, the styles property is used for the inner cards. To change the root-card style, please use card-mod, as mentioned above.

[ghost]

Oh, OK, thanks.

styles is shown as an option in the docs (with no mention of card-mod). Has it simply stopped working and card-mod is the workaround?

[ghost]

hang on, I am trying to change the styles of the inner cards!

This is what I have:

and I am looking to remove all the borders except the outer one (the vertical-stack-in-card border). I have now tried card_mod but nothing seems to work. Card_mod does remove the outer border though, but that's the only one I want to keep.

edit: I am using custom:layout-card (with nested cards within). When I remove this, the borders are removed (with no style: required). I guess this is a limit of the card?