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

At least show us the code where you tried to achieve the result, may be people will help you.

Sorry, but what is this? This is not a part of config-template-card

Will do so, but do you have ideas regarding:

What changed with 2010.x. in the way it is working?
What happens with this additional $: on same level, with which it is (only) working now.

  - type: custom:restriction-card
    card_mod:
      style:
        $:
        hui-cover-entity-row:
          $:
            hui-generic-entity-row:
              $:
                state-badge:
                  $:
                    ha-icon:
                      $: |
                        ha-svg-icon {
                          {% if state_attr('cover.rolladen_kinderzimmer', 'current_position')|int < 100 %}
                            color: var(--hilf-color);
                          {% else %}
                            color: var(--hilf-active-color);
                          {% endif %}
                        }

As this is working now, but was not needed before, I really like to know the background. This was the background of my question above, not to have another solution as you have suggested putting on another level.

I have never seen using this construction:

    card_mod:
      style:
        $:
        some_element:

I think only the author of card-mod can answer your question.
Register an issue on Github.

As for me, I am using restriction-card only inside a decluttering template where styling is done w/o any issues.

1 Like

The code I posted is an !inlude file which uses # lovelace_gen (apologies for omitting that line in the post)

  - type: vertical-stack
    cards:
      - type: entities
        show_header_toggle: false
        entities:

          - !include
            - heating_schedule_line.yaml
            - floor: upstairs
              schedule: 1

          - !include
            - heating_schedule_line.yaml
            - floor: upstairs
              schedule: 2

So {{ floor }} is passed in.
As is {{ schedule }}.
I reuse the code on two views. One for Upstairs and one for Downstairs which both have their own set of schedules.

The arrow icon points to the active schedule.

Thanks for looking.

Is it a typo???
rgba() has 4 args.
OK, may be the 4th arg is an optional one, rgba(255,155,0) shows orange anyway…

I simplified your example:

  • excluded Lovelace_gen;
  • excluded {%raw%} staff;
  • replaced rgba() with green.

Now it is:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: input_boolean.test_boolean
    name: Time
    icon: mdi:arrow-right-bold
    toggle: true
    state_header: Enabled
    entities:
      - entity: input_boolean.test_boolean
        toggle: true
        name: Turn ON
      - entity: input_boolean.test_boolean_2
        toggle: true
        name: Turn OFF
      - entity: input_datetime.test_boolean_3
        name: Time
      - entity: input_number.test_number
        name: Temperature
    card_mod:
      style: |
        :host {
          {% if is_state('input_boolean.test_boolean','on') %}
            --paper-item-icon-color: green;
          {% else %}
            color: var(--secondary-text-color);
            --paper-item-icon-color: var(--accent-color);
          {% endif %}
        }

The colors are changing:
zxcv
If colors are not changing in your setup - check the templates…

BTW, which row do you like more?
image

I have a question, I can’t seem to fix:
In my screenshot below, I think you can guess what I’m going for. I just want to make sure the buttons are smaller(only on this screen) and there is some margin in between.

I am unable to do this with custom styling, or I 'm doing it in the wrong place :frowning: ?
My code:

        card:
          type: custom:layout-card
          layout: horizontal
          min_columns: 3
        filter:
          include:
            - domain: binary_sensor
              attributes:
                device_class: door
              options:
                type: custom:button-card
                template: 
                  - doorsensor
                  - icon_closet   
                entity_id: this.entity_id
          exclude:
            - entity_id: binary_sensor.dishwasher_door

First the easy bit.
I like the way the labels are aligned in line 2. But I would like it even more if they were exactly aligned :wink: How did you do that?


I did the same. No use of lovelace_gen or {% raw %}, all ‘variables’ hardcoded.

With just a custom:multiple-entity-row it works as you show. (Line two in the picture)
Including it in the custom:config-template-card it doesn’t work. (line one in the picture)

image

It points to a problem with custom:config-template-card? There was an update recently but I rolled back to a previous version but it still didn’t work so maybe something changed in the core frontend???


