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

And all this is less hack than

      type: divider
      style:
        margin-top: 50px
        background-color: transparent

(with or without margin for different/adjusted spaces)?

well, maybe not…

guess there are more ways to do the same. but, background: transparent, still has a background? with : none, there effectively is none.

anyways, thanks!

I used to use

icon: mdi:dummy

which worked.

Maybe they removed bank because it was redundant if any ‘dummy’ entry worked?

Could be, another person in the Community said he was using “mdi:null” all the time…

icon: ''

is shorterst

and even

icon: none

or icon: 1

works. only thing that doesnt work is an empty spot there. Seems anything works, as long as it is Not in material design icons library

btw, for the Glance card gap, this is a bit shorter:

          - entity: sun.sun
            card_mod:
              style: |
                state-badge {
                  display: none;
                }
                :host div {
                  display: none;
                }

not yet exactly sure why that would be, but since it takes less modding, I would presume it to be more efficient

I would love to hide the divider on this fold-entity-row however :wink:
seems not to be described in the main post yet, so maybe explore that a bit:

consider this:

type: entities
title: Air quality dashboard
card_mod:
  class: class-header-no-margin-no-color
  style: |
    .card-header {
      background: {% set aqi = states('sensor.u_s_air_quality_index')|int(0) %}
                        {% if aqi <= 50 %} seagreen
                        {% elif aqi <= 100 %} gold
                        {% elif aqi <= 150 %} orange
                        {% elif aqi <= 200 %} crimson
                        {% elif aqi <= 300 %} purple
                        {% else %} maroon
                        {% endif %};
      color: var(--text-color-off);
    }
entities:

  - type: custom:fold-entity-row
    head:
      type: section
      label: AirVisual
      card_mod: &label
        style: |
          .label {
            margin-left: 0px;
          }

    padding: 0
    entities:

which shows like

if you look closely, you’ll notice the divider peeking through the header color.

we did have a similar case before: 🔹 Card-mod - Add css styles to any lovelace card - #2725 by Ildar_Gabdullin however using that now does not hide the divider?

So, I’d love to set that to none, or at least transparent.

guess we should set the height to 0px?

  - type: custom:fold-entity-row
    card_mod:
      style:
        div#head hui-section-row $: |
          .divider {
              background-color: transparent;
            }

is not successful though.

or

      style:
        div#head hui-section-row $: |
          .divider {
              height: 0px !important;
            }

for that matter

Update and fix

duh… I thought it was as simple as:

  - type: custom:fold-entity-row
    head:
      type: section
      label: AirVisual
      card_mod: &label
        style: |
          .label {
            margin-left: 0px;
          }
          .divider {
            height: 0px;
          }

but now that makes the lable change position

so, in this case setting a transparent color is indeed better than not showing the element:

      card_mod:
        style: |
          .label {
            margin-left: 0px;
          }
          .divider {
            background-color: transparent;
          }

1 Like

Tap / Press animation without manual helper?

Is there a option to play a animation of a button, entity (Mushroom etc.) after press?

I often have a script as a tap action and want to show a short animation that I can see something happens but I have no status changed of the entity.

Regards, Steffen

Is it possible to remove the “duplicate border”?
Card code: link


Снимок экрана 2023-02-20 193308

Hi,
is it possible to change the text color of an input text field through a value that is sent from Node-RED via “color” (or similar)?

