Custom Features for Home Assistant Cards - Buttons, Dropdowns, Selectors, Sliders, Spinboxes, and Toggles

Share your Projects! Dashboards & Frontend
, , ,
325

I’m trying to replace the icon with an image in the Selector section.
Unfortunately, your example didn’t work. How can I add an image?

type: tile
entity: climate.salon_klima_2
vertical: false
features:
  - type: custom:service-call
    entries:
      - type: selector
        entity_id: climate.salon_klima_2
        options:
          - entity_id: climate.salon_klima_2
            option: "off"
            tap_action:
              action: call-service
              service: climate.set_hvac_mode
              target:
                entity_id: climate.salon_klima_2
              data:
                hvac_mode: "off"
            icon: mdi:power
            styles: |-
              :host {
                transition: width 0.5s ease;
                --icon-color: red;
                .icon {
                  --mdc-icon-size: 32px;
                }
              }
          - entity_id: climate.salon_klima_2
            option: fan_only
            tap_action:
              action: call-service
              service: climate.set_hvac_mode
              target:
                entity_id: climate.salon_klima_2
              data:
                hvac_mode: fan_only
            icon: mdi:fan
            styles: |-
              :host {
                transition: width 0.5s ease;
                --icon-color: blue;
                .icon {
                  --mdc-icon-size: 32px;
                }
              }
          - entity_id: climate.salon_klima_2
            option: dry
            tap_action:
              action: call-service
              service: climate.set_hvac_mode
              target:
                entity_id: climate.salon_klima_2
              data:
                hvac_mode: dry
            icon: mdi:water-percent
            styles: |-
              :host {
                transition: width 0.5s ease;
                --icon-color: cyan;
                .icon {
                  --mdc-icon-size: 32px;
                }
              }
          - entity_id: climate.salon_klima_2
            option: cool
            tap_action:
              action: call-service
              service: climate.set_hvac_mode
              target:
                entity_id: climate.salon_klima_2
              data:
                hvac_mode: cool
            icon: mdi:snowflake
            styles: |-
              :host {
                transition: width 0.5s ease;
                --icon-color: gray;
                .icon {
                  --mdc-icon-size: 32px;
                }
              }
features_position: bottom
card_mod:
  style: |
    ha-card {
      height: auto !important;
      padding-top: 10px !important;
      background: none !important;
      border: none !important;
      .content {
        display: none !important;
      }
    }

Also, is there a way to cancel the hover effect that occurs when it comes to the frame?

355×119 4.37 KB

326

That config is a bit out of date, but you can do the same using the newer CSS styles option. In the configuration UI at the option level put this in the CSS styles field in the appearance section:

.background::before {
  background-image: url("/local/path/to/your/picture.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

Disabling the hover color is a bit trickier as there’s a few CSS variables at play there, but these styles at the selector level should make it so that only the currently selected option is highlighted and hovered options are not highlighted.

.option:not(.selected) {
  --color: transparent;
  --opacity: 1;
  --hover-opacity: 1;
}
1 Like
327

Thank you so much for your answer.
I was able to put an image instead of an icon.
When I add animations and effects, the entire button is affected.
Is there a way to put it inside the tag? (I think this can be considered a request)

I wasn’t referring to the buttons inside the selector, but rather the part that appears and then disappears around the edges of the card when you hover over it. (This is probably related to “tile card”)

I will share the progress I’ve made here after working on it a bit more.

328

I’m not sure what you mean. Do you mean the accessibility focus outline? Or the selector selected option background color?

329

I’m referring to the outermost hover effect that occurs when I hover over it with the mouse.

330

Yeah that’s the tile card ripple, outside of these features. You can hide it with card-mod at the root of the card config:

card_mod:
  style: |
    ha-tile-container {
      --ha-ripple-hover-opacity: 0;
      --ha-ripple-pressed-opacity: 0;
    }

You could also consider using custom features card, which is a headless container (like a vertical/horizontal stack or grid card) for custom card features that doesn’t have it’s own ripple or action.

1 Like