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

Ah no, the indentation is my bad. Probably just slipped in there. Removed it.

Thanks for the tip! Some some other questions

I want to edit the mushroom title card
Iā€™ve managed to change the size and font weight

I just need to change the colour.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Rooms
    alignment: center
    title_tap_action:
      action: none
    subtitle_tap_action:
      action: none
    card_mod:
      style: |
        .title {
            font-weight: 1000;
            font-size: 70px!important;
            color: #1d1b20;
        }

Just add !important behind the color. It is overwritten by some other styling. The same problem seems to be with the font-weight

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Rooms
    alignment: center
    title_tap_action:
      action: none
    subtitle_tap_action:
      action: none
    card_mod:
      style: |
        .title {
            font-weight: 1000!important;
            font-size: 70px!important;
            color: #1d1b20!important;
        }

I want to change the text fontā€¦ How can I see what font family do exist ?

ha-card {
            font-family: "brandon-grotesque";
          }

Iā€™m having an issue with my chip spacing after the updates, I know there was a fix rolled out but it doesnā€™t seem to have worked for me.

So If I add a positive spacing this pushes the cards further out but if I try to use minus to bring them closer together it doesnā€™t work anymore.

image

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Kitchen
    secondary: >-
      {{ states('sensor.kitchen_temperature') | round (1) }}Ā°C - {{
      states('sensor.kitchen_humidity') }}%
    icon: none
    entity: light.kitchen_lights
    hold_action:
      action: toggle
    tap_action:
      action: navigate
      navigation_path: /home-v2/kitchen
    icon_color: none
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            text-shadow: 0px 0px 5px black;
            --card-primary-font-weight: 350;
           --card-primary-color: white;
            --card-primary-font-size: 20px;
            align-items: end;
            margin-top: 175px;
            margin-left: -40px;
            inline-size: 180px;
            height: 25px;
          }
          .secondary {
            --card-secondary-font-size: 13px;
              text-shadow: 0px 0px 5px black;
           --card-secondary-color: white;
            --card-secondary-font-weight: 350;
              margin-top: -2px;
              margin-left: -40px;
          } 
        .: |
          ha-card {
            background: url('/local/images/areas/kitchen.jpg') center !important;
            background-size: cover !important;
            background-blend-mode: overlay !important;
            height: 220px !important;
            margin-left: -15px !important;
            margin-top: -70px !important;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: lock.back_door
            state: unlocked
        chip:
          type: template
          entity: lock.back_door
          icon_color: red
          icon: mdi:lock-open-variant
          tap_action:
            action: more-info
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.back_door
            state: 'on'
        chip:
          type: template
          entity: binary_sensor.back_door
          icon_color: red
          icon: mdi:door-open
          tap_action:
            action: more-info
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: media_player.kitchen_echo
            state: playing
        chip:
          type: template
          entity: media_player.kitchen_echo
          icon_color: grey
          icon: mdi:music
          tap_action:
            action: more-info
      - type: template
        entity: light.kitchen_lights
        icon: >-
          {{ 'mdi:lightbulb' if expand(area_entities('Kitchen')) |
          selectattr('domain','eq','light') | selectattr('state','eq','on') |
          list | count > 0 else 'mdi:lightbulb-outline' }}
        icon_color: >
          {% set lights_in_kitchen = expand(area_entities('Kitchen')) |
          selectattr('domain', 'eq', 'light') | list %} {{ 'orange' if
          lights_in_kitchen | selectattr('state', 'eq', 'on') | list | count > 0
          else 'grey' }}
        content: >-
          {{ expand(area_entities('kitchen')) |
          selectattr('domain','eq','light') | selectattr('state','eq','on') |
          list | count }}
        tap_action:
          action: call-service
          service: light.toggle
          target:
            area_id: kitchen
    alignment: end
    card_mod:
      style: | 
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: -5px;
          margin-top: -10px;
        }  
card_mod:
  style: |
    ha-card {
      height: 180px;
      width: 180px;
      margin-left: auto;
      margin-right: auto;
      {% if is_state('light.kitchen_lights', 'on') %}
          #box-shadow: 0 0 20px rgba(245, 173, 66, 0.6);
          #border-radius: 10px;
          #background: rgba(245, 173, 66, 0.1);      {% endif %}
    }

