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

I’m using custom:multiple-entity-row for this, having the primary entity as the main entity (which shows on secondary-info) and all other entities in the row.

thanks, I tried both your changes, but can not say I see any difference I am afraid. It must have to be with the icon, because when I animate the background of the icon, it is perfectly round, or at least way better…

Any Card-mod gurus able to help me on this? I’m trying to target this state-switch <div> to set overflow: visible so that the background colour/image can ‘escape’.

This is what it currently looks like:

This is the desired look:

This is the <div> I can target with overflow: visible to make it work under styles #root {}:

I’ve attempted to wrap the state-switch-card within a custom:mod-card but I’m not sure if this is the correct approach?

thanks!

YAML
      - type: custom:stack-in-card
        view_layout:
          grid-area: main1
          justify-self: middle
          show:
            mediaquery: '(min-width: 600px)'
        card_mod:
          style: |
            #root {
              overflow: visible !important;
            }
            :host {
              margin-top: -300px !important;
              padding-top: 300px !important;
              overflow: visible !important;
              margin-left: -4px !important;
              }
            ha-card {
              background-color: rgba(0,0,0,0) !important;
              backdrop-filter: blur(0px) !important;
              border-radius: 30px 30px 30px 30px !important;
              box-shadow: none !important;
              overflow: visible !important;
              }
        cards:
          - type: custom:mod-card
            card:
              type: custom:state-switch
              entity: hash
              transition: slide-left
              transition_time: 500
              view_layout:
                grid-area: main1
              states:
                kitchen:
                  type: custom:layout-card
                  layout_type: grid
                  view_layout:
                    grid-area: main1
                  layout:
                    grid-template-columns: auto 300px 300px auto
                    grid-template-rows: 1fr
                  cards:
                    - type: custom:mini-media-player

just sharing a small card config I had been forgetting to check out:

which is an entities card containing 2 custom:badge-card

type: entities
title: Summary
card_mod:
  style: |
    .card-header {
      background-color: var(--background-color-off);
      color: var(--text-color-off);
      /*font-weight: bold;*/
      margin: 0px 0px 16px 0px;
      padding-top: 0px;
      padding-bottom: 0px;
    }
entities:
  - type: custom:badge-card
    badges:
      - sensor.home_badge
      - sensor.doors_badge
      - sensor.hubs_badge
      - sensor.critical_badge
      - sensor.lights_badge
  - type: custom:badge-card
    badges:
      - sensor.switch_badge
      - sensor.active_badge
      - sensor.appli_badge
      - sensor.play_badge
      - sensor.track_badge

I wanted to spread the badges more evenly, and even tested it with grid card, but ofc that doesnt work.

adding

    card_mod:
      style: |
        div#badges {
            display: flex;
            justify-content: space-around;
        }

helps though, and is a mod I dont think Ive seen before in this topic, and is quite neat and simple, preventing the need for verbose numbers. Just let the frontend figure it out :wink:

simple final code:

type: entities
title: Summary
card_mod:
  style: |
    .card-header {
      background-color: var(--background-color-off);
      color: var(--text-color-off);
      /*font-weight: bold;*/
      margin: 0px 0px 16px 0px;
      padding-top: 0px;
      padding-bottom: 0px;
    }
entities:
  - type: custom:badge-card
    card_mod: &spread
      style: |
        div#badges {
          display: flex;
          justify-content: space-around;
        }
    badges:
      - sensor.home_badge
      - sensor.doors_badge
      - sensor.hubs_badge
      - sensor.critical_badge
      - sensor.lights_badge
  - type: custom:badge-card
    card_mod: *spread
    badges:
      - sensor.switch_badge
      - sensor.active_badge
      - sensor.appli_badge
      - sensor.play_badge
      - sensor.track_badge
1 Like

I’ve used a template sensor to combine humidity and temperate:

sensor:
  - platform: template
    sensors:
      bathroom_temp_humidity:
        value_template: '{{ states.sensor.motion_bathroom_hue_temperature.state }} {{ states.sensor.motion_bathroom_hue_temperature.attributes.unit_of_measurement }}, {{ states.sensor.humidity_bathroom_humidity.state }}{{ states.sensor.humidity_bathroom_humidity.attributes.unit_of_measurement }} '

Has anyone figured out a way to flip which side of the screen the sidebar column renders on with card_mod? It’s driving me crazy on the right :crazy_face:

Hi:

