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

[MrThiemann]

Hey =)
can someone help me to change an icon?

so I have a “custom:button-card”,
it shows me an LED afterwards.

in there is a “custom_field” with another “custom:button-card”.
this shows my motion sensor.

if the status now changes to “on”, i would like the icon to change as well.
in my code, however, only the icon changes when I switch the “switch.tp_link_01” on/off

the only thing that “works” is “change_color”. The binary_sensor does that correctly.
But as I said: changing the icon doesn’t work

type: custom:button-card
entity: switch.tp_link_01
name: Garage
icon: >-
  [[[ if (entity.state == "off") return "mdi:garage"; else return
  "mdi:lightbulb" ]]]
show_state: true
size: 100%
styles:
  card:
    - border-radius: 10%
  grid:
    - grid-template-areas: '"l i i i temp" "l i i i s" "l i i i s" "n n n n n"'
    - grid-template-columns: 1fr 1fr 1fr 1fr 1fr
    - grid-template-rows: 1fr 1fr 1fr 1fr
  custom_fields:
    licht:
      - align-self: start
      - justify-self: end
      - padding-right: px
custom_fields:
  licht:
    card:
      entity: binary_sensor.presence_12
      icon: >-
        [[[ if (entity.state == "off") return "mdi:car"; else return
        "mdi:security" ]]]
      layout: vertical
      name: []
      state:
        - value: 'on'
          styles:
            state:
              - color: green
            card:
              - filter: drop-shadow(0 0 1.0rem rgb(243,156,15))
              - border: 0px
            icon:
              - color: rgb(255,0,0)
        - value: 'off'
          styles:
            state:
              - color: red
            name:
              - color: rgb(80,80,80)
            icon:
              - color: green
              - icon: mdi:security
      type: custom:button-card
hold_action:
  action: more-info
state:
  - value: 'on'
    styles:
      state:
        - color: green
      card:
        - filter: drop-shadow(0 0 1.0rem rgb(243,156,15))
        - border: 0px
  - value: 'off'
    styles:
      state:
        - color: red
      name:
        - color: rgb(80,80,80)
      icon:
        - color: rgb(80,80,80)

[Mariusthvdb (Marius)]

using my generic header card_mod works fine in all instances, but one…

the situation I use a header-toggle.

since my code for the header is:

card_mod: &header
  style: |
    .card-header {
      background-color: var(--background-color-off);
      color: var(--text-color-off);
      padding-top: 0px;
      padding-bottom: 0px;
      margin: 0px 0px 16px 0px;
    }

and the background-color-off is using primary color, I have a conflict with the header-toggle which uses the same color, and even with the background of the toggle which is also invisible.

Can we mod the settings for the header-toggle independently from any other toggle in the card?

[MrThiemann]

I have now solved it as follows:

custom_fields:
  licht:
    card:
      entity: binary_sensor.presence_12
      layout: vertical
      name: []
      state:
        - value: 'on'
          icon: mdi:car
          icon_height: 50px
          name: No Mail
          color: rgba(0,0,0,0.3)
        - value: 'off'
          icon: mdi:mailbox-open-up
          icon_height: 50px

[arganto]

Thanks for the investigations. Very interesting. I double-checked all them and saw the same behavior.

Card 1.

Same behavior and I expected the same as you to see.

@Ildar_Gabdullin

on hui-text-entity-row $ level - twice (??? why twice ???);

Don’t understand either. The first is empty, the second has the references. Double-Check with $0._input_styles and $0._styleChildren.

Card 2.

Same behavior and I expected the same as you to see.

@Ildar_Gabdullin

on hui-text-entity-row $ level - twice (??? why twice ???);

see above.

@Ildar_Gabdullin

on hui-text-entity-row $ level (??? why ???);

This seems to be the first one from above. The empty one.

Card 3.

Same as 2. Expected the same and

@Ildar_Gabdullin

on hui-text-entity-row $ level (??? why ???);

in every div are the “empty ones”.

Card 4.

Dito, but then I saw another “empty” one coming and going on. Had this in other places in the examples above already, but thought I only missed to look correctly.

