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

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

Perfect, thanks :pray:

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.

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:
Animation

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

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

1 Like

Restoring the old logo:

изображение

изображение

изображение

Here


Another method to show a legacy HA logo is here.

1 Like

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…

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

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

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.

1 Like

try:

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

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

1 Like

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.

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

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

1 Like

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

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

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

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

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

1 Like