I’m new to card-mod. All I want to do is turn my badge icon yellow if a binary sensor is on. I can get the boarder to work but I don’t the name of the resource that controls the icon. Here is my code.

 - entity: binary_sensor.zcombo_system_heartbeat
    icon: mdi:heart
    name: ZCombo System Heartbeat
    style: |
      :host {
        ha-svg-icon: {% if is_state('binary_sensor.zcombo_system_heartbeat', 'on') %} yellow {% else %} red {% endif %};
      } 

Thank you!

Read the first post of this thread, at the bottom of that post you’ll find a link with many card-mod codes and examples. Also for badges:

I figured it out, thanks.

Is it possible with this tool to change the height for the graphics in the history page?

@Milenco

Ok, let us not think about a purpose of the styles - let us assume that you specified styles properly. In similar cases to combine “long DOM path” and “short ha-card / :host path” you need to do this:

                  card_mod:
                    style:
                      hui-generic-entity-row: 
                        $: |
                          state-badge {
                            ...
                          }
                      .: |
                        :host {
                          .....
                        } 

Now regarding your particular styles.
Decreasing margin-right is OK but I am not getting a reason for this code:

                          state-badge {
                            flex: 0 0 0px !important;
                            height: 35px;
                            line-height: 35px;
                          }

Regarding “dimmed” icon.
You cannot specify a “card_mod” for each secondary entity as you did:

The correct code is (examples for the main icon & secondary icon):

  - type: custom:multiple-entity-row
    entity: light.virtual_light_1
    card_mod:
      style:
        hui-generic-entity-row $ state-badge $: |
          ha-state-icon {
           filter: brightness(100%) !important;
          }
        hui-generic-entity-row .entities-row div.entity:nth-child(3) state-badge $: |
          ha-state-icon {
           filter: brightness(100%) !important;
          }
    entities:
      - entity: sun.sun
        icon: true
        name: false
      - entity: sun.sun
      - entity: light.virtual_light_1
        icon: true
        name: false
      - entity: sun.sun
    show_state: false

изображение

@Mariusthvdb

I have a little experience with the custom:button-card, cannot clarify.
But according to CSS (well, I am not a CSS expert too…) this construction is not about blinking or wiggling or rotating etc - it is about “apply the xxxxxxxxxxxxx transformation”:

animation: xxxxxxxxxxxxx 2s ease infinite;

and in your particular case it is NOTHING since you have not specified any transformation.


I think you better use a markdown if you need a tap_action.

@shade.pl

There are 2 issues here:

  1. How to animate some icon?
  2. Which animation should be used and when?

As for the 1st issue:
See the 1st post → link to a post in the bottom → consolidated post → find a post for multiple-entity-row → find a style “change a color for some icon”.
Then replace this code with a code for animation (see it in other topics for animation in the same consolidated post).

As for the 2nd issue - it is quit difficult since it is not clear what you want:

  1. Show the animation while the door is opening (or closing).
  2. Show the animation when the door is opened or closed.

yeah, I replaced it. with a button card though.

  - type: custom:button-card
    name: Set Switches
    template: button_default_title
    variables:
      path: home
    hold_action:
      action: navigate
      navigation_path: >
        [[[ return window.location.pathname.split('/')[2] == 'home'
            ? '/ui-data/summary_groups' : '/ui-overview/home'; ]]]

you cant see the difference :wink:

Great idea to have button templates for every case)))

this is it btw:

button_default_title:
  tap_action:
    action: none
  styles:
    card:
      - background-color: var(--background-color-off)
      - color: var(--text-color-off)
      - font-size: 24px
      - font-weight: 300
      - letter-spacing: 0px
#      - font-weight: bold
      - padding-left: 16px
      - padding-top: 8px
      - padding-bottom: 8px
    name:
      - justify-self: left
1 Like

I am using “yaml” mode for the main dashboards & “storage” mode for test dashboards.
I have this in configuration.yaml:

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

but also I see the card-mod line inside the “lovelace_resources” file (“.storage” folder) - have no idea how this line is added.
I remove this line via UI but some time after this line is added again - miracle…

would it be possible to card-mod the options in an auto-entities card?

        - type: custom:auto-entities
          card:
            type: map
            hours_to_show: 48
            dark_mode: true
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                }

where I’d like the dark_mode to be dependent on my dark themes. (note this is not the same as the modes: dark in themes, which simply make these themes respond to the mode the device is in.I dont use those modes, and like to be able to do something like this:

dark_mode: {{'true' if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
                          else 'false'}};

HACS adds it. It’s recommended to add it to configuration.yaml but if you use HACS it adds it to storage as well. Works fine except the annoying console error.
image

I think that HACS adds this line during the card-mod installation.
But if this line is removed then by me - not clear how it was restored.