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

[r-jean-pierre]

Hi card-mod users,

I might require some help, as for the first time, I’m not able alone to find a solution with card_mod.
Problem is short :

      - type: entities
        card_mod:
          style:
            .: |
              .info {
                margin-inline-start: 2px;
              }
        entities:
          - entity: "cover.local_curtain_bedroom"
            name: "Bedroom"

I would like to reduce the horizontal gap between the icon and the name of the entity:

I tried many many things, up to some random desperated code . But nothing works. I’m just able with chrome developer tool to change the value on-the-fly of margin-inline-start to 2px (for example) and it makes the trick

If someone could point me what to change in my card_mod style, it would be much appreciated

[CDRX2]

Very basic, but have you tried adding the !important tag?

[r-jean-pierre]

Yes, I did, but not effect…

[reste_narquois (Chris Warne)]

You need to apply your style to the entity, not the card. Unfortunately, this means repeating it for every single entity, but you can get round this with YAML anchors.

This works for me:

      - type: entities
        entities:
          - entity: "cover.local_curtain_bedroom"
            card_mod:
              style:
                hui-generic-entity-row $: |
                  div.info {
                    margin-inline-start: 2px;
                  }
            name: "Bedroom"

[arganto]

@reste_narquois

You need to apply your style to the entity, not the card. Unfortunately, this means repeating it for every single entity,

Completely wrong and misleading answer.

Of course you can and should just apply it from card and do it once.

[LiQuid_cOOled]

The code posted is working for me…

type: entities
entities:
  - entity: cover.bed_curtains
    card_mod:
      style:
        hui-generic-entity-row $: |
          div.info {
            margin-inline-start: 160px;
            color: lime;
          }
    name: Bedroom

[reste_narquois (Chris Warne)]

First of all, dial down your tone. It comes across as rude and confrontational.

Secondly, perhaps you would be so good as to show how this particular setting - the margin on the info div - can be styled from the card level, given it’s inside a shsdow-root, and that the dom path varies according to the type of entity on the card.

[LiQuid_cOOled]

@reste_narquois @arganto You are both right, it just depends on the entity you are applying it to. Some work some don’t…

Not worth the fight.

[arganto]

If you definite answer is wrong and missleading, it should be allowed to say it. Otherwise other will think it is right, what is not the case. I did not say anything else or rude. Only that your answer is wrong as it is.

As you said, it is in a shadow root. So you can apply it with this info from card level as well. With the benefits, that it is then applied to all (if existing) entities with the same struture in this card.

In case it woule be a cover entity, you would do just this on card level

card_mod:
  style:
    hui-cover-entity-row $: 
      hui-generic-entity-row $: |
        div.info {
          margin-inline-start: 200px;
        }

and it would be applied to all cover entity rows in this card. That is, how card mod works.

If you would apply

card_mod:
  style:
    hui-cover-entity-row $ hui-generic-entity-row $: |
        div.info {
          margin-inline-start: 200px;
        }

it would be applied only to the first one. Described in the card_mod docs as well.

[Ildar_Gabdullin]

In general, it is possible to define styles for a row from a card’s level, but some thing should be taken into account:

1. Rows may have a different type. May be solved by using smth like “first-child”.
2. A “line break” should be added in a proper place to iterate all rows.
3. Repeating same styles for many rows may be achieved by yaml-anchors, !include, secrets (I proposed using secrets in this thread and later convinced not to use secrets for card-mod). But this only works in yaml.
4. In some cases it is more reliable to define a style on a row level than on a card’s level. Faced issues with the card’s level sometimes.

I.e. this is all flexible, everyone may find a good way.

[reste_narquois (Chris Warne)]

@arganto

ly that your answer is wrong as it is.

Then you misread my answer - note I said ‘your style’ i.e meaning this particular setting (the div margin). It was not intended as a definitive statement about where styles should be set on entity cards.

And your solution only applies to cover entities - what if the OP wants to apply it to other types of entity on the same card? Should I be saying your answer is 'completely wrong and misleading '?

[r-jean-pierre]

Dear all,

I apologize for inadvertently sparking a minor disagreement, but regardless, even the first answer pointing me the trick hui-generic-entity-row + div.info worked for my atomic example.
I also understand that it could be evident to find it for some people (or a more generic or beautiful way to do it), but for someone like myself, I literally spent cumulated 8H toying to finally have no result

Therefore, I extend a heartfelt THANK YOU for not only providing the solution but also accompanying it with explanations

Such a subtle thing on a classical built-in component will undoubtedly help many other HA users

[pgreberg (Peter Greberg)]

Hi

