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

[danielsoelva (xoa)]

This has probably already been asked a 1000 times, but I wasn’t able to get it to work with the posts I found.

Basically, I have this card (see above), I now I just like to change the icon for binary_sensor.gate_door_position_sensor, when the gate is “open”, show icon AA, when the gate is “closed”, show icon BB.

Thanks!

type: custom:mushroom-entity-card
fill_container: true
layout: vertical
name: Tor
secondary_info: none
entity: binary_sensor.gate_door_position_sensor
icon: ''
tap_action:
  action: call-service
  service: automation.trigger
  target:
    entity_id: automation.unifi_access_api_tor_offnen
  data:
    skip_condition: true
primary_info: none
card_mod:
  style: |
    :host {
    padding-top: 15px!important;
    }
       @media (prefers-color-scheme: dark) {
          ha-card:hover {
            background-color: #222222 !important;
          }
          ha-card {
            transition-duration: .0s !important;
          }
        }
        @media (prefers-color-scheme: light) {
          ha-card:hover {
            background-color: #F6F6F6 !important;
          }
          ha-card {
            transition-duration: .0s !important;
          }
        }

[Mariusthvdb (Marius)]

right, I hadn’t even started doing that ;-0

did find these variables to be functional in themes:

#badge
    label-badge-background-color: brown
    label-badge-text-color: green
    ha-label-badge-font-size: 15px
    label-badge-red: '#03a9f4'
    ha-label-badge-size: 30px
    ha-label-badge-border-radius: 0

#label below badge
    ha-label-badge-label-color: red
    ha-label-badge-label-background-color: red

#title below badge/label
    ha-label-badge-title-font-size: 8px
    ha-label-badge-title-font-weight: 400
    ha-label-badge-title-width: 50px

dont mind the settings I set, its just for experiment. And, ofc, not yet dynamic, or s complete as I managed before

btw this is the source frontend/src/components/ha-label-badge.ts at 62d8434596535625d743efc532ebf3a34f4a7144 · home-assistant/frontend · GitHub

so the badge label doesnt have a border-radius variable of its own, which is a bit a pity, and reason we need to travers the Dom for that… Havent found a way to set different colors on the borders either. we could do that for the badge and the label individually before.

[Ildar_Gabdullin]

Badges may change its structure within next versions, look at the Tile card which had some changes.

[Mariusthvdb (Marius)]

Yes that is indeed a risk to be considered.

Still trying to work my way through the new Tile card features changes to get the border-radius back…
Team simply says that’s unsupported undocumented so we’re on our own there…

Find that somewhat user unfriendly myself (after all why take the trouble to announce a warning on the changes, but leave the changes themselves unmentioned) but will probably work it out anyways

How to set border-radius on Tile card Features

Heads up: test running HA 2024.8 beta, these mods no longer work. Not sure what happened, probably something in core HA Frontend that was changed. Can’t find an obvious property that was changed, so needs some further investigation investigating some more, still makes me wonder why cant we set the variables we see in the Dom in the themes like that either generic: feature-border-radius: 0 or more fine grained: control-slider-border-radius: 0 control-button-border-radius: 0 …

[Olivier1974 (Olivier Toussaint)]

@Ildar_Gabdullin

look at the Tile card which had some changes

Yes, it is changing in this 2024.8.0 release.
For who is using

          card_mod:
            style:
              hui-card-features$:

There will be a new level to add, right after hui-card-features

          card_mod:
            style:
              hui-card-features$:
                hui-card-feature$:  

[Mariusthvdb (Marius)]

yes, that is it…
How could I have missed that, been looking at those dom paths for 2 days now… aargh, and such a useful new path it is

you really made my day here, thank you very much

I will change immediately the overview of features mods I posted above

would you happen to know if we could use those vriables directly:

# Tile features generic setting
    feature-border-radius: 0
    control-slider-border-radius: 0
    control-button-border-radius: 0
    control-select-border-radius: 0
    control-select-button-border-radius: 0
    control-select-menu-border-radius: 0

they are used in the cards, but I cant touch them from within my main themes, which would be just as nice as the state-colors.

[Olivier1974 (Olivier Toussaint)]

@Mariusthvdb

control-slider-border-radius

Should be something like this I guess (not tested):

                    card_mod:
                      style:
                        hui-card-features $:
                          hui-card-feature $:
                            hui-cover-position-card-feature $: |
                              ha-control-slider {
                                --control-slider-border-radius: 10px !important;
                              }

The same applies for the other hui-xxx-card-feature (I hope)

EDIT: to use theme variable, it is something like

--control-slider-border-radius: var(name_of_variable_from_theme) !important;

[Mariusthvdb (Marius)]

yes, and I tried both:

first of all, just setting those variables in a theme, which would then be picked up by the cards, as their default values for these variables are the ones I posted above, var(--feature-border-radius). That doesn’t work.

