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

[dimitri.landerloos]

You are right the reason i deleted my post is because it didnt give the effect you wanted which was dynamic sizing. Setting it to 0 just got rid of the entire section.

$ i used when an object has a shadow root and you want to access the element inside that shadow root. So here the #calendar element is inside the shadow root of the ha-full-calendar element so we add a $ to account for that.

If we just wrote:

card_mod:
  style:
    ha-full-calendar: |
      #calendar {
        min-height: 300px !important;
      }

It would not work as the #calendar element is not inside the ha-full-calendar element, its inside the shadow root of ha-full-calendar

you can basically start with any element as long as you dont hit a shadow root. if you hit a shadow root you need to start with that element and drill down.

so for example if am wanting to change the text of an entity card. i am already inside the ha-card (because my card_mod is applied to the card itself) so we can ignore the shadow root for that. i can then see that .value is is inside .info but i dont need to declare it, because .value is not inside the shadow root of .info. so this works:

card_mod:
  style: |
    .value {
      color: red !important;
    }

but lets say i have an entity card where i want to modify the ha-svg-icon instead (could probably just change the ha-state-icon instead, but stay with me). now shadow roots are involved so therefore i now need to declare this:

Notice that i can ignore anything after ha-card up until i get to ha-state-icon, because none of it is in a shadow root.

card_mod:
  style: 
    ha-state-icon$: |
      ha-svg-icon {
        color: red !important;
      }

as this will not work. because ha-svg-icon is inside the shadow root of ha-state-icon

card_mod:
  style: |
    ha-svg-icon {
      color: red !important;
    }

[Sethielh]

Hello,

Thanks for all those examples and explanations, but i don’t know how to handle CSS and after trying multiple example and variations, i can’t get what i’m looking for.

Here is my start :

I try to make several adjustments.

First, i’m looking for a way to reduce graph size by superimpose curve and values to obtain something like that :

Graphs are based on custom:mini-graph-card.

Second, i try to correctly center battery icon and enlarge zone to obtain :

Battery is based on custom:battery-state-card on which i already set this to hide labels :

          card_mod:
            style:
              battery-state-entity:
                $: |
                  .state {
                    display: none;
                  }
                  .name.truncate {
                    display: none;
                  }

I arrive to hide value and labels, not sure if it’s the best way to do that, but seems to work.
But i can’t change battery alignement and tile size.

Thanks for your help.

[Lode1 (Lode Bongaerts)]

Hi,
Does somebody know what is wrong with this code ?
Everything works fine except that the chipcards don’t stick to the bottom.

type: custom:mushroom-chips-card
card-mod:
  style: |
    ha-card { -- chip-background: none; }
    :host {
      z-index: 2;
      position: fixed;
      bottom: 0
    }
