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

[Miura]

Got that to work… Apparently spin doesn’t work, but rotation does …

[VietNgoc (Ngoc John)]

If you rename rotation to spin, spin will work

    @keyframes rotation {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }

[Miura]

Guess I didn’t really/fully understood CSS, as this works for mushroom . Thought spin was a CSS definition

type: custom:mushroom-entity-card
entity: sensor.sensor
card_mod:
  style: |
    ha-state-icon {
      animation: 2s spin infinite linear;

    }

[Mariusthvdb (Marius)]

some cards have several animations built-in.

However, if you use card_mod, you need to specify the animations as this isnt implemented in the card itself at that point.

[Vandana (Vandana Dass)]

Hello guys ,

Need a little help.

How to change icon based on state of an entity.

I need to use picture glance card. Tried the below code but its not working.

Kindly help

camera_view: auto
type: picture-glance
image: https://demo.home-assistant.io/stub_config/kitchen.png
entities:
  - entity: switch.tv
    icon: >-
      {% if is_state('switch.tv','off') %}
        mdi:school
      {% else %}
        mdi:sack
      {% endif %}
  - entity: light.s_1

[Ildar_Gabdullin]

As a starting point:
1st post - link at the bottom - picture-glance

[Vandana (Vandana Dass)]

Thank you so much

[maesenator]

Hi everyone,

I’d really love some help on a card I’m trying to build with card_mod.

At the moment I have the below table. I’m trying to accomplish that everything is in a singular card (as if it were an entity card). This means I have to get rid of the spaces between the rows and columns, and put everything a lot closer together. I’ve tried a lot of different options but I seem to be unable to manipulate the grid-layout properly.

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  margin: "-4px -5px -4px -5px"
  grid-template-columns: 15% 85%
  grid-template-rows: auto
  grid-template-areas: |
    "left right" 
cards:
  - type: custom:mushroom-template-card
    icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
    entity: switch.sprinklercontroller_backyard_group_1_include_in_cycle
    fill_container: true
    icon_color: "{{'amber' if states(entity) == 'on' }}"
    tap_action:
      action: toggle
    hold_action:
      action: none
    double_tap_action:
      action: none
    layout: vertical
    view_layout:
      grid-area: left
  - type: custom:timer-bar-card
    state_color: true
    mushroom: null
    tap_action:
      action: toggle
    bar_height: 10px
    entities:
      - entity: switch.sprinklercontroller_backyard_group_1
        name: Achtertuin 1
        remain_time:
          entity: sensor.sprinklercontroller_remaining_time_current_valve
          units: seconds
        duration:
          entity: number.sprinklercontroller_backyard_group_1_duration
          units: minutes
    view_layout:
      grid-area: right
  - type: custom:mushroom-template-card
    icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
    entity: switch.sprinklercontroller_backyard_group_2_include_in_cycle
    fill_container: true
    icon_color: "{{'amber' if states(entity) == 'on' }}"
    tap_action:
      action: toggle
    hold_action:
      action: none
    double_tap_action:
      action: none
    layout: vertical
  - type: custom:timer-bar-card
    state_color: true
    mushroom: null
    tap_action:
      action: toggle
    bar_height: 10px
    entities:
      - entity: switch.sprinklercontroller_backyard_group_2
        name: Achtertuin 2
        remain_time:
          entity: sensor.sprinklercontroller_remaining_time_current_valve
          units: seconds
        duration:
          entity: number.sprinklercontroller_backyard_group_2_duration
          units: minutes
  - type: custom:mushroom-template-card
    icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
    entity: switch.sprinklercontroller_backyard_group_3_include_in_cycle
    fill_container: true
    icon_color: "{{'amber' if states(entity) == 'on' }}"
    tap_action:
      action: toggle
    hold_action:
      action: none
    double_tap_action:
      action: none
    layout: vertical
  - type: custom:timer-bar-card
    state_color: true
    mushroom: null
    tap_action:
      action: toggle
    bar_height: 10px
    entities:
      - entity: switch.sprinklercontroller_backyard_group_3
        name: Achtertuin 3
        remain_time:
          entity: sensor.sprinklercontroller_remaining_time_current_valve
          units: seconds
        duration:
          entity: number.sprinklercontroller_backyard_group_3_duration
          units: minutes
  - type: custom:mushroom-template-card
    icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
    entity: switch.sprinklercontroller_frontyard_include_in_cycle
    fill_container: true
    icon_color: "{{'amber' if states(entity) == 'on' }}"
    tap_action:
      action: toggle
    hold_action:
      action: none
    double_tap_action:
      action: none
    layout: vertical
  - type: custom:timer-bar-card
    state_color: true
    mushroom: null
    tap_action:
      action: toggle
    bar_height: 10px
    entities:
      - entity: switch.sprinklercontroller_frontyard
        name: Voortuin
        remain_time:
          entity: sensor.sprinklercontroller_remaining_time_current_valve
          units: seconds
        duration:
          entity: number.sprinklercontroller_frontyard_duration
          units: minutes
