I’m using Airly integration to display Air quality as a card.
YAML:
type: entity
entity: sensor.dom_airly_caqi
card_mod:
style: |
ha-card {
background:
{% if state_attr('sensor.dom_airly_caqi', 'level') == 'very low' %}
lightgreen
{% elif state_attr('sensor.dom_airly_caqi', 'level') == 'low' %}
green
{% elif state_attr('sensor.dom_airly_caqi', 'level') == 'medium' %}
yellow
{% elif state_attr('sensor.dom_airly_caqi', 'level') == 'high' %}
orange
{% elif state_attr('sensor.dom_airly_caqi', 'level') == 'very high' %}
red
{% endif %}
;
color:
{% if state_attr('sensor.dom_airly_caqi', 'level') == 'very low' %}
black
{% elif state_attr('sensor.dom_airly_caqi', 'level') == 'low' %}
black
{% elif state_attr('sensor.dom_airly_caqi', 'level') == 'medium' %}
black
{% elif state_attr('sensor.dom_airly_caqi', 'level') == 'high' %}
black
{% elif state_attr('sensor.dom_airly_caqi', 'level') == 'very high' %}
white
{% endif %}
;
}
attribute: level
state_color: true
name: Pollution level
I figured out how to style background and pollution levels (very low, low etc.). How do I style the name of the card? (“Pollution level”). I tried with .header .name, but it doesn’t work.
Inspect:
<ha-card tabindex="0" class="type-entity"> <div class="header"> <div class="name" title="Pollution level"><!--?lit$5679475478$-->Pollution level</div> <div class="icon"> <ha-state-icon data-domain="sensor" data-state="17.87" style="filter:;height:;"></ha-state-icon> </div> </div> <div class="info"> <span class="value"><!--?lit$5679475478$-->very low</span><!--?lit$5679475478$--> <span class="measurement"><!--?lit$5679475478$--></span> </div> <!--?lit$5679475478$--> <card-mod slot="none"><!---->
<style>
<!---->ha-card {
background:
lightgreen
;
color:
black
;
}
<!----></style>
</card-mod></ha-card>