Spartacus
April 12, 2024, 9:00am
1
Hi,
I am again playing with template cards in a layout card. Is there a possibility to reduce the line spacing?
The current code:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: auto
margin: null
cards:
- type: custom:mushroom-template-card
primary: 'Lichtschranke: {{ ''Reset Alarm'' if states(entity) == ''on'' else ''ok'' }}'
multiline_secondary: true
secondary: ''
layout: null
icon: >-
{{ 'mdi:alarm-light-outline' if states(entity) == 'on' else
'mdi:alarm-light-off-outline' }}
tap_action:
action: call-service
service: input_boolean.turn_off
target:
entity_id:
- input_boolean.alert_ir_blocked
data: {}
icon_color: '{{ ''red'' if states(entity) == ''on'' else ''grey'' }}'
badge_icon: ''
fill_container: false
entity: input_boolean.alert_ir_blocked
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite, wobbling 0.5s linear infinite alternate;
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
@keyframes wobbling
{
0% {transform: rotate(-10deg);}
100% {transform: rotate(10deg);}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card
{
border: none !important;
{% if is_state(config.entity,'on') %}
--card-primary-color:
{%else%}
--card-primary-color: green;
{% endif %}
}
- type: custom:mushroom-template-card
primary: |-
IR-Sender:
{{ 'ALARM' if (states("input_boolean.alert_ir_blocked") == 'on') else
'aus' if (states(entity) == 'off') else
'ein' if (states(entity) == 'on')
}}
multiline_secondary: true
layout: null
secondary: >-
{{'bitte zurücksetzen' if states("input_boolean.alert_ir_blocked")==
'on'}}
icon: mdi:leak
tap_action:
action: toggle
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''#636363'' }}'
badge_icon: >-
{{'mdi:exclamation' if states("input_boolean.alert_ir_blocked")==
'on'}}
badge_color: '#DC143C'
fill_container: false
entity: switch.k05_ir_sender
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
{% if states("input_boolean.alert_ir_blocked")== 'on' %}
box-shadow: 0 0 0 1px #DC143C !important
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{
border: none !important;
--card-primary-color: #E0E0E0;
--card-secondary-color:#DC143C;
}
- type: custom:mushroom-template-card
primary: |-
IR Empfänger:
{{
'ALARM' if (states("input_boolean.alert_ir_blocked") == 'on') else
'detect' if (states(entity) == 'on') else
'aus' if (states("switch.k05_ir_sender") == 'off') else
'idle' if (states("switch.k05_ir_sender") == 'on')
}}
multiline_secondary: true
layout: null
secondary: >-
{{'bitte zurücksetzen' if
states("input_boolean.alert_ir_blocked")=='on'}}
icon: mdi:leak
tap_action:
action: none
icon_color: |-
{{ '#636363' if (states("switch.k05_ir_sender") == 'off') else
'amber' if (states(entity) == 'on') else
'green' if (states("switch.k05_ir_sender") == 'on')
}}
badge_icon: >-
{{'mdi:exclamation' if
states("input_boolean.alert_ir_blocked")=='on'}}
badge_color: '#DC143C'
fill_container: false
entity: input_boolean.delay_ir_detection
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
{% if states("input_boolean.alert_ir_blocked")== 'on' %}
box-shadow: 0 0 0 1px #DC143C !important
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{
border: none !important;
--card-primary-color: #E0E0E0;
--card-secondary-color:#DC143C;
}
- type: custom:mushroom-template-card
primary: 'Haustür: {{ ''Reset Alarm'' if states(entity) == ''on'' else ''ok'' }}'
multiline_secondary: true
layout: null
secondary: ''
icon: >-
{{ 'mdi:alarm-light-outline' if states(entity) == 'on' else
'mdi:alarm-light-off-outline' }}
tap_action:
action: call-service
service: input_boolean.turn_off
target:
entity_id:
- input_boolean.alert_open_door
data: {}
icon_color: '{{ ''red'' if states(entity) == ''on'' else ''grey'' }}'
badge_icon: ''
fill_container: false
entity: input_boolean.alert_open_door
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite, wobbling 0.5s linear infinite alternate;
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
@keyframes wobbling
{
0% {transform: rotate(-10deg);}
100% {transform: rotate(10deg);}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card
{
border: none !important;
{% if is_state(config.entity,'on') %}
--card-primary-color:
{%else%}
--card-primary-color: green;
{% endif %}
}
- type: custom:mushroom-template-card
primary: |-
Haustür:
{{ 'ALARM' if (states("input_boolean.alert_open_door") == 'on') else
'geschlossen' if (states(entity) == 'off') else
'geöffnet' if (states(entity) == 'on')
}}
multiline_secondary: true
layout: null
secondary: >-
{{'bitte zurücksetzen' if states("input_boolean.alert_open_door")==
'on'}}
icon: '{{ ''mdi:door-open'' if states(entity) == ''on'' else ''mdi:door-closed'' }}'
tap_action:
action: toggle
icon_color: '{{ ''amber'' if states(entity) == ''on'' else ''green'' }}'
badge_icon: >-
{{'mdi:exclamation' if states("input_boolean.alert_open_door")==
'on'}}
fill_container: false
entity: binary_sensor.reed_input
badge_color: '#DC143C'
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set light_state = states(config.entity) %}
{% if light_state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
{% if states("input_boolean.alert_open_door")== 'on' %}
box-shadow: 0 0 0 1px #DC143C !important
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #FFC107 }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{
border: none !important;
--card-primary-color: #E0E0E0;
--card-secondary-color:#DC143C;
}
card_mod:
style:
ha-markdown $: |
img {
vertical-align: bottom !important;
.: |
ha-card
{
border: none !important;
}
card_mod:
style: |
ha-card {
border: none !important;
}
Like this…
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: auto
cards:
- type: custom:mushroom-template-card
primary: 'Lichtschranke: {{ ''Reset Alarm'' if states(entity) == ''on'' else ''ok'' }}'
multiline_secondary: true
secondary: ''
icon: >-
{{ 'mdi:alarm-light-outline' if states(entity) == 'on' else
'mdi:alarm-light-off-outline' }}
tap_action:
action: call-service
service: input_boolean.turn_off
target:
entity_id:
- input_boolean.alert_ir_blocked
data: {}
icon_color: '{{ ''red'' if states(entity) == ''on'' else ''grey'' }}'
badge_icon: ''
fill_container: false
entity: input_boolean.alert_ir_blocked
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite, wobbling 0.5s linear infinite alternate;
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
@keyframes wobbling
{
0% {transform: rotate(-10deg);}
100% {transform: rotate(10deg);}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card
{
border: none !important;
{% if is_state(config.entity,'on') %}
--card-primary-color:
{%else%}
--card-primary-color: green;
{% endif %}
}
- type: custom:mushroom-template-card
primary: |-
IR-Sender:
{{ 'ALARM' if (states("input_boolean.alert_ir_blocked") == 'on') else
'aus' if (states(entity) == 'off') else
'ein' if (states(entity) == 'on')
}}
multiline_secondary: true
secondary: >-
{{'bitte zurücksetzen' if states("input_boolean.alert_ir_blocked")==
'on'}}
icon: mdi:leak
tap_action:
action: toggle
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''#636363'' }}'
badge_icon: >-
{{'mdi:exclamation' if states("input_boolean.alert_ir_blocked")==
'on'}}
badge_color: '#DC143C'
fill_container: false
entity: switch.k05_ir_sender
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
{% if states("input_boolean.alert_ir_blocked")== 'on' %}
box-shadow: 0 0 0 1px #DC143C !important
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{
border: none !important;
--card-primary-color: #E0E0E0;
--card-secondary-color:#DC143C;
}
- type: custom:mushroom-template-card
primary: |-
IR Empfänger:
{{
'ALARM' if (states("input_boolean.alert_ir_blocked") == 'on') else
'detect' if (states(entity) == 'on') else
'aus' if (states("switch.k05_ir_sender") == 'off') else
'idle' if (states("switch.k05_ir_sender") == 'on')
}}
multiline_secondary: true
{{'bitte zurücksetzen' if
states("input_boolean.alert_ir_blocked")=='on'}}
icon: mdi:leak
tap_action:
action: none
icon_color: |-
{{ '#636363' if (states("switch.k05_ir_sender") == 'off') else
'amber' if (states(entity) == 'on') else
'green' if (states("switch.k05_ir_sender") == 'on')
}}
badge_icon: >-
{{'mdi:exclamation' if
states("input_boolean.alert_ir_blocked")=='on'}}
badge_color: '#DC143C'
fill_container: false
entity: input_boolean.delay_ir_detection
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
{% if states("input_boolean.alert_ir_blocked")== 'on' %}
box-shadow: 0 0 0 1px #DC143C !important
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{
border: none !important;
--card-primary-color: #E0E0E0;
--card-secondary-color:#DC143C;
}
- type: custom:mushroom-template-card
primary: 'Haustür: {{ ''Reset Alarm'' if states(entity) == ''on'' else ''ok'' }}'
multiline_secondary: true
secondary: ''
icon: >-
{{ 'mdi:alarm-light-outline' if states(entity) == 'on' else
'mdi:alarm-light-off-outline' }}
tap_action:
action: call-service
service: input_boolean.turn_off
target:
entity_id:
- input_boolean.alert_open_door
data: {}
icon_color: '{{ ''red'' if states(entity) == ''on'' else ''grey'' }}'
badge_icon: ''
fill_container: false
entity: input_boolean.alert_open_door
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite, wobbling 0.5s linear infinite alternate;
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
@keyframes wobbling
{
0% {transform: rotate(-10deg);}
100% {transform: rotate(10deg);}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card
{ margin-top: -40px;
border: none !important;
{% if is_state(config.entity,'on') %}
--card-primary-color:
{%else%}
--card-primary-color: green;
{% endif %}
}
- type: custom:mushroom-template-card
primary: |-
Haustür:
{{ 'ALARM' if (states("input_boolean.alert_open_door") == 'on') else
'geschlossen' if (states(entity) == 'off') else
'geöffnet' if (states(entity) == 'on')
}}
multiline_secondary: true
secondary: >-
{{'bitte zurücksetzen' if states("input_boolean.alert_open_door")==
'on'}}
icon: '{{ ''mdi:door-open'' if states(entity) == ''on'' else ''mdi:door-closed'' }}'
tap_action:
action: toggle
icon_color: '{{ ''amber'' if states(entity) == ''on'' else ''green'' }}'
badge_icon: >-
{{'mdi:exclamation' if states("input_boolean.alert_open_door")==
'on'}}
fill_container: false
entity: binary_sensor.reed_input
badge_color: '#DC143C'
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set light_state = states(config.entity) %}
{% if light_state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
{% if states("input_boolean.alert_open_door")== 'on' %}
box-shadow: 0 0 0 1px #DC143C !important
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #FFC107 }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{
margin-top: -40px;
border: none !important;
--card-primary-color: #E0E0E0;
--card-secondary-color:#DC143C;
}
card_mod:
style:
ha-markdown $: |
img {
vertical-align: bottom !important;
.: |
ha-card
{
border: none !important;
}
card_mod:
style: |
ha-card {
border: none !important;
}
Spartacus
April 12, 2024, 3:53pm
4
Now I wanted to add a divider between the topics and I found the text-divider card and installed the lines (Test)
it is working, but I cannot modify any parameters, like I can do it in this example:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr
margin: null
cards: null
- type: entities
entities:
- type: custom:text-divider-row
text: Text
card_mod:
style: |
:host {
--text-divider-line-size: 5px;
--text-divider-color: red;
--text-divider-font-size: 10px;
--text-divider-margin: 0px 4px 40px 64px;
}
The code where I want to change the divider!
type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
hui-vertical-stack-card:nth-of-type(1) {
flex-grow: 1.3 !important;
}
hui-vertical-stack-card:nth-of-type(2) {
flex-grow: 2.0 !important;
}
card:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: 'Eingang:'
multiline_secondary: true
secondary: >-
{% set months = ["Januar", "Februar", "März", "April", "Mai",
"Juni", "Juli", "August", "September", "Oktober", "November",
"Dezember"] %}
{% set days = ["Montag", "Dienstag", "Mittwoch", "Donnestag", "Freitag", "Samstag", "Sonntag"] %}
{{ days[now().weekday()] }}, der {{ now().day | string }}. {{ months[now().month-1] }}
{{ states("sensor.time") }} Uhr
icon: mdi:arrow-left-bold-outline
tap_action:
action: navigate
navigation_path: /dashboard-christian
icon_color: ''
card_mod:
style: |
ha-card {
--card-primary-font-size: 1.8rem;
--card-primary-font-weight: normal;
--card-secondary-font-size: 1.0rem;
--card-primary-line-height: 2.0;
--card-secondary-line-height: 1.5;
--primary-text-color: #E0E0E0;
--secondary-text-color: #808080;
--card-mod-icon-color: green;
font-family:'roboto';
font-weight: normal;
border: none;
box-shadow: none;
margin-top: 0.0rem;
## background:none;
}
- type: custom:text-divider-row
text: Test
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: auto
cards:
- type: custom:mushroom-template-card
primary: >-
Lichtschranke: {{ 'Reset Alarm' if states(entity) == 'on'
else 'ok' }}
multiline_secondary: true
secondary: ''
icon: >-
{{ 'mdi:alarm-light-outline' if states(entity) == 'on' else
'mdi:alarm-light-off-outline' }}
tap_action:
action: call-service
service: input_boolean.turn_off
target:
entity_id:
- input_boolean.alert_ir_blocked
data: {}
icon_color: '{{ ''red'' if states(entity) == ''on'' else ''grey'' }}'
badge_icon: ''
fill_container: false
entity: input_boolean.alert_ir_blocked
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite, wobbling 0.5s linear infinite alternate;
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
@keyframes wobbling
{
0% {transform: rotate(-10deg);}
100% {transform: rotate(10deg);}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{ margin-top: -30px;
border: none !important;
{% if is_state(config.entity,'on') %}
--card-primary-color:
{%else%}
--card-primary-color: green;
{% endif %}
}
- type: custom:mushroom-template-card
primary: >-
IR-Sender:
{{ 'ALARM' if (states("input_boolean.alert_ir_blocked") ==
'on') else
'aus' if (states(entity) == 'off') else
'ein' if (states(entity) == 'on')
}}
multiline_secondary: true
secondary: >-
{{'bitte zurücksetzen' if
states("input_boolean.alert_ir_blocked")== 'on'}}
icon: mdi:leak
tap_action:
action: toggle
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''#636363'' }}'
badge_icon: >-
{{'mdi:exclamation' if
states("input_boolean.alert_ir_blocked")== 'on'}}
badge_color: '#DC143C'
fill_container: false
entity: switch.k05_ir_sender
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
{% if states("input_boolean.alert_ir_blocked")== 'on' %}
box-shadow: 0 0 0 1px #DC143C !important
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{ margin-top: -30px;
border: none !important;
--card-primary-color: #E0E0E0;
--card-secondary-color:#DC143C;
}
- type: custom:mushroom-template-card
primary: |-
IR Empfänger:
{{
'ALARM' if (states("input_boolean.alert_ir_blocked") == 'on') else
'detect' if (states(entity) == 'on') else
'aus' if (states("switch.k05_ir_sender") == 'off') else
'idle' if (states("switch.k05_ir_sender") == 'on')
}}
multiline_secondary: >-
true
{{'bitte zurücksetzen' if
states("input_boolean.alert_ir_blocked")=='on'}}
icon: mdi:leak
tap_action:
action: none
icon_color: >-
{{ '#636363' if (states("switch.k05_ir_sender") == 'off')
else
'amber' if (states(entity) == 'on') else
'green' if (states("switch.k05_ir_sender") == 'on')
}}
badge_icon: >-
{{'mdi:exclamation' if
states("input_boolean.alert_ir_blocked")=='on'}}
badge_color: '#DC143C'
fill_container: false
entity: input_boolean.delay_ir_detection
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
{% if states("input_boolean.alert_ir_blocked")== 'on' %}
box-shadow: 0 0 0 1px #DC143C !important
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{ margin-top: -30px;
border: none !important;
--card-primary-color: #E0E0E0;
--card-secondary-color:#DC143C;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
cards:
- type: custom:mushroom-template-card
primary: >-
Haustür: {{ 'Reset Alarm' if states(entity) == 'on' else
'ok' }}
multiline_secondary: true
secondary: ''
icon: >-
{{ 'mdi:alarm-light-outline' if states(entity) == 'on' else
'mdi:alarm-light-off-outline' }}
tap_action:
action: call-service
service: input_boolean.turn_off
target:
entity_id:
- input_boolean.alert_open_door
icon_color: '{{ ''red'' if states(entity) == ''on'' else ''grey'' }}'
badge_icon: ''
fill_container: false
entity: input_boolean.alert_open_door
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite, wobbling 0.5s linear infinite alternate;
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
@keyframes wobbling
{
0% {transform: rotate(-10deg);}
100% {transform: rotate(10deg);}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card
{ margin-top: -30px;
border: none !important;
{% if is_state(config.entity,'on') %}
--card-primary-color:
{%else%}
--card-primary-color: green;
{% endif %}
}
- type: custom:mushroom-template-card
primary: >-
Haustür:
{{ 'ALARM' if (states("input_boolean.alert_open_door") ==
'on') else
'geschlossen' if (states(entity) == 'off') else
'geöffnet' if (states(entity) == 'on')
}}
multiline_secondary: true
secondary: >-
{{'bitte zurücksetzen' if
states("input_boolean.alert_open_door")== 'on'}}
icon: >-
{{ 'mdi:door-open' if states(entity) == 'on' else
'mdi:door-closed' }}
tap_action:
action: toggle
icon_color: '{{ ''amber'' if states(entity) == ''on'' else ''green'' }}'
badge_icon: >-
{{'mdi:exclamation' if
states("input_boolean.alert_open_door")== 'on'}}
fill_container: false
entity: binary_sensor.reed_input
badge_color: '#DC143C'
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set light_state = states(config.entity) %}
{% if light_state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
{% if states("input_boolean.alert_open_door")== 'on' %}
box-shadow: 0 0 0 1px #DC143C !important
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #FFC107 }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{
margin-top: -30px;
border: none !important;
--card-primary-color: #E0E0E0;
--card-secondary-color:#DC143C;
}
- type: custom:text-divider-row
text: Test
- type: markdown
content: >-
<ha-icon icon="mdi:weather-sunset-up"></ha-icon>
|||
|:--|:---:|
|• <ha-icon icon="mdi:weather-sunset-up"></ha-icon>
Sonnenaufgang:|**{{(state_attr('sensor.home_sun_dawn','today')).strftime('%H:%M')}}**
Uhr
|• <ha-icon icon="mdi:weather-sunset-down"></ha-icon>
Sonnenuntergang:|**{{(state_attr('sensor.home_sun_dusk','today')).strftime('%H:%M')}}**
Uhr
Spartacus
April 15, 2024, 7:02am
6
Hi all,
I didn´t get this working in the code above. I implemted this code:
- type: entities
entities:
- type: custom:text-divider-row
text: Text
card_mod:
style: |
:host {
--text-divider-line-size: 5px;
--text-divider-color: red;
--text-divider-font-size: 10px;
.text-divider { --text-divider-margin-top: -40px; }
}
and the line doesn´t move. There is also a border which I cannot remove.
any ideas?
You are stacking card on top of cards and it’s not necessary. This is especially true if you are using grid layout cards inside those stacks. Id suggest getting your layout set them expanding the code.
Is the information in you cards changing drastically enough for the flex grow code you have using the mod-card at the top?
type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
hui-vertical-stack-card:nth-of-type(1) {
flex-grow: 1.3 !important;
}
hui-vertical-stack-card:nth-of-type(2) {
flex-grow: 2.0 !important;
}
card:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
xxxxxx
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: auto
Spartacus
April 15, 2024, 7:46am
8
I am not really sure, what you mean!
let me explain the use case:
all cards in the stack should not have a border
the grid template was stacked twice, because it was not possible to alignt to rows with different colums (Lichtschranke 3 colums, Haustür 2 colums)
If I understand correctley, I cannot use two differnt grids in one stack, or what do you mean?
A grid is a grid. You can align the columns
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.test
card_mod:
style: |
ha-card {
border: none;
}
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.test
card_mod:
style: |
ha-card {
border: none;
}
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.test
card_mod:
style: |
ha-card {
border: none;
}
- type: entities
entities:
- type: custom:text-divider-row
text: Text
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.test
card_mod:
style: |
ha-card {
border: none;
}
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.test
card_mod:
style: |
ha-card {
border: none;
}
Spartacus
April 15, 2024, 10:51am
10
Hi,
But how do you play with the margin? And what does the 4 columns mean (0px 0px 0px 0px)
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: 'Eingang:'
multiline_secondary: true
secondary: >-
{% set months = ["Januar", "Februar", "März", "April", "Mai", "Juni",
"Juli", "August", "September", "Oktober", "November", "Dezember"] %}
{% set days = ["Montag", "Dienstag", "Mittwoch", "Donnestag", "Freitag", "Samstag", "Sonntag"] %}
{{ days[now().weekday()] }}, der {{ now().day | string }}. {{ months[now().month-1] }}
{{ states("sensor.time") }} Uhr
icon: mdi:arrow-left-bold-outline
tap_action:
action: navigate
navigation_path: /dashboard-christian
icon_color: ''
card_mod:
style: |
ha-card {
--card-primary-font-size: 1.8rem;
--card-primary-font-weight: normal;
--card-secondary-font-size: 1.0rem;
--card-primary-line-height: 2.0;
--card-secondary-line-height: 1.5;
--primary-text-color: #E0E0E0;
--secondary-text-color: #808080;
--card-mod-icon-color: green;
font-family:'roboto';
font-weight: normal;
border: none;
box-shadow: none;
margin-top: 0.0rem;
## background:none;
}
- type: entities
entities:
- type: custom:text-divider-row
text: Text
card_mod:
style: |
:host {
--text-divider-line-size: 2px;
# --text-divider-color: red;
--text-divider-font-size: 10px;
--text-divider-margin: -30px;
border: none;
}
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
primary: 'Lichtschranke: {{ ''Reset Alarm'' if states(entity) == ''on'' else ''ok'' }}'
multiline_secondary: true
secondary: ''
icon: >-
{{ 'mdi:alarm-light-outline' if states(entity) == 'on' else
'mdi:alarm-light-off-outline' }}
tap_action:
action: call-service
service: input_boolean.turn_off
target:
entity_id:
- input_boolean.alert_ir_blocked
data: {}
icon_color: '{{ ''red'' if states(entity) == ''on'' else ''grey'' }}'
badge_icon: ''
fill_container: false
entity: input_boolean.alert_ir_blocked
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite, wobbling 0.5s linear infinite alternate;
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
@keyframes wobbling
{
0% {transform: rotate(-10deg);}
100% {transform: rotate(10deg);}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{ margin-top: -35px;
border: none !important;
{% if is_state(config.entity,'on') %}
--card-primary-color:
{%else%}
--card-primary-color: green;
{% endif %}
}
- type: custom:mushroom-template-card
primary: |-
IR-Sender:
{{ 'ALARM' if (states("input_boolean.alert_ir_blocked") == 'on') else
'aus' if (states(entity) == 'off') else
'ein' if (states(entity) == 'on')
}}
multiline_secondary: true
secondary: >-
{{'bitte zurücksetzen' if states("input_boolean.alert_ir_blocked")==
'on'}}
icon: mdi:leak
tap_action:
action: toggle
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''#636363'' }}'
badge_icon: >-
{{'mdi:exclamation' if states("input_boolean.alert_ir_blocked")==
'on'}}
badge_color: '#DC143C'
fill_container: false
entity: switch.k05_ir_sender
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
{% if states("input_boolean.alert_ir_blocked")== 'on' %}
box-shadow: 0 0 0 1px #DC143C !important
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{ margin-top: -35px;
border: none !important;
--card-primary-color: #E0E0E0;
--card-secondary-color:#DC143C;
}
- type: custom:mushroom-template-card
primary: |-
IR Empfänger:
{{
'ALARM' if (states("input_boolean.alert_ir_blocked") == 'on') else
'detect' if (states(entity) == 'on') else
'aus' if (states("switch.k05_ir_sender") == 'off') else
'idle' if (states("switch.k05_ir_sender") == 'on')
}}
multiline_secondary: >-
true
{{'bitte zurücksetzen' if
states("input_boolean.alert_ir_blocked")=='on'}}
icon: mdi:leak
tap_action:
action: none
icon_color: |-
{{ '#636363' if (states("switch.k05_ir_sender") == 'off') else
'amber' if (states(entity) == 'on') else
'green' if (states("switch.k05_ir_sender") == 'on')
}}
badge_icon: >-
{{'mdi:exclamation' if
states("input_boolean.alert_ir_blocked")=='on'}}
badge_color: '#DC143C'
fill_container: false
entity: input_boolean.delay_ir_detection
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
{% if states("input_boolean.alert_ir_blocked")== 'on' %}
box-shadow: 0 0 0 1px #DC143C !important
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{ margin-top: -35px;
border: none !important;
--card-primary-color: #E0E0E0;
--card-secondary-color:#DC143C;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
primary: 'Haustür: {{ ''Reset Alarm'' if states(entity) == ''on'' else ''ok'' }}'
multiline_secondary: true
secondary: ''
icon: >-
{{ 'mdi:alarm-light-outline' if states(entity) == 'on' else
'mdi:alarm-light-off-outline' }}
tap_action:
action: call-service
service: input_boolean.turn_off
target:
entity_id:
- input_boolean.alert_open_door
icon_color: '{{ ''red'' if states(entity) == ''on'' else ''grey'' }}'
badge_icon: ''
fill_container: false
entity: input_boolean.alert_open_door
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite, wobbling 0.5s linear infinite alternate;
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
@keyframes wobbling
{
0% {transform: rotate(-10deg);}
100% {transform: rotate(10deg);}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card
{ margin-top: -35px;
border: none !important;
{% if is_state(config.entity,'on') %}
--card-primary-color:
{%else%}
--card-primary-color: green;
{% endif %}
}
- type: custom:mushroom-template-card
primary: |-
Haustür:
{{ 'ALARM' if (states("input_boolean.alert_open_door") == 'on') else
'geschlossen' if (states(entity) == 'off') else
'geöffnet' if (states(entity) == 'on')
}}
multiline_secondary: true
secondary: >-
{{'bitte zurücksetzen' if states("input_boolean.alert_open_door")==
'on'}}
icon: '{{ ''mdi:door-open'' if states(entity) == ''on'' else ''mdi:door-closed'' }}'
tap_action:
action: toggle
icon_color: '{{ ''amber'' if states(entity) == ''on'' else ''green'' }}'
badge_icon: >-
{{'mdi:exclamation' if states("input_boolean.alert_open_door")==
'on'}}
fill_container: false
entity: binary_sensor.reed_input
badge_color: '#DC143C'
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set light_state = states(config.entity) %}
{% if light_state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
{% if states("input_boolean.alert_open_door")== 'on' %}
box-shadow: 0 0 0 1px #DC143C !important
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #FFC107 }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{
margin-top: -35px;
border: none !important;
--card-primary-color: #E0E0E0;
--card-secondary-color:#DC143C;
}
- type: entities
entities:
- type: custom:text-divider-row
text: Text
card_mod:
style: |
:host {
--text-divider-line-size: 2px;
# --text-divider-color: red;
--text-divider-font-size: 10px;
--text-divider-margin: -35px;
border: none;
}
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
Spartacus
April 15, 2024, 6:59pm
12
Hi all,
I still have problems with the alignment of the transcripts. How does the margin work? How can I move the “Schalzeiten” to the left?
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
margin: auto
cards:
- type: custom:mushroom-template-card
primary: 'Eingang:'
multiline_secondary: true
secondary: >-
{% set months = ["Januar", "Februar", "März", "April",
"Mai", "Juni", "Juli", "August", "September", "Oktober",
"November", "Dezember"] %}
{% set days = ["Montag", "Dienstag", "Mittwoch", "Donnestag", "Freitag", "Samstag", "Sonntag"] %}
{{ days[now().weekday()] }}, der {{ now().day | string }}. {{ months[now().month-1] }}
{{ states("sensor.time") }} Uhr
icon: mdi:arrow-left-bold-outline
tap_action:
action: navigate
navigation_path: /dashboard-christian
icon_color: ''
card_mod:
style: |
ha-card {
--card-primary-font-size: 1.8rem;
--card-primary-font-weight: normal;
--card-secondary-font-size: 1.0rem;
--card-primary-line-height: 2.0;
--card-secondary-line-height: 1.5;
--primary-text-color: #E0E0E0;
--secondary-text-color: #808080;
--card-mod-icon-color: green;
font-family:'roboto';
font-weight: normal;
border: none;
box-shadow: none;
margin-top: 0.0rem;
## background:none;
}
- type: markdown
content: >-
{{' '}}
|||
|:--|:---:|
|• <ha-icon icon="mdi:weather-sunset-up"></ha-icon>
Sonnenaufgang:|**{{(state_attr('sensor.home_sun_dawn','today')).strftime('%H:%M')}}**
Uhr
|• <ha-icon icon="mdi:weather-sunset-down"></ha-icon>
Sonnenuntergang:|**{{(state_attr('sensor.home_sun_dusk','today')).strftime('%H:%M')}}**
Uhr
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
margin-top: 0px;
}
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
