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

[deltabert (Bert)]

I would like to alter the look of the custom:weather-card fron Bram Kragten. I am an absolute beginner on this, and just start playing with the DOM Inspector after reading about this. I found the items i would like to change.
This is the card i want to change and below the card I changed via DOM inspector:

The changes are obvious in the header part of the card. This is the default code of the card:

type: custom:weather-card
entity: weather.home
number_of_forecasts: '5'
name: Het weer

I made an overview of the items i would like to change:

The items are .icon_bigger, .title, .temp and .tempc
But i do’nt know how i put these with styles: in my card config.

I have the feeling i am almost there to understand how this works… But can anyone please tell me how i go further with this?

[deltabert (Bert)]

I found this in the Inspector:

You are doing it wrong!
card-mod.js?hacstag=190927524315:5 mod-card should NEVER be used with a card that already has a ha-card element, such as weather-card

OK, Does anyone knows how to change this Card? Perhaps @bramkragten the maker of this card?

[Ildar_Gabdullin]

Probably you tried to use mod-card with this weather card - which is wrong.

[Mariusthvdb (Marius)]

@deltabert

But can anyone please tell me how i go further with this?

why dont you simply edit the card itself? You seem to know exactly what you want, go ahead and edit the resource file itself.

[deltabert (Bert)]

Hi @Mariusthvdb Marius,
You are right! I browsed the file weather-card.js and found the items to change. Success!
It was more the fear of the unknown; I have never done this before. AND I was hoping I could change this with the mod-card from Thomas Loven.
But it was actually quite simple. Looking back I feel myself a bit foolish…
Thanks for putting me in the direction.

[arganto]

@Ildar_Gabdullin

    style: |
      :host .entities-row div.entity:nth-child(1)  {
        color: orange;
      }
      :host .entities-row div.entity:nth-child(3)  {
        color: magenta;
      }

Why do you use :host in this and other examples?

[Ildar_Gabdullin]

@arganto

Why do you use :host in this and other examples?

Most probably these are very old examples…
In some cases I also used kind of “ha-card some_element”.
In most cases “:host” & “ha-card” will not harm - but they should be omitted, actually.

[arganto]

Ah o.k. Thought there is some magic 🧙‍♂️ behind. ha-card was/is fine. But :host is no html element/dom-path-selector, so most probably it was never necessary, but worked with it as well by chance.

[Ildar_Gabdullin]

@arganto

But :host is no html element/dom-path-selector, so most probably it was never necessary, but worked with it as well by chance.

Probably “:host” SHOULD be used only when it is the ONLY selector, like:

- entity: xxx
  card_mod:
    style: |
      :host { ... }

BTW, “:host” as a selector may be seen in Code Inspector:

just to clarify what it represents.

Also, In my first posts I used to use this construction:

element:
  $:
    element:
      $: |
        element {...}

which will work but not optimal - see this.
Later I posted all styles with an optimized code (also, some old post were revised too).

[arganto]

Yes and no. :host is only a html pseudo class (as :after, etc.) not a dom structure element. So you can put styles for the shadow root in total.

But it is not there to derive the path as with (real) element in the html-tree.

[zgadson (Zach)]

Is there a way to use an if/else statement within CSS? Trying to get this to work:

[[[return `Status: <br><span style="color: lime;">{% if states('switch.pool_robot') ==='on' %} Cleaning {% else %} Sleeping {% endif %}</span>`]]]

It works fine with ${states[‘switch.pool_robot’].state}, but I’d rather it say Cleaning than just “on”, which is the true state.

[Ildar_Gabdullin]