Really like the sections. It fixes a problem with Nest Hub calculating masonry layout. I see one problem though which I’m not sure how to handle. The grid-section-min-width is set to 320px for the responsive design which mean only two columns will be used for Google Nest hub (1024x600). Is it any possibility to override the value using card-mod on the section? Using Chrome I can try to override it and it works perfectly with 290px for instance but I’m not sure how to do it in CSS

[Evirc]

Hi, because the padding or margin doesn’t work well? When i wrong? Can i move the chips row to 5-10px offset to top?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-person-card
    entity: input_select.riccardo_in_casa
    icon_type: entity-picture
    primary_info: state
    secondary_info: last-changed
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    card_mod:
      style: |
        mushroom-badge-icon {
          {% if is_state(config.entity, 'fuori casa') %}
            --card-mod-icon: mdi:home-export-outline;
            --main-color: orange !important;
          {% else %}
          {% endif %}
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: >
          {% set battery_level = (states(entity) | int / 10) | round(0) | int *
          10 %} {% if is_state('sensor.iphone_di_riccardo_battery_state',
          'Charging' ) %}
            {% if battery_level > 0 %}
              mdi:battery-charging-{{ battery_level }}
            {% else %}
              mdi:battery-charging-outline
            {% endif %}
          {% else %}
            {% if battery_level == 100 %}
              mdi:battery
            {% elif battery_level > 0 %}
              mdi:battery-{{ battery_level }}
            {% else %}
              mdi:battery-alert-variant-outline
            {% endif %}
          {% endif %}
        icon_color: |-
          {% set battery_level = states(entity) | int %}
          {% if battery_level > 90 %}
            green
          {% elif battery_level > 60 %}
            light-green
          {% elif battery_level > 50 %}
            lime
          {% elif battery_level > 40 %}
            yellow
          {% elif battery_level > 30 %}
            amber
          {% elif battery_level > 20 %}
            orange
          {% elif battery_level > 10 %}
            deep-orange
          {% else %}
            red
          {% endif %}
        content: '{{ states(entity) }} %'
        card_mod:
          style: |
            @keyframes blink {
              50% {opacity: 0;}
            }
            ha-card {
              {% if  (states(config.entity) | int) < 15 %}
                 animation: blink 1s linear infinite;
              {% endif %}
            }
        tap_action:
          action: none
        entity: sensor.iphone_di_riccardo_battery_level
      - type: template
        tap_action:
          action: toggle
        entity: sensor.iphone_di_riccardo_sim_1
        icon_color: >-
          {% if is_state('sensor.iphone_di_riccardo_connection_type', 'Cellular'
          ) %}
            green
          {% else %}
            grey
          {% endif %}
        icon: >
          {% if is_state('sensor.iphone_di_riccardo_connection_type', 'Cellular'
          ) %}
            mdi:cellphone
          {% else %}
            mdi:cellphone
          {% endif %}
      - type: template
        tap_action:
          action: toggle
        entity: sensor.iphone_di_riccardo_ssid
        icon_color: >-
          {% if is_state('sensor.iphone_di_riccardo_connection_type', 'Wi-Fi' )
          %}
            green
          {% else %}
            grey
          {% endif %}
        icon: >
          {% if is_state('sensor.iphone_di_riccardo_connection_type', 'Wi-Fi' )
          %}
            mdi:wifi
          {% else %}
            mdi:wifi
          {% endif %}
      - type: template
        tap_action:
          action: toggle
        entity: binary_sensor.iphone_di_riccardo_focus
        icon_color: |-
          {% if is_state('binary_sensor.iphone_di_riccardo_focus', 'Spento' ) %}
            green
          {% else %}
            grey
          {% endif %}
        icon: |
          {% if is_state('binary_sensor.iphone_di_riccardo_focus', 'Spento' ) %}
            mdi:moon-waning-crescent
          {% else %}
            mdi:moon-waning-crescent
          {% endif %}
    alignment: center
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          padding-bottom: 20px !important;
        }  
card_mod:
  style: |
    ha-card {
      height: 102px;
    }

[Zenia (Yevgeniy)]

Hi again. Still can’t figure it out if it’s possible or not. Please help me . Thank you

[abhi.ko (Abhi)]

I have card-mod installed via HACS and config component and resources component all added but none of the styling options are working on any cards, I can’t seem to troubleshoot why.
From console it seems it is getting loaded correctly, however there are numerous errors that i believe is related to card-mod. See screenshots below, happy to provide more info that you need.

I have tried uninstalling and reinstalling a couple of times, cleared cache, tried old and new formatting for styles etc. no luck.

Any and all help is appreciated.

Edit: Looks like it is working on some cards when I view the dashboard on my android mobile/tablet HA app, but not on the desktop (chrome). card-mod is not working on any of the mushroom cards anywhere, mushroom-entities and mushroom-chip card in a custom:stack-in-card. card mod works on normal entities, button, mini-graph and even the custom:stack-in-card but not on the mushroom cards.

