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

[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.

[Ildar_Gabdullin]

@Mariusthvdb

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

Example for Entities card:

type: custom:auto-entities
card:
  type: entities
  title: device_trackers
show_empty: false
filter:
  include:
    - entity_id: device_tracker.*
      options:
        card_mod:
          style: |
            :host {
              {% if is_state(config.entity,'home') %}
              color: green;
              {% else %}
              color: red;
              {% endif %}
            }
sort:
  count: 5

@Mariusthvdb

where I’d like the dark_mode to be dependent on my dark themes.

I do not understand how dark_mode & card_mod are related.
The templated dark_mode cannot be added neither by “jinjia in card_mod” nor by “jinjia in auto-entities::template” - both variants work for each “entities” element and “dark_mode” is a card-wide option.

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

I do not understand how dark_mode & card_mod are related.

they aren’t probably, its a card config option… its a feature I would embrace to be more configurable: allow dark_mode for (all) maps to be set in theme · home-assistant/frontend · Discussion #11084 · GitHub

would GitHub - gadgetchnnel/lovelace-card-templater: Custom Lovelace card which allows Jinja2 templates to be applied to other cards be an option maybe?

Any option in the original card which takes a string value can be templated by changing the option name to be option_name_template .

  - type: custom:card-templater
    card:
      type: map
      hours_to_show: 48
      dark_mode_template: >
         {{states('input_select.theme')|regex_search('(ight|Dark|Matrix)')}}
      entities:
        - person.me

doesnt work either… all showing dark maps ;-(

but hey there’s always state-switch:

  - type: custom:state-switch
    entity: template
    template: >
      {{states('input_select.theme')|regex_search('(ight|Dark|Matrix)')}}
    states:
      true:
        <<: &map
          type: map
          hours_to_show: 48
          entities:
            - person.me
        dark_mode: true
      false:
        <<: *map
        dark_mode: false

do note the documentation on the template in Thomas’s repo is incorrect and it should be like above. See: State switch not working template · Issue #65 · thomasloven/lovelace-state-switch · GitHub

[Mewoner]

I am facing this exact same challenge while trying to add margin to all cards on my dashboard.
Mod-card with margin works on vertical-stacks, but only on the sides of each card.
It also adds margin above the top card and below the bottom card, but not between the cards.
See my screenshot below for clarity.

Did you ever find a solution for this using card-mod? I will try the gap-card from layout-card next, but I would prefer to do it with just card-mod, without having to change each individual card.

[Ildar_Gabdullin]

you may use config-template-card as well

[Mariusthvdb (Marius)]

maybe off topic here, but given the fact my template outputs false/true, I wonder why the given config doesnt work…