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

[Milenco]

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.

[Mariusthvdb (Marius)]

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…

[sebbaT]

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

[Mariusthvdb (Marius)]

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

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

[Milenco]

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 }} '

[jazzyisj (Jason)]

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

Sidebar View - Sidebar On Left Option

The new sidebar is great, but I would love to have an option to have the narrow column on the left side of the view instead of the right. REALITY [Capture.PNG] WISHFUL THINKING [Capture2]

[dinan5]

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!

[ASNNetworks]

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:

Card-mod - Add css styles to any lovelace card

Styling badges: (summarized post) Tried to summarize everything that was discussed by Mariusthvdb and me starting from this post and below. Quick styling using “:host” for the following elements: name - displayed under the badge; state or icon - displayed inside the badge; label - displayed in the bottom part of the badge (used for displaying a unit for “sensor” , a state for “device_tracker”); background - color of the badge internal; circle - color of the border. Examples below are for: …

[dinan5]

I figured it out, thanks.

[John_P (John)]

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

[Ildar_Gabdullin]

@Milenco

@Milenco

I can’t seem to combine them.

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:

@Milenco

                    - entity: light.light_office_light_0
                      name: false
                      state_color: true
                      icon: mdi:lightbulb
                      toggle: true
                      card_mod:
                        style: |
                          ha-state-icon {
                            filter: none !important;
                          }

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

[Ildar_Gabdullin]

@Mariusthvdb

@Mariusthvdb

but blink is native? I never specify that and it always works…maybe only for Button.

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.

---

@Mariusthvdb

can we somehow add an action to it and navigate to another view?

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

[Ildar_Gabdullin]

@shade.pl

@shade.pl

Is it possible to animate window icon while open?

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.

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

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

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

[Ildar_Gabdullin]

@Mariusthvdb

I replaced it. with a button card though.

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

[Mariusthvdb (Marius)]

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

[Ildar_Gabdullin]

@DavidFW1960

I’m using UI mode for Lovelace. Maybe that’s why. It doesn’t hurt loading it via the resources and yaml. Just a console error for it.

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…

[Mariusthvdb (Marius)]

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'}};

[DavidFW1960 (David)]

@Ildar_Gabdullin

but also I see the card-mod line inside the “lovelace_resources” file (“.storage” folder) - have no idea how this line is added.

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.

[Ildar_Gabdullin]

@DavidFW1960

HACS adds it

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.