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

Ildar_Gabdullin · December 24, 2022, 8:34am

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 > * {
        --ha-card-border-width: 0px;
      }
    .: |
      hui-vertical-stack-card {
        --vertical-stack-card-margin: 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);
      }
card:
  type: vertical-stack
  cards:
    - type: entities
      entities:
        - sun.sun
    - type: entities
      entities:
        - sun.sun

ido_1 · December 24, 2022, 6:26pm

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 · December 25, 2022, 9:02pm

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 · December 25, 2022, 9:16pm

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:

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

u20p17 · December 26, 2022, 11:06am

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 · December 26, 2022, 11:09am

Check this.

u20p17 · December 26, 2022, 12:00pm

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 · December 26, 2022, 12:29pm

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.
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 · December 26, 2022, 5:19pm

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 · December 26, 2022, 5:49pm

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:
          - ...
        card_mod:
          style:
            .: |
              ha-card {
                margin-top: -15px; # <-- not working
                margin-bottom: -15px; # <-- not working
              }

arganto · December 26, 2022, 6:13pm

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 · December 26, 2022, 6:40pm

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 · December 26, 2022, 6:46pm

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 · December 26, 2022, 7:40pm

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”

phairplay · December 28, 2022, 4:50pm

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 · December 28, 2022, 9:17pm

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 · December 29, 2022, 12:09am

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…)

Ildar_Gabdullin · December 29, 2022, 12:19pm

Have you considered an alternative variant:

place a conventional input_number slider into a custom:secondaryinfo-entity-row;
specify a different secondary_info for different cases.

jralph23 · December 30, 2022, 4:06am

I’ve scoured every corner of this thread (and others) and cannot find anything. Can someone help me with this? I’m trying to change the colour of the background behind the title and cards of the Horizontal Stack. I’ve attached my attempt which does not work. I’ve also tried “background” in place of color, with no success.
Any ideas?

jralph23 · December 30, 2022, 4:22am

Another issue that I can’t seem to find a solution for. I would like to increase the size of the fonts for the Weather Forecast lovelace card. Managed to increase the day line and the low temp forecast line, but can’t seem to figure out how to increase the high temp line.
Please help… ?
Screenshot attached.
Thanks again.