This works (as you pointed out)

          - type: custom:multiple-entity-row
            entity: input_boolean.heating_downstairs_schedule1_enabled
            name: Downstairs Time 1
            toggle: true
            state_header: Enabled
            entities:
              - entity: input_boolean.heating_downstairs_schedule1_turn_on
                toggle: true
                name: 'Turn ON'
              - entity: input_boolean.heating_downstairs_schedule1_turn_off
                toggle: true
                name: 'Turn OFF'
              - entity: input_datetime.heating_downstairs_schedule_time1
                name: Time
              - entity: input_number.heating_downstairs_schedule_temperature1
                name: Temperature
            card_mod:
              style: |
                :host {
                  {% if schedule == states('sensor.heating_downstairs_active_schedule_number') %}
                    --paper-item-icon-color: rgb(255, 155, 0);
                  {% elif states('input_boolean.heating_downstairs_schedule1_enabled') == 'on' %}
                    --paper-item-icon-color: var(--accent-color);
                  {% else %}
                    color: var(--secondary-text-color);
                    --paper-item-icon-color: var(--secondary-text-color);
                  {% endif %}
                  ;
                }

This doesn’t

          - type: custom:config-template-card
            variables:
              CURRENT_SCHEDULE: states['sensor.heating_downstairs_active_schedule_number'].state
            entities:
              - sensor.heating_downstairs_active_schedule_number
              - input_boolean.heating_downstairs_schedule1_enabled
              - input_datetime.heating_downstairs_schedule_time1
              - input_number.heating_downstairs_schedule_temperature1
              - input_boolean.heating_downstairs_schedule1_turn_on
              - input_boolean.heating_downstairs_schedule1_turn_off
            card:
              type: custom:multiple-entity-row
              entity: input_boolean.heating_downstairs_schedule1_enabled
              name: Downstairs Time 1
              toggle: true
              state_header: Enabled
              entities:
                - entity: input_boolean.heating_downstairs_schedule1_turn_on
                  toggle: true
                  name: 'Turn ON'
                - entity: input_boolean.heating_downstairs_schedule1_turn_off
                  toggle: true
                  name: 'Turn OFF'
                - entity: input_datetime.heating_downstairs_schedule_time1
                  name: Time
                - entity: input_number.heating_downstairs_schedule_temperature1
                  name: Temperature
              card_mod:
                style: |
                  :host {
                    {% if schedule == states('sensor.heating_downstairs_active_schedule_number') %}
                      --paper-item-icon-color: rgb(255, 155, 0);
                    {% elif states('input_boolean.heating_downstairs_schedule1_enabled') == 'on' %}
                      --paper-item-icon-color: var(--accent-color);
                    {% else %}
                      color: var(--secondary-text-color);
                      --paper-item-icon-color: var(--secondary-text-color);
                    {% endif %}
                    ;
                  }

Up to you to decide whether it is aligned or not)))

        hui-generic-entity-row .entities-row div.entity:
          ha-entity-toggle:
            $: |
              ha-switch {
                padding-top: 2px !important;
                padding-bottom: 0px !important;
              }

Also, a typo in my code:
entity: input_datetime input_boolean.test_boolean_3

Probably there is an issue here.
Look here:

  - input_boolean.test_boolean
  - type: custom:config-template-card
    entities:
      - input_boolean.test_boolean
      - input_boolean.test_boolean_2
      - input_number.test_number
    row:
      type: custom:multiple-entity-row
      entity: input_boolean.test_boolean
      name: Time
      icon: mdi:arrow-right-bold
      toggle: true
      state_header: Enabled
      entities:
        - entity: input_boolean.test_boolean
          toggle: true
          name: Turn ON
        - entity: input_boolean.test_boolean_2
          toggle: true
          name: Turn OFF
        - entity: input_boolean.test_boolean_3
          name: Time
        - entity: input_number.test_number
          name: Temperature
    card_mod:
      style:
        multiple-entity-row:
          $: |
            hui-generic-entity-row {
              {% if is_state('input_boolean.test_boolean','on') %}
                --paper-item-icon-color: green;
              {% else %}
                color: var(--secondary-text-color);
                --paper-item-icon-color: var(--accent-color);
              {% endif %}
            }

The code is supposed to work (I think) but it does not.
A similar picture was mentioned here - may be the same reason.
Possible solution - wrap the row into decluttering card with mod-card, it will work.

Earlier this code worked too - see this post, now it does not:

