šŸ”¹ Card-mod - Add css styles to any lovelace card

But what is your card-mod code you have tried and which is not working?

Thank you.

I made the lamp orbiting a black hole:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_boolean.test_boolean
  - type: entities
    entities:
      - sun.sun
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        row:
          entity: sun.sun
          icon: mdi:desk-lamp
          name: NƤhlicht Lampe
        style:
          hui-simple-entity-row$: 
            hui-generic-entity-row $: |
              state-badge {
                {% if is_state('input_boolean.test_boolean', 'on') %}
                  text-indent: 45px;
                  color: red;
                  animation: rotation 4s linear infinite;
                {% endif %}
              }
              @keyframes rotation { 0% { transform: rotate(0deg); }
                                  100% { transform: rotate(359deg); } }
      - entity: sun.sun

image

(Itā€™s spinning normally without the indentation.)

:warning: If the row contains a timer it has to be:

        style:
          hui-timer-entity-row$: 
            hui-generic-entity-row $: |

Nicely done! A light cannot leave a dark domain )

Styling bar-card: replacing a value:
here
ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

1 Like

Hello!

I have just updated to the latest home assistant version. But now my navigation bar is up top instead of at the bottom. Can someone help me with what I should write in the theme file to move it back down?

dont cross post please. i already answered your question on the mushroom thread.

1 Like

Hi everyone, can anyone please help me to solve my problem? I would like to eliminate the 8px margin of each state-badge element of the card but I canā€™t figure how. Thanks in advance!

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