Then I tried the mods as you post above:

--control-slider-border-radius: var(--control-slider-border-radius)

or with the var(--feature-border-radius) . Doesnt work either.

So, for now, we can only use either a true px number there, or the variabel we Can use from themes:

style:
  hui-card-features $:
    hui-card-feature $:
      hui-cover-open-close-card-feature $:
          ha-control-button$: |
            .button {
              --control-button-border-radius: var(--ha-card-border-radius);
            }

      hui-cover-position-card-feature $:
        ha-control-slider$: |
          .container {
            --control-slider-border-radius: var(--ha-card-border-radius);
          }
          .slider .slider-track-bar {
            border-radius: var(--ha-card-border-radius) !important;
          }
          .slider .slider-track-bar::after {
            border-radius: var(--ha-card-border-radius) !important;
          }

Still strikes me as odd we cant override that system variable, and maybe the future will allow us to do so.

[Olivier1974 (Olivier Toussaint)]

@Mariusthvdb

we cant override that system variable

You can, you have to create your own theme, you can even include some card-mod default that will apply to every cards (wrong exemple, as it refers to badges that will change in 2024.8.0 but you get the idea)

midnight2:

  card-mod-theme: midnight2
  card-mod-view-yaml: |
    hui-masonry-view $: |
      .badges {
        margin-top: auto !important;
        font-size: 90%;
      }
    .: |
      hui-masonry-view {
        display: flex;
        flex-direction: column-reverse;
        justify-content: start;
        align-items: center;
      }


# Main colors
...

EDIT: Don’t forget that card-mod is coming after everything else, therefore, if it was already defined/inherited by something else, you need to !important to override the value

[Mariusthvdb (Marius)]

sure it get the example

I use those card-mod-themes since forever, no mysteries there. well, most of it is clear anyways…

what I meant is, we can set values on the system variables like

    ha-card-border-width: 0
    ha-card-border-color: transparent # test this is even necessary with width = 0?
    ha-card-border-radius: 0
    ha-dialog-border-radius: var(--ha-card-border-radius)
    ha-config-card-border-radius: var(--ha-card-border-radius)

and it will get applied to all views/cards that use these variables.

doing the same with the tile card variables

# Tile features generic setting
    feature-border-radius: var(--ha-card-border-radius)
    control-slider-border-radius: 0
    control-button-border-radius: 0
    control-select-border-radius: 0
    control-select-button-border-radius: 0
    control-select-menu-border-radius: 0

simply doesnt work, it seems unrecognized, and we need to resort to card-mod like I posted above. Card-mod remains a very important tool in the box, even though using that feature-border-radius would be way simpler

[Olivier1974 (Olivier Toussaint)]

you can also use the :host to override system values for the card

                    card_mod:
                      style: |
                        :host {
                          --feature-border-radius: 0px !important;
                        }

no?

EDIT: Sorry, I’m blindly helping, I had to remove 2024.8.0b3 because Alexa Media Player is failing to initialize (since b0). So I’ve no way to test and check what I’m giving you.

[Mariusthvdb (Marius)]

Let me test that again , I did some initial testing on that without success

Also, I think the details on the sliders don’t use that variable .

That’s what my tile mods are a bit involved…

Thanks! I’ll be back

@Olivier1974

EDIT: Sorry, I’m blindly helping, I had to remove 2024.8.0b3 because Alexa Media Player is failing to initialize (since b0). So I’ve no way to test and check what I’m giving you.

Haha, thats a bummer indeed for many users right now.

Ive tried that again though, and no, it does not work.
I ll stick with the changes you suggested earlier, they are super reliable at this point.
Fingers crossed they dont change that again.

[Olivier1974 (Olivier Toussaint)]

@Mariusthvdb

Haha, thats a bummer indeed for many users right now.

It is indeed

Alexa Media Player failing at startup

Hi I have a fair amount of Alexa devices connected to Home Assistant. It’s worked perfectly for a long time. After a reboot completes, I can go to the Integration and “reload” it wth no problems. Unfortunately any of my scripts using Alexa devices also pop up as an error since the integration didn’t do its thing. Log captured below. Any ideas? Logger: homeassistant.config_entries Source: config_entries.py:586 First occurred: 2:17:07 PM (1 occurrences) Last logged: 2:17:07 PM Error setti…

@petro

due to the lack of developers for Alexa Media Player, it’s likely this custom integration will die as a result.

@Mariusthvdb

Fingers crossed they dont change that again.

It will change again, it is always changing.
That’s why card-mod is the best and worst tool at the same time.
It makes HA so much better and close to my liking but at every monthly release, you’ve to pray for the fewer card-mod section to change

[newneo (Neo)]

Hope I’m in the right thread here!
Please help!
How can I place and align text “content-text” in the middle between the images?