layout_options:
  grid_columns: full

[loocd]

I might even start out with stack-in-card. This removes all the spaces in between and makes it look like a single card. check that out - maybe it’s already what you are looking for. If not, then you have a better starting point to make granular adjustments.

[maesenator]

Thanks!
Are you talking about the vertical-stack-in-card or the stack-in card. The latter doesn’t seem to have been updated in the last 4 years?

[loocd]

interesting ^^
stack-in-card actually mentions it is the replacement for vertical-stack-in-card. But you are absolutely right.

I have use both, both work fine and both will likely be fine in your case.

[maesenator]

I’ve tried using the vertical-stack-in-card now.

Unfortunately documentation on this visual is really bad and it doesn’t explain how I can use the “styles” parameter to resize the columns. If I can make it 10% 90% then I think I’m golden

[loocd]

That’s where you need to get back to card_mod and handle it as you would any vertical stack

I’ve used a normal horizontal-stack in my example, but you should be able to apply this to your card in the same way with slight adjustments. If you run into issues, just give me your current code an I can try to look into it.

card stacks don’t create their own ha-card (see card_mod documentation for more details on this), so you need to wrap it into a type: custom:mod-card, which will create that ha-card for you.

In my case I’ve used the flex tag to change the width of the first flex item by changing its flex-basis to 60%. There are also other ways to achieve this, but this works in my case.

type: custom:mod-card
style:
  hui-horizontal-stack-card$: |
    mushroom-title-card {
      flex: 0 0 60% !important;
    }
card:
  type: horizontal-stack
  cards:
    - type: custom:mushroom-title-card
      title: HP OfficeJet Pro 8720 All-in-One
    - type: picture
      image: local/HPOfficeJetPro8720.webp
      tap_action:

I assume you would need to adjsut the following:

• change to custom:vertical-stack-in-card
• set horizontal direction on the stack
• change the style tag from hui-horizontal-stack-card$ to whatever it is in your case
• adjust the css selector to select the second element in your stack
• change from 60% to 90%

maybe you also need to set min-widths or similar in order to make it responsive on smaller screens.

[maesenator]

Thanks so much for helping
Can’t seem to get it to work. I think the name of the vertical-stack-in-card might be incorrect on line 3, but I’ve tried all different combinations.

type: custom:mod-card
style:
  type-custom-vertical-stack-in-card$: |
    mushroom-template-card {
      flex: 0 0 90% !important;
    }