A new issue:

1 Like

I have the code as shown below, it’s placed inside a picture elemtents card. When i refresh the page the first time after changing my lovelace everything is working good, when i refresh the page the css style is applied on the whole picture elements card?

- type: custom:hui-element
    card_type: markdown
    content: |2


         *here is some text..
    style:
      left: 25%
      top: 20%
      width: 30%
    card_mod:
      style: |
        ha-card {

          font-size: 50px; 
          font-style: bold;
          font-family: "Copperplate", Fantasy, sans-serif;
          line-height: 1.6;
          text-align: center;
          animation-duration: 160s;
          animation-name: slidein;
          background-color: transparent;
          box-shadow: none;

         }

          @keyframes slidein {
            from {
              margin-top: 100%;
              width: 100%;
         }

            to {
              margin-bottom: 100%;
              width: 100%;
          }
          }

I almost figured it out, but I’m probably setting the style in the wrong place, anyone that can point me to the right direction.
code:

 - type: 'custom:auto-entities'
        card:
          type: custom:layout-card
          layout_type: masonry
          layout:
            width: 100
            max_cols: 7
          style: |
            .column > * {
              margin: 10px !important;
            }
        filter:
          include:
            - domain: light
              options:
                type: custom:button-card
                template: 
                  - light
                  - icon_hue     
                entity_id: this.entity_id
          exclude:
            - state: "unavailable"

I’m trying to overwrite the margin element on the “column > *”


If I manually change it in the “developer tools” to margin: 10px !important;
I get the result I want, however if I place it in the code as you can see, the old value for margin is still applied. (I don’t see my change)

Hello
I would like to add the last_changed status on a motion badge (just under the badge, and above the “motion patio” label), is it possible to make that?

Capture

Hi,

I’m trying to style an icon inside a custom:paper-buttons-row and am stuck in the shadow-dom navigation.

The path to the icon I want to style:

MWE of the code (currently not working):

                - type: entities
                  title: Humidificateur
                  entities:
                    - type: 'custom:paper-buttons-row'
                      base_config:
                        style:
                          button:
                            color: lightgrey
                            border-radius: 10%
                      buttons:
                        - icon: 'mdi:air-humidifier'
                          tap_action:
                            action: call-service
                            service: humidifier.toggle
                            service_data:
                              entity_id: humidifier.master_bedroom
                          style:
                            button:
                              color: >-
                                {% if is_state('humidifier.master_bedroom', 'on') %}
                                  var(--accent-color)
                                {% else %}
                                  rgba(255, 255, 255, 0.4)
                                {% endif %}  
                              background-color: rgba(255, 255, 255, 0.4)
                  card_mod:
                    style:  
                      paper-buttons-row$:
                        paper-button:nth-child(1):
                          ha-icon$: |
                            ha-svg-icon {
                              animation: {% if is_state('humidifier.master_bedroom', 'on') %} blink 1s linear infinite alternate {% else %} none {% endif %};
                              color: red !important;
                            }  
                            @keyframes blink {
                              0% { opacity: 0.1; }
                              100% { opacity: 1; }
                            }

The following CSS code works, blinks the whole button (I only want the icon to blink):

                  card_mod:
                    style:  
                      paper-buttons-row$: |
                        paper-button:nth-child(1) {
                          animation: {% if is_state('humidifier.master_bedroom', 'on') %} blink 1s linear infinite alternate {% else %} none {% endif %};
                          color: red !important;
                        }  
                        @keyframes blink {
                           0% { opacity: 0.1; }
                           100% { opacity: 1; }
                        }

What am I missing?

Can Picture_entity card have padding? I’m trying to make this Little Mole smaller but haven’t been succesful so far:

This is what I’m trying:

      - type: picture-entity
        style: |
          ha-card {
          }
          .card-content {
            padding: 10 10 10 10px;
            box-shadow: none;
          }
        entity: script.turn_on_tv_and_kodi
        image: /local/user_images/krtek.png
        name: Krkek?
        tap_action:
          action: call-service
          service: script.turn_on_tv_and_kodi
          service_data: {}
          target: {}
        show_state: false
        show_name: false
        aspect_ratio: '1'

Thanks.

