Form my window Roller Shutters I wanted to have possibility of manual Up & Down control, Slider control and Preset Buttons. I also wanted to have both Roller Shutters in same section, without any shadow or spacer in between.
I searched forums and FB Groups and I found some pieces of code hare and there but nothing worked as I wanted to.
I then found custom:vertical-stack-in-card and everything changed.
To achieve what you see on the pictures I used:
- custom:vertical-stack-in-card
https://github.com/ofekashery/vertical-stack-in-card - custom:button-card
https://github.com/custom-cards/button-card - custom:slider-entity-row
https://github.com/thomasloven/lovelace-slider-entity-row
The code for everything is:
type: custom:vertical-stack-in-card cards: - type: vertical-stack cards: - type: entities entities: - entity: cover.master_bedroom_shutter_1 name: '' title: Master Bedroom Left Screen state_color: false show_header_toggle: true - type: horizontal-stack cards: - type: custom:button-card tap_action: action: call-service service: cover.set_cover_position service_data: position: 0 entity_id: cover.master_bedroom_shutter_1 entity: cover.master_bedroom_shutter_1 name: Close show_icon: false card_mod: style: | ha-card { --ha-card-background: {% if is_state_attr('cover.master_bedroom_shutter_1', 'current_position', 0) %} green; color: white; {% endif %} } styles: card: - border: 0px 0px 0px 0px - border-radius: 0% - box-shadow: 0px 0px 0px 0px - type: custom:button-card tap_action: action: call-service service: cover.set_cover_position service_data: position: 25 entity_id: cover.master_bedroom_shutter_1 entity: cover.master_bedroom_shutter_1 name: 25% show_icon: false card_mod: style: | ha-card { --ha-card-background: {% if is_state_attr('cover.master_bedroom_shutter_1', 'current_position', 25) %} green; color: white; {% endif %} } styles: card: - border: 0px 0px 0px 0px - border-radius: 0% - box-shadow: 0px 0px 0px 0px - type: custom:button-card tap_action: action: call-service service: cover.set_cover_position service_data: position: 50 entity_id: cover.master_bedroom_shutter_1 entity: cover.master_bedroom_shutter_1 name: 50% show_icon: false card_mod: style: | ha-card { --ha-card-background: {% if is_state_attr('cover.master_bedroom_shutter_1', 'current_position', 50) %} green; color: white; {% endif %} } styles: card: - border: 0px 0px 0px 0px - border-radius: 0% - box-shadow: 0px 0px 0px 0px - type: custom:button-card tap_action: action: call-service service: cover.set_cover_position service_data: position: 75 entity_id: cover.master_bedroom_shutter_1 entity: cover.master_bedroom_shutter_1 name: 75% show_icon: false card_mod: style: | ha-card { --ha-card-background: {% if is_state_attr('cover.master_bedroom_shutter_1', 'current_position', 75) %} green; color: white; {% endif %} } styles: card: - border: 0px 0px 0px 0px - border-radius: 0% - box-shadow: 0px 0px 0px 0px - type: custom:button-card tap_action: action: call-service service: cover.set_cover_position service_data: position: 100 entity_id: cover.master_bedroom_shutter_1 entity: cover.master_bedroom_shutter_1 name: Open show_icon: false card_mod: style: | ha-card { --ha-card-background: {% if is_state_attr('cover.master_bedroom_shutter_1', 'current_position', 100) %} green; color: white; {% endif %} } styles: card: - border: 0px 0px 0px 0px - border-radius: 0% - box-shadow: 0px 0px 0px 0px - type: entities entities: - type: custom:slider-entity-row entity: cover.master_bedroom_shutter_1 hide_state: false grow: true full_row: true step: 5 style: .: | ha-card { --ha-card-box-shadow: 0px; height: 30px; } '#states div': slider-entity-row: $: | ha-slider { height: 17px; border: 1px solid grey; border-radius: 10px; padding: 9px 2px 10px 2px; } slider-entity-row: $: ha-slider: $: '#sliderKnob': > .slider-knob {border-radius: 10px} .slider-knob {padding: 30px 30px 0px 0px} .slider-knob {border: 1px solid rgba(100,100,100, 0.4)} .slider-knob {background-color: rgba(255,255,255, 0.9)} .slider-knob {width: 0px} .slider-knob {height: 0px} .slider-knob-inner {border: 0px} .slider-knob-inner {background-color: rgba(0,0,0,0.0)} .slider-knob-inner::after {background-color: rgba(0,0,0,0.0)} .slider-knob-inner::after {border: 0px)} .slider-knob-inner::before {background-color: rgba(0,0,0, 0.6)} .slider-knob-inner::before {border: 0px)} paper-progress: $: > #progressContainer {background-color: rgba(0, 0, 0, 0.0)} #primaryProgress {background-color: rgba(0, 0, 0, 0.0)} state_color: false show_header_toggle: true - type: vertical-stack cards: - type: entities entities: - entity: cover.master_bedroom_shutter_2 name: '' title: Master Bedroom Right Screen state_color: false show_header_toggle: true - type: horizontal-stack cards: - type: custom:button-card tap_action: action: call-service service: cover.set_cover_position service_data: position: 0 entity_id: cover.master_bedroom_shutter_2 entity: cover.master_bedroom_shutter_2 name: Close show_icon: false card_mod: style: | ha-card { --ha-card-background: {% if is_state_attr('cover.master_bedroom_shutter_2', 'current_position', 0) %} green; color: white; {% endif %} } styles: card: - border: 0px 0px 0px 0px - border-radius: 0% - box-shadow: 0px 0px 0px 0px - type: custom:button-card tap_action: action: call-service service: cover.set_cover_position service_data: position: 25 entity_id: cover.master_bedroom_shutter_2 entity: cover.master_bedroom_shutter_2 name: 25% show_icon: false card_mod: style: | ha-card { --ha-card-background: {% if is_state_attr('cover.master_bedroom_shutter_2', 'current_position', 25) %} green; color: white; {% endif %} } styles: card: - border: 0px 0px 0px 0px - border-radius: 0% - box-shadow: 0px 0px 0px 0px - type: custom:button-card tap_action: action: call-service service: cover.set_cover_position service_data: position: 50 entity_id: cover.master_bedroom_shutter_2 entity: cover.master_bedroom_shutter_2 name: 50% show_icon: false card_mod: style: | ha-card { --ha-card-background: {% if is_state_attr('cover.master_bedroom_shutter_2', 'current_position', 50) %} green; color: white; {% endif %} } styles: card: - border: 0px 0px 0px 0px - border-radius: 0% - box-shadow: 0px 0px 0px 0px - type: custom:button-card tap_action: action: call-service service: cover.set_cover_position service_data: position: 75 entity_id: cover.master_bedroom_shutter_2 entity: cover.master_bedroom_shutter_2 name: 75% show_icon: false card_mod: style: | ha-card { --ha-card-background: {% if is_state_attr('cover.master_bedroom_shutter_2', 'current_position', 75) %} green; color: white; {% endif %} } styles: card: - border: 0px 0px 0px 0px - border-radius: 0% - box-shadow: 0px 0px 0px 0px - type: custom:button-card tap_action: action: call-service service: cover.set_cover_position service_data: position: 100 entity_id: cover.master_bedroom_shutter_2 entity: cover.master_bedroom_shutter_2 name: Open show_icon: false card_mod: style: | ha-card { --ha-card-background: {% if is_state_attr('cover.master_bedroom_shutter_2', 'current_position', 100) %} green; color: white; {% endif %} } styles: card: - border: 0px 0px 0px 0px - border-radius: 0% - box-shadow: 0px 0px 0px 0px - type: entities entities: - type: custom:slider-entity-row entity: cover.master_bedroom_shutter_2 hide_state: false grow: true full_row: true step: 5 style: .: | ha-card { --ha-card-box-shadow: 0px; height: 30px; } '#states div': slider-entity-row: $: | ha-slider { height: 17px; border: 1px solid grey; border-radius: 10px; padding: 9px 2px 10px 2px; } slider-entity-row: $: ha-slider: $: '#sliderKnob': > .slider-knob {border-radius: 10px} .slider-knob {padding: 30px 30px 0px 0px} .slider-knob {border: 1px solid rgba(100,100,100, 0.4)} .slider-knob {background-color: rgba(255,255,255, 0.9)} .slider-knob {width: 0px} .slider-knob {height: 0px} .slider-knob-inner {border: 0px} .slider-knob-inner {background-color: rgba(0,0,0,0.0)} .slider-knob-inner::after {background-color: rgba(0,0,0,0.0)} .slider-knob-inner::after {border: 0px)} .slider-knob-inner::before {background-color: rgba(0,0,0, 0.6)} .slider-knob-inner::before {border: 0px)} paper-progress: $: > #progressContainer {background-color: rgba(0, 0, 0, 0.0)} #primaryProgress {background-color: rgba(0, 0, 0, 0.0)} state_color: false show_header_toggle: true
Below is a Light Mode screenshot from my phone.