chips:
  - type: template
    icon: mdi:login
    tap_action:
      action: navigate
      navigation_path: /lovelace/test
  - type: template
    icon: mdi:cog
    tap_action:
      action: navigate
      navigation_path: /lovelace/test2
  - type: template
    icon: mdi:cog
    tap_action:
      action: navigate
      navigation_path: /lovelace/test3
    card_mod:
      style: |
        ha-card {
        --chip-background: red;   

[dimitri.landerloos]

@Lode1

card-mod:

vs

card_mod:

and just to fix the rest of your formatting.

type: custom:mushroom-chips-card
card_mod:
  style: |
    ha-card { 
      --chip-background: none; 
    }
    :host {
      z-index: 2;
      position: fixed;
      bottom: 0px;
    }
chips:
  - type: template
    icon: mdi:login
    tap_action:
      action: navigate
      navigation_path: /lovelace/test
  - type: template
    icon: mdi:cog
    tap_action:
      action: navigate
      navigation_path: /lovelace/test2
  - type: template
    icon: mdi:cog
    tap_action:
      action: navigate
      navigation_path: /lovelace/test3
    card_mod:
      style: |
        ha-card {
          --chip-background: red;
        }

[dimitri.landerloos]

Post the code that you currently have please

[Sethielh]

Hello @dimitri.landerloos,
here is my code :

type: grid
square: false
columns: 1
cards:
  - type: markdown
    content: '## Room 1'
  - type: horizontal-stack
    cards:
      - type: custom:mini-graph-card
        entities:
          - sensor.rdc_temperature_interieure
        name: T° intérieure
        points_per_hour: 1
        align_icon: state
        align_state: center
        decimals: 1
        show:
          name: false
          extrema: false
        hour24: true
        animate: true
        height: 150
        line_width: 3
        color_thresholds:
          - value: -20
            color: '#00FFFF'
          - color: '#000CFF'
          - color: '#1DD715'
          - color: '#FF8F00'
          - value: 50
            color: '#FF0000'
      - type: custom:mini-graph-card
        entities:
          - sensor.rdc_humidite
        name: Humidité SàM
        points_per_hour: 1
        align_icon: state
        align_state: center
        decimals: 1
        show:
          name: false
          extrema: false
        hour24: true
        animate: true
        height: 150
        line_width: 3
        color_thresholds:
          - value: 0
            color: '#B8B8B8'
          - color: '#1DD715'
          - value: 100
            color: '#000CFF'
  - type: custom:mod-card
    card_mod:
      style:
        hui-grid-card$: |
          div#root {
            grid-template-columns: 85% 13%;
          }
    card:
      square: false
      columns: 2
      type: grid
      cards:
        - type: custom:mushroom-climate-card
          entity: climate.salle_a_manger
          icon: mdi:radiator
          show_temperature_control: true
          collapsible_controls: true
          hvac_modes:
            - auto
            - heat
          fill_container: true
          primary_info: none
        - type: custom:battery-state-card
          color_gradient:
            - '#ff0000'
            - '#ffff00'
            - '#00ff00'
          entities:
            - entity: sensor.vanne_salle_a_manger_battery_percent
              name: Batterie salle à manger
          card_mod:
            style:
              battery-state-entity:
                $: |
                  .state {
                    display: none;
                  }
                  .name.truncate {
                    display: none;
                  }
  - type: custom:mod-card
    card_mod:
      style:
        hui-grid-card$: |
          div#root {
            grid-template-columns: 85% 13%;
          }
    card:
      square: false
      columns: 2
      type: grid
      cards:
        - type: custom:mushroom-climate-card
          entity: climate.rdc
          icon: mdi:sun-snowflake-variant
          primary_info: none
          hvac_modes:
            - auto
            - heat
            - cool
            - dry
            - fan_only
            - 'off'
          show_temperature_control: true
          collapsible_controls: true
          tap_action:
            action: none
          hold_action:
            action: none
          double_tap_action:
            action: none
        - type: button
          show_name: false
          icon: mdi:air-filter
          show_icon: true
          tap_action:
            action: toggle
          entity: switch.rdc_streamer

Thanks per advance for your advices and help,
Have a good day.

[dimitri.landerloos]

Hi, this should do it. just change the entities back to your own

type: grid
square: false
columns: 1
cards:
  - type: markdown
    content: '## Room 1'
  - type: horizontal-stack
    cards:
      - type: custom:mini-graph-card
        entities:
          - sensor.office_temperature_humidity_temperature
        name: T° intérieure
        points_per_hour: 1
        align_icon: state
        align_state: center
        decimals: 1
        show:
          name: false
          extrema: false
        hour24: true
        animate: true
        line_width: 3
        color_thresholds:
          - value: -20
            color: '#00FFFF'
          - color: '#000CFF'
          - color: '#1DD715'
          - color: '#FF8F00'
          - value: 50
            color: '#FF0000'
        card_mod:
          style: |
            .graph__container__svg {
              position: absolute;
              margin-top: -40px;
            }
            .states {
              z-index: 1;
            }
            :host {
              height: 80px;
            }
      - type: custom:mini-graph-card
        entities:
          - sensor.office_temperature_humidity_humidity
        name: Humidité SàM
        points_per_hour: 1
        align_icon: state
        align_state: center
        decimals: 1
        show:
          name: false
          extrema: false
        hour24: true
        animate: true
        line_width: 3
        color_thresholds:
          - value: 0
            color: '#B8B8B8'
          - color: '#1DD715'
          - value: 100
            color: '#000CFF'
        card_mod:
          style: |
            .graph__container__svg {
              position: absolute;
              margin-top: -40px;
            }
            .states {
              z-index: 1;
            }
            :host {
              height: 80px;
            }
  - type: custom:mod-card
    card_mod:
      style:
        hui-grid-card$: |
          div#root {
            grid-template-columns: 85% 13%;
          }
    card:
      square: false
      columns: 2
      type: grid
      cards:
        - type: custom:mushroom-climate-card
          entity: climate.ecobee
          icon: mdi:radiator
          show_temperature_control: true
          collapsible_controls: true
          hvac_modes:
            - auto
            - heat
          fill_container: true
          primary_info: none
        - type: custom:battery-state-card
          color_gradient:
            - '#ff0000'
            - '#ffff00'
            - '#00ff00'
          entities:
            - entity: sensor.vanne_salle_a_manger_battery_percent
              name: Batterie salle à manger
          card_mod:
            style:
              battery-state-entity$: |
                .state {
                  display: none;
                }
                .name.truncate {
                  display: none;
                }
                .icon {
                  position: relative;
                  right: 2px;
                }
              .: |
                ha-card {
                  height: 100% !important;
                }
                .card-content {
                  display: grid;
                  height: 100% !important;
                  padding: 0px 16px 0px 16px !important;
                  justify-items: center;
                  align-items: center !important;
                }
                battery-state-entity {
                  display: inherit !important;
                }
  - type: custom:mod-card
    card_mod:
      style:
        hui-grid-card$: |
          div#root {
            grid-template-columns: 85% 13%;
          }
    card:
      square: false
      columns: 2
      type: grid
      cards:
        - type: custom:mushroom-climate-card
          entity: climate.hvac
          icon: mdi:sun-snowflake-variant
          primary_info: none
          hvac_modes:
            - auto
            - heat
            - cool
            - dry
            - fan_only
            - 'off'
          show_temperature_control: true
          collapsible_controls: true
          tap_action:
            action: none
          hold_action:
            action: none
          double_tap_action:
            action: none
        - type: button
          show_name: false
          icon: mdi:air-filter
          show_icon: true
          tap_action:
            action: toggle
          entity: switch.ac

