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

[dimitri.landerloos]

This should work.

it replaces the value with the direct output of the state using the pseudo element ::before

        card_mod:
          style:
            mushroom-state-info$: |
              .secondary {
                color: transparent !important;
              }
              .secondary::before {
                content: '{{states(config.entity)}}';
                color: var(--secondary-text-color) !important;
              }
            .: |
              ha-card {
                /* Set padding of card */
                margin-left: -15px;
                /* Move card up to match header card */
                margin-top: -35px !important;
                padding: -35px;
                background: none;
              }

[stevo92 (steve)]

Perfect, thanks

[Siroguh (Hugo)]

Hi, any idea why styles are so unstable? I’m using card-mod currently like this in a theme.

  card-mod-theme: main_dark

  card-mod-view-yaml: |
    .: |
      #view, hui-view {
        background: none !important;
      }
    vertical-layout $: |
      #columns{
        margin: 0 !important;
      }
    vertical-layout$layout-card:
      $:
        .: |
          grid-layout{
            display: block !important;
          }
        grid-layout $: |
          #root{
            margin: 0 !important;
          }
        grid-layout $ button-card:
          $: |
            ha-card{
              padding: 0 !important;
            }
        grid-layout $ hui-markdown-card:
          $:
            .: |
              ha-markdown{
                height: 100% !important;
                padding: 0 !important;
              }
            ha-markdown $: |
              ha-markdown-element{
                height: 100% !important;
                font-family: 'Young Serif', serif !important;
                font-size: 35px !important;
              }

Video showing the error:

Video explanation: Styles load only when i tilt the screen or update it somehow. Reloading doesn’t work.
It’s also not cache related apparently, so pressing f5 doesn’t solve anything.

Card-mod resource is imported through HACS and yaml as recommended. Lovelace is in storage mode.

[AleXSR700 (Alex)]

