I use it as a condition in all of my notification automations, so if it is off I get no notifications.
Try this - hide_control: true
not sure if it works!
where to add it?
you have a typo on your card type
type: custom:bubble-card
1 Like
someone succeeded to create a way to control only the active lights in specific room?
how can we achieve it?
i struggle in styling my slider-card…
border-radius for the container is not working, can somebody help me finding the problem?
fixed it, i had to apply the rounded theme first, my bad
1 Like
i tried my best, with my first modifications on a card.
This card with two sliders can control position and tilt for shutters.
Any modifications and adjustments are welcome, but for me this is a good starting point for now 
type: custom:button-card
name: Studio west 1
icon: mdi:blinds-horizontal
entity: cover.dg_st_fenster_west_1
tap_action:
action: call-service
service: cover.close_cover
target:
entity_id:
- cover.dg_st_fenster_west_1
hold_action:
action: more-info
double_tap_action:
action: call-service
service: cover.open_cover
target:
entity_id:
- cover.dg_st_fenster_west_1
custom_fields:
position:
card:
type: custom:my-slider-v2
entity: cover.dg_st_fenster_west_1
mode: position
vertical: false
flipped: false
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 16px
- padding: 0 8px
- background: |
[[[
if (entity.state == "closed") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
else return "var(--contrast4)";
]]]
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: |
[[[
if (entity.state == "open") return "white";
if (entity.state == "closed") return "black";
else return "white";
]]]
- top: 2px
- right: '-6px'
- height: 12px
- width: 12px
- border-radius: 100px
gap:
card:
type: custom:gap-card
height: 8
tilt:
card:
type: custom:my-slider-v2
entity: cover.dg_st_fenster_west_1
mode: tilt
vertical: false
flipped: false
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 16px
- padding: 0 8px
- background: |
[[[
if (entity.state == "closed") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
else return "var(--contrast4)";
]]]
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: |
[[[
if (entity.state == "open") return "white";
if (entity.state == "closed") return "black";
else return "white";
]]]
- top: 2px
- right: '-6px'
- height: 12px
- width: 12px
- border-radius: 100px
styles:
grid:
- grid-template-areas: '"i" "n" "position" "gap" "tilt"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
card:
- background: var(--contrast2)
- height: 130px
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 24px
- padding-bottom: 10px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 13px
- margin: 4px 0 12px 0
- color: var(--contrast8)
state:
- value: open
icon: mdi:blinds-horizontal
styles:
card:
- background: var(--contrast2)
icon:
- color: white
name:
- color: white
- value: closed
icon: mdi:blinds-horizontal-closed
styles:
card:
- background: rgb(225, 175, 209)
icon:
- color: black
name:
- color: black
1 Like
Hey guys, been developing this dashboard view for a while, needs some work still but I thought I would share as I’ve taken bits and pieces and made it my own…
6 Likes
Very nice, If you are willing can you share the code for Garbage card and the 6 chip icon below garage please? thanks
Hey all,
Can you help me with this notification card? I’m trying to get it so that I can easily see when windows or doors are open, but using the name card makes it go over the card width. How can I get it so that the name basically doesn’t get cut off?
Thanks
type: custom:button-card
entity: binary_sensor.jake_s_room_window_contact
name: Jake's Room Window Open
show_icon: false
tap_action:
action: none
styles:
card:
- border-radius: 25px
- border-style: none
- box-shadow: 0px 0px 10px -9px black
- background: |
[[[
return 'var(--red)';
]]]
grid:
- grid-template-areas: '"icon_cells" "n"'
- grid-template-rows: 24px min-content 24px min-content min-content
- grid-template-columns: 1fr
custom_fields:
icon_cells:
- justify-self: start
- margin-top: 12px
- margin-left: 15px
icon1:
- position: absolute
- width: 8em
- opacity: 20%
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
- transform: rotate(-20deg)
- justify-self: end
- margin-top: 20px
name:
- font-size: 100%
- font-weight: bold
- justify-self: start
- margin-top: 10%
- margin-left: 15px
- color: black
custom_fields:
icon_cells: |
[[[
return `<ha-icon
icon="mdi:window-open"
style="width: 25px; height: 25px; color: black;">
</ha-icon>`;
]]]
icon1: |
[[[
return '<ha-icon icon="mdi:window-closed"></ha-icon>';
]]]
First you should clean up the code a little bit.
- background: |
[[[
return ‘var(–red)’;
]]]
you can just use:
- background: var(--red)
for the name, you can just use a smaller font-size or add a line break. See below the
in the text.
name: Jake's Room<br>Window Open
If you like, you can use my decluttering card template.
You can use it for switches or sensors. It has the option for the rotated background image, as well.
you can also define the on and off states it shozld monitor to switch backgrounds or icons.
just define it in the default variables.
Make a grid card with 2 columns and square false. This is important, as its using height 100% and an aspect ratio.
custom_button_switch:
default:
- entity: null
- height: 100%
- name: Here name
- name_color: var(--orange)
- label: here label
- state_on: 'on'
- state_off: 'off'
- operator_on: '=='
- operator_off: '=='
- icon_on: here icon on
- icon_off: here icon off
- icon: null
- icon_bottom_on: mdi:toggle-switch-outline
- icon_bottom_off: mdi:toggle-switch-off-outline
- background_off: null
- background_on: var(--orange)
- iconback_on: none -> no icon
- iconback_off: none -> no icon
card:
type: custom:button-card
entity: '[[entity]]'
name: '[[name]]'
icon: '[[icon]]'
label: '[[label]]'
show_name: true
show_icon: true
show_label: true
show_state: false
styles:
grid:
- grid-template-areas: '"i ." "l icon" "n icon"'
- grid-template-columns: 1fr 1fr
card:
- height: 100%
- padding: 1rem
- background: '[[background_off]]'
- aspect-ratio: 5/3
img_cell:
- width: 24px
- height: 24px
- align-self: start
- justify-self: start
- overflow: hidden
icon:
- width: 24px
- overflow: hidden
name:
- text-align: left
- font-size: 14px
- color: '[[name_color]]'
- font-weight: 500
- justify-self: start
- align-self: end
- overflow: visible
label:
- text-align: left
- font-size: 12px
- color: var(--contrast20)
- opacity: 0.6
- justify-self: start
- align-self: end
- overflow: visible
custom_fields:
icon:
- width: 24px
- justify-self: end
- align-self: end
- z-index: 1
iconback:
- width: 6em
- position: absolute
- top: 10%
- left: 50%
- overflow: visible
- opacity: 20%
- color: var(--white)
- transform: rotate(-20deg)
state:
- value: '[[state_off]]'
operator: '[[operator_off]]'
icon: '[[icon_off]]'
styles:
card:
- background: '[[background_off]]'
icon:
- color: var(--contrast20)
custom_fields:
icon:
- color: var(--contrast20)
iconback:
- color: var(--contrast20)
- value: '[[state_on]]'
operator: '[[operator_on]]'
icon: '[[icon_on]]'
styles:
card:
- background: '[[background_on]]'
name:
- color: var(--white)
label:
- color: var(--black)
- opacity: 0.6
icon:
- color: var(--white)
custom_fields:
icon:
- color: var(--white)
iconback:
- color: var(--white)
custom_fields:
icon: |
[[[
if (entity.state [[operator_on]] "[[state_on]]"){
return '<ha-icon icon=[[icon_bottom_on]]></ha-icon>';
} else {
return '<ha-icon icon=[[icon_bottom_off]]></ha-icon>';
}
]]]
iconback: |
[[[
if (entity.state [[operator_on]] "[[state_on]]"){
return '<ha-icon icon=[[iconback_on]]></ha-icon>';
} else {
return '<ha-icon icon=[[iconback_off]]></ha-icon>';
}
]]]
hold_action:
action: more-info
I just forgot to mention. If you want the card to display the state of the window sensor just use this as label variable.
label: >-
[[[ \n var state = states['binary_sensor.YOUR_SENSOR_NAME'].state; \n if (state ==
'on') { \n return 'open'; \n } \n if (state == 'off') { \n return
'closed'; \n } \n ]]]
You can use text-wrap to automatically add line breaks
name:
- text-wrap: wrap
2 Likes
How do you set different layouts for smartphone and larger displays such as PCs ?
By the way. Thanks for sharing your amazing theme (MiniHass). I’m just combining yours and Leons into one theme and add a little bit of my own style. Tough, lots of work, especially cause I’m creating some animated icons.
Cool, can’t wait to see what you come up with
You mind sharing your room card/room navigation card?
I like the info (temperature, humidity and motion) and the slider for the lights. Would assume that they controll all of the lights in each room?
Overall pretty good looking dashboard! Can’t wait to see more of it!
Sure here it is:
type: custom:button-card
name: Living Room
label: |
[[[
return states['sensor.living_room_temperature'].state + '<span style="font-size:0.7em">°C</span>' + ' | ' + states['sensor.living_room_humidity'].state + '<span style="font-size:0.7em">%</span>' + ' | ' + states['climate.living_room'].state;
]]]
show_label: true
icon: mdi:sofa-outline
entity: light.living_room_lights
tap_action:
action: navigate
navigation_path: living-room
haptic: medium
hold_action:
action: toggle
haptic: medium
double_tap_action:
action: call-service
service: script.living_room_double_tap_action
haptic: success
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: '[[[ return entity.entity_id ]]]'
colorMode: brightness
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 16px
- padding: 0 8px
- background: |
[[[
if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
else return "var(--contrast4)";
]]]
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: |
[[[
if (entity.state == "on") return "var(--black)";
if (entity.state == "off") return "var(--contrast20)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: '-6px'
- height: 12px
- width: 12px
- border-radius: 100px
icons:
card:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: sensor.living_room_next_timer
state_not: unknown
chip:
type: entity
entity: sensor.living_room_next_timer
content_info: none
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background: transparent;
--color: {{ 'var(--black)' if is_state('light.living_room_lights', 'on') else 'var(--contrast20)' }};
--chip-icon-size: 16px;
margin-left: -10px;
border: none;
padding: 0px!important;
border-radius: 100px!important;
box-shadow: none !important;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- condition: state
entity: media_player.living_room
state: playing
chip:
type: entity
entity: media_player.living_room
content_info: none
icon: mdi:music
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-background: transparent;
--color: {{ 'var(--black)' if is_state('light.living_room_lights', 'on') else 'var(--contrast20)' }};
--chip-icon-size: 16px;
margin-left: -10px;
border: none;
padding: 0px!important;
border-radius: 100px!important;
box-shadow: none !important;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_occupancy
state: 'on'
chip:
type: entity
entity: input_boolean.living_room_occupancy
tap_action:
action: more-info
icon: mdi:light-switch
content_info: none
card_mod:
style: |
ha-card {
--chip-background: transparent;
--color: {{ 'var(--black)' if is_state('light.living_room_lights', 'on') else 'var(--contrast20)' }};
--chip-icon-size: 16px;
margin-left: -10px;
border: none;
padding: 0px!important;
border-radius: 100px!important;
box-shadow: none !important;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_night_mode
state: 'on'
chip:
type: entity
entity: input_boolean.living_room_night_mode
tap_action:
action: more-info
content_info: none
card_mod:
style: |
ha-card {
--chip-background: transparent;
--color: {{ 'var(--black)' if is_state('light.living_room_lights', 'on') else 'var(--contrast20)' }};
--chip-icon-size: 16px;
margin-left: -10px;
border: none;
padding: 0px!important;
border-radius: 100px!important;
box-shadow: none !important;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- condition: state
entity: binary_sensor.living_room_window_door_sensor
state: 'on'
chip:
type: entity
entity: binary_sensor.living_room_window_door_sensor
tap_action:
action: more-info
content_info: none
icon: mdi:window-open-variant
card_mod:
style: |
ha-card {
--chip-background: transparent;
--color: {{ 'var(--black)' if is_state('light.living_room_lights', 'on') else 'var(--contrast20)' }};
--chip-icon-size: 16px;
margin-left: -10px;
border: none;
padding: 0px!important;
border-radius: 100px!important;
box-shadow: none !important;
--primary-text-color: var(--contrast20);
- type: conditional
conditions:
- condition: state
entity: binary_sensor.living_room_presence_sensor_occupancy
state: 'on'
chip:
type: entity
entity: binary_sensor.living_room_presence_sensor_occupancy
tap_action:
action: more-info
content_info: none
card_mod:
style: |
ha-card {
--chip-background: transparent;
--color: {{ 'var(--black)' if is_state('light.living_room_lights', 'on') else 'var(--contrast20)' }};
--chip-icon-size: 16px;
margin-left: -10px;
border: none;
padding: 0px!important;
border-radius: 100px!important;
box-shadow: none !important;
--primary-text-color: var(--contrast20);
alignment: end
styles:
grid:
- grid-template-areas: '"i icons" "n n" "l l" "slider slider"'
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content min-content min-content min-content
card:
- font-family: Helvetica
- background: |
[[[
if (entity.state == "on") return "var(--yellow)";
else return "var(--contrast2)";
]]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 28px
icon:
- width: 28px
- height: 28px
- color: |
[[[
if (entity.state == "on") return "var(--black)";
else return "var(--contrast20)";
]]]
name:
- justify-self: start
- font-size: 16px
- margin: 6px 0 4px 0
- color: |
[[[
if (entity.state == "on") return "var(--black)";
else return "var(--contrast20)";
]]]
label:
- justify-self: start
- font-size: 12px
- margin: 0px 0px 12px 0
- color: |
[[[
if (entity.state == "on") return "var(--black)";
else return "var(--contrast15)";
]]]
custom_fields:
icons:
- justify-self: end
- color: |
[[[
if (entity.state == "on") return "var(--black)";
else return "var(--contrast15)";
]]]
1 Like