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

Removing internal borders & margins inside vertical-stack:

Default:

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

image

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

image

1 Like

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

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 :roll_eyes:, 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.

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

image

image

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).
1 Like

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:

image

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?

image

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

Check this.

Thanks for your fast answer :slight_smile:

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?

  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

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.

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
              }

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

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*** :laughing:) but it’s working.

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.

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

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

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

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

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

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.

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?

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.