[Sethielh]

Hello and thank you very much @dimitri.landerloos, you did it !!!
Here is the result :

Thanks.

[dimitri.landerloos]

on your theme looks like you can maybe take out this:

                .icon {
                  position: relative;
                  right: 2px;
                }

[Sethielh]

The impact is in the smartphone view.
With, the icon is a little on the left using computer view, but correctly centered using smartphone app.
Without, its the opposite
Rendering are not equivalent between chrome and ha app

[dimitri.landerloos]

ah, i see. that is annoying…

[Sethielh]

Not really, don’t worry
it happens within a few pixels and it’s not really obvious.

[Lode1 (Lode Bongaerts)]

Hi Dimitri,

Thank you so much for helping me out.
I saw the code in on this website:
https://mysmarthome.blog/blog/sticky-navigation-bar.html

So i was thinking that is correct and off course card_mod instead of card-mod (my mistake)

[Scoff (Scott)]

Hello. I’m struggling with adding css to one particular card on my dashboard, and wondered if anyone could help guide me in the right direction, with what I thought would be a fairly simple bit of styling.

The top 2 cards on the sidebar area of my dash are custom button cards, within a vertical stack - the first one for displaying the time, and the second one for displaying the date. Both cards display correctly when viewed on a tablet, however when viewed on mobile, I want them to act differently. The ‘Time’ button card I am successfully hiding on mobile view, with the following code:

- type: grid
        view_layout:
          grid-area: sidebar
        columns: 1
        cards:
          - type: vertical-stack
            cards:
              - type: custom:button-card
                entity: sensor.time
                show_name: false
                show_icon: false
                show_state: true
                tap_action:
                  action: none
                styles:
                  card:
                    - padding-top: 20px
                    - text-align: center
                    - border-width: 0
                    - font-family: SF Pro Display, Roboto, system-ui
                  state:
                    - font-size: var(--sidebar-time-font-size)
                    - font-weight: 300
                    - line-height: var(--sidebar-time-line-height)
                    - letter-spacing: 0.11vw
                    - color: rgba(255, 255, 255, 0.8)
                card_mod:
                  style: |
                    /* phone */
                    @media screen and (max-width: 800px) {
                      ha-card {
                        display: none !important;
                      }
                    }

I am hoping to change the font-size of the Date (second button card in my vertical stack) when viewed on mobile, however my media query isn’t making any difference to the font-size on mobile, so I think I may not be addressing the element/using the correct selector. This is the code for my Date button card:

- type: custom:button-card
entity: sensor.date_formatted
show_name: false
show_icon: false
show_state: true
tap_action:
  action: none
