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

Kayinwonderland · February 10, 2022, 7:59pm

Can someone help me? I feel too dumb for this. I try to set the font size to anything smaller (probably 8px) but I have no idea where to add it. Whatever I put in there: it does not change (the only changes that worked after trying was the font color and the background color, but never the font size)

type: vertical-stack
cards:
  - type: custom:button-card
    entity: input_boolean.mail
    size: 20%
    color: white
    show_state: false
    tap_action:
      action: toggle
    state:
      - value: 'off'
        icon: mdi:mailbox-outline
        icon_height: 50px
        name: No Mail
        color: rgba(0,0,0,0.3)
      - value: 'on'
        icon: mdi:mailbox-open-up
        icon_height: 50px
        name: |
          [[[
            var time_delivered = states["input_datetime.mail_time"].state;
            return 'Mail delivered ' + time_delivered 
          ]]]
  - type: custom:button-card
    tap_action:
      action: toggle
    entity: cover.garage_msg100_main_channel
    name: Garage
    show_state: true
    size: 20%
    state:
      - color: null
        icon: mdi:garage
        value: closed
      - color: red
        icon: mdi:garage-open
        value: open

arganto · February 11, 2022, 8:39am

I wonder if you really want to use card_mod for this and propose to ask this in a custom:button-card topic instead.

Kayinwonderland · February 11, 2022, 9:09am

Thanks that really helped me. No idea I could use font size in custom button card. Sorry I’m an absolout Beginner learning my way through this with forum discussions and YouTube tutorials

ASNNetworks · February 11, 2022, 9:48am

The most important step is not forum or YouTube but the README of the card. Always check the github source for full documentation FIRST. That way you know what all options might be, so you’ll understand the usage better/faster. Usually they also provide code examples.

Kayinwonderland · February 11, 2022, 10:32am

I try to always do that. My issue is 99% of the time that the Readme is made for people who Absolutely know about HA and/or coding and I’m new to both and at times simply don’t know where to f. E. Put the font size in the code eventually (I’m a quick learner tho but still not easy at all). Thanks anyways for the hint

msymms · February 11, 2022, 3:51pm

Hi All,
I am having a bit of an issue with the mod-card. I want to place a grid (grid card or custom:grid layout) inside the mod-card so I can style the background. I can get that part working, but if I try to place any cards in the grid they do not show up. Here is a snapshot of the code.

 - type: custom:mod-card
        card:
          type: custom:grid-layout
          layout:
            grid-template-areas: |
              ". sky sky city currtemp currtemp ."
              ...
            grid-template-columns: 0 repeat(5, 1fr) 0
            grid-template-rows: 1.75fr .25fr 1fr 1fr repeat (5,.5fr) 2.5fr 1fr
            grid-gap: .5vw
          cards:
          - type: custom:button-card
              view_layout:
                grid-area: sky
              show_state: false
              show_entity_picture: true;
              tap_action:
                action: none
              entity: sensor.rndrck_current_sky
            - type: markdown
              view_layout:
                grid-area: city
              content: "Round Rock"
        card_mod:
          style: |
            ha-card {
              background: linear-gradient(0deg, rgba(158,196,233,1) 0%, rgba(43,105,144,1) 100%) !important;
            }

It shows up like this:

Capture

Any ideas about what I am missing?

msymms · February 11, 2022, 4:33pm

Make no apologies. Everyone starts somewhere. We have all been new at this. I would still consider myself new. The most important thing is to keep learning and trying.

dowermyr · February 12, 2022, 2:31pm

There is something strage here. Look at the first picture:

The mailbox looks fine, but after refreshing the page, I get this:

e-raser · February 13, 2022, 2:38pm

Awesome, thank you so much!

Ildar_Gabdullin · February 13, 2022, 3:05pm

I only noted the problem in Entities card, did not check other cards.

github.com/thomasloven/lovelace-card-mod

--card-mod-icon stopped working in Entities card

opened 11:58PM - 02 Feb 22 UTC

ildar170975