• hui-generic-entity-row` level. Sometimes it was there, sometimes not. Confused.

So in general the syntax was, what I expected and same as your expectations. I Onle wonder how to address e,g, the sevond div already from there.

And now Card 5.

@Ildar_Gabdullin

Where I expect to see “card-mod” sections:
in each div section:

• on hui-text-entity-row level.
• on hui-generic-entity-row $ level.

O.k. Now I get what is should or could be behind the leading $. Thanks for this hint.

@Ildar_Gabdullin

on hui-text-entity-row $ level (??? why ???);

Same as above. I’m not sure if it should be there and it is again empty.

Perhaps there is a glitch or hick up with such entries and the root cause for the ones and duplicates in card 1-4 as well. Perhaps Thomas can check or explain?

[Ildar_Gabdullin]

@arganto

I Onle wonder how to address e,g, the sevond div already from there.

Use nth-child(2) - if I understood you correctly.

[Mariusthvdb (Marius)]

not sure if this is for button-card or here, but since I am trying to card_mod, thought it best to post here.
Goal: scroll a set of button-cards, which are 4 in a row, full width of a card.

Ive almost got it as I want, with one annoying exception.: there scrollbar is positioned outside of the card, and showing underneath the card next to it:

first look:

scroll a bit:

maybe a bit difficult to spot, the scroll bar hiding:

1 column makes it clearer:

I tried mod-card, but couldn’t get it to work and this seems to be closest to what I want:

type: vertical-stack
cards:

  - type: custom:button-card
    template: button_default_title
    styles:
      card:
        - color: var(--text-color-off)
        - background-color: var(--background-color-off)
    state:
      - operator: template
        value: >
          [[[ return states['binary_sensor.motion_sensors_all'].state === 'on'; ]]]
        name: >
          [[[ var id = states['sensor.last_motion'].state;
              return 'Motion detected: ' + id; ]]]
        styles:
          card:
            - color: red
            - background-color: var(--background-color-on)
      - operator: template
        value: >
          [[[ return states['binary_sensor.motion_sensors_active'].state === 'on'; ]]]
        name: Motion sensors active
        styles:
          card:
            - color: darkgreen
      - operator: template
        value: >
          [[[ return states['binary_sensor.motion_sensors_active'].state === 'off'; ]]]
        name: Motion detection Off

  - type: entities
    card_mod:
      style: |
        ha-card {
          background: transparent;
          box-shadow: none;
        }
        .card-content {
          max-height: 400px;
          overflow-y: scroll;
          margin: -8px -16px -8px -16px;
        }
    entities:

      - type: custom:hui-element
        card_type: grid
        card_mod:

        columns: 4
        cards:

          - type: custom:button-card
            template: button_motion
            name: Laundry
            entity: binary_sensor.laundry_sensor_motion
            triggers_update: switch.laundry_sensor_motion

I can set the scroll section to:

        .card-content {
          max-height: 400px;
          overflow-y: scroll;
          margin: -8px 0px -8px -16px;
        }

but then the button-cards move inwards, which I dont want either.

Can we not move the scrollbar itself, and have it show over the buttons?

[arganto]

@Ildar_Gabdullin

Use nth-child(2) - if I understood you correctly.

Not sure if I understood or you didn’t my question.

My question was Card 2-4 in notation as there, but make the second sun red, because it is the second hui-text-entity-row with nested hui-generic-entity-row.

Yes, I can define on entity level, but here I was wondering to get there from parent as well.

[msymms (Mark Symms)]

Can anyone point me in the right direction here? I want to place several cards (custom button, etc) on a grid layout of some sort, and then style the background of that layout and make the child cards’ background transparent. Quite easy to do in straight html and css, but seems impossible here.

I have tried several ways but alas…

[reste_narquois (Chris Warne)]

You could try putting your button cards inside a custom stack-in-card

In combination with card-mod it should allow you to control the background of both the card itself, and the child cards.

[arganto]

@msymms

I have tried several ways but alas…

Can you show your attempts, so that we can try to improve them?

[Mariusthvdb (Marius)]

check my post directly above yours…🔹 Card-mod - Add css styles to any lovelace card - #2781 by Mariusthvdb

and leave out the scroll part if you dint need that.

[AndersT (Anders Thern)]

How do I round to i.e 3 decimals in this entity.

[arganto]

O.k. got it. Must have been blind to not see that it is possible to combine with css stye notations.

    .card-content div:nth-child(2) hui-text-entity-row:
      $:
        hui-generic-entity-row:
          $: |
            .info {
              color: red;
            }
entities:

[msymms (Mark Symms)]

Certainly, and thank you for responding. One attempt was posted here: 🔹 Card-mod - Add css styles to any lovelace card - #2769 by msymms

[msymms (Mark Symms)]

Marius, thank you. I will try this approach. This is what I am doing.

This is one big custom:button-card. It works okay, but not exactly how I want it. I would like clickable areas within this panel.

[arganto]

I’m pretty sure, that in this example some things are not working (without card_mod) or I didn’t get the approach. Or you did some copy&paste&remove.

Perhaps this could be a starting point:

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      background: linear-gradient(0deg, rgba(158,196,233,1) 0%, rgba(43,105,144,1) 100%) !important;
    }
card:
  type: custom:layout-card
  layout_type: grid
  layout:
    grid-template-areas: |
         "sky city"
  cards:
     - type: markdown
       view_layout:
         grid-area: sky
       content: "Round Rock"
       card_mod:
        style: |
          ha-card {
            background: transparent;
            box-shadow: initial
          }
     - type: markdown
       view_layout:
         grid-area: city
       content: "Round Rock"
       card_mod:
        style: |
          ha-card {
            background: transparent;
            box-shadow: initial
          }

[msymms (Mark Symms)]

Wow. yes, thanks. Let me try that.

[Mariusthvdb (Marius)]

tbh, this is a bit of a mixed card… why dont you use one of the weather cards? you can set a background there too:

[msymms (Mark Symms)]

Marius, I like this, especially the background. I did look at the weather cards. I am trying to put together a kiosk “view/panel” that would have 6 of these cards in one view; showing weather from cities with family. The problem is all that information is tough to get on one screen. So, I wanted to hide some, making it available through a more-info dialogue (especially with the weather alerts - a link to the entire alert is my goal there). Then there is the mobile phone display to deal with later on. I will keep posting my progress. You and @arganto have given me some hope. Thanks so much. I am sure I will be back.

[Mariusthvdb (Marius)]

I see. And sure, please come back, we’re here to help !