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

[GoodyGizmos]

Thank you. It did indeed work for me on the two text fields. Moreover, I’m comfortable converting a bunch of nested divs from the tool’s output into CSSYAML’ese.

          card_mod: 
            style: |
              .mmp-player
                .mmp-player__core.flex
                  .entity__info
                    .entity__info__name {
                      color: white;
                    }
              .mmp-player
                .mmp-player__core.flex
                  .entity__info
                    .entity__info__media {
                      color: yellow;
                    }

Now, I’m trying my hand at the source selection dropdown and it’s got things other than div. to parse, so I’m trying to make sense of those:

"#view>hui-view>horizontal-layout$#columns>div>stack-in-card$ha-card>div>hui-vertical-stack-card$#root>mini-media-player:nth-child(2)$ha-card>div.mmp-player>div.mmp-player__core.flex>mmp-powerstrip$mmp-source-menu$mmp-dropdown$div"

so, working with…

div.mmp-player>div.mmp-player__core.flex>mmp-powerstrip$mmp-source-menu$mmp-dropdown$div

which gets me to…

              .mmp-player
                .mmp-player__core.flex
                  mmp-powerstrip$
                    mmp-source-menu$
                      mmp-dropdown$
                        .mmp-dropdown {
                          color: white;
                        }

…which doesn’t work. The dropdown is in a div container in the dom screenshot I posted way above and I think that’s reflected in the final div output by the card-mod-helper, so I left that in there. What did I miss/exclude and am I even targeting the right entity for this or do I need to target deeper in the tree?

[Ildar_Gabdullin]

@GoodyGizmos

What did I miss/exclude

At least add “:” to your path after the last “$” (other thing have not checked)

[CDRX2]

Okay, so this is a bit different. You go from the base element ha-card directly into the first shadow-root. You then need to add “:” after each “$”.

See here:

card_mod:
  style: 
    mmp-powerstrip$:
      mmp-source-menu$:
        mmp-dropdown$: |
          #button 
            div 
              ha-icon {
                color: red;
              }

Removing some unnecessary lines:

card_mod:
  style:
    mmp-powerstrip$:
      mmp-source-menu$:
        mmp-dropdown$: |
          ha-icon {
            color: red;
          }

[arganto]

Please don’t cross post. Of course, this would be the better thread for the question, but as it has been solved already in the other thread, perhaps better delete it here.

[sagilo]

Were you able to figure this out? I want to have the exact same thing with Horizontal card by updating the flex value but no success so far.

[Ildar_Gabdullin]

Logbook in a Panel mode:

Consider a Logbook card in a view on a Panel mode:

type: logbook
hours_to_show: 168
entities:
  - sun.sun

Although the card occupies the whole view, the logbook itself occupies just a half of the available area:

1920x1200 desktop, Chrome, Win10:

iPhone 12:

It happens due to this style:

There is a Frontend issue about this.

A possible solution:

type: logbook
hours_to_show: 168
entities:
  - sun.sun
card_mod:
  style: |
    ha-logbook {
      height: calc(100vh - var(--header-height) - 32px) !important;
    }

---

More examples.

[curtis-r]

I’ve been playing with custom: button-card, but as I’ve been trying to solve a text-aligment challenge, I now found Card_Mod. If Card_Mod adds CSS capabilities to existing cards, is this more versatile? Would there be cause to use both add-ons, or can Card_Mod do everything Custom does?

[Ildar_Gabdullin]

@curtis-r

can Card_Mod do everything Custom does?

Yes, and much more.
But some people may find it more complex than using “custom:button-card”.

@curtis-r

Would there be cause to use both add-ons

If smth may not be achieved by using “custom:button-card” - then ADD some card-mod style. But these styles must not conflict (i.e. adding diff styles to same element).

[curtis-r]

Great. Thanks. I’ll give Card_Mod a spin.

[marcorm69]

HI all.

I need help about a this situation.
I have a time-piker row

I am able to change style for different items, but I don’t know how to change the .time-picker-row padding.
I don’t understand where to put it in the structure below:

              style:
                .: |
                  ha-card {
                    font-family:Oswald;                    
                    background: none;
                  }
                .time-picker-row:
                  .time-picker-content:
                    .: |
                      .time-separator {
                        display: none;
                      }
                    time-unit:
                      $: |
                        .time-unit {
                          padding: 2px !important;
                        }
                        .time-input {
                          border: 2px solid #fff!important;
                          background-color: transparent!important;
                          color: orange !important;
                          border-radius: 5px;
                          pointer-events: none !important;
                        }
                        .time-picker-icon {
                          color: red !important;
                          padding: 0px!Important;
                        }

Can you help me?
Regards.

[cristidobrescu (cristid)]

