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

[acid-eddi (Stefan)]

Hey,
can someone give me a short tip how to create the icon color depending on window state. (open/close/tilt)
I found several of topics regarind that issue, but honestly I´m not well know in programming and nothing works.

What I´ve already done:
create template.yaml to display the correct state of the window:

  - name: "Fenster Küche EG"
    state: >
      {% if is_state('binary_sensor.fenster_kuche_eg_offen', 'off') and is_state('binary_sensor.fenster_kuche_eg_gekippt', 'off') %}  
      offen
      {% elif is_state('binary_sensor.fenster_kuche_eg_offen', 'on') and is_state('binary_sensor.fenster_kuche_eg_gekippt', 'off') %}  
      geschlossen
      {% else %}
      gekippt
      {% endif %}

    icon: >
      {% if is_state('binary_sensor.fenster_kuche_eg_offen', 'off') and is_state('binary_sensor.fenster_kuche_eg_gekippt', 'off') %}  
      mdi:window-open-variant
      {% elif is_state('binary_sensor.fenster_kuche_eg_offen', 'on') and is_state('binary_sensor.fenster_kuche_eg_gekippt', 'off') %}  
      mdi:window-closed-variant
      {% else %}
      mdi:window-open-variant
      {% endif %}

this works well.

what I wuold like to get:
Icon color red: open
Icon color orange: tilt
Icon color green: closed (Hide this state in the Dash Overview)

May I add this in the template.yaml or in the tile card config?

Thanks for helping me.

[jianyu-li]

for anyone that cares the answer to this its

    .mmp-player__adds {
      position: relative;
      top: -70px;  # Move the container of media control and volume buttons up
    }

[Mariusthvdb (Marius)]

@acid-eddi

an someone give me a short tip how to create the icon color depending on window state

sure, go to the top post, check the link at the bottom, and look for entities card_mod, that is to say, if yuio want this entity in an entities card.

other than that, you should provide some info for us to be able to help you

[peglegtv]

Hey, I’m stuck on changing the text size of only the first line in the Digital-Clock card from hacs, I can make both lines of text bigger but I only want to make the first line (time) bigger

code:

type: custom:digital-clock
timeFormat: h:mm a
card_mod:
  style:
    digital-clock$: 
      $: | 
        span {
          font-weight: 1000;
          #color: #B6FC00;
          font-size: 25px !important;
          }

this is the code that will make both lines larger

type: custom:digital-clock
timeFormat: h:mm a
card_mod:
  style: |
    ha-card {
      font-weight: 1000;
      #color: #B6FC00;
      font-size: 25px !important;
       }

any help would be great. thank you

[arganto]

type: custom:digital-clock
timeFormat: h:mm a
card_mod:
  style: |
    .first-line {
      font-weight: 1000;
      #color: #B6FC00;
      font-size: 25px !important;
       }

[e-raser]

Yes of course. And I posted everything already at 🔹 Card-mod - Add css styles to any lovelace card - #6750 by e-raser.

But I found the root cause:
state_color has been true which overrides every manually applied CSS… false fixed it immediately.

This is working now (state-badge applies):

                  card_mod:
                    style:
                      hui-generic-entity-row:
                        $: |
                          .text-content:not(.info) {
                            display: none;
                          }
                          .info.pointer {
                            #color: red;
                            font-size: 18px;
                          }
                          state-badge {
                            color: red;
                          }

[peglegtv]

Thank you! that did the trick.

[Olivier1974 (Olivier Toussaint)]

(Un)popular opinion: this thread will soon be flooded by people complaining about badge and/or badge-card. Just wait for next Wednesday, August 7th

[Mariusthvdb (Marius)]

why? has nothing to do with card-mod perse?

btw, as a heads up: we can keep using the built-in legacy badge (and also keep using the custom:badge-card to put them anywhere in the View) doing

badges:
      - type: custom:hui-state-badge-element
        entity: light.alarm
        tap_action:
          action: toggle
        hold_action:
          action: more-info

not an actual custom resource, it’s just the way to call that core element still existing in the Frontend

current beta testing 2024.8.0b1

ofc, styling the new badge is an entirely different thing…

[Olivier1974 (Olivier Toussaint)]

@Mariusthvdb

styling the new badge is an entirely different thing

Yeah, that’s what I’m talking about
People who will want to customize the new badges, trying to use the (soon to be) old card-mod tutorial that can be found here.

EDIT: you can use custom:hui-state-badge-element for legacy look but the good ol’ fashion card-mod syntax for badge like the example bellow will not work without a bit of research

      card_mod:
        style: |
          :host {
              {% if is_state('input_boolean.stop_ipad', 'off') %}
                --label-badge-background-color: rgba(0,255,0,0.1);
              {% else %}
                --label-badge-background-color: rgba(255,0,0,0.1);
              {% endif %}
          }

EDIT2: And, yes, I’m reasearching right now for both legacy look and new look, that why I don’t have a working code (yet)

[iorifly (Renato Barbosa)]

Does anyone know how to change the color of the progress bar?

card_mod:
  style: |
    ha-card {
     # --ha-card-background: grey;
      opacity: 70% ;
      color: var(--primary-color);
    }

[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