Styling sidebar
Some time ago I realized that undocumented "card-mod-sidebar" is supported.
Here some examples of useful / useless styles.
Styling “menu” button:
card-mod-sidebar-yaml: |
.: |
.menu ha-icon-button {
color: red !important;
--mdc-icon-size: 10px;
}
.menu .title {
color: cyan;
}
Additional info instead of the “main title”:
card-mod-sidebar-yaml: |
.: |
.menu .title {
display: none !important;
}
.menu:after {
content: "Issues: {{states('input_number.test_number_2')|float(default=0)|round(0)}}";
margin-left: 16px;
}
Here "input_number.test_number_2" stands for a number of HA issues.
Additional info below the “main title”:
If some HA issues detected:
If no issues:
card-mod-sidebar-yaml: |
.: |
.menu .title:after {
content: "{% if states('input_number.test_number_2')|float(default=0) > 0 -%}
\A Issues: {{states('input_number.test_number_2')|float(default=0)|round(0)}}
{%- endif %}";
white-space: pre;
font-size: 12px;
display: block;
line-height: 4px;
color: red;
}
Sidebar’s background & icons:
card-mod-sidebar-yaml: |
.: |
:host {
background: rgba(255, 0, 0, 0.3) !important;
}
.iron-selected paper-icon-item {
background: yellow;
}
.iron-selected paper-icon-item ha-icon {
color: red !important;
}
Sidebar’s background & icons while hovering:
card-mod-sidebar-yaml: |
.: |
a:hover paper-icon-item ha-icon {
color: red !important;
}
a:hover paper-icon-item .item-text{
color: red;
}
a:hover paper-icon-item {
background: yellow;
}
Customizing a particular menu item: (fill free to select colors yourself, this is not about a design)
If security mode ON, no security issues detected:
If security mode ON, some security issues detected:
If security mode OFF:
card-mod-sidebar-yaml: |
.: |
a[data-panel='lovelace-security'] paper-icon-item ha-icon {
{% if is_state('input_boolean.test_boolean','off') %}
color: yellow !important;
{% else %}
{% if states('input_number.test_number_2')|float(default=0) > 0 %}
color: red !important;
{% else %}
color: green !important;
{% endif %}
{% endif %}
}
a[data-panel='lovelace-security'] paper-icon-item .item-text {
color: cyan;
}
Here "input_boolean.test_boolean" stands for “security mode ON”, "input_number.test_number_2" for a number of security issues.
Alternatively - a blinking menu item (+changed icon !!!) when issues are detected:
card-mod-sidebar-yaml: |
.: |
a[data-panel='lovelace-security'] paper-icon-item {
{% if is_state('binary_sensor.security_mode_guarded_home','off') %}
{% set COLOR = 'rgb(250,218,67)' %}
{% set ICON = 'mdi:shield-off' %}
{% else %}
{% if states('sensor.security_number_of_issues')|float(default=0) > 0 %}
{% set COLOR = 'red' %}
{% set ICON = 'mdi:shield-alert' %}
animation: blinkhard 1.5s linear infinite;
{% else %}
{% set COLOR = 'green' %}
{% set ICON = 'mdi:shield-check' %}
{% endif %}
{% endif %}
--sidebar-text-color: {{COLOR}};
--sidebar-selected-text-color: {{COLOR}};
--sidebar-selected-icon-color: {{COLOR}};
--sidebar-icon-color: {{COLOR}};
--card-mod-icon: {{ICON}};
}
@keyframes blinkhard {
0%,49% {
opacity: 0;
}
50%,100% {
opacity: 1;
}
}
or even with added additional info:
card-mod-sidebar-yaml: |
.: |
a[data-panel='lovelace-security'] paper-icon-item {
{% if is_state('binary_sensor.security_mode_guarded_home','off') %}
{% set COLOR = 'rgb(250,218,67)' %}
{% set ICON = 'mdi:shield-off' %}
{% else %}
{% if states('sensor.security_number_of_issues')|float(default=0) > 0 %}
{% set COLOR = 'red' %}
{% set ICON = 'mdi:shield-alert' %}
animation: blinkhard 1.5s linear infinite;
{% else %}
{% set COLOR = 'green' %}
{% set ICON = 'mdi:shield-check' %}
{% endif %}
{% endif %}
--sidebar-text-color: {{COLOR}};
--sidebar-selected-text-color: {{COLOR}};
--sidebar-selected-icon-color: {{COLOR}};
--sidebar-icon-color: {{COLOR}};
--card-mod-icon: {{ICON}};
}
@keyframes blinkhard {
0%,49% {
opacity: 0;
}
50%,100% {
opacity: 1;
}
}
a[data-panel='lovelace-security'] paper-icon-item .item-text:after {
{% if is_state('binary_sensor.security_mode_guarded_home','off') %}
{% set STATE = 'OFF' %}
{% else %}
{% if states('sensor.security_number_of_issues_home')|float(default=0) > 0 %}
{% set STATE = 'ON (' + states('sensor.security_number_of_issues_home') + ' issues)' %}
{% else %}
{% set STATE = 'ON' %}
{% endif %}
{% endif %}
content: "\A {{STATE}}";
font-size: 11px;
white-space: pre;
}
or even with a badge:
card-mod-sidebar-yaml: |
.: |
a[data-panel='lovelace-security'] paper-icon-item {
{% if is_state('binary_sensor.security_mode_guarded_home','off') %}
{% set COLOR = 'var(--theme-security-off)' %}
{% set ICON = 'mdi:shield-off' %}
{% else %}
{% if states('sensor.security_number_of_issues_home')|float(default=0) > 0 %}
{% set COLOR = 'var(--theme-security-issues)' %}
{% set ICON = 'mdi:shield-alert' %}
{% else %}
{% set COLOR = 'var(--theme-security-on)' %}
{% set ICON = 'mdi:shield-check' %}
{% endif %}
{% endif %}
--sidebar-text-color: {{COLOR}};
--sidebar-selected-text-color: {{COLOR}};
--sidebar-selected-icon-color: {{COLOR}};
--sidebar-icon-color: {{COLOR}};
--card-mod-icon: {{ICON}};
}
a[data-panel='lovelace-security'] paper-icon-item:after {
{% set NUMBER_OF_ISSUES = states('sensor.security_number_of_issues_home')|float(default=0) %}
{% if is_state('binary_sensor.security_mode_guarded_home','on') and NUMBER_OF_ISSUES > 0 %}
content: "{{NUMBER_OF_ISSUES|round(0)}}";
{% if NUMBER_OF_ISSUES < 10 %}
font-size: 14px;
padding: 0px 6px;
{% elif NUMBER_OF_ISSUES >= 10 and NUMBER_OF_ISSUES < 100 %}
font-size: 11px;
padding: 0px 4px;
{% elif NUMBER_OF_ISSUES >= 100 and NUMBER_OF_ISSUES < 1000 %}
font-size: 8px;
padding: 0px 3px;
{% else %}
font-size: 6px;
padding: 0px 2px;
{% endif %}
font-weight: 400;
left: calc(var(--app-drawer-width,248px) - 42px);
position: absolute;
min-width: 20px;
box-sizing: border-box;
border-radius: 50%;
background-color: var(--theme-security-issues);
line-height: 20px;
text-align: center;
color: var(--text-accent-color, var(--text-primary-color));
{% endif %}
}
Tested in Chrome 107.0.5304.123 (Win10x64), iPad (iOS 15.7).
Tested in 2023.2.5.
Update 24.11.23:
How to add a badge to a minimized sidebar:
here
A small addition: how to animate an icon only:
card-mod-sidebar-yaml: |
.: |
a[data-panel='lovelace-settings'] paper-icon-item ha-icon {
animation: spin 3s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}