I am getting the following, I placed the image in the right folder and named it the same.
Changed the border colour to --divider-color
I ended up adding the picture as a header, using the below code.
Card Code
- type: entities
entities:
- entity: sensor.system_monitor_last_boot
format: datetime
name: Last Boot
card_mod:
style: |
hui-generic-entity-row {
border: none !important;
}
- entity: sensor.system_monitor_processor_use
name: Cpu
card_mod:
style: |
hui-generic-entity-row {
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{% if perc >= 59 %} {% set bar = '255,0,0' %}
{% elif perc >= 44 %} {% set bar = '128,0 0' %}
{% elif perc >= 24 %} {% set bar = '255,165,0' %}
{% elif perc >= 9 %} {% set bar = '0,100,0' %}
{% else %} {% set bar = '0,128,0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%,
rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%);
}
- entity: sensor.system_monitor_processor_temperature
name: Temp
card_mod:
style: |
hui-generic-entity-row {
background:
{% set temp = states(config.entity)|float(0) %}
{% set rest = 100 - temp %}
{% if temp >= 85 %} {% set bar = '255,0,0' %}
{% elif temp >= 75 %} {% set bar = '128,0,0' %}
{% elif temp >= 65 %} {% set bar = '255,99,71' %}
{% elif temp >= 55 %} {% set bar = '255,69,0' %}
{% elif temp >= 45 %} {% set bar = '255,140,0' %}
{% elif temp >= 35 %} {% set bar = '255,165,0' %}
{% else %} {% set bar = '0,128,0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{temp}}%);*/
linear-gradient(to right, rgba({{bar}},0.9) 0%, rgba({{bar}},0.9) {{temp}}%,
rgba({{bar}},0.6){{temp}}%, rgba({{bar}},0.2) 100%);
}
- entity: sensor.system_monitor_memory_usage
name: Memory
card_mod:
style: |
hui-generic-entity-row {
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{% if perc >= 85 %} {% set bar = '255,0,0' %}
{% elif perc >= 75 %} {% set bar = '128,0,0' %}
{% elif perc >= 60 %} {% set bar = '255,165,0' %}
{% elif perc >= 50 %} {% set bar = '165,42,42' %}
{% else %} {% set bar = '0,128,0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
linear-gradient(to right, rgba({{bar}},0.9) 0%, rgb({{bar}},0.9) {{perc}}%,
rgba({{bar}},0.6){{perc}}%, rgba({{bar}},0.2) 100%);
}
- entity: sensor.system_monitor_disk_usage
name: Disk
card_mod:
style: |
hui-generic-entity-row {
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{% if perc >= 59 %} {% set bar = '255,0,0' %}
{% elif perc >= 44 %} {% set bar = '128,0 0' %}
{% elif perc >= 24 %} {% set bar = '255,165,0' %}
{% elif perc >= 9 %} {% set bar = '0,100,0' %}
{% else %} {% set bar = '0,128,0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%,
rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%);
}
- entity: sensor.system_monitor_swap_usage
name: Swap
card_mod:
style: |
hui-generic-entity-row {
background:
{% set swap = states(config.entity)|float(0) %}
{% set rest = 1000 - swap %}
/*{% set factor = 0.06 %}*/
{% if swap >= 768 %} {% set bar = '255,0,0' %}
{% elif swap >= 640 %} {% set bar = '255,215,0' %}
{% else %} {% set bar = '50,205,50' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest*factor}}%, {{bar}} {{swap*factor}}%);*/
linear-gradient(to right, rgba({{bar}},0.9) 0%, rgba({{bar}},0.9) {{swap}}%,
rgba({{bar}},0.1){{swap}}%, rgba({{bar}},0.1) 100%);
}
- entity: sensor.home_assistant_v2_db_size
name: Home Assistant V2 DB size
card_mod:
style: |
hui-generic-entity-row {
border: none !important;
}
header:
type: picture
image: >-
/local/home-assistant/home-assistant-wordmark-monochrome-on-dark.png
tap_action:
action: none
hold_action:
action: none
footer:
type: graph
entity: sensor.home_assistant_v2_db_size
hours_to_show: 168
detail: 1
card_mod:
style:
hui-sensor-entity-row:
$: |
hui-generic-entity-row {
height: 25px;
padding: 0px 16px;
border-radius: 24px;
border: 1px groove var(--divider-color);
}
.: |
.card-content {
background: var(--ha-color);
}
ha-card {
color: white;
--card-mod-icon-color: white;
--mdc-icon-size: 20px;
font-weight: bold;
}