Use search here for “{% if states(” string.

[zgadson (Zach)]

Got it!

[[[ if (entity.state === 'on') return `Status: <br><span style="color: lime;">Cleaning</span>`; return `Status: <br><span style="color: lime;">Sleeping</span>`; ]]]

[Mariusthvdb (Marius)]

still using that on various places. But not sure how to do without:

type: custom:mod-card
card_mod:
  style: |
    :host {
      --stack-card-margin: 0px;
    }
card:
  type: vertical-stack
  cards:

and likewise:

  - type: custom:mod-card
    card_mod:
      style: |
        :host {
          --grid-card-gap: 0px;
        }
    card:
      type: grid

on a badge:

    - entity: person.marijn
      card_mod:
        style: |
          :host {
              --ha-label-badge-label-color: black;
            {% set zones = states.zone|map(attribute='name')|list %}
            {% set id = config.entity.split('.')[1] %}
            {% set activity = states('sensor.' ~ id ~ '_activity') %}
            {% set cc = state_attr('sensor.' ~ id ~ '_geocoded_location','ISO Country Code')|lower %}
            {% if cc and cc != 'nl' %}
              --label-badge-red: white;
            {% elif is_state(config.entity,'home') %}
              --label-badge-red: green;
              --ha-label-badge-label-color: gold;
            {% elif 'bij' in states(config.entity) %}
              --label-badge-red: gold;
            {% elif activity in ['Automotive','Cycling','Walking'] or
                    states(config.entity) in zones %}
              --label-badge-red: mediumslateblue
            {% else %}
              --label-badge-red: #636B75;
            {% endif %}
          }

on an include filter in auto-entities:

          include:
            - attributes: {device_class: battery}
              options:
                secondary_info: last-updated
                style: |
                  :host {
                    --card-mod-icon-color: {% if states(config.entity)|int(-1) < 30 %}red
                                           {% elif states(config.entity)|int(-1) < 60 %}orange
                                           {%else%}green
                                           {%endif%};
                  }

and, eg on a plain entity:

      - entity: binary_sensor.backups_stale
        card_mod:
          style: |
            :host {
              --paper-item-icon-color:
                {% if states(config.entity) == 'off' %} green
                {% else %} red
                {% endif %}

and even worse:

      - entity: sensor.backup_state
        card_mod:
          style: |
            :host {
              --card-mod-icon:
                {% if states(config.entity) == 'backed_up' %} mdi:check-circle
                {% else %} mdi:alert-circle
                {% endif %};

              --paper-item-icon-color:
                {% if states(config.entity) == 'backed_up' %} green
                {% else %} red
                {% endif %};
            }

…

could you help me fix this, so I dont need the :host?
would be awesome,

[arganto]

You need :host there. And you are assigning things for :host. That is fne. I only wanted to address, that afaik we don’t need the :host in the path example above. and/or wanted to know if there is some unknown hidden magic behind it otherwise.

[Ildar_Gabdullin]

No no no, only when used for some element inside some cards and only when used alone (w/o additional selectors). In other cases it may be omitted and actually should not be used.

[e-raser]

Great examples for using restriction-card in row mode. I need to use it with buttons, where the look gets very strange. I guess this is caused by restriction-card in combination with button-card.

The main issue is: it does not maintain / use the height like the other “normal” button cards do when being used in a grid.

• For testing purposes: the used height: 300px; is not respected at all.
• And even if it would: I can’t absolutely define the height in px, it must be something fluent/automatical like “maximum” or something like that.

Problem screenshot:
left one is restriction-card with button-card, right one is normal button card (mind the gap below the left one):

Full code (as minimal as possible)

type: custom:mod-card
card:
  type: grid
  columns: 1
  square: false
  title: ''
  cards:
    - type: markdown
      title: ''
      content: Infrastruktur
      style:
        .: |
          ha-card {
            background: none;
            border: 0px;
            box-shadow: none;
            #padding: 0 !important;
          }
          ha-markdown {
            font-size: 24px;
            #font-weight: 500;
            #letter-spacing: 3px;
            width: max-content;
            margin: 0 auto;
            margin-top: 0px;
          }
    - type: grid
      columns: 3
      square: true
      title: ''
      cards:
        - type: custom:restriction-card
          row: false
          card:
            type: button
            tap_action:
              action: navigate
              navigation_path: network
            hold_action:
              action: none
            double_tap_action:
              action: none
            name: Netzwerk
            icon: mdi:lan
            show_name: true
            show_state: false
            show_icon: true
            card_mod:
              style:
                .: |
                  ha-card {
                    height: 300px;
                    #border: 1px solid;
                  }
          restrictions:
            confirm: null
            pin:
              code: 9999
              text: 'Gesperrter Bereich. PIN nötig:'
              retry_delay: 0
              max_retries: unlimited
              max_retries_delay: 0
            block:
              text: Zugriff nicht erlaubt.
              exemptions:
                - user: abc
          exemptions:
            - user: xyz
          style: |
            :host {
              --restriction-lock-icon-size: 18px;
              --restriction-regular-lock-color: var(--accent-color);
              --restriction-success-lock-color: green;
              --restriction-lock-margin-left: 28px;
              --restriction-lock-row-margin-top: 30px;
            }
            div#overlay {
              align-items: center;
            }
        - type: button
          tap_action:
            action: navigate
            navigation_path: network
          icon: mdi:lan
          hold_action:
            action: none
          name: Netzwerk
          show_name: true
          show_state: false
          show_icon: true
card_mod:
  style:
    hui-grid-card:
      $: |
        .card-header {
          #text-align: center;
          #margin-top: -10px;
        }
    .: |
      ha-card {
        border: 1px solid grey;
        padding: 5px;
        background: none;
      }

Please note the view is configured to use the grid (layout card), in case that is important (tested also with default/standard, which also gives different look):

Question (@Ildar_Gabdullin): Is there any possibility to get a button-card inside a restriction-card to use the maximum/same height as other elements (normal button cards) in that grid

This really is a mission-critical thing as this should be used all over my lovelace dashboards. Hope there’s a solution to have the restriction-card features while at the same time keeping a nice and “natural”/original design.

[Ildar_Gabdullin]

@e-raser

For testing purposes: the used height: 300px; is not respected at all.

Try using “!important”.

---

                  ha-card {
                    height: 300px;
                    #border: 1px solid;
                  }

Do not use “#” to comment smth inside a string.

[e-raser]

@Ildar_Gabdullin

Try using “!important”.

That worked, thanks. But now to the original question: How…

@e-raser

to use the maximum/same height as other elements (normal button cards) in that grid

Because absolute values (px) don’t work. It will make all look different on different devices/screens. So that is the main problem…

@e-raser

And even if it would: I can’t absolutely define the height in px, it must be something fluent/automatical like “maximum” or something like that.

[Ildar_Gabdullin]

@e-raser

to use the maximum/same height as other elements

In my test case the 1st card (which is inside “restriction”) got the same height as the 2ns card (with “!important”).