Code below:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.alex_room_fibaro_sensor_air_temperature
        name: Alex Room
        theme: dwains_dark_theme
        icon: ''
        icon_type: none
        tap_action:
          action: navigate
          navigation_path: alex_room
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: light.alex_bedroom_lights
            use_entity_picture: false
        alignment: end
        card_mod:
          style: |
            ha-card { 
              background-color: rgba(0,0,0,0);
              box-shadow: none;
              border-style: hidden;
            }          
  - type: custom:mini-graph-card
    entities:
      - sensor.alex_room_fibaro_sensor_air_temperature
    show:
      state: false
      name: false
      icon: false
    points_per_hour: 1
    hours_to_show: 48
    card_mod:
      style: |
        ha-card { 
          background-color: rgba(0,0,0,0);
          box-shadow: none;
          border-style: hidden;
        }   
card_mod:
  style: |
    ha-card { 
      background-color: rgba(0,0,0,0);
      box-shadow: none;
      border-style: hidden;
    }          

[LiQuid_cOOled]

Card-Mod was most likely working, just needed some additional mod entries under the mushroom cards.

The chips card mod need less indention than you had.

I believe this is the look you were going for. You need to use !important to change some of the settings you were trying to change. (especially color).

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.alex_room_fibaro_sensor_air_temperature
        name: Alex Room
        theme: dwains_dark_theme
        icon: ''
        icon_type: none
        tap_action:
          action: navigate
          navigation_path: alex_room
        card_mod:
          style: |
            ha-card { 
              background-color: transparent !important;
              box-shadow: none;
              border: none !important;
            }            
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: light.alex_bedroom_lights
            use_entity_picture: false
            card_mod:
              style: |
               ha-card { 
               background-color: transparent !important;
               box-shadow: none;
               border: none !important;
                } 
        alignment: end
    card_mod:
          style: |
            ha-card { 
              background-color: transparent !important;
              box-shadow: none;
              border: none !important;
            }          
  - type: custom:mini-graph-card
    entities:
      - sensor.alex_room_fibaro_sensor_air_temperature
    show:
      state: false
      name: false
      icon: false
    points_per_hour: 1
    hours_to_show: 48
    card_mod:
      style: |
        ha-card { 
          background-color: transparent !important;;
          box-shadow: none;
          border: none !important;
        }   
card_mod:
  style: |
    ha-card { 
      background-color: transparent !important;;
      box-shadow: none;
      border: none !important;

A suggestion:

Stack in card works well with Layout card in grid mode to give you a lot of control over the columns in a grid rows. You can do multiple columns and control the space the use with grid-template-columns:1fr 1fr 1fr or grid-template-columns: 30% 40% 30%

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 30% 40% 30%
      margin: '0px 0px 0px 0px'
    cards:

[abhi.ko (Abhi)]

Thank You, the edits you provided has fixed most of the issues. A big thank for the the layout-card suggestion, I am familiar with grids which I have used extensively for my tablet dashboard using custom:button-card templates, I will try out the layout-card and experiment with them for this.

Two still remain,

1. The chip card is still not showing the styles applied,
2. Still only visible on my android or fire devices and not on the Chrome on desktop.

Since this is primarily a mobile dashboard issue #2 is fine for now, but I am not sure what I can do to fix this for long term.

What am I doing wrong for the chip card - the screenshot below is form my phone and as you can see, the chip (on the 1st room card) is still showing the borders. Ignore the second version of the Alex Room - haven’t applied edits to it yet.

Code below:

  - type: custom:mushroom-chips-card
    chips:
      - type: light
        entity: light.alex_bedroom_lights
        use_light_color: false
    card_mod:
      style: |
        ha-card { 
          background-color: transparent !important;
          box-shadow: none;
          border: none !important;
        }
    alignment: end

[LiQuid_cOOled]

try clearing the browser cache and see if the issue still exists

try this and see if you still have an issue.

type: custom:mushroom-chips-card
chips:
      - type: light
        entity: light.alex_bedroom_lights
        use_light_color: false
        card_mod:
         style: |
          ha-card { 
          background-color: transparent !important;
          box-shadow: none;
          border: none !important;
           }
alignment: end

[abhi.ko (Abhi)]

@LiQuid_cOOled

type: custom:mushroom-chips-card
chips:
      - type: light
        entity: light.alex_bedroom_lights
        use_light_color: false
        card_mod:
         style: |
          ha-card { 
          background-color: transparent !important;
          box-shadow: none;
          border: none !important;
           }
alignment: end

This worked. Thanks again.