type: custom:button-card
entity: sensor.tennis_atp_alexander_zverev_card
name: false
show_name: false
show_state: false
show_icon: false
styles:
  card:
    - border-radius: 0.5rem
    - overflow: hidden
    - position: relative
    - padding: 0
    - display: flex
    - flex-direction: column
    - justify-content: center
    - align-items: center
  custom_fields:
    background-images:
      - position: absolute
      - inset: 0
      - display: flex
      - justify-content: space-between
      - align-items: center
      - opacity: 0.3
    foreground-images:
      - position: absolute
      - inset: 0
      - display: flex
      - justify-content: space-between
      - align-items: center
      - z-index: 1
    content-text:
      - position: relative
      - z-index: 2
      - color: white
      - font-size: 1rem
      - font-weight: bold
      - text-align: center
      - padding: 5px
      - display: flex
      - justify-content: center
      - align-items: center
      - width: 100%
      - height: 100%
      - box-sizing: border-box
custom_fields:
  background-images: |
    [[[
      return `
        <img src="/local/sportpng/flagen/ger.png" alt="Left Background" style="height: 10rem; width: 10rem;">
        <img src="${states['sensor.tennis_atp_alexander_zverev'].attributes.opponent_logo}" alt="Right Background" style="height: 10rem; width: 10rem;">
      `;
    ]]]
  foreground-images: |
    [[[
      return `
        <img src="/local/sportpng/zverev.png" alt="Left Foreground" style="height: 7.5rem; width: 10rem;">
        <img src="https://a.espncdn.com/combiner/i?img=/i/headshots/tennis/players/full/${states['sensor.tennis_atp_alexander_zverev'].attributes.opponent_id}.png" alt="Right Foreground" style="height: 7.5rem; width: 10rem;">
      `;
    ]]]
  content-text: |
    [[[
      return 'Text <br/> Text <br/>';
    ]]]

[Ildar_Gabdullin]

@newneo

Hope I’m in the right thread here!

Wrong thread, button-card has own ways to define css properties.
This is the main button-card thread.

[newneo (Neo)]

@Ildar_Gabdullin

Wrong thread, button-card has own ways to define css properties.
This is the main button-card thread.

OK, thank you very much for the tip. I’ll post the request there again!
New Post for Help!

[tsloms]

Dear all,

I’m trying to figure out how to implement a scrollable badge row.
(like this for example, but with badges)

Right now, if i have to many badges showing, the badges wrap around to the next row like so:

with the code like this:

type: custom:auto-entities
card:
  type: custom:badge-card
  state_color: true
  show_name: true
  show_icon: true
  show_state: false
filter:
  include:
    - domain: binary_sensor
      attributes:
        device_class: smoke
      state: 'on'
    - domain: sensor
      attributes:
        device_class: battery
      state: <= 50
...

I started by looking into the examples on how to adjust custom:badge-card as well as badge card here.

I found something like this, but unfortunately, it doesnt bring the effect I want:

type: custom:mod-card
card:
  type: custom:badge-card
  badges:
    - entity: sun.sun
    - entity: sun.sun
    - entity: sun.sun
    - entity: sun.sun
    - entity: sun.sun
    - entity: sun.sun
    - entity: sun.sun
    - entity: sun.sun
    - entity: sun.sun
    - entity: sun.sun
    - entity: sun.sun
    - entity: sun.sun
card_mod:
  style:
    badge-card:
      $: |
        div#badges {
          color:red;
          overflow-x: scroll !important;
        }

instead, it looks like this:

Do you have any hints or ideas on how to achieve my goal?

Thanks in advance to anyone!

[Mariusthvdb (Marius)]

be ware that these badges are gone from 2024.8 on and replaced but the new ‘chip’ style badges from mushroom

If you would want the keep the old style badges you can, but need a little trick, see 🔹 Card-mod - Add css styles to any lovelace card - #6818 by Mariusthvdb

@tsloms

how to archive my goal

other than starting you want to scroll (which your effort apparently brings you, you didnt say what you want

[tsloms]

@Mariusthvdb

be ware that these badges are gone from 2024.8 on and replaced but the new ‘chip’ style badges from mushroom

Thanks for that hint, then I eventually have to look for another solution!

But my initial question remains: If and how it would be possible to make the badges scroll horizontally instead of wrapping to the next row.

[Mariusthvdb (Marius)]

I guess you can do that with custom Swipe card.
it’s a bit picky on the settings, but given the fact this is now a custom-card, it should allow you to add as many as you like and Swipe them

Not sure if horizontal scroll in css will get you there, dont think I saw it done before. Because all of the container cards (entities, stack, and grid) have their own logic for showing endless amounts of cards, and they never cross the card-with. They either get compressed, listed or displayed on the next line

unless there would some kind of unset property in the badge-card to override the wrapping to the next line

btw overflow-x only makes the card wobbly… best set it to none