šŸ”¹ Card-mod - Add css styles to any lovelace card

Hello volks!

I am having trouble centering the green and red buttons (Mushroom cards). I would like the text ā€œLED-Beleuchtungā€, the red button, the green button, and the icon to be aligned on a horizontal line.

Another thing is the grid. I used a1, b1, c1, d1 for the colums, so the red button should be left, the green one should be right. But itā€™s the oppositeā€¦ Why?

So hereā€™s what I have now:

And here is my code.
I tried several things to align the cards, but didnā€™ succeed.

type: custom:layout-card
layout_type: grid
layout_options:
  grid-template-columns: auto 15% 15% 10%
  grid-template-rows: auto
  grid-template-areas: |
    "a1 b1 c1 d1"

cards:
  - type: custom:mushroom-entity-card
    entity: sensor.sensor1
    name: Einstellungen
    view_layout:
      grid-area: d1
    icon: mdi:cog
    icon_color: grey
    icon_type: icon
    fill_container: false
    primary_info: none
    secondary_info: none
    layout: horizontal
    card_mod:
      style: |
        ha-card {
          background-color: transparent;
          box-shadow: none;
          border: none
          }
        
  - type: custom:mushroom-entity-card
    entity: sensor.sensor2
    name: LED-Beleuchtung
    view-layout:
      grid_area: a1
    fill_container: false
    secondary_info: false
    primary_info: name
    icon_type: icon
    icon: mdi:led-strip-variant
    icon_color: yellow
    layout: horizontal
    card_mod:
      style: |
        ha-card {
        font-variant: small-caps;
        background-color: transparent;
        border: none
        }
        
  - type: custom:mushroom-entity-card
    entity: sensor.sensor3
    name: Auto
    view_layout:
      grid_area: c1
    icon_type: none
    fill_container: false
    secondary_info: none
    layout: horizontal
    
    card_mod:
      style: |
        ha-card {
          height: 40px !important;
          background-color: green;
          font-variant: small-caps;
          --card-primary-color: white;
        }
        
  - type: custom:mushroom-entity-card
    entity: sensor.sensor4
    name: Hand
    view_layout:
      grid_area: b1
    fill_container: false
    secondary_info: none
    
    icon_type: none
    card_mod:
      style: |
        ha-card {
          background-color: red;
          height: 40px !important;
          font-variant: small-caps;
          --card-primary-color: black;
        }

I hope you can help me, Iā€™ve been trying to do this for several days now :wink:

You need to set the same height across all cards to center them.

The grid settings worked for me with this code as well.

type: custom:layout-card
layout_type: custom:grid-layout
layout:
 grid-template-columns: auto 20% 20% 15%
 grid-template-rows: auto
 grid-template-areas: |  
     "a1 b1 c1 d1"
cards:
  - type: custom:mushroom-entity-card
    entity: sensor.sensor1
    name: LED-Beleuchtung
    view_layout:
     grid-area: a1
    fill_container: false
    secondary_info: false
    primary_info: name
    icon_type: icon
    icon: mdi:led-strip-variant
    icon_color: yellow
    card_mod:
      style: |
        ha-card {
        height: 40px !important;
        font-variant: small-caps;
        background-color: transparent;
        border: none
        }
  - type: custom:mushroom-entity-card
    entity: sensor.sensor2
    name: Hand
    view_layout:
     grid-area: b1

    fill_container: false
    secondary_info: none
    icon_type: none
    card_mod:
      style: |
        ha-card {
          background-color: red;
          height: 40px !important;
          font-variant: small-caps;
          --card-primary-color: black;
        }
  - type: custom:mushroom-entity-card
    entity: sensor.sensor3
    name: Auto
    view_layout:
     grid-area: c1 
    icon_type: none
    fill_container: false
    secondary_info: none
    layout: horizontal
    card_mod:
      style: |
        ha-card {
          height: 40px !important;
          background-color: green;
          font-variant: small-caps;
          --card-primary-color: white;
        } 
  - type: custom:mushroom-entity-card
    entity: sensor.sensor4
    name: Einstellungen
    view_layout:
     grid-area: d1
    icon: mdi:cog
    icon_color: grey
    icon_type: icon
    fill_container: false
    primary_info: none
    secondary_info: none
    layout: horizontal
    card_mod:
      style: |
        ha-card {
          height: 40px !important;
          background-color: transparent;
          box-shadow: none;
          border: none
          }        

1 Like

Thanks! That worked! :blush:

I have a little question, and I think I will probably need to use card mod for this. Iā€™m using the below fold-entity-row for this list of alarms, and what I would like to have is the ā€œparentā€ alarm icon be highlighted (like the state_color option on an entities card) if any of the alarms below are enabled. Any suggestions how this might be done? Thanks.

I would not do it via card_mod directly and try it in another way first:

  • create a group with any-on-option (see documentation)
  • use this entity in the fold-card header

Advantage:

  • no card-mod
  • you can use the group for other purposes as well, have a history, ā€¦