This has been a long time, and because I never really had use for colorizing the state, I guess I never noticed.

But, now that I do want it to be correct, let me please post this:

    - type: entities
      entities:
        - type: custom:template-entity-row
          entity: sensor.studenten_hygro_temp_battery
          state: >
            {{states(config.entity,with_unit=True)}}
          secondary: >
            Battery type: {{states(config.entity ~'_type')}}
          card_mod: &perc
            style: |
              div#wrapper:
                .: |
                  .state {
                    color: magenta;
                  }
                  .info {
                    color: cyan;
                    border: 2px solid var(--ha-color);
                    background:
                      {% set perc = states(config.entity)|float(0) %}
                      {% set rest = 100 - perc %}
                      {% if perc <= 10 %} {% set bar = '255,0,0' %}
                      {% elif perc <= 20 %} {% set bar = '128,0,0' %}
                      {% elif perc <= 30 %} {% set bar = '255,140,0' %}
                      {% elif perc <= 40 %} {% set bar = '255,165,0' %}
                      {% elif perc <= 50 %} {% set bar = '255,255,0' %}
                      {% elif perc <= 60 %} {% set bar = '154,205,5' %}
                      {% elif perc <= 70 %} {% set bar = '144,238,144' %}
                      {% elif perc <= 80 %} {% set bar = '50,205,50' %}
                      {% elif perc <= 90 %} {% set bar = '0,128,0' %}
                      {% else %} {% set bar = '0,100,0' %}
                      {% endif %}
                      /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
                      linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%,
                                                rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%);
                    }
                  .info .secondary {
                    color: white;
                  }
              :host {
                --card-mod-icon-color:
                  {% set perc = states(config.entity)|float(0) %}
                  {% if perc <= 10 %} red
                  {% elif perc <= 20 %} darkred
                  {% elif perc <= 30 %} darkorange
                  {% elif perc <= 40 %} orange
                  {% elif perc <= 50 %} yellow
                  {% elif perc <= 60 %} yellowgreen
                  {% elif perc <= 70 %} lightgreen
                  {% elif perc <= 80 %} limegreen
                  {% elif perc <= 90 %} green
                  {% else %} darkgreen
                  {% endif %};
                }

I am planning to add this to an auto-entities, and noticed the card doesnt really like it, because the colors are not applied correctly in that case, especially the background (which is the whole idea of this card in the first place)
so, 2 challenges, color the state, and feed it in auto-entities.
Please have a look if my

                  .state {
                    color: magenta;
                  }

is still the correct way.

btw, I first tried it without explicit state template, because the template-entity-row takes that off of the config.entity, but when it didnt colorize, I figured to add it explicitly. No change though
current state in auto-entities:

separateā€¦ found it, I had a stray pipe after the top style:

            style: |
              div#wrapper:
                .: |

fixed that and added the icon color under the host, this works:

Working color mods
        card_mod:
          style:
            div#wrapper:
              .: |
                .state {
                  color:
                  {% set perc = states(config.entity)|float(0) %}
                  {% if perc <= 10 %} red
                  {% elif perc <= 20 %} darkred
                  {% elif perc <= 30 %} darkorange
                  {% elif perc <= 40 %} orange
                  {% elif perc <= 50 %} yellow
                  {% elif perc <= 60 %} yellowgreen
                  {% elif perc <= 70 %} lightgreen
                  {% elif perc <= 80 %} limegreen
                  {% elif perc <= 90 %} green
                  {% else %} darkgreen
                  {% endif %};
                }
                .info {
                  color: black;
                  border: 2px solid var(--ha-color);
                  background:
                    {% set perc = states(config.entity)|float(0) %}
                    {% set rest = 100 - perc %}
                    {% if perc <= 10 %} {% set bar = '255,0,0' %}
                    {% elif perc <= 20 %} {% set bar = '128,0,0' %}
                    {% elif perc <= 30 %} {% set bar = '255,140,0' %}
                    {% elif perc <= 40 %} {% set bar = '255,165,0' %}
                    {% elif perc <= 50 %} {% set bar = '255,255,0' %}
                    {% elif perc <= 60 %} {% set bar = '154,205,5' %}
                    {% elif perc <= 70 %} {% set bar = '144,238,144' %}
                    {% elif perc <= 80 %} {% set bar = '50,205,50' %}
                    {% elif perc <= 90 %} {% set bar = '0,128,0' %}
                    {% else %} {% set bar = '0,100,0' %}
                    {% endif %}
                    /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
                    linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%,
                                              rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%);
                  }
                .info .secondary {
                  color: white;
                }
            .: |
              :host {
                --card-mod-icon-color:
                  {% set perc = states(config.entity)|float(0) %}
                  {% if perc <= 10 %} red
                  {% elif perc <= 20 %} darkred
                  {% elif perc <= 30 %} darkorange
                  {% elif perc <= 40 %} orange
                  {% elif perc <= 50 %} yellow
                  {% elif perc <= 60 %} yellowgreen
                  {% elif perc <= 70 %} lightgreen
                  {% elif perc <= 80 %} limegreen
                  {% elif perc <= 90 %} green
                  {% else %} darkgreen
                  {% endif %};
                }