From node Red i get this code in Debug “{”_msgid":“3f5d80faeb358d57”,“payload”:1676912276174,“topic”:"",“payload_msg”:“Wert außerhalb des möglichen Bereichs”,“color”:“red”}"

In Home Assitant if tried this Code, but it dont work.

type: entity
entity: input_text.status_luften
card_mod:
style: |
.value {
font-size: 20px !important;
color: var(–card-mod-status-luften-color);
}
variables:
card-mod-status-luften-color: ‘{{ state_attr(’‘input_text.status_luften’’, ‘‘color’’) }}’

guys i’m stuck i have a light-popup card and i want to stack it horizontal-stack how to remove this black background and reduce its area?

image

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    card_mod:
      style:
        $: |
          .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
            border-radius: 50px;
            top: 500px;
          }
        .: |
          :host {
            --mdc-theme-surface: rgba(0,0,0,0);
            --secondary-background-color: rgba(0,0,0,0.5);
            --ha-card-background: rgba(0,0,0,0.5);
          }
          ha-dialog {
            --vertical-align-dialog: center !important;
          }
    content:
      type: horizontal-stack
      cards:
        - type: custom:light-popup-card
          card_mod:
            style: |
              ha-card {
                --ha-card-background: orange;
              }
          entity: light.sufit_salon
          displayType: slider
          hideIcon: false
          hideState: false
          sliderColoredByLight: false
          fullscreen: false
          borderRadius: 40px
          brightnessWidth: 50px
          brightnessHeight: 125px
          sliderColor: "#d1b056"
          sliderTrackColor: "#616261"
        - type: custom:light-popup-card
          entity: light.sufit_salon
          displayType: slider
          hideIcon: false
          hideState: false
          sliderColoredByLight: false
          fullscreen: false
          borderRadius: 40px
          brightnessWidth: 100px
          brightnessHeight: 250px
          sliderColor: "#d1b056"
          sliderTrackColor: "#616261"

if i place card one at a time, without stack everything is ok

image

hey Ildar, this is super nice.

can you help me out find the right path and margin settings for the aria-selected='true' tab, so we can do what we can in the main HA menubar:

      paper-tab[aria-selected=true] {
        background-color: rgba(var(--primary),0.3);
        --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
      }

especially concerned for the size, though background would also be a nicety

active icon size:

Scherm­afbeelding 2023-02-21 om 13.44.47

I did find this to work:

card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            min-width: 60px;
          }
          .mdc-tab--active {
            --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
          }

showing:

but as you can see, the icon drops…

btw, I am using max 5 icons, and experimented with your mod. Seems we dont need the padding mod? and there’s nt much difference in my config when using the various px settings:

        $: |
          .mdc-tab {
            min-width: 70px;
          }

alone works fine, and appears to be the max for 5 icons, but I can set it to any number below that too? does not make the icons go closer, like in your mod, even with the padding set to 0px. With or without !important. hmm.

background colors for the tabs:

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            min-width: 70px;
            background: var(--primary-color);
          }
          .mdc-tab--active {
             background: var(--text-color-off);
          }

or if you want them all:

     .: |
       :host {
         background: green;
       }

and now we see what the horizontal padding does:

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            min-width: 40px;
            background: var(--primary-color);
          }
    .: |

      tabbed-card {
        --mdc-tab-horizontal-padding: 0px;
      }
card:
  type: custom:tabbed-card
  attributes:
    minWidth: true
    isMinWidthIndicator: true
    isFadingIndicator: true

so there is still space between the tabs?

lastly:
how to get to the

        .mdc-tab-indicator .mdc-tab-indicator__content--underline {
          border-color: black;
        }

?

that would be:

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
           .mdc-tab-indicator__content--underline {
              border-color: black !important;
            }

but, how to combine that with:

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            min-width: 40px;
            background: var(--primary-color);
          }
          .mdc-tab--active {
             background: var(--text-color-off);
          }

is this the best way?

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
           .mdc-tab-indicator__content--underline {
              border-color: red !important;
            }

          .: |
            .mdc-tab {
              min-width: 40px;
              background: var(--primary-color);
            }
            .mdc-tab--active {
               background: var(--text-color-off);
            }

Probably, this happens due to “display: inline” property.
The element is not vertically aligned, it grows to “down” direction.

Does not work w/o !important, check this:

    card_mod:
      style:
        tabbed-card $:
          mwc-tab:
            $:
              mwc-tab-indicator $: |
                .mdc-tab-indicator__content--underline {
                  border-color: red !important;
                }
              .: |
                .mdc-tab {
                  min-width: 40px !important;
                  background: yellow !important;
                }
                .mdc-tab--active {
                  background: lightgreen !important;
                }

image

hmm, how strange, in my desktop browser (Safari Mac) and the iOS App, !important is only required on the tab-indicator border color.

