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

Mariusthvdb · August 6, 2024, 1:04pm

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 · August 6, 2024, 1:27pm

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 · August 6, 2024, 1:39pm

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 · August 6, 2024, 4:04pm

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 · August 6, 2024, 5:03pm

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

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 · August 6, 2024, 8:55pm

It is indeed

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 · August 7, 2024, 8:11am

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?

button-text

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 · August 7, 2024, 9:36am

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

newneo · August 7, 2024, 9:42am

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

tsloms · August 7, 2024, 10:07am

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 · August 7, 2024, 10:52am

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

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

tsloms · August 7, 2024, 11:18am

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 · August 7, 2024, 12:41pm

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

tsloms · August 7, 2024, 2:10pm

Thats a good hint! I experimented with it in the past but never had a good solution, because I couldn’t figure out how to combine it with custom:auto-entities.

This for example doesn’t work:

type: custom:swipe-card
parameters:
  spaceBetween: 8
  effect: coverflow
  grabCursor: true
  centeredSlides: true
  slidesPerView: 5
  coverflowEffect:
    rotate: 10
    stretch: 0
    depth: 10
    modifier: 1
    slideShadows: true
  pagination:
    type: bullets
    dynamicBullets: true
start_card: 3
mode: vertical
keep:
  outer_padding: false
  margin: true
  box_shadow: false
  background: false
cards:
  - type: custom:auto-entities
    card:
      type: custom:mushroom-entity-card
      state_color: true
      show_name: true
      show_icon: true
      show_state: false
    filter:
      include:
        - domain: sensor
          attributes:
            device_class: battery
          state: <= 50

But I never found a way that worked. Putting every card in separately seems a little dumb to me. Do you have any ideas about that?

All right

I’m courious if someone has some kind of badge-like header that is dynamic (like with custom:auto-entities or else) and “horizontally scrollable”.

Mariusthvdb · August 7, 2024, 3:12pm

you probably need to set the auto-entities to create cards (using the param: card )

but for that you need to change to another thread, as this is about card-mod

broyuken1 · August 7, 2024, 4:37pm

How would I change the icon color of the tile card? I use mushroom just about everywhere else and the icon color is blue, however the tile card has the icon color set to a yellow/orange.

features:
  - type: select-options
type: tile
entity: input_select.house_mode
vertical: false
color: primary
hide_state: true

paulgryan52 · August 7, 2024, 5:15pm

hi I’ve got a entitles card to change icon colour depending on state, I would also like to change the icons depending on state

here is my code editor view

type: entities
entities:
  - entity: switch.blu_ray_player_switch_2
    icon: null
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
          {% if states(config.entity)=='on' %}
             green
          {% else %}
             red
          {% endif %}
        }
  - entity: switch.innr_sp_242_switch
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
          {% if states(config.entity)=='on' %}
             green
          {% else %}
             red
          {% endif %}
        }
  - entity: switch.stereo_plug_switch_2
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
          {% if states(config.entity)=='on' %}
             green
          {% else %}
             red
          {% endif %}
        }
  - entity: light.light_switch
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
          {% if states(config.entity)=='on' %}
             green
          {% else %}
             red
          {% endif %}
        }
  - entity: switch.av_switch_2
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
          {% if states(config.entity)=='on' %}
             green
          {% else %}
             red
          {% endif %}
        }
show_header_toggle: false
state_color: true
theme: ios-dark-mode
card_mod:
  style: |
    :host ha-card
    {
        background-color: black; border: solid 4px white;
    }

AdmiralStipe · August 7, 2024, 9:20pm

Did you find anything useful yet?
I’m having a similar problem, only with basic badge color, which isn’t working anymore with the latest update.

type: custom:hui-state-badge-element
entity: sensor.temperatura_rokova
card_mod:
  style: |
    :host {
      --label-badge-red:
        {% if as_timestamp(now()) - as_timestamp(strptime(states('sensor.datum_rokova'), "%d.%m.%Y",default='01.01.2000').strftime("%Y-%m-%d ") + states('sensor.cas_rokova')) | float(default=0) > 240 %}
        purple
        {% elif states('sensor.temperatura_rokova') | float(default=0) > 17.99 and states('sensor.temperatura_rokova') | float(default=0) < 28 %}
        #80C884
        {% elif states('sensor.temperatura_rokova') | float(default=0) > 27.99 and states('sensor.temperatura_rokova') | float(default=0) < 30 %}
        orange
        {% elif states('sensor.temperatura_rokova') | float(default=0) > 15.99 and states('sensor.temperatura_rokova') | float(default=0) < 18 %}
        orange              
        {% else %}
        red
        {% endif %}
       ;
     }
hold_action:
  action: call-service
  service: script.refresh_esp3

I must change the “label-badge-red” to something different, but don’t have a clue what to.

I’m also conditionally changing font size and it also doesn’t work anymore:

type: custom:hui-state-badge-element
entity: switch.robas1_local
card_mod:
  style:
    ha-state-label-badge:
      $:
        ha-label-badge:
          $: |
            .label-badge .value {
            {% if is_state((config.entity), 'off') %}
            font-size: 100% !important;
            {% else %}
            font-size: 70% !important;
            {% endif %} 
            }
      .: |
        :host {
          --label-badge-red:
           {% if is_state((config.entity), 'off') %}
            #80C884
            {% else %}
            red
            {% endif %}       
           ;
          }
tap_action:
  action: toggle
hold_action:
  action: more-info

I tried searching CSS properties of badges with Inspector in browser, but I just don’t understand enough CSS to find the solution…

Faecon · August 8, 2024, 1:34am

made this in my config.yaml

climate:
  - platform: climate_group
    name: "Group_airco"
    temperature_unit: C
    entities:
      - climate.ruimte1_airco
      - climate.ruimte2_airco
      - climate.ruimte3_airco
      - climate.ruimte4_airco
      - climate.ruimte5_airco
      - climate.ruimte6_airco
      - climate.ruimte7_airco
      - climate.ruimte8_airco

and this is my badge

      card_mod:
        style: |
          ha-state-icon::after {
          content: "{{ expand('climate.group_airco') | selectattr('state','eq','cool') | list | count }}";

this counts only to 1… What did I do wrong ?
and i want to count the cool and the heating, how do I do that ?

Mariusthvdb · August 8, 2024, 6:40am

please do a search in the community on that exact phrase, it will get you to the answer within the first 3 listed hits