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

There is already posted style for Glance with changed margin.
1st post → link at the bottom
If you have some “entity-filter” inside - just try to adapt it, and post what you tried and where you failed, it will be a good start.

Hi, is there a way to remove or make transparent these input_datetime lines in entities card? Thanks

Hi, this should work. its pretty easy to figure out if you look through ildar’s posts.

type: entities
entities:
  - entity: input_datetime.test
    card_mod:
      style:
        ha-time-input $ ha-base-time-input $:
          ha-textfield:
            $: |
              .mdc-line-ripple::before {
                border-bottom-width: 0px !important;
              }
        ha-date-input $:
          ha-textfield:
            $: |
              .mdc-line-ripple::before {
                border-bottom-width: 0px !important;
              }
1 Like

1st post → link at the bottom → input_datetime

1 Like

@dimitri.landerloos @Ildar_Gabdullin thank guys!

a bit more customized version here:

thanks.

Any idea how I can remove the unit of measurement from these please “Steps” so it just shows the figure, thank you

type: custom:layout-card
layout_type: masonry
layout: {}
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.iphone_steps
        name: None
        primary_info: none
        icon_type: none
        fill_container: false
        icon: none
        card_mod:
          style: |
            ha-card {
              /* Set padding of card */
              margin-left: -15px;
              /* Move card up to match header card */
              margin-top: -35px !important;
              padding: -35px;
              background: none;
      - type: custom:mushroom-entity-card
        entity: sensor.sophieiphone_steps_2
        name: None
        primary_info: none
        fill_container: false
        icon: mdi:walk
        icon_type: none
        card_mod:
          style: |
            ha-card {
              /* Set padding of card */
              margin-left: -130px;
              margin-right: 0px;
              /* Move card up to match header card */
              margin-top: -35px;
              padding: -80px;
              background: none;

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.