How to set border-radius on Tile card Features

Configuration Frontend
1

separate post for clarity, and because it is unexpectedly difficult…

trying to set a border-radius of my theme to the buttons on the humidifier, I can not immediately find a way to do so:

  - type: tile
    entity: humidifier.badkamer
    card_mod:
      style:

        hui-card-features $:
          hui-humidifier-toggle-card-feature $:
            ha-control-select$: |
              .container {
                border-radius: var(--ha-card-border-radius);
              }
              .option-on.option.selected {
                --control-select-button-border-radius: 0 !important;
              }
        hui-card-features $:
          hui-target-humidity-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;
              }

works almost perfectly, except for the option buttons
if I set the border-radius on the element in Inspector, it does kick in, but somehow my card-mod skills leave me here.

and upon reloading even the container fall back to its default 10px now… so not reliable after all

I did manage to pull it off on several other tiles

Scherm­afbeelding 2024-07-11 om 11.49.22
Scherm­afbeelding 2024-07-11 om 11.49.221070×348 29.3 KB

carefully watching my Climate tile, I can copy this:

  - type: tile
    entity: humidifier.badkamer
    card_mod:
      style:

        hui-card-features $:
          hui-humidifier-toggle-card-feature $:
            ha-control-select$: |
              .container {
                --control-select-border-radius: var(--ha-card-border-radius);
                --control-select-button-border-radius: var(--ha-card-border-radius);
              }

          hui-target-humidity-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;
              }

and bingo:

Scherm­afbeelding 2024-07-11 om 12.09.39
Scherm­afbeelding 2024-07-11 om 12.09.391044×372 43.2 KB

2

Ive found card_mods for the type: tile cards on the domains I use, and list them below so hopefully someone can use them. I’ve left some commented code I dont use, but which can be set if you might wish so. I might still give it a go to set the border-radius on the small track-bar handles inside

My mods are in a dedicated folder, so I can include them in the yaml dashboards like this:

    - type: tile
      card_mod: !include /config/dashboard/card_mods/tile_light.yaml
      entity: light.voordeur
      features:
        - type: light-brightness
        - type: light-color-temp
      state_content:
        - state
        - last-changed
        - brightness
        - color_temp_kelvin
Alarm control panel 
# tile_alarm_control_panel
style:
  hui-card-features $:
    hui-alarm-modes-card-feature $:
      ha-control-select$: |
        .container {
          /*background: green;*/
          /*--control-select-background: green;*/
          --control-select-border-radius: var(--ha-card-border-radius);
          --control-select-button-border-radius: var(--ha-card-border-radius);
          /*--control-select-color: red;*/
          /*--control-select-selected-opacity: 0.5; # sets full button opacity */
          /*color: green; #for non selected control icons*/
        }
      ha-control-button$: |
        .button {
          --control-button-border-radius: var(--ha-card-border-radius);
        }

  .: |
    ha-card {
      --primary-text-color: var(--primary-color);
    }

Scherm­afbeelding 2024-07-12 om 12.13.29
Scherm­afbeelding 2024-07-12 om 12.13.291046×252 37.1 KB

Climate 
# tile_climate
style:
  hui-card-features $ hui-target-temperature-card-feature $: |
    ha-control-number-buttons {
      /*color: green;*/
      {% set state = states(config.entity) %}
      --control-number-buttons-background-color:
        {{'skyblue' if not state =='off' else 'var(--no-power-color)'}};
      --control-number-buttons-border-radius: var(--ha-card-border-radius);
    }
  hui-card-features $ hui-climate-preset-modes-card-feature $: |
    ha-control-select {
      --control-select-background: skyblue;
     /*background: skyblue;*/
    }

  hui-card-features $:
    hui-climate-preset-modes-card-feature $:
      ha-control-select$: |
        .container {
          /*background: green;*/
          /*--control-select-background: green;*/
          --control-select-border-radius: var(--ha-card-border-radius);
          --control-select-button-border-radius: var(--ha-card-border-radius);
          /*--control-select-color: red;*/
          /*--control-select-selected-opacity: 0.5; # sets full button opacity */
          /*color: green; #for non selected control icons*/
        }
  .: |
    ha-card {
      --primary-text-color: var(--primary-color);
    }

Scherm­afbeelding 2024-07-12 om 12.14.21
Scherm­afbeelding 2024-07-12 om 12.14.211058×362 54.5 KB

Cover 
# tile_cover
style:
  hui-card-features $:
    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;
        }

Scherm­afbeelding 2024-07-12 om 12.15.19
Scherm­afbeelding 2024-07-12 om 12.15.191052×372 46.2 KB

Fan (+animation) 
# tile_fan animate
style:
  hui-card-features $:
    hui-fan-speed-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 {
        --control-slider-color:
          {% if is_state(config.entity,'on') %}
          {% set perc = state_attr(config.entity,'percentage')|int(0) %}
          {% if perc <= 15 %} lightblue
          {%- elif perc <= 33 %} lightskyblue
          {%- elif perc <= 67 %} dodgerblue
          {%- else  %} darkblue
          {%- endif %}
          {%- else %} var(--state-inactive-color)
          {%- endif %} !important;
        --control-slider-background:
          {% if is_state(config.entity,'on') %}
          {% set perc = state_attr(config.entity,'percentage')|int(0) %}
          {% if perc <= 15 %} lightblue
          {%- elif perc <= 33 %} lightskyblue
          {%- elif perc <= 67 %} dodgerblue
          {%- else  %} darkblue
          {%- endif %}
          {%- else %} var(--state-inactive-color)
          {%- endif %} !important;
        }
  .: |
    ha-tile-icon {
      --tile-color:
        {% if is_state(config.entity,'on') %}
        {% set perc = state_attr(config.entity,'percentage')|int(0) %}
        {% if perc <= 15 %} lightblue
        {%- elif perc <= 33 %} lightskyblue
        {%- elif perc <= 67 %} dodgerblue
        {%- else  %} darkblue
        {% endif %}
        {% else %} var(--state-inactive-color)
        {% endif %};
    }
    ha-state-icon {
      animation:
        {% if is_state(config.entity,'on') %}
          {% set perc = state_attr(config.entity,'percentage')|int %}
          {% set base =
            'rotation infinite linear' %}
          {% if perc <= 15 %} 4s {{base}}
          {%- elif perc <= 33 %} 3s {{base}}
          {%- elif perc <= 67 %} 1.5s {{ base}}
          {%- else  %} 0.75s {{base}}
          {% endif %}
        {% else %} none
        {% endif %};
    }
    @keyframes rotation {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }

Scherm­afbeelding 2024-07-12 om 12.16.27
Scherm­afbeelding 2024-07-12 om 12.16.271026×502 58.1 KB

Humidifier 
# tile_humidifier
style:

  hui-card-features $:
    hui-humidifier-toggle-card-feature $:
      ha-control-select$: |
        .container {
          --control-select-border-radius: var(--ha-card-border-radius);
          --control-select-button-border-radius: var(--ha-card-border-radius);
        }

    hui-target-humidity-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;
        }

Scherm­afbeelding 2024-07-12 om 12.17.28
Scherm­afbeelding 2024-07-12 om 12.17.281074×360 48.8 KB

Input number 
# tile_input_number
style:
  hui-card-features$:
    hui-numeric-input-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;
        }
    hui-numeric-input-card-feature$: |
      {% set vol = states(config.entity)|float(0) %}
      ha-control-slider {
        --control-slider-color:
          {% if vol == 0.0 %} gray
          {% elif vol <= 0.3 %} dodgerblue
          {% elif vol <= 0.6 %} green
          {% elif vol <= 0.8 %} orange
          {% else %} red
          {% endif %} !important;
        --control-slider-background:
          {% if vol == 0.0 %} gray
          {% elif vol <= 0.3 %} dodgerblue
          {% elif vol <= 0.6 %} green
          {% elif vol <= 0.8 %} orange
          {% else %} red
          {% endif %} !important;
      }
      ha-control-number-buttons {
        color: var(--primary-color);
        {% set state = states(config.entity) %}
        --control-number-buttons-background-color: var(--primary-color);
        --control-number-buttons-border-radius: var(--ha-card-border-radius);
      }

Scherm­afbeelding 2024-07-12 om 12.18.36
Scherm­afbeelding 2024-07-12 om 12.18.36910×360 21.8 KB

Light 
# tile_light
style:
  hui-card-features $:
    hui-light-color-temp-card-feature $:
      ha-control-slider$: |
        .container {
          --control-slider-border-radius: var(--ha-card-border-radius);
        }
        .slider .slider-track-cursor {
          border-radius: var(--ha-card-border-radius) !important;
        }
    hui-light-brightness-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;
        }

Scherm­afbeelding 2024-07-12 om 12.20.05
Scherm­afbeelding 2024-07-12 om 12.20.05924×350 54.7 KB

Scherm­afbeelding 2024-07-12 om 12.20.18
Scherm­afbeelding 2024-07-12 om 12.20.18912×380 68.9 KB

And this is with the border-radius also set on the handle track-bar inside (::after), which for me is the final finishing touch

Light with handle 
# tile_light
style:
  hui-card-features $:
    hui-light-color-temp-card-feature $:
      ha-control-slider$: |
        .container {
          --control-slider-border-radius: var(--ha-card-border-radius);
        }
        .slider .slider-track-cursor {
          border-radius: var(--ha-card-border-radius) !important;
        }
        .slider .slider-track-cursor::after {
          border-radius: var(--ha-card-border-radius) !important;
        }
    hui-light-brightness-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;
        }

Scherm­afbeelding 2024-07-12 om 12.41.32
Scherm­afbeelding 2024-07-12 om 12.41.32920×370 65.2 KB

Update 
# tile_update
style:
  hui-card-features $:
    hui-update-actions-card-feature $:
        ha-control-button$: |
          .button {
            --control-button-border-radius: var(--ha-card-border-radius);
          }

Scherm­afbeelding 2024-07-16 om 09.52.35

4 Likes
3

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
    control-select-border-radius: 0
    control-select-button-border-radius: 0
    control-select-menu-border-radius: 0

and having set the ha-card-border-radius: 0 as my main theme setting, ofc Id use the feature variables using the main border-radius like

feature-border-radius: var(--ha-card-border-radius)

suppose the answer lies here in this PR that was merged in 2024.8 to adjust Tile card features amongst other things

4

Mushroom cards got updated a few hours ago, and in that changelog is another hint hidden:

Also this version makes Mushroom compatible with the new card sizes recommandation from Home Assistant (Dashboard chapter 2: Let’s redesign the cards together! - Home Assistant). You may notice some changes if you are using css override using card mod.

5

Aware of that blog.

The hint is still hidden though … what do you mean exactly?
Other than the generic remark we can notice changes

6

I meant these generic remarks in the blog. :slight_smile:

7

thanks to @Olivier1974 who helped us in 🔹 Card-mod - Add css styles to any lovelace card - #6825 by Olivier1974

I can now confirm the new 2024.8 Tile card Dom path to be card-mod-able again :wink:

before 2024.8 use:

          card_mod:
            style:
              hui-card-features $:

after 2024.8 use:

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

example:

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;
          }

ofc add the card-mod: in front of that.

2 Likes