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

Check with Development tools-> Templates, what is shows for your expression?

like I said, it is true or false

Cannot check it by myself - but could you rewrite it:
if () ā€œtrueā€ else ā€œfalseā€

yes, I did all that, used al kinds of formats in the config-template card. Even used a plain input_boolen.test to see if the state would change, but I couldnā€™t make it happen.

Meanwhile Ive concocted this:

        - type: custom:state-switch
          entity: template
          template: >
            {{states('input_select.theme')|regex_search('(ight|Dark|Matrix)')}}
          states:

            true:
              <<: &config
                type: custom:auto-entities
                show_empty: false
                filter:
                  include:
                    - domain: person
                      not:
                        state: home
              card:
                dark_mode: true
                <<: &map_not_home
                  type: map
                  hours_to_show: 48
                  card_mod:
                    style: |
                      ha-card {
                        box-shadow: none;
                      }

            false:
              <<: *config
              card:
                dark_mode: false
                <<: *map_not_home

and that seems to do the trick. Where would we be without Anchors and the cards by Thomasā€¦

Great, thanks for your help! Thanks for explaining how to combine the ha-card with long DOM paths. :+1:

I was able to combine the code and let the icon be at full brightness even though they are dimmed. The reason for the code-block with the specified height, width and flex is to make the multiple-entity-row entities more compact (less margin between the icons), which seems to be working okay.

Again, thanks for your help!

Anyone here that uses Scheduler-Card and has modded the button/track colors?

Through inspect element I have found this"

And changing this code to yellow seems to work.

Button
NVIDIA_Share_aykizVgXym

Track
NVIDIA_Share_bf5o64Vcrx

But Iā€™m having a difficult time converting this to something I can use in card_mod. Anyone care to help?

Check there, is it possible to use variables described here

Hi thanks Idar, I took a look at your example. I tried to ā€˜translateā€™ that onto scheduler card, but it doesnā€™t seem to work. If I look at inspect elements screenshot, the style should be like this?

card_mod:
  style:
    scheduler-entities-card:
      $:
        ha-card:
          $:
            scheduler-entity-row:
              $:
                ha-switch:
                  $: |
                    .mdc-switch .mdc-switch__track {
                      border-color: green !important;
                    }
                  .: |
                    ha-switch {
                    --switch-unchecked-track-color: yellow;
                    --switch-checked-track-color: red;
                    }

Try this (not tested):

        card_mod:
          style:
            scheduler-entity-row:
              $:
                ha-switch:
                  $: |
                    ...

Iā€™d like to override the fold-entity-row fold icon, which works with the following code, but only until the button is clicked. It reverts to the expected icon again on refresh.

type: custom:fold-entity-row
card_mod:
  style:
    ha-icon:
      .: |
        ha-icon {
          --card-mod-icon: mdi:plus-circle-outline;
        }
head:
  entity: cover.blinds
  card_mod:
    style:
      hui-generic-entity-row$: |
        state-badge {
          display: none
        }
        div {
          font-size: 1.5em;
          font-weight: bold;
          padding-left: 0px;
          float: left;
        }
entities:
  - entity: cover.north_blind
    name: North Blind
  - entity: cover.south_blind
    name: South Blind

Any ideas? Iā€™ve seen a few instances of the --card-mod-icon being described as working partially, so I wonder if this is one of those instances, but it could easily be something Iā€™m missing. Even with the amazing examples in this thread itā€™s still slow going with my weak CSS skills.

Wonder if anyone can help with modifying a picture-glance card. I want to remove the gray overlay that comes down halfway across our faces, or just make it smaller so it only covers the bottom thrid of the image.
image

The following code bit is for the first image.

type: grid
cards:
  - type: picture-glance
    image: /local/myImage.png
    entity: person.me
    show_state: true
    state_filter:
      home: brightness(110%) saturate(1.2)
      not_home: brightness(110%) saturate(0)
      School: brightness(110%) saturate(0)
      Work: brightness(110%) saturate(0)
    entities:
      - entity: sensor.my_phone_battery_level
        icon: none
      - entity: person.me
        icon: none
  - type: picture-glance
    ... 
    ...

Thanks in advance

This should work:

type: grid
cards:
  - type: picture-glance
    style: |
        ha-card .box {
          background-color: rgba(0,0,0,0);
        }
    image: /local/myImage.png
    entity: person.me
    show_state: true
    state_filter:
      home: brightness(110%) saturate(1.2)
      not_home: brightness(110%) saturate(0)
      School: brightness(110%) saturate(0)
      Work: brightness(110%) saturate(0)
    entities:
      - entity: sensor.my_phone_battery_level
        icon: none
      - entity: person.me
        icon: none
  - type: picture-glance
    ... 
    ...    

if you want that in your full config, why not simply hack the resource:

          icon=${this.open?"mdi:chevron-up":"mdi:chevron-down"}

seems easy enough to editā€¦

        - type: custom:config-template-card
          entities:
            - input_select.theme
          variables:
            dark-mode: states['input_select.theme'].state.includes(['ight','Dark','Matrix'])
          card:
            type: custom:auto-entities
            show_empty: false
            filter:
              include:
                - domain: person
                  not:
                    state: home
            card:
              type: map
              hours_to_show: 48
              dark_mode: '${dark-mode}'
              card_mod:
                style: |
                  ha-card {
                    box-shadow: none;
                  }

but I get an error about an unexpected ā€˜-ā€™ā€¦

do you see the obvious issue?

edit
nvm, that was because the variable has a -. changing made the error disappear. However, the mode isnt set correctly, so I guess the template isnt correct. also because

states['input_select.theme'].state.includes('Dark')

does work!
Ill move this to a topic regarding the config-template-card.

Thanks Idar, that worked great. I also managed to mod a header part of the card. The icons in the card Iā€™m having troubles with, but Iā€™m gonna try more. Iā€™m beginning to understand the structure more with your examples and the explanation of shadowroot on the docs :smiley:

1 Like

@olympia, if you are still interested in transparent background for numberbox-card, check the updated post.

Youā€™re really helpful @Ildar_Gabdullin!

I removed my post, because I figured it out in the meantime and thought you didnā€™t look at it yet.
However, you generated a really helpful addition to your post! Thank you for this!

In my case, I also had to add

box-shadow: none;

as well to the entities card, because I had it within a custom:button-card and the shadow was visible even without having the background.

Many thanks again for looking into this!

Hi guys, I have a badge-card, is it possible to change the color of the badge? If itā€™s possibleā€¦

sensor.alarm_last_motion
  - type: custom:badge-card
    badges:
      - entity: sensor.paradox_battery_voltage
        name: Batteria
      - entity: sensor.paradox_panel_voltage
        name: Alimentazione
      - entity: sensor.run_status
        name: Centrale
        

Thanks

1st post ā†’ link at the bottom ā†’ consolidated post ā†’ styles for badges

Great thanks!