🔹 Card-mod - Super-charge your themes!

Because this is wrong.
The element is inside $. What you need is copy/paste a ready & published style to your theme.

You mean just paste

card_mod:
  style:
        ha-textfield $: |
          .mdc-text-field {
            height: 3em !important;
          }
          .mdc-text-field__input {
            align-self: center !important;
          }
          span#label {
            display: none !important;
          }

into my theme?

EDIT: without the card_mod: style: of course

Ofc no.
Should a part of card-mod-row-yaml. Check for examples of using it.

So would it be better to switch to yaml rather than non-yaml? I started theming with information from this thread where Thomas et al seemed to be using the non-yaml version initially.
So I would need to convert my non-yaml to yaml then. I am not sure you can have both in parallel.

Because this is my current theme, so a lot of non-yaml for me to figure out how to get it back to yaml

Summary
     card-mod-card: |
        .card-content {
          padding: 0em 0px 0px 0px;
        }
        ha-textfield {
          --mdc-text-field-height: 3em;
        }
        ha-textfield .mdc-text-field__input {
          align-self: center;
        }
        ha-markdown {
          padding: 0em 0px 0px 0px;
          text-align: center;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      card-mod-row: |
        hui-generic-entity-row {
          {% if "script" in config.entity -%}
            color: white;
            --mdc-theme-primary: rgba(255,255,255,1);
          {% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
            color: white;
          {% elif states(config.entity) == "on" -%}
            color: white;
          {% elif states(config.entity) == "off" -%}
            color: grey;
            font-style: italic;
          {% elif states(config.entity) == "unavailable" -%}
            color: dimgrey;
            font-style: italic;
          {% else -%}
          {% endif -%}            
          height: 2em;
        }
        hui-generic-entity-row .info.text-content {
          overflow: visible;
          margin-left: 0px;
          margin-right: 0px;
        }
        :host {
          {% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}            
            --paper-item-icon-color: white;
          {% endif -%}
          --mdc-icon-size: 1em;
          --card-mod-icon-color: white;
          --mdc-text-field-label-ink-color: transparent;
        }
        .state {
          {% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
            font-weight: bold;
          {% endif -%}
        }  

Collapsed to not bloat the thread

ha-textfield is a part of a row.
It should not be coded from a card’s level.

In general, I do not understand this question.
-yaml is used where you need to pass through $.
In my experience, only some tasks may be solved w/o “-yaml”.

as is explained here Card mod Themes · thomasloven/lovelace-card-mod Wiki · GitHub

That is what I meant. I did not quite understand that.
So, if we apply card_mod: style: inside a card in the dashboard, it is essentially always using what in themes is referred to as -yaml. Correct?
So everything I can achieve in a card in the dashboard would be put in the -yaml mod in my theme?

But I am trying to access the .mdc-text-field below it.
And I tried just adding it below my code like

      card-mod-row: |
        hui-generic-entity-row {       
          height: 2em;
        }
        .mdc-text-field {
          height: 3em;
        }
        .mdc-text-field__input {
          align-self: center;
        }

without success.
Please note that you used card-mod-card and I used card-mod-row here because you mentioned it is part of a row.

So would I be better off in the long run to convert this to the yaml version (if that is even possible)?

      card-mod-row: |
        hui-generic-entity-row {
          {% if "script" in config.entity -%}
            color: white;
            --mdc-theme-primary: rgba(255,255,255,1);
          {% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
            color: white;
          {% else -%}
          {% endif -%}            
          height: 2em;
        }
        hui-generic-entity-row .info.text-content {
          overflow: visible;
          margin-left: 0px;
          margin-right: 0px;
        }

No, it says if you go inside the $, then upon need the -yaml.

you can do this:

  card-mod-glance: |
    :host {
      transition: none !important;
    }

I admit it’s the the only mod I have not in a -yaml, but just so you understand the difference.
Now that I revisit, I might probably take it out, as I am not even sure it is still functional

Compare

card-mod-row: |
  xxx {
    ...
  }
  yyy {
    ...
  }
card-mod-row-yaml: |
  xxx $: |
    xxx {
      ...
    }
    xxx {
      ...
    }

  xxx $: |
    xxx {
      ...
    }
    xxx {
      ...
    }

  .: |

    xxx {
      ...
    }
    xxx {
      ...
    }

I would have thought we are basically always inside the ShadowDOM but none of my mods work when I rename them to -yaml

     card-mod-card: |
        .card-content {
          padding: 0em 0px 0px 0px;
        }
        ha-markdown {
          padding: 0em 0px 0px 0px;
          text-align: center;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        ha-textfield {
          height: 3em;
        }
        .mdc-text-field__input {
          align-self: center;
        }
        span#label {
          display: none;
        }          
      card-mod-row: |
        hui-generic-entity-row {
          {% if "script" in config.entity -%}
            color: white;
            --mdc-theme-primary: rgba(255,255,255,1);
          {% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
            color: white;
          {% elif states(config.entity) == "on" -%}
            color: white;
          {% elif states(config.entity) == "off" -%}
            color: grey;
            font-style: italic;
          {% elif states(config.entity) == "unavailable" -%}
            color: dimgrey;
            font-style: italic;
          {% else -%}
          {% endif -%}            
          height: 2em;
        }
        hui-generic-entity-row .info.text-content {
          overflow: visible;
          margin-left: 0px;
          margin-right: 0px;
        }
        :host {
          {% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}            
            --paper-item-icon-color: white;
          {% endif -%}
          --mdc-icon-size: 1em;
          --card-mod-icon-color: white;
          --mdc-text-field-label-ink-color: transparent;
        }
        .state {
          {% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
            font-weight: bold;
          {% endif -%}
        }

I know I am not a coder but I usually am able to understand a lot. But this whole CSS/ShadowDOM navigation thing just keeps messing with my head.

Would that be kind of the same as placing the card_mod: style: section directly in entities vs. undrneath one of the entities?
I.e. like the difference between

type: entities
card_mod:
  style:
     xxxx
entities:
  - entity: sensor.something
    card_mod:
      style:
        yyy

?

my man…
no it wouldnt…

this mods the card settings, like the header, and margins, or a scroll-bar . so the card as a container

type: entities
card_mod:
  style:
     xxxx

and this

  - entity: sensor.something
    card_mod:
      style:
        yyy

mods the individual entities inside that card, eg icon-color

This schema I posted is not about “card”, “row” - it is about entering or not entering shadowRoot.

1 Like

Okay. I think I am beginning to understand. Not everything, but some more.

What I now do not understand is why adding card-mod-row-yaml to my existing theme (without removing anyhing else) breaks the exisiting theme mod.

So here, the sections w/o -yaml worked until I added the -yaml section at the bottom. Why? They should be independent, should they not?

      card-mod-card: |
        .card-content {
          padding: 0em 0px 0px 0px !important;
        }
        ha-markdown {
          padding: 0em 0px 0px 0px !important;
          text-align: center !important;
          position: absolute !important;
          top: 50% !important;
          left: 50% !important;
          transform: translate(-50%, -50%) !important;
        }      
      card-mod-row: |
        hui-generic-entity-row {
          {% if "script" in config.entity -%}
            color: white !important;
            --mdc-theme-primary: rgba(255,255,255,1) !important;
          {% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
            color: white !important;
          {% elif states(config.entity) == "on" -%}
            color: white !important;
          {% elif states(config.entity) == "off" -%}
            color: grey !important;
            font-style: italic !important;
          {% elif states(config.entity) == "unavailable" -%}
            color: dimgrey !important;
            font-style: italic !important;
          {% else -%}
          {% endif -%}            
          height: 2em !important;
        }
        hui-generic-entity-row .info.text-content {
          overflow: visible !important;
          margin-left: 0px !important;
          margin-right: 0px !important;
        }
        :host {
          {% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}            
            --paper-item-icon-color: white !important;
          {% endif -%}
          --mdc-icon-size: 1em !important;
          --card-mod-icon-color: white !important;
          --mdc-text-field-label-ink-color: transparent !important;
        }
        .state {
          {% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
            font-weight: bold !important;
          {% endif -%}
        }
      card-mod-row-yaml: |
        ha-textfield $: |
          .mdc-text-field {
            height: 3em !important;
          }
          .mdc-text-field__input {
            align-self: center !important;
          }

P.S.: The added yaml part is c&p from the example entities card I posted earlier. The align-self seems to be working. So it is doing something. The height however is not.

Not sure if I understand you.
But if I do - it is same as

type: xxx
card_mod:
  style: |
    ha-card {...red...}
    ha-card {...green...}

Will it be green or red? )

P.S. When sorting out smth - no need to post & test long codes.
It is distracting you (and when posting - others as well) from a possible answer.
Test with small “color: red” w/o jinja templates. Check if the “red” is applied - not mainly “by your eyes” - but by presence of this style in Code Inspector.

So that would mean you cannot have

card-mod-theme:
card-mod-row: |
  ...
card-mod-row-yaml: |
  ...

You can have either everything -yaml or nothing -yaml?

Because I now have

      card-mod-card: |
        xxx  
      card-mod-row: |
        yyy
      card-mod-row-yaml: |
        zzz

And the only thing that is doing anything now is card-mod-row-yaml even though the mods zzz are unique to card-mod-row-yaml.
Even card-mod-card has stopped doing anything. Which I would have thought might continue to work since it is not modding the “row”.

EDIT:
I am officially giving up for tonight. Frustrated, I admit.
Because this works:

Summary
      card-mod-theme: DarkAlex
      card-mod-row-yaml: |
        ha-textfield $: |
          .mdc-text-field {
            height: 3em !important;
          }
          .mdc-text-field__input {
            align-self: center !important;
          }
          span#label {
            display: none !important;
          }  

and this works

Summary
      card-mod-theme: DarkAlex
      card-mod-card: |
        .card-content {
          padding: 0em 0px 0px 0px !important;
        }
        ha-markdown {
          padding: 0em 0px 0px 0px !important;
          text-align: center !important;
          position: absolute !important;
          top: 50% !important;
          left: 50% !important;
          transform: translate(-50%, -50%) !important;
        }      
      card-mod-row: |
        hui-generic-entity-row {
          {% if "script" in config.entity -%}
            color: white !important;
            --mdc-theme-primary: rgba(255,255,255,1) !important;
          {% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
            color: white !important;
          {% elif states(config.entity) == "on" -%}
            color: white !important;
          {% elif states(config.entity) == "off" -%}
            color: grey !important;
            font-style: italic !important;
          {% elif states(config.entity) == "unavailable" -%}
            color: dimgrey !important;
            font-style: italic !important;
          {% else -%}
          {% endif -%}            
          height: 2em !important;
        }
        hui-generic-entity-row .info.text-content {
          overflow: visible !important;
          margin-left: 0px !important;
          margin-right: 0px !important;
        }
        :host {
          {% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}            
            --paper-item-icon-color: white !important;
          {% endif -%}
          --mdc-icon-size: 1em !important;
          --card-mod-icon-color: white !important;
          --mdc-text-field-label-ink-color: transparent !important;
          align-self: center !important;
          --mdc-text-field-fill-color: rgba(0, 0, 0, 0) !important;
        }
        .state {
          {% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
            font-weight: bold !important;
          {% endif -%}
        }
        .card-content {
          padding: 0em 0px 0px 0px !important;
        }

But as soon as I combine the two, i.e. simply copy the card-mod-row-yaml part underneath the non-yaml part, it stops working.

So I do not understand why. There are no duplicates inside the three mods that could interfere with each other.

I finally have it working!

I missed the .: | for wht used to be in the non-yaml!

Summary
      card-mod-row-yaml: |
        .: |
          hui-generic-entity-row {
            {% if "script" in config.entity -%}
              color: white !important;
              --mdc-theme-primary: rgba(255,255,255,1) !important;
            {% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
              color: white !important;
            {% elif states(config.entity) == "on" -%}
              color: white !important;
            {% elif states(config.entity) == "off" -%}
              color: grey !important;
              font-style: italic !important;
            {% elif states(config.entity) == "unavailable" -%}
              color: dimgrey !important;
              font-style: italic !important;
            {% else -%}
            {% endif -%}            
            height: 2em !important;
          }
          hui-generic-entity-row .info.text-content {
            overflow: visible !important;
            margin-left: 0px !important;
            margin-right: 0px !important;
          }
          :host {
            {% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}            
              --paper-item-icon-color: white !important;
            {% endif -%}
            --mdc-icon-size: 1em !important;
            --card-mod-icon-color: white !important;
            --mdc-text-field-label-ink-color: transparent !important;
            align-self: center !important;
            --mdc-text-field-fill-color: rgba(0, 0, 0, 0) !important;
          }
          .state {
            {% if "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
              font-weight: bold !important;
            {% endif -%}
          }
          .card-content {
            padding: 0em 0px 0px 0px !important;
          }
        ha-textfield $: |
          .mdc-text-field {
            height: 3em !important;
          }
          .mdc-text-field__input {
            align-self: center !important;
          }

Tested, seems to be this this not possible:

test_row:

  card-mod-theme: test_row

  card-mod-row-yaml: |
    hui-generic-entity-row  $: |
      state-badge {
        color: red;
      }

  card-mod-row: |
    hui-generic-entity-row {
      color: cyan;
    }

This creates:

изображение

If the “-yaml” is commented:

изображение

Seems to be by a design.
In general, “-yaml” allows the same as “w/o yaml”.

Yes, it seems that anything you have in the non-yaml part can be moved to the yaml part by prefixing with .: |.
Once you do that, it works.

Did I somehow miss that in the wiki/docs? Or is this something that everybody else just knows? I feel this could maybe be stated somewhere :slight_smile: :see_no_evil:

Now I can finally start watching Bills vs. Steelers.

Moved to card-mod thread as per @Ildar_Gabdullin

Can anyone suggest an avenue to explore to get the battery icon colored via the following code in custom-auto-enties using a glance card? or an alternative idea?

1 Like