1 Like

really nice!
did you create your battery type using customize.yaml??

sensor.studenten_hygro_temp_battery:
  friendly_name: Studenten hygro temp Battery
  device_class: battery
  battery_type: CR2477

no, I did think about that, but I installed Battery Notes custom integration

update

setting the secondary line to use the last_replaced was a bit of a challenge, but using this:

filter:
  include:
    - entity_id: sensor.*_battery
      options:
        type: custom:template-entity-row
        state: >
          {{states(config.entity,with_unit=True)}}
        secondary: >
            Batterij: {{states(config.entity ~'_type')}},
            sinds: {{states(config.entity ~'_last_replaced')|as_timestamp(default=none)|timestamp_custom('%d-%m-%y %X',True,'Nog niet geactiveerd')}}

makes the magic happen. the 2 filters both need a default, and setting the first to none, makes the second jump to its default string I want in the card:

and when actually set:

ofc we can use any format we like, this is still an experiment :wink:

the unknown on the battery type entities is because somehow the object_idā€™s are different on my Ikea sensor entities. I still need to re-edit those, which is a mystery, and not an issue.

1 Like

Someone here, who have the problem as well with map card, which removes all card_mod on every edit-open in the UI and perhaps a fix for this?

Do not recall the issue with the Map, with some other cards see it practically always.
Not surprised with the fact that it happens with the Map.

How can I change this icon size and icon color?

I have the necessary styling but I canā€™t apply them alltogether properly (or they are not respected):

icon size:

      :host {
        --mdc-icon-size: 60px;
      }

icon color:

                      ha-state-icon:
                        $: |
                          ha-svg-icon {
                            color: green;
                          }

Full (but minimum/reduced) card:

type: custom:mod-card
card:
  type: grid
  columns: 1
  square: false
  title: ''
  cards:
    - type: markdown
      title: ''
      content:
      [ REMOVED IRRELEVANT CONTENT ]
    - type: vertical-stack
      cards:
        - type: grid
          columns: 2
          square: false
          title: ''
          cards:
            - type: button
              [ REMOVED IRRELEVANT CONTENT ]
        - type: custom:auto-entities
          card:
            type: entities
            title: ''
            state_color: true
            show_header_toggle: false
            card_mod:
              style: |
                ha-card {
                  text-align: center;
                  letter-spacing: 1px;
                  font-weight: bold;
                  border-width: 2px;
                  padding: 0px;
                  background: default;
                }
          filter:
            include:
              - entity_id: sun.sun
                options:
                  name: S p r a c h s t e u e r u n g
                  icon: mdi:account-voice
                  tap_action:
                    action: assist
                    start_listening: true
                  card_mod:
                    style:
                      ha-state-icon:
                        $: |
                          ha-svg-icon {
                            color: green;
                          }
                      hui-generic-entity-row:
                        $: |
                          .text-content:not(.info) {
                            display: none;
                          }
                          .info.pointer {
                            #color: red;
                            font-size: 18px;
                          }
            exclude: null
          show_empty: false
          unique: true
          sort: []
        - type: custom:simple-clock-card
          [ REMOVED IRRELEVANT CONTENT ]
