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

figured out how to hide the more-info buttons by adding this to the existing:

ha-icon-button.more-info {
        display: none;
}

only remaining now is how to add a second tap action to the name area without breaking the first tap action on the icon.

thanks.

Tried again :thinking: 🔹 Card-mod - Add css styles to any lovelace card - #5206 by Dino-Tech

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