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

[Ildar_Gabdullin]

Compare these cards:

type: vertical-stack
cards:
  - type: picture-glance
    image: /local/images/test/blue.jpg
    title: +
    entities: &ref_entities
      - entity: sensor.processor_use
        show_state: true
      - entity: sensor.processor_use
        show_state: true
      - entity: sensor.processor_use
    card_mod:
      style:
        .box div:nth-child(2):
          div:nth-child(1):
            ha-icon-button ha-state-icon:
              $: |
                ha-icon {
                  color: red;
                }
          div:nth-child(2):
            ha-icon-button ha-state-icon:
              $: |
                ha-icon {
                  color: orange;
                }
          div:nth-child(3):
            ha-icon-button ha-state-icon:
              $: |
                ha-icon {
                  color: yellow;
                }

  - type: picture-glance
    image: /local/images/test/blue.jpg
    entities: *ref_entities
    card_mod:
      style:
        .box div:nth-child(1):
          div:nth-child(1):
            ha-icon-button ha-state-icon:
              $: |
                ha-icon {
                  color: red;
                }
          div:nth-child(2):
            ha-icon-button ha-state-icon:
              $: |
                ha-icon {
                  color: orange;
                }
          div:nth-child(3):
            ha-icon-button ha-state-icon:
              $: |
                ha-icon {
                  color: yellow;
                }

As I said here - indexing should be corrected when a title is added/removed.

[tknice]

I get it now, changed the .box div:nth-child(2) to a (1). thanks.

[stepsolar]

How could I insert an svg file with the possibility of being able to modify its CSS?

[arganto]

@daphatty

Does anyone know whether card_mod can colorize an icon using a Kelvin value?

Why not? Search for a kind of mapping table or mapping formular from kelvin to rgb (look-a-like) and then set it accordingly with a fitting template.

[Ildar_Gabdullin]

Btw, using an HSL format for a color I consider as the best choice for a temperature - if talking about kettles, boilers etc - i.e. related to heating.

[team-tech-works-uk]

Alternative DROP-DOWN MENU styling

Having got used to node-red, which has a variety of drop-down ‘styles’ I was flumaxed that HA seems to have only one, with little scope for adapting it. It works OK where you have loads of horizontal space, but is awfully limited otherwise, e.g. use in a horizontal-stack (see pics). [standard view when used in entities-card] I’m TRULY hoping i’ve missed something and look-forward to a more-experienced HA practitioner putting me right. But please, if you think there’s a simpler way, try yours…

[eastern_blok (David)]

Could somebody help me. I want in a vertical-stack card disappear this area between the two stacks:

How I do that?

[Abeksis]

Allow help please?

I want this caption including the subconscious to right (RTL). I would love for help please

I tried to add this code:

    card_mod:
      style: |
        ha-card {
          direction: rtl;
        }

But everything goes right - and there is no profit between the icon and the text

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: sensor.dishwasher_cost_curr_month
    primary: מדיח כלים - תשלום חודשי
    secondary: |
      {{ states('sensor.dishwasher_cost_curr_month') }} ₪
    icon: mdi:dishwasher
    icon_color: orange
    tap_action:
      action: more-info 

[Ildar_Gabdullin]

Removing internal borders & margins inside vertical-stack:

Default:

type: vertical-stack
cards:
  - type: entities
    entities:
      - sun.sun
  - type: entities
    entities:
      - sun.sun

Styled:

type: custom:mod-card
card_mod:
  style:
    hui-vertical-stack-card $: |
      div#root hui-card > * {
        --ha-card-border-width: 0px;
      }
    .: |
      hui-vertical-stack-card {
        --vertical-stack-card-gap: 0px;
      }
      ha-card {
        box-shadow: var(--ha-card-box-shadow);
        border: var(--ha-card-border-color,var(--divider-color,#e0e0e0)) solid var(--ha-card-border-width,1px);
        background: var(--ha-card-background,var(--card-background-color,#fff));
      }
card:
  type: vertical-stack
  cards:
    - type: entities
      entities:
        - sun.sun
    - type: entities
      entities:
        - sun.sun

[ido_1]

Hi, can anyone help me with this:

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    card-mod:
      style: ''
    cards:
      - type: button
        hold_action:
          action: none
        icon: mdi:volume-plus
        show_icon: true
        show_name: false
        tap_action:
          action: call-service
          service: webostv.button
          service_data:
            button: VOLUMEUP
            entity_id: media_player.tv
      - type: button
        hold_action:
          action: none
        icon: mdi:volume-minus
        show_icon: true
        show_name: false
        tap_action:
          action: call-service
          service: webostv.button
          service_data:
            button: VOLUMEDOWN
            entity_id: media_player.tv
  - type: custom:vertical-stack-in-card
    style: |
      ha-card {
        aspect-ratio: 1/1;
        border-radius: 50%;
        }
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            color_type: blank-card
          - type: button
            hold_action:
              action: none
            icon: mdi:menu-up-outline
            show_icon: true
            show_name: false
            tap_action:
              action: call-service
              service: webostv.button
              service_data:
                button: UP
                entity_id: media_player.tv
          - type: custom:button-card
            color_type: blank-card
      - type: horizontal-stack
        cards:
          - type: button
            hold_action:
              action: none
            icon: mdi:menu-left-outline
            show_icon: true
            show_name: false
            tap_action:
              action: call-service
              service: webostv.button
              service_data:
                button: LEFT
                entity_id: media_player.tv
          - type: button
            hold_action:
              action: none
            icon: mdi:circle-outline
            show_icon: true
            show_name: false
            tap_action:
              action: call-service
              service: webostv.button
              service_data:
                button: ENTER
                entity_id: media_player.tv
          - type: button
            hold_action:
              action: none
            icon: mdi:menu-right-outline
            show_icon: true
            show_name: false
            tap_action:
              action: call-service
              service: webostv.button
              service_data:
                button: RIGHT
                entity_id: media_player.tv
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            color_type: blank-card
          - type: button
            hold_action:
              action: none
            icon: mdi:menu-down-outline
            show_icon: true
            show_name: false
            tap_action:
              action: call-service
              service: webostv.button
              service_data:
                button: BOTTOM
                entity_id: media_player.tv
          - type: custom:button-card
            color_type: blank-card
  - type: custom:vertical-stack-in-card
    style: ''
    cards:
      - type: button
        hold_action:
          action: none
        icon: mdi:arrow-up-circle-outline
        show_icon: true
        show_name: false
        tap_action:
          action: call-service
          service: webostv.button
          service_data:
            button: CHANNELUP
            entity_id: media_player.tv
      - type: button
        hold_action:
          action: none
        icon: mdi:arrow-down-circle-outline
        show_icon: true
        show_name: false
        tap_action:
          action: call-service
          service: webostv.button
          service_data:
            button: CHANNELDOWN
            entity_id: media_player.tv                                  

I’ve tried all sort of css codes to make the cards 20% 60% 20% centered both horizontally and vertically and make the icons in the middle a bit bigger but couldn’t manage to fix it

[WoJWoJ]

As kindly suggested by @Ildar_Gabdullin I am reposting my question in this thread

I am trying to use mod-card in order to style a button-card (this is an example, there are other cards as well)

This is the element I want to style (the text “date here”):

Its position in the DOM is

My understanding is that I have, starting from <button-card>, the following structure:

• (it does not matter until <ha-card>)
• <ha-card> with a shadow-root, so I need to address it as ha-card$
• a <div>
• another nested <div> that contains the text I want to style

The code I imagined would work:

          - type: custom:button-card
            name: >
              [[[
                return "date here"
              ]]]
            view_layout:
              grid-area: date
            card_mod:
              style:
                ha-card$:
                  div: |
                    div {
                      font-size: 100px;
                      color: red;
                    }

Well, it does not , the style is not applied. Is this how I am expected to code nested elements?

---

Note: a basic

card_mod:
  style: |
    ha-card {
      color: red;
    }

works fine, so mod-card is correctly installed.

[Ildar_Gabdullin]

@WoJWoJ

My understanding is that I have, starting from <button-card>, the following structure:

No, starting from an upper level.
Check this:

type: custom:mod-card
card:
  type: custom:button-card
  entity: sun.sun
card_mod:
  style:
    button-card $: |
      div#container div#name {
        color: red;
      }

This is a common way, but:

1. No need to use the “mod-card” for the “button-card” since the “button-card” already has a “ha-card” element.
2. The “button-card” has it’s own possibilities to style elements (could be enough in some cases).

[u20p17 (Franz)]

Hi all,
I am working on a picture-element card in HA where the whole heating system of the house should be displayed. I finished with this on my laptop and everything looks good in full screen. Here an example:

Nevertheless, if I rescale the window size, the size of the state-badge stay the same → they become to big… How can I archive it that they also get defined their sizes in % of the window size?

I believe that this should be possible with card-mod, am I right?

My config up to now looks the following:

type: picture-elements
elements:
  - type: state-badge
    entity: sensor.node_1_input_1
    style:
      top: 15%
      left: 11%
      transform: translate(-50%,-50%) scale(0.7,0.7)
  - type: state-icon
    entity: binary_sensor.pumpe_solar_state
    style:
      top: 39.5%
      left: 26.5%
      transform: translate(-50%,-50%) scale(0.7,0.7)
image: /local/pictures/Heizungsüberblick.jpg

[Ildar_Gabdullin]

Check this.

[u20p17 (Franz)]

Thanks for your fast answer

Note that on a smaller viewport elements become BIGGER (respectively to the main image).
This may be solved by scaling elements differently on different viewports ("transform: translate(-50%,-50%) scale(diff_scale_value,diff_scale_value)").
Two ways may be used:
– the whole floorplan card is a decluttering-card - pass a scale value as a variable;
– use card-mod to set scales conditionally dependingly on a current viewport (use “mediaquery”).

I already saw this but I couldn’t figure out what I have to do in order to solve my problem… How can I read out the window width and height in order to change the diff_scale_value accordingly?

[Ildar_Gabdullin]

@u20p17

How can I read out the window width and height

1. In my setup I gave up attempting to adjust scales dynamically and ended up with fixed scales for 3 resolutions (desktop, phone, tablet) - these scales are passed as variables into a decluttering template.

2. To define scales dynamically - you may try using smth like (untested):
   Coeff = 100vh / 1920px - gives a ratio which is “1.0” for a desktop, and is different for other clients;
   scale = some_default_scale * Coeff

[e-raser]

How can I combine this (styling the entity icon)

        style:
          hui-generic-entity-row:
            $: |
              state-badge {
                {% if states('sensor.watchman_missing_entities') | int(0) > 0 %}
                  color: orange;
                {% endif %}
              }

with this (styling the entity value):

        style: |
          .state.entity {
            {% if states('sensor.watchman_missing_entities') | int(0) > 0 %}
              color: cyan;
            {% endif %}
          }

for one custom:multiple-entity-row type?
I don’t know how to syntactically mix both so one style: definition applies them all.

[e-raser]

How to set the margin-top and margin-bottom for a custom:fold-entity-row?

It uses too much space, example:

This is not working unfortunately:

      - type: custom:fold-entity-row
        head:
          type: section
          label: Watchman Report
          style: |
            .divider {
              background-color: transparent !important;
              #margin-top: -15px !important;
            }
        padding: 0
        open: false
        entities:
          - ...
        card_mod:
          style:
            .: |
              ha-card {
                margin-top: -15px; # <-- not working
                margin-bottom: -15px; # <-- not working
              }

[arganto]

@e-raser

How can I combine this (styling the entity icon)

Always think first, that most probably a lot of users such questions before and go through some example from Ildar or in this thread. And you will directly see the answers.

e.g. above here

[e-raser]

Unfortunately it’s not that easy. I tried all possible combinations. The referenced example unfortunately is not helpful in this context.

hui-generic-entity-row: must not have a pipe (|) in the style: | line before, while .state.entity { does. So how do you combine those.

---

Update:
found the solution.

        style:
          .: |
            .state.entity {
              {% if states('sensor.watchman_missing_entities') | int(0) > 0 %}
                color: cyan;
              {% endif %}
            }
          hui-generic-entity-row:
            $: |
              state-badge {
                {% if states('sensor.watchman_missing_entities') | int(0) > 0 %}
                  color: orange;
                {% endif %}
              }

Don’t understand it (cause this DOM navigation stuff is just complicated as f*** ) but it’s working.