card:
  type: custom:vertical-stack-in-card
  horizontal: false
  cards:
    - type: custom:vertical-stack-in-card
      horizontal: true
      cards:
        - type: custom:mushroom-template-card
          icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
          entity: switch.sprinklercontroller_backyard_group_1_include_in_cycle
          fill_container: true
          icon_color: "{{'amber' if states(entity) == 'on' }}"
          tap_action:
            action: toggle
          hold_action:
            action: none
          double_tap_action:
            action: none
          layout: vertical
        - type: custom:timer-bar-card
          state_color: true
          mushroom: null
          tap_action:
            action: toggle
          bar_height: 10px
          entities:
            - entity: switch.sprinklercontroller_backyard_group_1
              name: Achtertuin 1
              remain_time:
                entity: sensor.sprinklercontroller_remaining_time_current_valve
                units: seconds
              duration:
                entity: number.sprinklercontroller_backyard_group_1_duration
                units: minutes
    - type: custom:vertical-stack-in-card
      horizontal: true
      cards:
        - type: custom:mushroom-template-card
          icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
          entity: switch.sprinklercontroller_backyard_group_1_include_in_cycle
          fill_container: true
          icon_color: "{{'amber' if states(entity) == 'on' }}"
          tap_action:
            action: toggle
          hold_action:
            action: none
          double_tap_action:
            action: none
          layout: vertical
        - type: custom:timer-bar-card
          state_color: true
          mushroom: null
          tap_action:
            action: toggle
          bar_height: 10px
          entities:
            - entity: switch.sprinklercontroller_backyard_group_1
              name: Achtertuin 1
              remain_time:
                entity: sensor.sprinklercontroller_remaining_time_current_valve
                units: seconds
              duration:
                entity: number.sprinklercontroller_backyard_group_1_duration
                units: minutes

[loocd]

@maesenator

type-custom-vertical-stack-in-card$: |

this doesn’t look right - try to check the element in your browser’s dev tools, that’s where you can see the the name you need to put in there. just select the flexbox like this:

and make a screenshot starting at ha-card all the way down to your content, like this:

in my screenshot you can see the hui-horizontal-stack-card, which is what I had to put into my styles.

[maesenator]

Pssst, look what I made:

Now all I need to do is put the rows (much) closer together, so it looks like an entity card if you will

Current code:

type: custom:vertical-stack-in-card
horizontal: false
cards:
  - type: custom:mod-card
    style:
      vertical-stack-in-card$: |
        mushroom-template-card {
          flex: 0 0 15% !important;
        }
    card:
      type: custom:vertical-stack-in-card
      horizontal: true
      cards:
        - type: custom:mushroom-template-card
          icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
          entity: switch.sprinklercontroller_backyard_group_1_include_in_cycle
          fill_container: true
          icon_color: "{{'amber' if states(entity) == 'on' }}"
          tap_action:
            action: toggle
          hold_action:
            action: none
          double_tap_action:
            action: none
          layout: vertical
        - type: custom:timer-bar-card
          state_color: true
          mushroom: null
          tap_action:
            action: toggle
          bar_height: 10px
          entities:
            - entity: switch.sprinklercontroller_backyard_group_1
              name: Achtertuin 1
              remain_time:
                entity: sensor.sprinklercontroller_remaining_time_current_valve
                units: seconds
              duration:
                entity: number.sprinklercontroller_backyard_group_1_duration
                units: minutes
  - type: custom:mod-card
    style:
      vertical-stack-in-card$: |
        mushroom-template-card {
          flex: 0 0 15% !important;
        }
    card:
      type: custom:vertical-stack-in-card
      horizontal: true
      cards:
        - type: custom:mushroom-template-card
          icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
          entity: switch.sprinklercontroller_backyard_group_2_include_in_cycle
          fill_container: true
          icon_color: "{{'amber' if states(entity) == 'on' }}"
          tap_action:
            action: toggle
          hold_action:
            action: none
          double_tap_action:
            action: none
          layout: vertical
        - type: custom:timer-bar-card
          state_color: true
          mushroom: null
          tap_action:
            action: toggle
          bar_height: 10px
          entities:
            - entity: switch.sprinklercontroller_backyard_group_2
              name: Achtertuin 2
              remain_time:
                entity: sensor.sprinklercontroller_remaining_time_current_valve
                units: seconds
              duration:
                entity: number.sprinklercontroller_backyard_group_2_duration
                units: minutes
  - type: custom:mod-card
    style:
      vertical-stack-in-card$: |
        mushroom-template-card {
          flex: 0 0 15% !important;
        }
    card:
      type: custom:vertical-stack-in-card
      horizontal: true
      cards:
        - type: custom:mushroom-template-card
          icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
          entity: switch.sprinklercontroller_backyard_group_3_include_in_cycle
          fill_container: true
          icon_color: "{{'amber' if states(entity) == 'on' }}"
          tap_action:
            action: toggle
          hold_action:
            action: none
          double_tap_action:
            action: none
          layout: vertical
        - type: custom:timer-bar-card
          state_color: true
          mushroom: null
          tap_action:
            action: toggle
          bar_height: 10px
          entities:
            - entity: switch.sprinklercontroller_backyard_group_3
              name: Achtertuin 3
              remain_time:
                entity: sensor.sprinklercontroller_remaining_time_current_valve
                units: seconds
              duration:
                entity: number.sprinklercontroller_backyard_group_3_duration
                units: minutes
  - type: custom:mod-card
    style:
      vertical-stack-in-card$: |
        mushroom-template-card {
          flex: 0 0 15% !important;
        }
    card:
      type: custom:vertical-stack-in-card
      horizontal: true
      cards:
        - type: custom:mushroom-template-card
          icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
          entity: switch.sprinklercontroller_frontyard_include_in_cycle
          fill_container: true
          icon_color: "{{'amber' if states(entity) == 'on' }}"
          tap_action:
            action: toggle
          hold_action:
            action: none
          double_tap_action:
            action: none
          layout: vertical
        - type: custom:timer-bar-card
          state_color: true
          mushroom: null
          tap_action:
            action: toggle
          bar_height: 10px
          entities:
            - entity: switch.sprinklercontroller_frontyard
              name: Voortuin
              remain_time:
                entity: sensor.sprinklercontroller_remaining_time_current_valve
                units: seconds
              duration:
                entity: number.sprinklercontroller_frontyard_duration
                units: minutes