styles:
  card:
    - padding-top: 10px
    - text-align: center
    - border-width: 0
    - font-family: SF Pro Display, Roboto, system-ui
  state:
    - font-size: var(--sidebar-date-font-size)
    - font-weight: 300
    - line-height: var(--sidebar-time-line-height)
    - color: rgba(255, 255, 255, 0.8)
card_mod:
  style: |
    /* phone */
    @media screen and (max-width: 800px) {
      ha-card .state.ellipsis {
        font-size: calc(var(--sidebar-date-font-size) * 1.2)
      }
    }

Using Developer tools in my browser, and on mobile view (less than 800px wide) I can see that the state is just picking up the regular font-size from my theme, which is set under the styles>state options of the card in the code above it

<div id="state" class="ellipsis" style="font-size:var(--sidebar-date-font-size);font-weight:300;line-height:var(--sidebar-time-line-height);color:rgba(255, 255, 255, 0.8);">

  <!--?lit$560216021$-->Tuesday October 10

</div>

Can anyone help with where I am going wrong please? Still very new to css and only just started working with my new dashboard in yaml mode.

[dimitri.landerloos]

Why dont you just set the size of the variable directly like this:

card_mod:
  style: |
    @media screen and (max-width: 800px) {
      ha-card {
        --sidebar-date-font-size: 40px !important;
      }
    }

can also just set the card font size globally like this:

card_mod:
  style: |
    @media screen and (max-width: 800px) {
      ha-card {
        font-size: 40px !important;
      }
    }

[Scoff (Scott)]

Thank you - it’s so obvious now, and yes that works perfectly. I was staring at it for far too long, and ended up overcomplicating it!

[bangali]

mostly got the HA light card working but sized to fit my grid style display using card-mod. i am kind of familiar with CSS but as good as the rest of you on the trial and error method. that is to say don’t ask me to explain any of this but it works

the code and displayed card is below, but the request. Please help reuse the name area on the card as the more-info click area and completely disable the current more-info icon display/area.

thank you.

        - type: markdown
          content: to be able to see any overflow
        
        - square: false
          type: grid
          columns: 5
          cards:
    
      {% for i in range(5) %}
            - type: light
              entity: {{ thisRoomLights[0] }}
              name: {{ allRoomLightNames[room][0] }}
              color: auto
              show_name: true
              show_icon: true
              show_state: false
              styles:
                card:
                  - background-color: transparent
                icon:
                  - color: >
                      [[[
                          return (entity.state === 'on') ? variables.iconColorActive : variables.iconColorInactive;
                      ]]]
              card_mod:
                style: >
                  ha-card {
                    height: 100px !important;
                    width: auto !important;
                    overflow: visible !important;
                  }
                  ha-card > div {           ## if you change to lower percent the slider will overflow
                    height: 100% !important; 
                    width: 100% !important;
                  }
                  ha-card > ha-icon-button {
                    height: 20% !important;
                    width: 20% !important;
                    padding: none !important;
                  }
                  #slider > ha-icon-button {                ## sets the icon size
                    --mdc-icon-button-size: 80% !important;
                    --mdc-icon-size: 80% !important;
                    padding: none !important;
                  }
                  :host #slider > round-slider  {       ## without this the slider and text will overflow
                    height: 90% !important;
                    width: 90% !important;
                    padding-bottom: 0px !important;
                  }
                  :host #slider > ha-icon-button > ha-state-icon {          ## without this the icon will be off center
                    width: 100% !important;
                    justify-content: center !important;
                    justify-self: center !important;
                  }
                  #slider > ha-icon-button > ha-state-icon  {              ## without this the icon will be off center
                    width: 100% !important;
                    justify-content: center !important;
                    justify-self: center !important;
                  }
              {% endfor %}

[Dino-Tech (Darren Wilson)]

Trying (unsuccessfully so far), to change the navigation buttons within a swiper container. Can anyone possibly point me in the right direction?

Any pointers would be greatly appreciated
EDIT: I wrapped the whole swiper-container in a card_mod, does this put it closer to a ‘doable’ feat? Thanks again!

[arganto]

I don’t use the card but your screenshot shows, that this card /there is no ha-card element. Without that cad-mod will not be able to ingest the code (same as for the core stack cards, …). So a mod-card around your card might be needed.

[bangali]

figured out how to hide the more-info buttons by adding this to the existing:

ha-icon-button.more-info {
        display: none;
}

only remaining now is how to add a second tap action to the name area without breaking the first tap action on the icon.

thanks.