love this card, any ideas of how I can use this with my RM4 mini Broadlink that controls my ādumbā A/c unit? Iām pretty new to HA and trying to get my head around it. Iāve mapped some buttons but canāt figure out how to actually imlement them into this code?
Hi Guys,
I have created a new light entity to control multiple hue lights in one room:
light:
- platform: group
name: All livingroom lights
entities:
- light.hue_play_links
- light.hue_play_rechts
- light.hue_lightstrip_livingroom
- light.wohnzimmer_deckenlampe
This works pretty good, except for the brightness and temperature sliders, when changing values here always all lights are getting turned on. It would be cool if only the ones that are already on are being changed, any idea how to solve that?
Anyone who has managed to create a card for blinds ( cover card) can kindly share the code please?
Iām using the solution posted here to create a āsmart light groupā, works pretty good:
1 Like
Sure, here it is:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 75px min-content auto 200px
grid-template-rows: min-content
grid-template-areas: |
". time status profile"
cards:
- type: custom:paper-buttons-row
styles:
justify-content: space-between
background: none
margin: 0px 0px 0px 0px
margin-top: 70px
buttons:
- name: '{{ now().strftime(''%H'') }}:{{ now().strftime(''%M'')}}'
styles:
name:
font-weight: 300
font-size: 40px
letter-spacing: '-1px'
position: relative
margin-left: 15px
tap_action:
action: navigate
navigation_path: home
- layout: name_state
name: '{{ now().strftime("%a") }}'
state: '{{ now().strftime("%d")}}. {{ now().strftime("%b") }}'
styles:
button:
width: 70px
height: 32px
position: relative
name:
position: absolute
left: 0
top: 0
font-weight: 400
white-space: nowrap
state:
position: absolute
left: 0
bottom: 0
font-weight: 600
white-space: nowrap
tap_action:
action: navigate
navigation_path: home
- entity: sensor.hue_motion_sensor_1_temperature
icon: mdi:thermometer
layout: icon|name_state
name: '{{ states("sensor.humidity_range") }}'
state: '{{ states("sensor.temperature_range") }}'
styles:
button:
width: 120px
height: 32px
position: relative
left: 0px
icon:
position: absolute
left: 0px
name:
position: absolute
left: 30px
top: 0
font-weight: 400
white-space: nowrap
state:
position: absolute
left: 30px
bottom: 0
font-weight: 600
white-space: nowrap
tap_action:
action: navigate
navigation_path: heating
view_layout:
grid-area: time
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.vacation_mode
state: 'on'
chip:
type: entity
entity: input_boolean.vacation_mode
content_info: none
icon_color: black
use_entity_picture: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: var(--orange);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- condition: user
users:
- 3eea636aa3de4c7f9c662ad29c6e92e0
- condition: state
entity: input_boolean.notifications_julians_iphone
state: 'off'
chip:
type: entity
entity: input_boolean.notifications_julians_iphone
tap_action:
action: navigate
navigation_path: settings
double_tap_action:
action: toggle
content_info: none
icon_color: black
card_mod:
style: |
ha-card {
--chip-background: var(--blue);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: light.all_lights
state: 'on'
chip:
type: entity
entity: sensor.lights_on_count
double_tap_action:
action: call-service
service: light.turn_off
data: {}
target:
entity_id: light.all_lights
icon_color: black
content_info: state
tap_action:
action: navigate
navigation_path: lights
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background: var(--orange);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: binary_sensor.heating
state: 'on'
chip:
type: entity
entity: binary_sensor.heating
icon_color: black
icon: mdi:thermostat
content_info: none
tap_action:
action: navigate
navigation_path: heating
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background: var(--red);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: group.chores
state: 'on'
- entity: input_boolean.vacation_mode
state: 'off'
- entity: alarm_control_panel.security_system
state: armed_home
chip:
type: entity
entity: sensor.chores_on_count
icon_color: black
content_info: state
tap_action:
action: navigate
navigation_path: chores
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background: var(--yellow);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: sensor.dishwasher_status
state_not: 'Off'
chip:
type: template
double_tap_action:
action: call-service
service: input_boolean.turn_off
target:
entity_id: input_boolean.chores_dishwasher
data: {}
entity: sensor.dishwasher_status
icon: |-
{% if is_state('sensor.dishwasher_status', 'Running') %}
mdi:dishwasher
{% elif is_state('sensor.dishwasher_status', 'Clean') %}
mdi:dishwasher-alert
{% elif is_state('sensor.dishwasher_status', 'Idle') %}
mdi:dishwasher
{% else %}
mdi:dishwasher-off
{% endif %}
icon_color: black
tap_action:
action: navigate
navigation_path: kitchen
card_mod:
style: |
ha-card {
--chip-background: {% if is_state('sensor.dishwasher_status', 'Running') %} var(--blue) {% elif is_state('sensor.dishwasher_status', 'Clean') %} var(--green) {% elif is_state('sensor.dishwasher_status', 'Idle') %} var(--yellow) {% else %} var(--contrast10) {% endif %};
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: sensor.washing_machine_status
state_not: 'Off'
chip:
type: template
double_tap_action:
action: call-service
service: input_boolean.turn_off
target:
entity_id: input_boolean.chores_laundry
data: {}
entity: sensor.washing_machine_status
icon: |-
{% if is_state('sensor.washing_machine_status', 'Running') %}
mdi:washing-machine
{% elif is_state('sensor.washing_machine_status', 'Clean') %}
mdi:washing-machine-alert
{% elif is_state('sensor.washing_machine_status', 'Idle') %}
mdi:washing-machine
{% else %}
mdi:washing-machine-off
{% endif %}
icon_color: black
tap_action:
action: navigate
navigation_path: kitchen
card_mod:
style: |
ha-card {
--chip-background: {% if is_state('sensor.washing_machine_status', 'Running') %} var(--blue) {% elif is_state('sensor.washing_machine_status', 'Clean') %} var(--green) {% elif is_state('sensor.washing_machine_status', 'Idle') %} var(--yellow) {% else %} var(--contrast10) {% endif %};
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: binary_sensor.octoprint_printing
state: 'on'
- condition: user
users:
- 3eea636aa3de4c7f9c662ad29c6e92e0
chip:
type: entity
entity: sensor.octoprint_job_percentage
icon_color: black
content_info: state
tap_action:
action: navigate
navigation_path: 3d-printer
icon: mdi:printer-3d
card_mod:
style: |
ha-card {
--chip-background: var(--orange);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- condition: state
entity: sensor.prusalink
state: printing
- condition: user
users:
- 3eea636aa3de4c7f9c662ad29c6e92e0
chip:
type: entity
entity: sensor.prusalink_progress
icon_color: black
content_info: state
tap_action:
action: navigate
navigation_path: 3d-printer
icon: mdi:printer-3d
card_mod:
style: |
ha-card {
--chip-background: var(--orange);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: input_boolean.readytoclean
state: 'on'
chip:
type: entity
entity: input_boolean.readytoclean
content_info: none
icon_color: black
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: var(--purple);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: vacuum.dobby
state_not: docked
- condition: state
entity: vacuum.dobby
state_not: unavailable
chip:
type: entity
entity: vacuum.dobby
content_info: none
icon_color: black
tap_action:
action: navigate
navigation_path: vacuum
card_mod:
style: |
ha-card {
--chip-background: var(--yellow);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: switch.coffee_maker_outlet
state: 'on'
chip:
type: entity
entity: switch.coffee_maker_outlet
content_info: none
icon_color: black
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: var(--green);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: switch.fan_outlet
state: 'on'
chip:
type: entity
entity: switch.fan_outlet
content_info: none
icon_color: black
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: var(--blue);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: switch.desk_webcam
state: 'on'
- condition: user
users:
- 3eea636aa3de4c7f9c662ad29c6e92e0
chip:
type: entity
entity: switch.desk_webcam
content_info: none
icon_color: black
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: var(--green);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- condition: user
users:
- 3eea636aa3de4c7f9c662ad29c6e92e0
- 82def695e9504f63b1eb09150073737d
- condition: or
conditions:
- condition: and
conditions:
- entity: binary_sensor.is_alarm_on
state: 'on'
- entity: sensor.time_of_day
state_not: day
- entity: sensor.time_of_day
state_not: morning
- entity: alarm_control_panel.security_system
state_not: armed_away
- entity: alarm_control_panel.security_system
state_not: triggered
- condition: state
entity: input_boolean.sound_alarm_is_running
state: 'on'
chip:
type: entity
entity: sensor.wake_time_1
icon: mdi:alarm
icon_color: black
tap_action:
action: navigate
navigation_path: alarm
card_mod:
style: |
ha-card {
--chip-background: var(--yellow);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
.content {
{{ 'animation: alarm 0.8s ease infinite;' if is_state('input_boolean.sound_alarm_is_running','on') }}
transform-origin: 50% 90%;
}
@keyframes alarm {
0%, 80%, 100% { transform: translateY(0); }
10% { transform: translateY(-2px) rotate(-8deg); }
20% { transform: translateY(-2px) rotate(9deg); }
30% { transform: translateY(-2px) rotate(-5deg); }
40% { transform: translateY(-2px) rotate(4deg); }
50% { transform: translateY(0); }
60% { transform: translateY(-1.2px) }
}
- type: conditional
conditions:
- entity: binary_sensor.guest_room_is_alarm_on
state: 'on'
- entity: sensor.time_of_day
state_not: day
- entity: sensor.time_of_day
state_not: morning
- entity: alarm_control_panel.security_system
state_not: armed_away
- entity: alarm_control_panel.security_system
state_not: triggered
- condition: user
users:
- 4a8a45a495f54e808c3f4c4cd1639291
chip:
type: entity
entity: sensor.guest_room_wake_time_1
icon: mdi:alarm
icon_color: black
tap_action:
action: navigate
navigation_path: guest-room-alarm
card_mod:
style: |
ha-card {
--chip-background: var(--yellow);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
.content {
{{ 'animation: alarm 0.8s ease infinite;' if is_state('input_boolean.guest_room_sound_alarm_is_running','on') }}
transform-origin: 50% 90%;
}
@keyframes alarm {
0%, 80%, 100% { transform: translateY(0); }
10% { transform: translateY(-2px) rotate(-8deg); }
20% { transform: translateY(-2px) rotate(9deg); }
30% { transform: translateY(-2px) rotate(-5deg); }
40% { transform: translateY(-2px) rotate(4deg); }
50% { transform: translateY(0); }
60% { transform: translateY(-1.2px) }
}
- type: conditional
conditions:
- entity: binary_sensor.raspberry_pi_health_attention
state: 'on'
- condition: user
users:
- 3eea636aa3de4c7f9c662ad29c6e92e0
chip:
type: entity
entity: binary_sensor.raspberry_pi_health_attention
icon_color: black
icon: mdi:minidisc
content_info: none
tap_action:
action: navigate
navigation_path: wifi
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background: var(--red);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: sensor.junglemoneynas_volume_1_status
state_not: normal
- condition: user
users:
- 3eea636aa3de4c7f9c662ad29c6e92e0
chip:
type: entity
entity: sensor.junglemoneynas_volume_1_status
icon_color: black
icon: mdi:nas
content_info: none
tap_action:
action: navigate
navigation_path: nas
card_mod:
style: |
ha-card {
--chip-background: var(--red);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: sensor.backup_state
state_not: backed_up
chip:
type: entity
entity: sensor.backup_state
icon_color: black
icon: mdi:cloud-alert-outline
content_info: none
tap_action:
action: navigate
navigation_path: wifi
card_mod:
style: |
ha-card {
--chip-background: var(--red);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: binary_sensor.battery_health_attention
state: 'on'
- condition: user
users:
- 3eea636aa3de4c7f9c662ad29c6e92e0
chip:
type: entity
entity: binary_sensor.battery_health_attention
icon: mdi:battery-10
icon_color: black
content_info: none
tap_action:
action: navigate
navigation_path: battery
card_mod:
style: |
ha-card {
--chip-background: var(--red);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- condition: state
entity: todo.arbeit
state_not: '0'
- condition: state
entity: input_boolean.chores_grocery_shooping
state: 'on'
- condition: state
entity: alarm_control_panel.security_system
state_not: armed_night
chip:
type: entity
entity: todo.arbeit
icon_color: black
tap_action:
action: navigate
navigation_path: settings#shopping-popup
icon: mdi:cart-outline
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background: var(--blue);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- condition: user
users:
- 3eea636aa3de4c7f9c662ad29c6e92e0
- condition: state
entity: todo.julian
state_not: '0'
chip:
type: entity
entity: todo.julian
icon_color: black
tap_action:
action: navigate
navigation_path: settings
icon: mdi:list-status
card_mod:
style: |
ha-card {
--chip-background: var(--purple);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: template
entity: alarm_control_panel.security_system
icon: >-
{% if is_state('alarm_control_panel.security_system', 'armed_home') %}
mdi:shield-home-outline
{% elif is_state('alarm_control_panel.security_system', 'armed_away')
%}
mdi:shield-lock-outline
{% elif is_state('alarm_control_panel.security_system', 'triggered')
%}
mdi:shield-alert-outline
{% elif is_state('alarm_control_panel.security_system', 'armed_night')
%}
mdi:shield-moon-outline
{% elif is_state('alarm_control_panel.security_system', 'disarmed') %}
mdi:shield-off-outline
{% else %}
mdi:shield-alert-outline
{% endif %}
icon_color: black
content: |-
{% if is_state('alarm_control_panel.security_system', 'triggered') or
is_state('alarm_control_panel.alexa_guard_431b6', 'triggered') %}
TRIGGERED
{% elif is_state('alarm_control_panel.security_system', 'armed_home') %}
Home
{% elif is_state('alarm_control_panel.security_system', 'armed_night') %}
Night
{% elif is_state('alarm_control_panel.security_system', 'armed_away') or
is_state('alarm_control_panel.alexa_guard_431b6', 'armed_away') %}
Armed Away
{% else %}
Error
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background: {% if is_state('alarm_control_panel.security_system', 'armed_home') %} var(--green) {% elif is_state('alarm_control_panel.security_system', 'armed_night') %} var(--blue) {% else %} var(--red) {% endif %};
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- entity: group.window_sensors
state: 'on'
chip:
type: entity
entity: group.window_sensors
icon_color: black
tap_action:
action: more-info
content_info: none
icon: mdi:window-open-variant
card_mod:
style: |
ha-card {
--chip-background: var(--red);
--icon-color: var(--black);
--text-color: black;
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: template
double_tap_action:
action: call-service
service: lock.lock
data: {}
target:
entity_id: lock.flat_door
entity: lock.flat_door
icon: |-
{% if is_state('lock.flat_door', 'locked') %}
mdi:lock
{% else %}
mdi:lock-open
{% endif %}
icon_color: black
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--green)' if states('lock.flat_door') == 'locked' else 'var(--red)' }};
--color: var(--black);
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- condition: state
entity: binary_sensor.home_assistant_update
state: 'on'
- condition: user
users:
- 3eea636aa3de4c7f9c662ad29c6e92e0
chip:
type: entity
entity: binary_sensor.home_assistant_update
content_info: none
icon_color: black
tap_action:
action: navigate
navigation_path: update
card_mod:
style: |
ha-card {
--chip-background: var(--red);
--icon-color: var(--black);
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
alignment: end
view_layout:
grid-area: status
card_mod:
style: |
ha-card {
margin-top: 70px;
--color: black;
}
- type: custom:button-card
entity: |
[[[
if (user.name == "Julian") return "person.julian";
else return "person." + user.name.toLowerCase();
]]]
name: '[[[return "Hey, " + user.name +"!"]]]'
label: |
[[[
if (entity.state == "home") return "Welcome home.";
else return "See you later.";
]]]
show_label: true
icon: mdi:account
show_entity_picture: true
layout: icon_state_name2nd
tap_action:
action: navigate
navigation_path: settings
haptic: success
styles:
icon:
- width: 40px
img_cell:
- justify-content: center
name:
- font-family: Helvetica
- justify-self: end
- color: var(--contrast20)
- font-size: 14px
- font-weight: 600
- margin-top: '-16px'
- margin-bottom: 2px
- overflow: visible
- padding-right: 20px
card:
- background-color: transparent
- box-shadow: none
- border-radius: 24px
- border: 0
- z-index: 1
- margin-top: 60px
- margin-bottom: 5px
entity_picture:
- border-radius: 50%
- border: |
[[[
if (entity.state == 'home') {
return '2px solid var(--green)';
} else {
return 'none';
}
]]]
label:
- font-family: Helvetica
- justify-self: start
- color: var(--contrast20)
- font-size: 12px
- padding-right: 20px
custom_fields:
badge:
- position: absolute
- left: 38px
- top: 5px
custom_fields:
badge:
card:
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
show_icon: true
show_name: false
icon: mdi:home
state:
- value: home
icon: mdi:home
styles:
card:
- background: var(--green)
- value: not_home
icon: mdi:home-export-outline
styles:
card:
- background: var(--red)
styles:
card:
- border-radius: 50%
- width: 16px
- height: 16px
- background: none
icon:
- color: black
- width: 12px
view_layout:
grid-area: profile
view_layout:
grid-area: header
6 Likes
Thank you.
I took your code and also what you wrote before that. And I did like this:
Itās OKā¦? Or is there another way
views:
- type: custom:grid-layout
title: Home
layout:
grid-template-columns: 120px 90%
grid-template-rows: auto
grid-template-areas: |
"header header header"
"sidebar . main"
"footer footer footer"
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 75px min-content auto 200px
grid-template-rows: min-content
grid-template-areas: |
". time status profile"
view_layout:
grid-area: header
cards:
It is not entirely correct. The first Grid for the homepage you can put underneath the home view. So if you click on edit on the view you can pick Grid and then add the layout code there. Hope that makes sense.
1 Like
Thanks, Iāll try to play it.
One more little thing please
Can you please share the washing machine code? to this code.
entity: sensor.washing_machine_status
icon: |-
{% if is_state('sensor.washing_machine_status', 'Running') %}
mdi:washing-machine
{% elif is_state('sensor.washing_machine_status', 'Clean') %}
mdi:washing-machine-alert
{% elif is_state('sensor.washing_machine_status', 'Idle') %}
mdi:washing-machine
{% else %}
mdi:washing-machine-off
{% endif %}
Quick question. Did anybody already make the new section dashboards work with the rounded template?
how you made the pages bar up (or down) to disappear and can use this space ?
Someone succeeded to make sticky buttons? I need to add something before to raw configuration?
You can use kiosk mode for that. Get it form HACS.
Like this but only thing I canāt work out is how you have set up the sensor to record the ranges for both humidity and temperature
name: ā{{ states(āsensor.humidity_rangeā) }}ā
state: ā{{ states(āsensor.temperature_rangeā) }}ā
I have a sensor that states the minimum and the maximum for each temperature and humidity through helpers (combine state of multiple sensors) and then I have a template sensor set up like this:
{{ states('sensor.temperature_minimum') + " - " + states('sensor.temperature_maximum') + " Ā°C" }}```Thanks for that, was trying to find out how to do that before asking but everything I found seemed really complicated and a lot of effort.
What do you use the input_boolean.notifications_julians_iphone for?
you succeeded to create with it sticky button card? did add something to the raw configuration? the Version from has is 0.1, not the new one he put here.
I did, made a toggle for hide this. but now struggeling with this
he explain how to create, with rounded theme. but I get it still on the top. I need to add something more?
1 Like
Where did you add the code? In which file?
here try this part:
type: custom:mod-card
card_mod:
style: |
@media (min-width:180px) {
ha-card {
background: black;
border-radius: 100px;
position: fixed;
bottom: 10px;
left: 10px;
z-index: 1;
width: calc(100% - 20px);
padding: 5px;
}
}
@media (min-width:800px) {
ha-card {
width: calc(60% - 30px);
left: calc(20% + 43px);
}
}
card:
type: custom:swipe-card
cards:
- type: grid
square: false
columns: 5
cards:
- type: custom:button-card
icon: mdi:security
tap_action:
action: navigate
navigation_path: '#alarm'
1 Like