You arenāt supposed to quote config.entity.
thats one of the things I tried to get this thing done, but even if i remoce the quotes, the problem remains the same. The formatting shows only the %else% conditionā¦
What happens if you use card-mod without templating? Does it work then?
Is there a way to reduce the distance between these cards using css styling?
I am using layout custom card with this configuration (only initial part of the config):
- type: custom:layout-card
layout: auto
sidebar_column: true
max_columns: 4
cards:
- type: custom:stack-in-card
style: |
ha-card {
font-size: 14px;
font-family: 'Georgia';
font-weight: normal;
background: transparent;
box-shadow: none;
text-decoration: underline;
}
div {
padding-top: 0px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 50px;
}
cards:
- type: grid
# columns: 3
title: Salotto
cards:
- type: custom:button-card
entity: light.hue_color_lamp_1
template: light_button
icon: 'mdi:lightbulb'
name: SofĆ
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.hue_color_lamp_1
Set --grid-card-gap
Where? In the layout card styling or in the button card styling?<
hmm maybe i was not so clearā¦ i have many of the stack-in-card cards and i want to reduce the gap between them and not inside the grid cardā¦
To be clear this is a portion of the view with more stack-in-card cardsā¦ i want to reduce the gap between them
In the grid card styling, or create a custom theme with grid-card-gap and make only the grid card use that theme
Can you post full config?
Ok here it is:
- icon: mdi:lightbulb
title: Luci
id: Luci
panel: true
# background: url("/local/backgrounds/legno.jpg")
cards:
- type: custom:layout-card
layout: auto
sidebar_column: true
max_columns: 4
cards:
- type: custom:stack-in-card
style: |
ha-card {
font-size: 14px;
font-family: 'Georgia';
font-weight: normal;
background: transparent;
box-shadow: none;
text-decoration: underline;
}
div {
padding-top: 0px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 50px;
}
cards:
- type: grid
# columns: 3
title: Salotto
cards:
- type: custom:button-card
entity: light.hue_color_lamp_1
template: light_button
icon: 'mdi:lightbulb'
name: SofĆ
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.hue_color_lamp_1
- type: "custom:button-card"
entity: light.hue_color_lamp_2
template: light_button
icon: 'mdi:lightbulb'
name: Grande Sinistra
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.hue_color_lamp_2
- type: "custom:button-card"
entity: light.hue_color_lamp_3
template: light_button
icon: 'mdi:lightbulb'
name: Grande Destra
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.hue_color_lamp_3
- type: "custom:button-card"
entity: light.hue_white_lamp_1
template: light_button
icon: mdi:lightbulb
name: Tavolo
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.hue_white_lamp_1
- type: "custom:button-card"
entity: light.yeelight_5
template: light_button
icon: mdi:lightbulb
name: Camino
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.yeelight_5
- type: custom:button-card
style:
card:
template: light_button
entity: light.bedside_wifi
icon: mdi:lightbulb
name: Bedside WiFi
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.bedside_wifi
- type: custom:button-card
entity: light.bedside_1
template: light_button
icon: mdi:lightbulb
name: Bedside 1
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.bedside_1
- type: "custom:button-card"
entity: light.hue_color_candle_1
template: light_button
icon: mdi:lightbulb
name: Piccola Sinistra
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.hue_color_candle_1
- type: "custom:button-card"
entity: light.hue_color_candle_2
template: light_button
icon: mdi:lightbulb
name: Piccola Destra
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.hue_color_candle_2
- type: grid
title: TV
# columns: 2
cards:
- type: "custom:button-card"
entity: light.hue_play_1
template: light_button
icon: mdi:lightbulb
name: TV Sinistra
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.hue_play_1
- type: "custom:button-card"
entity: light.hue_play_2
template: light_button
icon: mdi:lightbulb
name: TV Destra
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.hue_play_2
- type: custom:stack-in-card
style: |
ha-card {
font-size: 14px;
font-family: 'Georgia';
font-weight: normal;
background: transparent;
box-shadow: none;
text-decoration: underline;
}
div {
padding-top: 0px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 50px;
}
cards:
- type: grid
title: Camera Letto
# columns: 2
cards:
- type: custom:button-card
entity: light.yeelight_3
template: light_button
icon: mdi:lightbulb
name: Lato Maurizio
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.yeelight_3
- type: custom:button-card
entity: light.yeelight_4
template: light_button
icon: mdi:lightbulb
name: Lato Fha
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.yeelight_4
- type: custom:button-card
entity: light.bedside_2
template: light_button
icon: mdi:lightbulb
name: Bedside 2
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.bedside_2
- type: custom:button-card
entity: light.bedside_3
template: light_button
icon: mdi:lightbulb
name: Bedside 3
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.bedside_3
- type: custom:stack-in-card
style: |
ha-card {
font-size: 14px;
font-family: 'Georgia';
font-weight: normal;
background: transparent;
box-shadow: none;
text-decoration: underline;
}
div {
padding-top: 0px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 50px;
}
cards:
- type: grid
title: Studio
cards:
- type: custom:button-card
entity: light.plafoniera_studio
template: light_button
icon: 'mdi:lightbulb'
name: Plafoniera
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.plafoniera_studio
- type: custom:button-card
entity: light.yeelight_6
template: light_button
icon: mdi:lightbulb
name: Studio Grande
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.yeelight_6
- type: custom:button-card
entity: light.philips_3
template: light_button
icon: mdi:lightbulb
name: Studio Piccola
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.philips_3
- type: "custom:button-card"
entity: light.yeelight_1
template: light_button
icon: mdi:lightbulb
name: Luce 1
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.yeelight_1
- type: "custom:button-card"
entity: light.gateway_light_7811dcb25b7c
template: light_button
icon: mdi:lightbulb
name: Gateway
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.gateway_light_7811dcb25b7c
- type: custom:stack-in-card
style: |
ha-card {
font-size: 14px;
font-family: 'Georgia';
font-weight: normal;
background: transparent;
box-shadow: none;
text-decoration: underline;
}
div {
padding-top: 0px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 50px;
}
cards:
- type: grid
title: Led Salotto
# columns: 2
cards:
- type: "custom:button-card"
entity: light.led_salotto
template: light_button
name: Led Salotto
icon: mdi:led-strip
- type: "custom:button-card"
entity: light.led_blu
template: light_button
name: Blu
icon: mdi:led-strip
- type: "custom:button-card"
entity: light.led_rosso
template: light_button
name: Rosso
icon: mdi:led-strip
- type: "custom:button-card"
entity: light.led_verde
template: light_button
name: Verde
icon: mdi:led-strip
- type: custom:stack-in-card
style: |
ha-card {
font-size: 14px;
font-family: 'Georgia';
font-weight: normal;
background: transparent;
text-decoration: underline;
}
div {
padding-top: 0px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 50px;
}
cards:
- type: grid
title: Ingresso/Balcone
cards:
- type: custom:button-card
entity: light.yeelight_strip_1
template: light_button
icon: 'mdi:lightbulb'
name: Luce Ingresso 1
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.yeelight_strip_1
- type: "custom:button-card"
entity: light.yeelight_strip_2
template: light_button
icon: 'mdi:lightbulb'
name: Luce Ingresso 2
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.yeelight_strip_2
- type: custom:button-card
entity: light.faretti_ingresso
template: light_button
icon: mdi:ceiling-light
name: Faretti
# - type: grid
# title: Balcone
# cards:
- type: custom:button-card
template: light_button
entity: light.philips_5
icon: mdi:lightbulb
name: Balcone
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.philips_5
- type: custom:stack-in-card
# mode: horizontal
style: |
ha-card {
font-size: 14px;
font-family: 'Georgia';
font-weight: normal;
background: transparent;
text-decoration: underline;
}
div {
height: 150px;
padding-top: 0px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 50px;
}
cards:
- type: grid
title: Corridoio
# columns: 2
cards:
- type: custom:button-card
entity: light.hue_iris_1
template: light_button
icon: mdi:lightbulb
name: Hue Iris
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Info
card:
type: light
entity: light.hue_iris_1
- type: "custom:button-card"
entity: light.faretti_corridoio
icon: mdi:ceiling-light
template: light_button
name: Faretti
- type: custom:stack-in-card
style: |
ha-card {
font-size: 14px;
font-family: 'Georgia';
font-weight: normal;
background: transparent;
box-shadow: none;
text-decoration: underline;
}
div {
padding-top: 0px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 50px;
}
cards:
- type: grid
columns: 3
title: Gruppi Luci
cards:
- type: "custom:button-card"
entity: group.luci_studio
name: Studio
template: light_button
icon: mdi:lightbulb-multiple
- type: "custom:button-card"
entity: group.luci_camera
name: Camera
template: light_button
icon: mdi:lightbulb-multiple
- type: "custom:button-card"
entity: group.luci_salotto
template: light_button
icon: mdi:lightbulb-multiple
name: Salotto
- type: "custom:button-card"
entity: group.luci_ingresso
template: light_button
icon: mdi:lightbulb-multiple
name: Ingresso
- type: "custom:button-card"
entity: group.luci_corridoio
template: light_button
icon: mdi:lightbulb-multiple
name: Corridoio
- type: "custom:button-card"
entity: group.luci_balcone
template: light_button
icon: mdi:lightbulb-multiple
name: Balcone
- type: "custom:button-card"
entity: script.scena_luci_tv
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.scena_luci_tv
hold_action:
action: null
template: light_button
icon: mdi:television
name: Luci TV
- type: "custom:button-card"
entity: script.scena_tavolo_on
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.scena.tavolo_on
hold_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.scena_tavolo_off
template: light_button
icon: mdi:lightbulb-multiple
name: Luci Tavolo
color_type: icon
- type: "custom:button-card"
entity: script.scena_in_salotto
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.scena_in_salotto
hold_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.scena_luci_tv
template: light_button
icon: mdi:lightbulb-multiple
name: Scena Salotto
color_type: icon
- type: "custom:button-card"
name: Luci casa
icon: mdi:lightbulb-multiple
show_state: true
layout: name_state
state:
- styles:
icon:
- color: '#F9C536'
value: 'on'
styles:
card:
- width: 105px
- height: 105px
# - border-radius: 30px
- border: solid 1px yellow
- margin: 5px 5px 5px 5px
- padding: 5px 0px
- font-family: 'Georgia'
- filter: drop-shadow(0 0 0.75rem crimson)
- text-decoration: underline
- outline-style: double
icon:
- width: 40px
- color: '#3677f9' #var(--button-card-light-color)
label:
- font-size: 13px
- font-weight: normal
- color: white
name:
- justify-self: center
- align-self: end
- padding: 9px 10px
- font-size: 13px
- font-weight: normal
- color: white
tap_action:
action: call-service
service: browser_mod.popup
service_data:
hide_header: true
title: ' '
card:
type: grid
columns: 2
cards:
- type: "custom:button-card"
style: |
ha-card {
font-size: 14px;
font-family: 'Georgia';
font-weight: normal;
border-radius: 20px;
}
name: Luci On
size: 30%
icon: mdi:lightbulb-multiple
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.accendi_luci_casa
- type: "custom:button-card"
style: |
ha-card {
font-size: 14px;
font-family: 'Georgia';
font-weight: normal;
}
name: Luci Off
size: 30%
icon: mdi:lightbulb-multiple-off
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.spegni_luci_casa
- type: custom:auto-entities
show_header_toggle: true
show_empty: false
card:
type: entities
style: |
ha-card {
font-size: 13px;
font-family: 'Georgia';
font-weight: normal;
background: transparent;
box-shadow: none;
border-radius: 0px
border: 1px solid yellow;
text-decoration: underline;
outline-style: double;
}
div {
padding-top: 0px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 20px;
}
title: Luci Accese
filter:
include:
- domain: light
state: 'on'
options:
secondary_info: last-changed
type: custom:slider-entity-row
Sorry, very longā¦
Do you even know why thereās a margin?
Sorry, about CSS styling i am a very noob, so cannot answer to your questionā¦ if you can, give me an example about itā¦
light_button:
# color: auto
hold_action:
action: more-info
haptic: success
label: >
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
layout: icon_label
show_label: true
show_name: true
size: 30%
state:
- value: 'on'
styles:
name:
- text-shadow: 2px 2px 5px red
styles:
card:
- width: 105px
- height: 105px
- border: solid 1px yellow
# - background-color: red
# - opacity: 0.7
- margin: 5px 5px 5px 5px
- padding: 10px 0px
- font-family: 'Georgia'
- filter: drop-shadow(0 0 0.75rem crimson)
- -webkit-box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
- box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
- outline-style: double
grid:
- grid-template: '"l" "i" "n"'
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr
icon:
- width: 40px
- color: var(--button-card-light-color)
label:
- font-size: 12px
- font-weight: normal
- color: white
name:
- justify-self: center
- align-self: end
- padding: 10px 10px
- font-size: 13px
- font-weight: normal
- color: white
tap_action:
action: toggle
haptic: light
Donāt think Iāll be able to do this, due to all of the adjusting of the entities needed. If someone else wants to help, do it.
Ok thanks anywayā¦ hoping i some other helpsā¦
Can you specify what you mean āwithout templatingā?
Regards
Donāt put an {% if statement in there, just use color: #FFFF00
OK I see. This works:
type: glance
entities:
- entity: sensor.ics_10
style: |
state-badge {
color:
red;
background:
yellow
}
What happens if you use yellow instead of #FFFF00 in the templating? Does it work then?
Doesnāt depend. It doesnāt work in template mode, but it works in normal mode.