card_mod:
  style:
    hui-grid-card:
      $: |
        .card-header {
          #width: max-content;
          #margin: 0 auto;
        }
        ha-card {
          #margin-bottom: -15px;
          margin-top: -2px;
        }

EDIT: solved at

But this is then from the parser (changes) of one of the HA updates and we have to live with it or fixable from Thomas or someone else in Card Mod?

did you test it in a yaml dashboard?
if you did and the Map cards remain as is, than this would indeed be a UI bug, and should be filed in the repo as such.

I didnt check yet but maybe someone else already reported it? (letā€™s have a look)

Personally, I had sizing issues with iframe card, and not the map card. I couldnt get the iframe to fill the full width under a fold anymore.
I managed to fix it setting the mod on the fold itself, and no longer on the iframe.

Maybe the issue you experience is related? or do you experience other trouble.

Unfortunately, no. There are no problems. Only the complete code lines of card-mod are deleted on every edit-open for the card. Not nested or anything else.

Edit: And whyever I cannot re-produce it anymore today. It was always the case in the last weeks/months.

Hey everyone, Iā€™m creating a dashboard thorugh YAML mode and Iā€™m using card_mod a lot. I wonder if there is a way to create smooth angles for the cards, as the ones you configure via UI.

Is it possible to adjust the height of the individual timelines in a history-graph card in timeline view?
I often use the option to open the more-info dialog. Doing this on a touchscreen is a bit difficult because the graphs are so narrow and close together.

I am struggling hard to format the buttons in footer of an entities card. I want to format the buttons at bottom - I tried to work out the DOM selector for hours nowā€¦

Chrome:

and:

Here is where I am currently stuck:

        card_mod:
          style: |
            ha-card {
              background-color: var(--primary-background-color);
              padding: 0px;
              border-width: 0px !important;
              color: var(--prim-text-color);
            }
            .card-header {
              font-size: 24px;
              padding: 0px 4px 0px 18px;
              border-bottom: 1px solid var(--divider-color);                                                                                                                                                             
              margin-bottom: 10px;
              font-size: 1.2em;
              font-weight: 450;
              background: var(--primary-background-color);
              border: 0px;
            }
            .card-content {
              font-size: 14px;
              text-transform: uppercase;
              padding: 0px 6px 4px 8px;
              #border-radius: var(--ha-card-border-radius, 12px);
              border: 1px solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
              background:  var(--card-bg-color);
            }
            .header-footer {
              background-color: var(--card-bg-color);
              border-bottom: 1px solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));    
              border-right: 1px solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));       
              border-left: 1px solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
              
            }

            #Trying to find the right DOM ;)

            # Works
            .header-footer hui-buttons-header-footer{  
              #border: 1px solid green;
              #display: block;
            }

            # Does not work

            .header-footer hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar:
              $: |
                ha-assist-chip {
                  border: 1px solid green !important;
                }

I read the previous suggestions in this thread on formatting the buttons - they all dont work for meā€¦ Anyone with an Idea?

I made these mods in my card-mod-theme, maybe that can help:

    card-mod-card-yaml: |
      hui-buttons-header-footer $ hui-buttons-base:
        $ : |
          .ha-scrollbar {
            justify-content: space-evenly;
            height: 50px;
            align-content: center;
            margin: -8px 0px 0px 0px;
          }

      hui-buttons-header-footer $ hui-buttons-base $: |
          ha-assist-chip {
            border: 1px solid var(--primary-color);
            border-radius: var(--ha-card-border-radius);
            /*--ha-assist-chip-filled-container-color: yellow;*/
            --secondary-text-color: var(--primary-color);
            --primary-text-color: var(--primary-color);
            --_label-text-weight: bold;
          }
          ha-assist-chip state-badge {
            justify-content: space-between;
            margin-left: 4px;
          }

to do things like this


the icons change their active color, but that is not set in these mods

1 Like

Thanks for chiming in.

I tried - but no luck. My code misses the hui-butotns-base.

Can you share how you generated the buttons? via footer type:buttonss?