🔹 Card-mod - Add css styles to any lovelace card

[arganto]

@maxym

I din’t found those information in card-mod docs. I suppose some might be yaml operators. But I haven’t found mentioned .: anywhere.

I succeeded with code below. But it was like IQ test: create a code by deducting from scattered pieces all over the forum.

Same here. I’m missing more examples as well. I’m in the same situation with deriving my stuff from the examples and some information why this and that is set in this and that way in this examples. Would be helpfull for such threads as well, becuase, then there would be less newbie questions.

Even with the great help from KTibow all over the thread, I do not understand such examples as hui-image$: in your case without having the html base for this.

In my case it is still not working with e.g. hui-grid-card$:

[tom_l]

@KTibow

Shadow-root into ha-markdown (read the docs) and apply width: 100% to ha-markdown-element .

Hmm.

Not sure what I’m doign wrong but this is not working:

    style:
      ha-card:
        ha-markdown:
          $: |
            ha-markdown-element: {
              width: 100% !important;
            }

[KTibow (Kendell R)]

You don’t need to shadow-root into ha-card. New syntax BTW:
Old:

ha-markdown:
  $: |

New:

ha-markdown$: |

[tom_l]

@KTibow

You don’t need to shadow-root into ha-card

I didn’t:

@tom_l

    style:
      ha-card:

[KTibow (Kendell R)]

You can remove the ha-card part, though. See if that fixes it.

[tom_l]

No unfortunately this does not increase the width:

    style:
      ha-markdown:
        $: |
          ha-markdown-element: {
            width: 100% !important;
            }

Tried with and without !important

[KTibow (Kendell R)]

Once you use the |, you’re entering CSS, and colons aren’t used anywhere.

[tom_l]

Same result without the colon.

    style:
      ha-markdown:
        $: |
          ha-markdown-element {
            width: 100% !important;
            }

[KTibow (Kendell R)]

Can you share a whole config so I can test? Sorry if I already asked.

[tom_l]

Sure:

class: top-level-card
entities:
  - card_type: markdown
    content: |
      <br>
      {{states("sensor.time")}}
    style: |
      ha-card {
        --ha-card-background: 'rgba(0, 0, 0, 0)';
        --ha-card-box-shadow: 'none';
        font-size: 84px;
        font-family: "DJBGetDigital"; 
        text-align: center;
      }
    type: 'custom:hui-element'
  - card_type: markdown
    content: |
      <b>
      {{states('sensor.nice_date')}}
    style: |
      ha-card {
        --ha-card-background: 'rgba(0, 0, 0, 0)';
        --ha-card-box-shadow: 'none';
        font-family: "Roboto"; 
        font-size: 22px;
        text-align: center;
      }
    type: 'custom:hui-element'
  - card_type: markdown
    class: inline-card-no-border
    content: >
      Casey | Davis | Macca | Mawson | UTC 

      :---:|:--:|:---:|:---:|:---:

      {{ states('sensor.casey') }} | {{ states('sensor.davis') }} | {{
      states('sensor.macca') }} | {{ states('sensor.mawson') }} | {{
      states('sensor.utc') }}

      {{ states('sensor.bom_casey_air_temp_c') }}°C | {{
      states('sensor.bom_davis_air_temp_c') }}°C | {{
      states('sensor.bom_macca_air_temp_c') }}°C | {{
      states('sensor.bom_mawson_air_temp_c') }}°C | &nbsp;

      {{ states('sensor.bom_casey_wind_speed_kt') }}kt | {{
      states('sensor.bom_davis_wind_speed_kt') }}kt | {{
      states('sensor.bom_macca_wind_speed_kt') }}kt | {{
      states('sensor.bom_mawson_wind_speed_kt') }}kt | &nbsp;
    type: 'custom:hui-element'
    style:
      ha-markdown:
        $: |
          ha-markdown-element {
            width: 100%;
            }
title: Clock
type: entities

It’s the 3rd markdown card in the entities card.

[KTibow (Kendell R)]

What if you do 500px and display: block as well? Does that change?

[tom_l]

Still no change with this:

    style:
      ha-markdown:
        $: |
          ha-markdown-element {
            width: 500px;
            display: block;
            }

[maxym]

Thank you for explanaition.
Why to use .: | at the beginning of styles?
Isn’t

style:
  .: |

the same as

style: |

If not, what is the difference?

Is there any documentation describing this syntax? Is it card-mod specific syntax? If so how do you know that unless described in card-mod documentation??

[KTibow (Kendell R)]

They’re exactly the same, except the first one lets you also apply styles to both inside the card, and inside shadow-roots. You can’t do that with style: |. Example:

style:
  .: |
    /* Stuff that applies to ha-card */
  hui-image: |
    /* Stuff that applies inside of hui-image */

[maxym]

so could you explain why this code works even the style definition doesn’t start with .:
To me it looks like separator which ends one string, allowing to start another part of style definition especially it it’s goint to be css string (yaml dictionary doesn’t require this separator)

But it’s my best guess. For unknown reason you are not answering my questions about pointing to docs which describe this syntax.

style:
      multiple-entity-row$:
          ha-entity-toggle$: |
              ha-switch {
                  padding-top: 0;
              }
          .: |
            state-badge {
              line-height: 20px;
              height: 30px;
            }
      .: |
        ha-icon {margin-top: 5px}

BTW the new syntax of shadow roots might be tricky in regard of indentation
This

      multiple-entity-row:
       $:
          ha-entity-toggle:
           $: |

translates to:

      multiple-entity-row$:
          ha-entity-toggle$: |

See, that intendation of ha-entity-toggle relativelly to mutliple-entity-row must remain unchanged!
Again, nothing which is can be found described enywhere.

And in addition to that:
this

    style:
      ha-entity-toggle:
       $: |
          ha-switch {
            padding: 0px;
          }

is not equal to this:

    style:
      ha-entity-toggle$: |
          ha-switch {
            padding: 0px;
          }

In the second case only one element (ouf ot three) is fount to be styled. So it’s not always interchangable.
It seems like the first syntax find all ha-entity-toggle and then goes into shadow-root, while the second one finds only the first DOM node matching the pattern

[kareem613]

@KTibow

Thanks! Final style ended up being this.

style:
  hui-picture-header-footer$: |
    img {
      height: 150px;
      object-fit: cover;
    }
  .: |
    ha-card div.header-footer.header {
      height: 150px;
    }

[KTibow (Kendell R)]

Create a GitHub issue about how it only styles the first one of the parts. Also this:

      multiple-entity-row:
       $:
          ha-entity-toggle:
           $: |

actually translates to

      multiple-entity-row$ha-entity-toggle$: |

What is the question I didn’t answer? As for the very first one, order doesn’t matter. Indentation does. Maybe learn a bit of YAML?

[smccoy]

I just updated to 2020.12.0 in order to try to fix the recorder problems I have been having, but my header is no longer transparent using the following. I just wanted to see if anyone else is seeing the same thing before I open an issue on Github.

card-mod-root: |
    app-header {
      background: rgba(150,150,150,0.2) !important;
    }
    app-toolbar {
      background: none !important;
    }

[KTibow (Kendell R)]

Just set app-header-background-color as a regular theme variable.

[smccoy]

Thanks! Unfortunately, I’m seeing the same thing with that change made. Here’s the modified config:

midnight:
  card-mod-theme: midnight
  card-mod-root: |
    app-toolbar {
      background: none !important;
    }
  app-header-background-color: "rgba(150,150,150,0.2)"