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

step by step, all will come.
Will update my stack-related styles soon.

1 Like

I hope somebody can help me out. Iā€™m stuck for ages :frowning:

Picture for reference:
image

Question1: Change field 1
I want another sensorā€™s data to be displayed. I worked out how to do it in field 2, see example code below:

card_mod:
  style:
    .: |
    ha-state-control-climate-temperature:
      $: |
        .label:nth-of-type(2) {
          display: inline-block !important;
          visibility: hidden;
          text-align: center;
          width: 100%;
        }
        .label:nth-of-type(2):before {
          content: "{{ states('sensor.mytemperaturesensor') | round(1) }} Ā°C";
          visibility: visible;
          display: inline-block;
          width: 100%;
          text-align: center;
        }

I dont know how to adress field 1

Question 2: Change icons of field 3 & 4
The icons in field 3 (fan speed) and field 4 (vane angle) are not picked up. How do i assign icons to this buttons?

I expected something like this, but it doenst work:

card_mod:
  style:
    hui-card-features $ hui-climate-fan-modes-card-feature $ ha-control-select $: |
      div#option-1 ha-svg-icon {
        content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='magenta' d='M20 22H4V20C4 17.8 7.6 16 12 16S20 17.8 20 20M8 9H16V10C16 12.2 14.2 14 12 14S8 12.2 8 10M19 4C18.4 4 18 4.4 18 5V6H16.5L15.1 3C15 2.8 14.9 2.6 14.7 2.5C14.2 2 13.4 1.9 12.7 2.2L12 2.4L11.3 2.1C10.6 1.8 9.8 1.9 9.3 2.4C9.1 2.6 9 2.8 8.9 3L7.5 6H6V5C6 4.4 5.6 4 5 4S4 4.4 4 5V6C4 7.1 4.9 8 6 8H18C19.1 8 20 7.1 20 6V5C20 4.5 19.6 4 19 4Z'/%3E%3C/svg%3E");
      }

This refers to:
image

Strange thing is that changing the icon of HVAC modes does work with the above mentioned method

One of rare cases when card-mod is needed for custom:button-card

Hello All

Firstly very sorry for my absolute terrible HA knowledge. So here is what Iā€™m trying to do. I have a grid card and using the awesome card mod and some codes I found online, I managed to make them transparent and coloured the way I like.

My query is that I have a title for my grid card ā€œRoomsā€
itā€™s to the left and really small as compared to the rest of my buttons.

Iā€™m trying to center it, change the font colour to white and increase the font size and maybe the form weight.

If I do an inspect element I can change the stuff in browser, however I have no idea how to change it in my dashboard. Below is my code.

Thanks

square: true
type: grid
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: navigate
      navigation_path: ''
    entity: sensor.sonoff_a4b00139e7_temperature
    name: Living Room
    icon: mdi:sofa
    hold_action:
      action: none
    card_mod:
      style: |
        ha-card {
          --ha-card-background: rgba(247, 248, 242, 0.0);
            color: #36013f;
            font-weight: 800;
            font-size: 30px!important;
            --card-mod-icon-color: #36013f;
            }
        }
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: navigate
      navigation_path: ''
    entity: sensor.sonoff_a4b0013f1d_temperature
    name: Kitchen
    icon: mdi:silverware-fork-knife
    hold_action:
      action: none
    card_mod:
      style: |
        ha-card {
          --ha-card-background: rgba(247, 248, 242, 0.0);
            color: #006A4E;
            font-weight: 800;
            font-size: 30px!important;
            --card-mod-icon-color: #006A4E;
            }
        }
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: navigate
      navigation_path: ''
    entity: sensor.sonoff_a4b001433a_temperature
    name: Passage
    icon: mdi:shower
    hold_action:
      action: none
    card_mod:
      style: |
        ha-card {
          --ha-card-background: rgba(247, 248, 242, 0.0);
            color: #9B1C31;
            font-weight: 800;
            font-size: 30px!important;
            --card-mod-icon-color: #9B1C31;
            }
columns: 3
title: Rooms
view_layout:
  grid-area: c2

Hi there, I have an I frame card with the embed Radar from windy.com. I would really like to hide the controls from card. But windys embed doesnā€™t allow for that anymore. I am now trying to get that done with some custom css.
First of all is that even possible? And second if it is possible what am I doing wrong?

Thanks in advance for any help!

type: iframe
url: >-
  https://embed.windy.com/embed.html?type=map&location=coordinates&metricRain=default&metricTemp=default&metricWind=default&zoom=11&overlay=radar&product=radar&level=surface&lat=<lat>&lon=<lon>&message=true
aspect_ratio: 70%
card_mod:
  style:
    iframe: |
      plugins-bottom-desktop {
        visibility: hidden;
      }

To change the text styling you could just add the following right under your ha-card styling:

card_mod:
  style: |
    ha-card {
      ...
    }
    span {
      <the text styling>
    }

But I dont fully understand what you mean with left and really small ā€¦

Hey thanks for getting back to me. Here is a screen shot of my card, if you see the title room in the grid card is to the left and is really small. I just want to change it to the centre and make it larger

Ah I see, probably easiest to use a vertical stack card and the title card from lovelace-mushroom.
You could then use the following code:

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Rooms
    alignment: center
  - square: true
    type: grid
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: navigate
          navigation_path: ''
        entity: sensor.sonoff_a4b00139e7_temperature
        name: Living Room
        icon: mdi:sofa
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(247, 248, 242, 0.0);
                color: #36013f;
                font-weight: 800;
                font-size: 30px!important;
                --card-mod-icon-color: #36013f;
                }
            }
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: navigate
          navigation_path: ''
        entity: sensor.sonoff_a4b0013f1d_temperature
        name: Kitchen
        icon: mdi:silverware-fork-knife
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(247, 248, 242, 0.0);
                color: #006A4E;
                font-weight: 800;
                font-size: 30px!important;
                --card-mod-icon-color: #006A4E;
                }
            }
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: navigate
          navigation_path: ''
        entity: sensor.sonoff_a4b001433a_temperature
        name: Passage
        icon: mdi:shower
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(247, 248, 242, 0.0);
                color: #9B1C31;
                font-weight: 800;
                font-size: 30px!important;
                --card-mod-icon-color: #9B1C31;
                }
    columns: 3
    view_layout:
      grid-area: c2

are you sure this is correct?

if the entity for the button is that sensor, it should be aligned with the main type, and, why set action navigate if not setting a path, simply set action none

Yes, the navigation part should be left out. Just copied his code and applied the styling. Feel free to optimise it. Not saying its a perfect solution. But it should workā€¦

right, I now scroll back a bit further and see what was the source there, my bad, should have replied to that one.

--ha-card-background: rgba(247, 248, 242, 0.0); can be

background: rgba(247, 248, 242, 0.0);

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