Exspektation/to be check

  • is state of this group taken to color the header entity icon as well. If no: you can still use card_mod and second best option.

Super useful & super needed methods to replace icons for features for Tile & Thermostat:

post

image

image

Thanks! The group suggestion worked perfectly :slight_smile:

Hello

Hoping someone can help me with this as I canā€™t find a solution.

Iā€™ve made a picture-elements card for my car with and use a state-icon to show charging status, currently I have the icon green when charging and white when charging is complete, however I would like to have the icon blinking green when charging and solid green when complete.

Problem is I canā€™t work out how to make the icon blink based on state, my current code is below.

Thanks

            # Charger
            - type: state-icon
              entity: lock.[[car]]_charge_cable_lock
              icon: iq:tesla-plug
              card_mod:
                style: |
                  :host {
                    --card-mod-icon-color:
                      {% if is_state('sensor.[[car]]_charging', 'disconnected') %}
                        var(--grey);
                      {% elif is_state('sensor.[[car]]_charging', 'starting') %}
                        var(--cyan);
                      {% elif is_state('sensor.[[car]]_charging', 'charging') %}
                        var(--green);
                      {% elif is_state('sensor.[[car]]_charging', 'complete') %}
                        var(--white);
                      {% elif is_state('sensor.[[car]]_charging', 'stopped') %}
                        var(--orange);
                      {% elif is_state('sensor.[[car]]_charging', 'no_power') %}
                        var(--red);
                      {% endif %}
                    }
              state_color: no
              tap_action:
                action: toggle
              style:
                top: 88%
                left: 90%

Check out thisā€¦

Look for Animation

1 Like

just as a heads-up, there are some issues during the current 2024.7 beta regarding vertical-stack cards not sizing properly.

some fixes have already been made by the dv team, but not all is fixed, I guess my ask is if anyone isnt yet running the beta, and willing to participate, please do!

Personally I am only affected by my grids with custom:button-card no longer scrolling

  - type: custom:mod-card
    card_mod:
      style: |
        :host {
          max-height: 500px;
          overflow-y: scroll;
        }
    card:
      type: grid
      columns: 4
      cards:

which is rather annoying too. I am not at all sure this will be fixed (there have been changes in the core cards, that might very well stay, and we need to adapt out card_mod settings for, simple as thatā€¦)

anyways, consider this request to join in finding out :wink:

Also, these many ā€œif ā€¦ elseā€¦ā€ may be replaced by

  {% set STATE = states('sensor.xyz') -%}
  {%- set mapper = {
                    'state_1':'red',
                    'state_2':'orange',
                    'state_3':'magenta',
                    'state_4':'blue',
                    'state_5':'green',
                  } -%}
  {%- set COLOR = mapper[STATE] if STATE in mapper else 'yellow' -%}
  color: {{COLOR}};
1 Like

Thanks for your reply @Ildar_Gabdullin

Unfortunately I still canā€™t find any way to have the state-icon blink with a particular state, also the change you suggested doesnā€™t work for me with this code.

              card_mod:
                style: |
                  :host {
                    --card-mod-icon-color:
                    {% set STATE = states('sensor.[[car]]_charging') -%}
                    {%- set mapper = {
                                      'disconnected': var(--pink),
                                      'no_power': var(--red),
                                      'starting': var(--cyan),
                                      'stopped': var(--orange),
                                      'complete': var(--white),
                                    } -%}
                    {%- set COLOR = mapper[STATE] if STATE in mapper else var(--green) -%}
                    color: {{COLOR}};
                    }

the above code changes the icon color , it does not blink, or, in other words, activate an animation

is that what you want?

btw, to make the template even more robust, you can use

{%- set COLOR = mapper.get(STATE, 'var(--green)') -%}

in stead of

{%- set COLOR = mapper[STATE] if STATE in mapper else var(--green) -%}

Yes @Mariusthvdb the above was a suggestion to simplify all the elifs in my original code, what I want is the icon to blink when the car state is ā€˜chargingā€™ but be static in all other states.

right, but where is the yaml you tried that with? I only found this color template?

is the [[car]] because you are using a decluttering template?

so the animation would be like:

animation: {{'blink 2s ease infinite' if state == 'charging'}} in pseudo code?

and need to find the correct element to set it to

Yes itā€™s inside a decluttering template.

I havenā€™t yet found a way to get the icon to blink, thatā€™s what Iā€™ve been looking for.

Yes something like that

did you check the link Liquid_cooled suggested, itā€™s all there

I looked through but couldnā€™t find anything to only blink for a particluar state.

the important thing is to decide if you want to set it global to the picture-elements card, or to a particular element inside the picture-elements card

Ildar has it all spelled out in that example (I wont copy it here, because you can find it above easily enough)

what you then do is first set the animation as a fixed animation.

final step is to template that based on the state. Which really is easy if the previous steps were successful

my suggestion would also be, to first do this outside the decluttering card, because that can be unreliable at times