Hi everyone
I am trying to create an animated border and am succeeding in codepen (https://codepen.io/AleXSR700/pen/PoXroNK) but failing in HA.

In the editor preview I can see the hover effect, so it is not all broken. I am thinking that the problem might be that the effect is outside the visible area of the editor and/or card.

Test 1 (only hover working)

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: sun.sun
card_mod:
  style: |
    ha-card::before,
    ha-card::after,
    ha-card {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    ha-card {
      width: 200px;
      height: 200px;
      margin: auto;
      background: no-repeat 50%/70% rgba(0, 0, 0, 0.1);
      color: #69ca62;
      box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
    }
    ha-card::before,
    ha-card::after {
      content: "";
      z-index: -1;
      margin: -5%;
      box-shadow: inset 0 0 0 2px;
      animation: clipMe 8s linear infinite;
    }
    ha-card::before {
      animation-delay: -4s;
    }

    @keyframes clipMe {
      0%,
      100% {
        clip: rect(0px, 220px, 2px, 0px);
      }
      25% {
        clip: rect(0px, 2px, 220px, 0px);
      }
      50% {
        clip: rect(218px, 220px, 220px, 0px);
      }
      75% {
        clip: rect(0px, 220px, 220px, 218px);
      }
    }
    ha-card:hover::after, .ha-card:hover::before {
      background-color: rgba(255, 0, 0, 0.3);
    }

Test 2 where I tried to use relative positioning (only hover working)

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: sun.sun
card_mod:
  style: |
    ha-card {
      position: relative;
      width: 200px;
      height: 200px;
      margin: auto;
      background: no-repeat 50%/70% rgba(0, 0, 0, 0.1);
      color: #69ca62;
      box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
    }
    ha-card::before,
    ha-card::after {
      content: "";
      position: absolute;
      z-index: -1;
      top: -5%;
      bottom: -5%;
      left: -5%;
      right: -5%;
      box-shadow: inset 0 0 0 2px;
      animation: clipMe 8s linear infinite;
    }
    ha-card::before {
      animation-delay: -4s;
    }

    @keyframes clipMe {
      0%,
      100% {
        clip-path: polygon(0% 0%,100% 0%,100% 2%,0% 2%);
      }
      25% {
        clip-path: polygon(0% 0%,2% 0%,2% 100%,0% 100%);
      }
      50% {
        clip-path: polygon(98% 100%,100% 100%,100% 2%,98% 2%);
      }
      75% {
        clip-path: polygon(0% 100%,100% 100%,100% 98%,0% 98%);
      }
    }
    ha-card:hover::after, .ha-card:hover::before {
      background-color: rgba(255, 0, 0, 0.3);
    }

Test 3 (there is actually an animation inside the card

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: sun.sun
card_mod:
  style: |
    ha-card::before,
    ha-card::after,
    ha-card {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    ha-card {
      width: 200px;
      height: 200px;
      margin: auto;
      background: no-repeat 50%/70% rgba(0, 0, 0, 0.1);
      color: #69ca62;
      box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
    }
    ha-card::before,
    ha-card::after {
      content: "";
      z-index: -1;
      margin: -5%;
      box-shadow: inset 0 0 0 2px;
      animation: clipMe 8s linear infinite;
    }
    ha-card::before {
      animation-delay: -4s;
    }

    @keyframes clipMe {
      from {
        clip-path: polygon(0% 100%,100% 100%,100% 100%,100% 100%);
        transform-origin: bottom left;
        transform: rotate(0deg);
      }
      to {
        clip-path:polygon(0% 100%,100% 100%,100% calc(100% - 2px),0 calc(100% -2px));
        transform-origin: bottom left;
        transform: rotate(360deg);
      }
    }
    ha-card:hover::after, .ha-card:hover::before {
      background-color: rgba(255, 0, 0, 0.3);
    }

Test 3 animation:

[David_Nagy]

Hi @Mariusthvdb

I have encountered, the similar error as you mentioned.

card-mod.js:561 Uncaught (in promise) TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at CardMod._connect (card-mod.js:561:28)
_connect	@	card-mod.js:561
await in _connect (async)		
(anonymous)	@	card-mod.js:484
await in (anonymous) (async)		
set styles	@	card-mod.js:485
closeDialog	@	browser_mod.js:66
handleEvent	@	browser_mod.js:1
emitNotification	@	mwc-dialog-base.ts:134
notifyClosed	@	mwc-dialog-base.ts:223
(anonymous)	@	foundation.ts:200
setTimeout (async)		
e.close	@	foundation.ts:197
e.handleClick	@	foundation.ts:281

I tried with the modification you suggested in the post, but I did not clear the error.

Maybe you have some suggestions?

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: Security
    timeout: 300000
    style: |
      --popup-max-width: calc(385px + 495px);
      --primary-color: transparent; /* hide timeout progress */
    card_mod:
      style:
        # card divider border
        layout-card$grid-layout$: |
          #root {
            margin: 0 0 !important;
          }
          hui-vertical-stack-card {
            border-right: 1.5px solid rgba(0, 0, 0, 0.2);
            border-radius: 0;
            transition: none;
          }
          /* phone */
          @media screen and (max-width: 800px) {
            hui-vertical-stack-card {
              border-right: none;
              border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
            }
          }
    content:
      type: custom:layout-card
      layout_type: custom:grid-layout
      layout:
        margin: 0
        grid-template-columns: 385px 495px
        grid-template-rows: 1fr
        grid-template-areas: |
          "camera info"
        mediaquery:
          #phone
          "(max-width: 800px)":
            grid-template-columns: 1fr
            grid-template-rows: repeat(2, 1fr)
            grid-template-areas: |
              "camera"
              "info"
      cards:
        - type: vertical-stack
          view_layout:
            grid-area: camera
          cards:
            - type: custom:alarmo-card
              entity: alarm_control_panel.home_security

Thanks

David

[Ildar_Gabdullin]

Some (useless?) styles for history-graph - Styling a tooltip

code

  - type: history-graph
    entities:
      - entity: sun.sun
    card_mod:
      style:
        state-history-charts $:
          div :first-child $:
            ha-chart-base $: |
              .chartTooltip {
                background: lightgreen !important;
              }
              .chartTooltip .title {
                color: red;
              }
              .chartTooltip .beforeBody {
                color: magenta;
              }
              .chartTooltip li {
                color: yellow;
              }

code

  - type: history-graph
    entities:
      - entity: person.ildar
    card_mod:
      style:
        state-history-charts $:
          div :first-child $:
            ha-chart-base $: |
              .chartTooltip .beforeBody:after {
                content: "";
                background-image: url("/local/images/persons/ildar.png");
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                height: 100px;
                display: block;
              }

Note that you may place a more useful picture instead of my photo here - like a generated route “from A to B”, or a position of a person on a map ! (update: no, it is not great to show the LATEST state instead of a state for a particular time… So, we may show only same image for all time points… )

[Ildar_Gabdullin]

Restoring the old logo:

Here

---

Another method to show a legacy HA logo is here.

[stleusc]

I have a very simple problem.
I am using a grid card as my outermost card and use it as Panel (1 card).
Visually the grid card has no padding and has its own border.

I’d like to remove that.

I can simply do that by ‘wrapping’ my content in

type: custom:mod-card
style: |
  ha-card {
    padding: 8px;
    border: 0px;
  }
card:
...

But this effectively disables the visual editor saying:
“No visual editor available for type ‘custom:mod-card’.”

How can I remove the border/add padding WITHOUT custom:mod-card?
Not that I care about not using it, I just want to keep the visual editor.

Or would it be hard to support a visual editor for custom:mod-card? Does not seem to have much functionality…

[Ildar_Gabdullin]

@stleusc

But this effectively disables the visual editor saying:
“No visual editor available for type ‘custom:mod-card’.”

End of days.
You need to choose if you need visual editor or a functional UI.

[Ricks88]

Is it possible to use Card mod style inside “more-info-card”?
I am trying to remove the title/head but i can not get it done in the style:

tried :host to

[arganto]

You should address it via element and not try to address it via a class, where there is no class. In short remove the dot and try again.

Same error in ha-card.

[andyblac (Andy Blackburn)]

try:

style: |
  state-card-content { display: none }

it’s a shame that the more-info-card does not resize with other cards

[Ricks88]

How did you got a slider on 2 sides with different colors?
I also was trying to shrink the size of the thermostat, but no succes yet.

[Ricks88]

Do you have a custom thermostat card? i only get this one when using the default card:

[andyblac (Andy Blackburn)]

the ones on the left are “Better Thermostat UI” just search for it in HACS.

[Ricks88]

thanks, will find it
I found the line to resize the circle, it’s in the svg, but again, no idea how to place it as css.

[andyblac (Andy Blackburn)]

yeah, I’m hoping they update the thermostat card to this new layout.

[hiddevanbrussel]

Question i want to set opacity to the mushroom chip card. If the person has the state not_home or unknow i want to set the opacity to 0.1. This is what i have. But it doesnt work.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.xxxx
    content_info: none
    use_entity_picture: true
  - type: entity
    entity: person.xxxxx
    content_info: none
    use_entity_picture: true
card_mod:
  style:
    opacity: |
      [[[
        if (state === 'not_home' || state === 'unknown') return 0.1;
        else return 1;
      ]]]

[maverik80]

hi guys, I have a problem with this button card, I would like if a state is different from zero (so every time it changes and is different from zero) the state flashes for a time set by me. can anyone help me? I really don’t know where I’m going wrong

this is the code:

      type: custom:button-card
      entity: sensor.bilancia_xiaomi_vins
      show_units: false
      show_state: true
      show_icon: false
      show_name: false
      state:
        - value: '0'
          operator: '>'
          styles:
            card:
              - animation: blink 2.5s ease
      extra_styles: |
        @keyframes lamp {
          0% {
            opacity: 0;
          }
          50% {
            opacity: .5;
          }
          100% {
            opacity: 1;
          }
        }
      styles:
        card:
          - border-width: 0px
          - font-size: 35px
      card_mod:
        style: |
          ha-card {
            color: white;
            text-align: center;
            font-family: digital;
            text-shadow: 1px 1px 0px white,  0 0 0.2em white;
          }

I tried this too but it doesn’t work for me…

      type: custom:button-card
      entity: sensor.bilancia_xiaomi_vins
      show_units: false
      show_state: true
      show_icon: false
      show_name: false
      styles:
        card:
          - border-width: 0px
          - font-size: 35px
        state:
          - animation: |
                [[[
                  if (states['sensor.bilancia_xiaomi_vins'].state !== 0)
                    return 'blink 5s';
                ]]]
      card_mod:
        style: |
          ha-card {
            color: white;
            text-align: center;
            font-family: digital;
            text-shadow: 1px 1px 0px white,  0 0 0.2em white;
          }

[arganto]

Did you find only one example here in this thread where a button-card-JS worked in card-mod instead of jinja2?