Hi there
I`m trying to add some CSS value to my type: image and seems like nothing is working. What I want to do is to animate an PNG I created when an battery sensor is on. This is my code lines so far!

views:
  - theme: Backend-selected
    title: Parter
    path: dsa
    type: panel
    icon: mdi:home-floor-0
    panel: true
    badges: []
    cards:
      - type: picture-elements
        image: local/images/parter/main1.png
        elements:
          - type: image
            entity: binary_sensor.entrance_battery_timed
            card_mod:
              style:
                .: |
                  img {
                    max-width: 100%;;
                    height: auto;
                  }
                  div {
                    animation: my-blink 2s linear infinite;
                  }
                  @keyframes my-blink {
                    from {opacity: 0;}
                    to {opacity: 100;}
                    from {opacity: 100;}
                    to {opacity: 0;}
                  }
            state_image:
              'on': local/images/parter/entr_bat.png
              'off': local/images/parter/blank.png

Enyone here would help me please?

The only one way to work this is to link @keyframes to elements root, but this affect all the picture-elements cards, and this goes to decrease loading page. This is the code line working so far:!

views:
  - theme: Backend-selected
    title: Parter
    path: dsa
    type: panel
    icon: mdi:home-floor-0
    panel: true
    badges: []
    cards:
      - type: picture-elements
        image: local/images/parter/main1.png
        elements:
          - type: image
            entity: binary_sensor.entrance_battery_timed
            style:
              top: 50%
              left: 50%
              width: 100%
              animation: my-blink 2s linear infinite
            state_image:
              'on': local/images/parter/entr_bat.png
              'off': local/images/parter/blank.png
        style: |
          @keyframes my-blink {
            from {opacity: 0;}
            to {opacity: 100;}
            from {opacity: 100;}
            to {opacity: 0;}
          }

Is there another way I can have this animation?

[Ildar_Gabdullin]

1st post - link at the bottom - picture-elements

[MrThiemann]

hey,
your instructions are always amazing!
but how does that work for a type:entities:light ?!

for example if the icon should be red when the lamp is switched on?!

type: entities
entities:
  - entity: light.your_light
    style:
      ......???

[arganto]

Sometimes I’m surprised, that Ildar is still answering, if really 99,9% of all answers is (as here again!):

1st post - link at the bottom - e.g. Light entity row and/or already in Entities card

Not only for you in special, but as this is here the case: Is it really not possible to have first a look in the excellent examples or use the search in this thread in general and ask then afterwards only, if there is really something not already in the examples?

[MrThiemann]

thanks for your answer =)
and also for the text I read this very often ^^

but believe me, if i didn’t know better, i wouldn’t have asked this question… my dashboard consists of 99.9% of the custom:button-card and actually i know very well what i’m doing…

I also only asked how it could work with the type:entities:light.
and actually I should have gone through all the contributions from this thread, but this question never came up.

And it’s not like I haven’t tried it myself.
and maybe i should have mentioned it: this is not for me personally, but was the question of a third party. because I don’t need all that type:entities stuff…

type: entities
entities:
  - entity: light.nachttisch_nathalie
    style:
      hui-toggle-entity-row:
        $:
          hui-generic-entity-row:
            $:
              state-badge:
                $:
                  ha-state-icon:
                    $: |
                      ha-svg-icon {
                        color: red;
                      }    

[Ildar_Gabdullin]

@MrThiemann

I also only asked how it could work with the type:entities:light.
and actually I should have gone through all the contributions from this thread, but this question never came up.

it IS described in the consolidation post:

Update: mmm, this was an answer to the last post, not to Arganto )).

[MrThiemann]

I thank you! I missed this post…
if someone uses the search function for this thread, they will be taken there

@Ildar_Gabdullin

Update: mmm, this was an answer to the last post, not to Arganto )).

I also felt very addressed ^^

[joshcrosby]

I’m using card-mod to change background color of the tile card when a light is on. How can I have the background fill the card from left to right based on the brightness percentage? Or even how can I have the alpha of the color change based on the brightness percentage?

I tried using a template inside a template but that didn’t work.

Here’s my base code:

type: tile
entity: light.table_lamp
tap_action:
  action: toggle
card_mod:
  style: |
    ha-card {
      {{ '--primary-text-color: black;' if is_state(config.entity, 'on') }}
      --secondary-text-color: gray;
      {{ 'background: rgba(255, 230, 140);' if is_state(config.entity, 'on') }}
    }

Might be a good one for @Ildar_Gabdullin

[aj-chan]

Hello Guys, I really need some help. I success add style of padding-bottom: 67px !important; to .swiper-slide.swiper-slide-active but I want to add this style to the orange circle root area which is the next lever of .swiper-slide.swiper-slide-active. >> shadow root >>> <div id='root">
I don’t know what should I type. Is there any one can tell me that? Thanks a lot.

document.querySelector("#syno-nsc-ext-gen3 > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > grid-layout").shadowRoot.querySelector("#root > hui-grid-card:nth-child(3)").shadowRoot.querySelector("#root > swipe-card").shadowRoot.querySelector("#swiper-wrapper-64fbcf4d2bc3b55f > hui-grid-card.swiper-slide.swiper-slide-active").shadowRoot.querySelector("#root")

      card-mod-view-yaml: |
        .: |
          hui-view {
            background: none !important;
            min-height: 100vh;
          }
  
        #################################################
        #                                               #
        #              GRID CARD HEADINGS               #
        #                                               #
        #################################################
  
        grid-layout$:
          hui-grid-card:
            .: |
              hui-grid-card {
                padding-bottom: 1vw;
              }
            $: |
              /* default */
              h1 {
                font-size: 2.5vw !important;
                line-height: 0 !important;
                font-weight: 600 !important;
                color: rgba(255, 255, 255, 0.8) !important;
                padding: 0.2vw 0 2vw 0 !important;
                letter-spacing: 0.07vw !important;
              }
              /* portrait */
              @media screen and (max-width: 1200px) {
                h1 {
                  font-size: 3.3vw !important;
                  line-height: 1.1vw !important;
                }
              }
              /* phone */
              @media screen and (max-width: 800px) {
                h1 {
                  font-size: 5.5vw !important;
                  line-height: 6vw !important;
                  margin: 2vw 0 0 0 !important;
                }
              }
  
        #################################################
        #                                               #
        #               SWIPE CARD MARGIN               #
        #                                               #
        #################################################

            $swipe-card$:
              .: |
                div {
                  height: 100%;
                }
                .swiper-container {
                  margin: -1.5vw !important;
                  padding: 2vw 2vw 4vw 2vw !important;
                }
                
                .swiper-slide.swiper-slide-active{
                  padding-bottom: 67px !important;
                }

[aj-chan]