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

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

[arganto]

It is helpful, because it is the same. Instead of pipe use.: pipe for the pipe one. So you have to and can combine as in this given example.

[e-raser]

I found this out on the 2nd reading too (updated my last post), thx

Now I’m only looking for a second probably “no-brainer”

Card-mod - Add css styles to any lovelace card

How to set the margin-top and margin-bottom for a custom:fold-entity-row? It uses too much space, example: [grafik] 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: - ... …

[phairplay]

Hi guys,
I’ve just updated to the latest version and now my padding on my cards no longer work.

type: horizontal-stack
title: Sensor Switch
cards:
  - type: custom:mushroom-entity-card
    entity: switch.kitchen_sensor
    layout: vertical
    name: Kitchen
  - type: custom:mushroom-entity-card
    entity: switch.livingroom_sensor
    layout: vertical
    name: Living
    fill_container: false
  - type: custom:mushroom-entity-card
    entity: switch.hall_sensor
    layout: vertical
    name: Hall
  - type: custom:mushroom-entity-card
    entity: switch.landing_sensor
    layout: vertical
    name: Landing
  - type: custom:mushroom-entity-card
    entity: switch.utility_sensor
    layout: vertical
    name: Utility
style: |
  h1.card-header {
     padding-top: 11px;
     padding-bottom: 8px;
     line-height: 12px;
   }

could someone please tell me what I’m missing?

I would really appericate the help

[Richi (Stefan Richter)]

Hello!
I tried many hours to make the header (Neue Filme) in height smaller, but it isn‘t working! Can someone please give me a tip?!
Here is the code! Thanks a lot!

type: vertical-stack
cards:
  - type: custom:mini-media-player
    entity: media_player.spotify_stefan
    volume_stateless: false
    toggle_power: false
    group: false
    info: scroll
    name: Stefan, Michi & Elina
    source: full
    power_state: true
    background: '"/local/spotify4.jpg"'
    artwork: full-cover
    hide: null
    power: true
  - type: custom:upcoming-media-card
    title: Neueste Filme
    entity: sensor.emby_latest_movies
    image_style: fanart
    title_size: small
    line1_size: small
    line2_size: small
    line3_size: small
    line4_size: small
    flag: false
    card_mod:
      style: |
        ha-card.type-custom-upcoming-media-         card {    
          line-height: 2px;     
          background-size: 100%;    
        }

[e-raser]

Is it possible to show

• secondary_info: brightness when entity state is ON and
• secondary_info: last-changed when entity state is OFF

for a custom:slider-entity-row?

(see Allow secondary_info with custom attribute when state is off · Issue #240 · thomasloven/lovelace-slider-entity-row · GitHub for an unsuccesful feature request - last bet really is on card-mod…)