because of your remark, I just checked Firefox and Chrome, and indeed, those browsers need the !important on the other settings too…

remarkable.

the order and hierarchy was right though, and that was my main point for asking.
thanks for confirming

I see, but, not really.

I tried to use:

            .mdc-tab--active {
              --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
              display: flex !important;
              justify-content: center !important;
              align-items:  center !important;
            }

but nothing happens.
yet, if I check higher in the inspector most of the properties are centered already?

Scherm­afbeelding 2023-02-22 om 08.49.52

though the padding is not.

the only way I can move the icon is changing the padding, but I cant make it move upwards:

              padding-bottom: 24px !important;

and setting

              padding: 0px !important;

moves it almost out of sight downwards…

also tested these options: How to Center An Image Horizontally and Vertically in CSS

suppose it can be done, do we need another element, maybe the icon itself, and not the tab?

amazingly enough, the

            .mdc-tab--active {
              --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
            }

does Not require !important in Chrome or Firefox…

Update

think I found the correct property:

display: contents

positions the icon properly:

now how to get there…

seems like this :wink:

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
           .mdc-tab-indicator__content--underline {
              border-color: var(--text-color-off) !important;
            }

          .: |
            .mdc-tab {
              min-width: 40px !important;;
              background: var(--primary-color) !important;
            }
            .material-icons {
              display: contents !important;
            }
            .mdc-tab--active {
              --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
              /*background: var(--text-color-off) !important;*/
            }

    .: |

      tabbed-card {
        --mdc-tab-horizontal-padding: 0px;
      }

it’s starting to be a huge mod, but it works really well.

NB:
documentation mentions --mdc-theme-secondary: for the indicator icon (when set) so I gave

    --mdc-theme-secondary: var(--text-color-off)

a try. This however seems to be not useful, and further inspection shows the indicator icon = ‘’…

setting that attribute on either the main config or a tab, does not do anything either. no indicator icon at all. So I probably am missing the point here, or we have a bug

we houd however be able to set:

  styles:
    --mdc-tab-horizontal-padding: 0px;

and not have to card_mod that with:

     .: |
       tabbed-card {
         --mdc-tab-horizontal-padding: 0px;
       }

I want to remove three icons from the “thermostat” card.
triple dots
heat/cool
cool

Screenshot 2023-02-22 at 09.12.11

Starting with dots in the corner, I have the following:

type: thermostat
entity: climate.radiator_01_thermostat
name: ' '
card_mod:
  style: |
    ha-icon-button$: |
      mwc-icon-button {
        display: none;
      }

Could someone please give me some pointers on how to proceed?

Thank you

            card_mod:
              style: 
                ha-icon-button$: |
                  mwc-icon-button {
                    display: none;
                  }            
                .: |
                  div#modes ha-icon-button:nth-child(1) {
                    display: none;

So for the first there was a wrong | and for the rest see the example and count the item to hide.

How to put mdi:icon to state-badge? I read above post but this not work for me.

          - type: conditional
            conditions:
              - entity: input_boolean.menu_parter
                state: "off"
                card_mod:
                  style: |
                    :host {
                      --card-mod-icon: mdi:bed;
                    }
            elements:
              - entity: light.sufit_salon
                style:
                  top: 65%
                  left: 52%
                  color: transparent
                  transform: scale(0.7,0.7)
                tap_action: !include FloorPlan3D/popup/swiatlo_salon405.yaml
                type: state-badge

or

          - type: conditional
            conditions:
              - entity: input_boolean.menu_parter
                state: "off"
            elements:
              - entity: light.sufit_salon
                style:
                  top: 65%
                  left: 52%
                  color: transparent
                  transform: scale(0.7,0.7)
                card_mod:
                  style: |
                    :host {
                      --card-mod-icon: mdi:bed;
                    }
                tap_action: !include FloorPlan3D/popup/swiatlo_salon405.yaml
                type: state-badge

where to put:

                card_mod:
                  style: |
                    :host {
                      --card-mod-icon: mdi:bed;
                    }