[loocd]

sidenote: I would highly recommend looking into the streamline-card. This would save you a lot of code and repetition in case you want to change something.

especially with these additional adjustments…

you can likely reduce spacing even further if needed. To do so just use your browser’s dev tools again to find where you have remaining unwanted paddings/margins. If you run into issues with this let me know.

other than that:

remove padding from icons:

        - type: custom:mushroom-template-card
          card_mod:
            style: |
              ha-card {
                padding: 0 !important;
              }

remove padding from entity:

        - type: custom:timer-bar-card
          card_mod:
            style: |
              .card-content {
                padding: 0;
              }

[maesenator]

I think we’re getting close.

Only issues I have now:

• Too much space below the last entity
• The icons (1st column) are now no longer properly aligned with the 2nd column, I believe I have to make the switch icons smaller, but not sure how.

I will look into the streamline card once I get this the way I want, thanks for the tip
Current code:

type: custom:vertical-stack-in-card
horizontal: false
cards:
  - type: custom:mod-card
    style:
      vertical-stack-in-card$: |
        mushroom-template-card {
          flex: 0 0 15% !important;
        }
    card:
      type: custom:vertical-stack-in-card
      horizontal: true
      cards:
        - type: custom:mushroom-template-card
          icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
          entity: switch.sprinklercontroller_backyard_group_1_include_in_cycle
          fill_container: true
          icon_color: "{{'amber' if states(entity) == 'on' }}"
          tap_action:
            action: toggle
          hold_action:
            action: none
          double_tap_action:
            action: none
          layout: vertical
          card_mod:
            style: |
              ha-card {
                padding: 0 !important;
              }          
        - type: custom:timer-bar-card
          state_color: true
          mushroom: null
          tap_action:
            action: toggle
          bar_height: 10px
          entities:
            - entity: switch.sprinklercontroller_backyard_group_1
              name: Achtertuin 1
              remain_time:
                entity: sensor.sprinklercontroller_remaining_time_current_valve
                units: seconds
              duration:
                entity: number.sprinklercontroller_backyard_group_1_duration
                units: minutes
          card_mod:
            style: |
              .card-content {
                padding-top: 0;
                padding-bottom: 0;
                padding-left: 0;
              }                
  - type: custom:mod-card
    style:
      vertical-stack-in-card$: |
        mushroom-template-card {
          flex: 0 0 15% !important;
        }
    card:
      type: custom:vertical-stack-in-card
      horizontal: true
      cards:
        - type: custom:mushroom-template-card
          icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
          entity: switch.sprinklercontroller_backyard_group_2_include_in_cycle
          fill_container: true
          icon_color: "{{'amber' if states(entity) == 'on' }}"
          tap_action:
            action: toggle
          hold_action:
            action: none
          double_tap_action:
            action: none
          layout: vertical
          card_mod:
            style: |
              ha-card {
                padding: 0 !important;
                height: 20px;
              }           
        - type: custom:timer-bar-card
          state_color: true
          mushroom: null
          tap_action:
            action: toggle
          bar_height: 10px
          entities:
            - entity: switch.sprinklercontroller_backyard_group_2
              name: Achtertuin 2
              remain_time:
                entity: sensor.sprinklercontroller_remaining_time_current_valve
                units: seconds
              duration:
                entity: number.sprinklercontroller_backyard_group_2_duration
                units: minutes
          card_mod:
            style: |
              .card-content {
                padding-top: 0;
                padding-bottom: 0;
                padding-left: 0;
              }                    
  - type: custom:mod-card
    style:
      vertical-stack-in-card$: |
        mushroom-template-card {
          flex: 0 0 15% !important;
        }
    card:
      type: custom:vertical-stack-in-card
      horizontal: true
      cards:
        - type: custom:mushroom-template-card
          icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
          entity: switch.sprinklercontroller_backyard_group_3_include_in_cycle
          fill_container: true
          icon_color: "{{'amber' if states(entity) == 'on' }}"
          tap_action:
            action: toggle
          hold_action:
            action: none
          double_tap_action:
            action: none
          layout: vertical
          card_mod:
            style: |
              ha-card {
                padding: 0 !important;
              }                    
        - type: custom:timer-bar-card
          state_color: true
          mushroom: null
          tap_action:
            action: toggle
          bar_height: 10px
          entities:
            - entity: switch.sprinklercontroller_backyard_group_3
              name: Achtertuin 3
              remain_time:
                entity: sensor.sprinklercontroller_remaining_time_current_valve
                units: seconds
              duration:
                entity: number.sprinklercontroller_backyard_group_3_duration
                units: minutes
          card_mod:
            style: |
              .card-content {
                padding-top: 0;
                padding-bottom: 0;
                padding-left: 0;
              }                    
  - type: custom:mod-card
    style:
      vertical-stack-in-card$: |
        mushroom-template-card {
          flex: 0 0 15% !important;
        }
    card:
      type: custom:vertical-stack-in-card
      horizontal: true
      cards:
        - type: custom:mushroom-template-card
          icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
          entity: switch.sprinklercontroller_frontyard_include_in_cycle
          fill_container: true
          icon_color: "{{'amber' if states(entity) == 'on' }}"
          tap_action:
            action: toggle
          hold_action:
            action: none
          double_tap_action:
            action: none
          layout: vertical
          card_mod:
            style: |
              ha-card {
                padding: 0 !important;
              }                    
        - type: custom:timer-bar-card
          state_color: true
          mushroom: null
          tap_action:
            action: toggle
          bar_height: 10px
          entities:
            - entity: switch.sprinklercontroller_frontyard
              name: Voortuin
              remain_time:
                entity: sensor.sprinklercontroller_remaining_time_current_valve
                units: seconds
              duration:
                entity: number.sprinklercontroller_frontyard_duration
                units: minutes
          card_mod:
            style: |
              .card-content {
                padding-top: 0;
                padding-bottom: 0;
                padding-left: 0;
              }                    

[loocd]

that’s very odd: this is what it’s looking like over here:

where is that spacing coming from in your setup? I have copied your exact code and have only replaced the entities - I do not have any spacing at all and everything is properly aligned.

[maesenator]

It seems to be caused by the timer-bar-card