I am still a beginner and when I started learning card-mod for me it was not easy since I was not able to find a full info for all the possible cards))).
Let me post sometimes little instructions for different cards.
First, it will be an Entity card:
NOTE:
Do not forget to add a "card_mod:"
keyword before "style:"
(new in card-mod 3
).
sensor:
type: entity
entity: sensor.cleargrass_1_co2
style: |
.header .name {
color: green;
}
ha-card {
color: red;
}
.info .measurement {
color: orange;
}
.header .icon {
color: cyan;
}
binary_sensor:
type: entity
entity: binary_sensor.service_on_value
style: |
.header .name {
color: green;
}
ha-card {
color: red;
}
.header .icon {
color: cyan;
}
As for the icon - it will be always cyan, for ON & OFF.
Here is an example for OFF (device_class: connectivity
):
The code below changes the iconβs color dependently on the sensorβs state (here & below - styling for text is removed) - if the sensor is ON, then the icon is yellow (standard themeβs active color):
type: entity
entity: binary_sensor.iiyama_2_ping_availability_status
style: |
.header .icon {
{% if is_state(config.entity,'on') %}
color: var(--paper-item-icon-active-color);
{% else %}
color: var(--state-icon-color);
{% endif %}
}
Also we can change the βactiveβ & βinactiveβ colors:
type: entity
entity: binary_sensor.iiyama_2_ping_availability_status
style: |
.header .icon {
{% if is_state(config.entity,'on') %}
color: red;
{% else %}
color: brown;
{% endif %}
}
Changing a font-size & iconβs size:
type: entity
entity: sensor.cleargrass_1_co2
style: |
.header .name {
color: green;
font-size: 10px;
}
.info .value {
color: blue;
font-size: 8px;
}
.info .measurement {
color: orange;
font-size: 30px;
}
.header .icon {
color: cyan;
}
ha-card {
--mdc-icon-size: 60px;
}
Changing a background:
type: vertical-stack
cards:
- type: entity
entity: sensor.xiaomi_cg_1_co2
style: |
ha-card {
background-color: orange;
}
- type: entity
entity: sensor.xiaomi_cg_1_co2
style: |
.info {
background-color: orange;
padding-top: 16px !important;
}
ha-card {
overflow: hidden;
}
- type: entity
entity: sensor.xiaomi_cg_1_co2
style: |
.header {
background-color: orange;
}
.info {
padding-top: 16px !important;
}
ha-card {
overflow: hidden;
}
- type: entity
entity: sensor.xiaomi_cg_1_co2
style: |
ha-card {
background-image: url("/local/images/blue_low_2.jpg");
background-size: 100% 100%;
height: 250px !important;
}
- type: entity
entity: sensor.xiaomi_cg_1_co2
style: |
.info {
padding-top: 16px !important;
background-image: url("/local/images/Stan_small.png");
background-repeat: no-repeat;
background-position: right;
}
ha-card {
overflow: hidden;
}
More examples are described here.