My Home Assistant version: 2022.2.0 My lovelace configuration method (GUI or …yaml): yaml, storage What I am doing: Trying to change an icon using a `--card-mod-icon` variable. What I expected to happen: The icon is changed. What happened instead: The icon is NOT changed. **Minimal** steps to reproduce: ``` type: entities entities: - entity: sun.sun card_mod: style: | :host { --card-mod-icon: mdi:car; } ``` ![изображение](https://user-images.githubusercontent.com/71872483/152257847-95a860fc-6124-4457-82fd-095000f570e2.png) Error messages from the browser console: none --- **By putting an X in the boxes ([]) below, I indicate that I:** - [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/). - [x] Have made sure I am using the latest version of the plugin. - [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins. - [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

Ildar_Gabdullin · February 13, 2022, 10:02pm

Found some time to check the new card-mod version.
Default HA theme.
Here is a simple case:

Card 1:

type: entities
card_mod:
  style:
    .card-content hui-text-entity-row:
      $:
        hui-generic-entity-row:
          $: |
            .info {
              color: red;
            }
entities: &ref_entities
  - sun.sun
  - sun.sun
  - sun.sun

Code Inspector:

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

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

Where “card-mod” sections are created:

on type-entities level (??? why ???);
for each div section:

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

Card 2:

type: entities
card_mod:
  style:
    .card-content hui-text-entity-row $:
      hui-generic-entity-row:
        $: |
          .info {
            color: red;
          }
entities: *ref_entities

Code Inspector:

Where I expect to see “card-mod” sections:
in the 1st div section:

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

Where “card-mod” sections are created:

on type-entities level (??? why ???);
for the 1st div section:

on hui-text-entity-row level - NOT PRESENT;
on hui-text-entity-row $ level - twice (??? why twice ???);
on hui-generic-entity-row level;
on hui-generic-entity-row $ level.

for the 2nd & 3rd div sections:

on hui-text-entity-row level - NOT PRESENT;
on hui-text-entity-row $ level (??? why ???);
on hui-generic-entity-row level - NOT PRESENT;
on hui-generic-entity-row $ level - NOT PRESENT.

Card 3:

type: entities
card_mod:
  style:
    .card-content hui-text-entity-row $ hui-generic-entity-row:
      $: |
        .info {
          color: red;
        }
entities: *ref_entities

Code Inspector:

Where I expect to see “card-mod” sections:
in the 1st div section:

on hui-generic-entity-row level;
on hui-generic-entity-row $ level.

Where “card-mod” sections are created:

on type-entities level (??? why ???);
for the 1st div section:

on hui-text-entity-row level - NOT PRESENT;
on hui-text-entity-row $ level (??? why ???);
on hui-generic-entity-row level;
on hui-generic-entity-row $ level.

for the 2nd & 3rd div sections:

on hui-text-entity-row level - NOT PRESENT;
on hui-text-entity-row $ level (??? why ???);
on hui-generic-entity-row level - NOT PRESENT;
on hui-generic-entity-row $ level - NOT PRESENT.

Card 4:

type: entities
card_mod:
  style:
    .card-content hui-text-entity-row $ hui-generic-entity-row $: |
      .info {
        color: red;
      }
entities: *ref_entities

Code Inspector:

Where I expect to see “card-mod” sections:
in the 1st div section:

on hui-generic-entity-row $ level.

Where “card-mod” sections are created:

on type-entities level (??? why ???);
for the 1st div section:

on hui-text-entity-row level - NOT PRESENT;
on hui-text-entity-row $ level (??? why ???);
on hui-generic-entity-row level - NOT PRESENT;
on hui-generic-entity-row $ level.

for the 2nd & 3rd div sections:

on hui-text-entity-row level - NOT PRESENT;
on hui-text-entity-row $ level (??? why ???);
on hui-generic-entity-row level - NOT PRESENT;
on hui-generic-entity-row $ level - NOT PRESENT.

Card 5:

type: entities
card_mod:
  style:
    .card-content hui-text-entity-row:
      $ hui-generic-entity-row $: |
        .info {
          color: red;
        }
entities: *ref_entities

Code Inspector:

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

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

Where “card-mod” sections are created:

on type-entities level (??? why ???);
for each div section:

on hui-text-entity-row level;
on hui-text-entity-row $ level (??? why ???);
on hui-generic-entity-row level - NOT PRESENT;
on hui-generic-entity-row $ level.

Yes, in practice I see some difference between Code Inspector and this.
Probably I misunderstood something.

BBCiplayer · February 13, 2022, 10:56pm

There’s a Alarmo card that allows button sizing from the ui (slider bar) for adjustment.

MrThiemann · February 14, 2022, 6:58am

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 · February 14, 2022, 9:34am

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 · February 14, 2022, 9:49am

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 · February 14, 2022, 2:25pm

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.

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.

see above.

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

Card 3.

Same as 2. Expected the same and

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.

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

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 · February 14, 2022, 2:49pm

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

Mariusthvdb · February 14, 2022, 3:12pm

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:

Schermafbeelding 2022-02-14 om 16.07.42

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 · February 14, 2022, 3:19pm

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 · February 14, 2022, 10:13pm

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…