Hi. I’m trying to style color of icon basing on sensor state, but I can’t get it working. So at the beginning I’m trying to do some basing styling, but my icon does not appear anywhere on card.

type: picture-elements
title: Foo
image: local/bar.png
elements:
  - type: icon
    icon: hass:white-balance-sunny
    card-mod:
      style: |
        :host {
          top: 50%;
          left: 50%;
          color: red;
        }

Thank you for your time.

There are errors in your code:

type: picture-elements
title: Foo
image: /local/images/blue.jpg
elements:
  - type: icon
    icon: hass:white-balance-sunny
    style:
      top: 50%
      left: 50%
    card_mod:
      style: |
        :host {
          color: red;
        }
  1. Styling from picture-elements is mixed with styling by card-mod.
  2. The path is /local/....
  3. Keyword card_mod.
1 Like

You’re boss. Thank you!

Probably because you copy-pasted style from another card (facepalm).
The picture-entity card does not seem to have the .card-content element.
Also, wrong value for the padding property was used.
Try using this:

card_mod:
  style: |
    ha-card {
      padding: 20px 20px 20px 20px;
      box-shadow: none;
    }

Anyway, I can’t get it working in more complicated example - when I’m trying to use it in conditional element.

type: picture-elements
title: Foo
image: /local/bar.png
elements:
  - type: icon
    icon: hass:white-balance-sunny
    style:
      top: 10%
      left: 50%
    card_mod:
      style: |
        :host {
          color: {% if is_state('humidifier.zhimi_humidifier_ca1', 'on') %} green {% else %} red {% endif %};
        }
  - type: conditional
    conditions:
      - entity: humidifier.zhimi_humidifier_ca1
        state: 'on'
    elements:      
      - type: conditional
        conditions:
          - entity: switch.humidifier_bedroom_led_on
            state: 'on'
        elements:
          - type: icon
            icon: hass:white-balance-sunny
            style:
              top: 20%
              left: 50%
            card_mod:
              style: |
                :host {
                  color: {% if is_state('humidifier.zhimi_humidifier_ca1', 'on') %} green {% else %} red {% endif %};
                }

image
What’s wrong this time?


@EDIT
I see now on github:

NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen , but not e.g. conditional , entity_filter , vertical-stack , horizontal-stack , grid

So is it possible to make something like that?

Conditional elements - 2 options for styling:

type: vertical-stack
cards:
  - type: entities
    title: Conditional
    entities:
      - entity: input_boolean.test_boolean_2
        name: show
  - type: picture-elements
    card_mod:
      style:
        hui-conditional-element hui-state-label-element:
          $: |
            div {
              color: red;
            }
        .: |
          ha-card {
            height: 80px !important;
          }
    elements:
      - type: state-label
        entity: sensor.cleargrass_1_co2
        style:
          top: 6%
          left: 10%
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean_2
            state: 'on'
        elements:
          - type: state-label
            entity: sensor.cleargrass_1_co2
            style:
              top: 6%
              left: 30%
    image: /local/images/white.jpg
  - type: picture-elements
    card_mod:
      style: |
        ha-card {
          height: 80px !important;
        }
    elements:
      - type: state-label
        entity: sensor.cleargrass_1_co2
        style:
          top: 6%
          left: 10%
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean_2
            state: 'on'
        elements:
          - type: state-label
            entity: sensor.cleargrass_2_co2
            style:
              top: 6%
              left: 30%
        card_mod:
          style:
            hui-state-label-element:
              $: |
                div {
                  color: orange;
                }
    image: /local/images/white.jpg

image

Update (20.05.22):
I recommend to use the 1st method.
The 2nd method sometimes does not work:

  1. Open a view with this card.
  2. Set the toggle to OFF. The conditional element is not displayed.
  3. Refresh the page.
  4. Set the toggle to ON. The conditional element is displayed.
  5. The conditional element may not be of orange color - this is a glitch.
  6. Refresh the page.
  7. The conditional element is of orange color.

So, the glitch occurs if the conditional element is not displayed first, then it is displayed w/o the style. The style is applied after refresh only.

Alternatively, on step 6 got to another view and then return to the view - the style is applied.

Also - same problem with a Conditional row inside Entities card. There is an issue on Github.