type: custom:mushroom-template-card
primary: Czujniki Otwarcia Drzwi
secondary: ''
icon: ''
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
layout: horizontal
entity: binary_sensor.drzwi_balkon_contact
fill_container: false
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.drzwi_balkon_contact','off') %}
background: rgba(101,170,91,0.2);
{% else %}
background: rgba(226,84,66,0.2);
{% endif %}
}
Zrób to tak:
type: custom:mushroom-template-card
primary: Czujniki Otwarcia Drzwi
secondary: ''
icon: ''
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
layout: horizontal
entity: binary_sensor.ts0203_01_contact
fill_container: false
card_mod:
style:
mushroom-state-info$: |
{% if is_state('binary_sensor.ts0203_01_contact','on') %}
.primary {
color: red !important;
}
{% else %}
{% endif %}
Tylko tekst zmieni się na czerwony:
...
card_mod:
style: |
:host {
--primary-text-color: {% if is_state('binary_sensor.ts0203_01_contactt', 'on') %}red{% else %}var(--primary-text-color){% endif %};
}
Dziękuję, MariuszT i krskrab oba sposoby działają. Nic jeszcze długa droga czytania, nauki, prób i błędów. A czy polecicie może gdzie załapać podstawy tej wiedzy bo o ile elektronika elektryka to mój zawód i samo HA ogarnięte to wygląd jakiś ładny też by się przydał.
Mam utworzoną taką kartę do klimy, czy da się zmniejszyć odstępy między kartami bo jest to dość mocno rozstrzelone, poniżej screen i mój kodzik?
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
primary: Klimatyzacja - Powietrze
secondary: ''
icon: ''
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
layout: horizontal
fill_container: false
icon_color: ''
card_mod:
style:
mushroom-state-info$: |
* {
text-align: center;
}
.: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: ;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
- type: custom:hui-element
row_type: divider
card_mod:
style: |
.divider {
background-color: green;
}
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 1px !important;
}
primary: Klima
secondary: |
Tryb: {{ state_attr('climate.klima', 'hvac_mode') }}
icon: |-
{% set mode = states('climate.klima') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% elif mode == 'fan_only' %}
mdi:fan
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set status = state_attr('climate.klima','hvac_modes') %}
{% if status == 'off' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% elif status == 'fan_only' %}
red
{% else %}
grey
{% endif %}
entity: climate.klima
tap_action:
action: toggle
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
content: '{{state_attr(entity, ''temperature'')}} °C'
entity: climate.klima
icon: mdi:home-thermometer-outline
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
#46acf2
{% elif state=='heat' %}
#f07522
{% elif state=='fan_only' %}
#39d3dd
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
--chip-avatar-padding: 2px;
--chip-height: 60px;
--chip-box-shadow: none;
--chip-background: none;
}
- type: custom:mushroom-chips-card
alignment: justify
chips:
- type: template
entity: climate.klima
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: green
tap_action: none
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
- type: template
entity: light.klima_panel_light
icon: mdi:lightbulb-outline
icon_color: |-
{% if is_state('light.klima_panel_light', 'on') %}
amber
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
- type: template
content: '{{state_attr(entity, ''current_temperature'')}} °C'
entity: climate.klima
icon: mdi:thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
#46acf2
{% elif state=='heat' %}
#f07522
{% elif state=='fan_only' %}
#39d3dd
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
- type: template
content: '{{state_attr(entity, ''temperature'')}} °C'
entity: climate.klima
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
#46acf2
{% elif state=='heat' %}
#f07522
{% elif state=='fan_only' %}
#39d3dd
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
- type: custom:mushroom-climate-card
entity: climate.klima
show_temperature_control: true
hvac_modes: []
primary_info: none
secondary_info: none
icon_type: none
- features:
- style: icons
fan_modes:
- low
- medium
- high
type: climate-fan-modes
type: tile
entity: climate.klima
vertical: false
show_entity_picture: false
hide_state: true
card_mod:
style: |
ha-card .content {
display: none !important;
}
ha-card {
padding-top: 10px !important;
}
- type: custom:mushroom-climate-card
entity: climate.klima
show_temperature_control: false
fill_container: false
hvac_modes:
- heat
- fan_only
- cool
- 'off'
icon_type: none
secondary_info: none
primary_info: none
- type: custom:hui-element
row_type: divider
card_mod:
style: |
.divider {
background-color: green;
}
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.aqara_weather_sensor_temperature
primary_info: state
secondary_info: name
name: Inside
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.d1_salon_ds18b20
primary_info: state
secondary_info: name
name: Outside
icon_color: blue