I previously used card-mod to increase the size of the icons in my header bar, but at some point I lost that change. I thought @Ildar_Gabdullin posted about it, but I cannot find that in here either.
How do you change the size of the header bar icons?
I do not remember about changing an icon’s size on a header.
But you may try it yourself using my examples of customizing a header:
card-mod thread → 1st post → link at the bottom → examples for themes
I hide the search magnifying glass and 3-dot menu.
card-mod-root-yaml: |
.: |
app-toolbar > ha-icon-button {
display: {{'none' if is_state('input_boolean.hide_admin','on')}};
}
app-toolbar > ha-button-menu {
display: {{'none' if is_state('input_boolean.hide_admin','on')}};
}
However, it doesn’t hide them in the Settings page.
I noticed a different path, (ha-panel-config vs. ha-panel-lovelace) but I don’t know how to approach it:
Settings page:
Main page:
Suggestions?
I’m using this to change the color of a single card-mod popup:
card_mod:
style:
ha-dialog$: |
div.mdc-dialog__surface {background: rgba(64,64,64,1.0) !important}
How do I modify that to insert into a theme to change the background for all of my popups? This suggests I just add ‘–’ in front of background, but that does not work. I’ve tried a few other variations which also don’t work. Thanks.
I have a problem with inside light gray border lines - could You help me to entirely get rid off them?
cards:
- cards:
- cards:
- entity: sensor.drukarka_3d_print_status
name: CR-6 SE
type: entity
icon: None
- entity: switch.gniazdko_drukarka3d_pietro
hold_action:
action: more-info
show_icon: true
show_name: false
tap_action:
action: toggle
type: button
type: horizontal-stack
- entities:
- entity: switch.drukarka_3d_led
show_header_toggle: false
type: entities
mode: vertical
type: custom:stack-in-card
- card:
cards:
- entity: sensor.drukarka_3d_print_progress
type: custom:bar-card
color: null
positions:
icon: 'off'
indicator: inside
- entities:
- entity: sensor.drukarka_3d_print_time_left
- entity: sensor.drukarka_3d_print_time
- entity: sensor.drukarka_3d_print_file
- entity: sensor.drukarka_3d_current_z
- entity: sensor.drukarka_3d_tool_0_target
- entity: sensor.drukarka_3d_bed_target
show_header_toggle: false
type: entities
- cards:
- entity: switch.drukarka_3d_emergency_stop
hold_action:
action: more-info
name: Stop
show_icon: true
show_name: true
type: button
- entity: switch.drukarka_3d_cancel_print
hold_action:
action: more-info
name: Anuluj
show_icon: true
show_name: true
type: button
- entity: switch.drukarka_3d_pause_print
hold_action:
action: more-info
name: Pauza
show_icon: true
show_name: true
type: button
- entity: switch.drukarka_3d_shutdown_system
hold_action:
action: more-info
name: Wyłączenie
show_icon: true
show_name: true
type: button
type: horizontal-stack
mode: vertical
type: custom:stack-in-card
conditions:
- entity: binary_sensor.drukarka_3d_printing
state_not: 'off'
type: conditional
- card:
decimals: 1
entities:
- entity: sensor.drukarka_3d_tool_0_temperature
name: Dysza
show_state: true
- entity: sensor.drukarka_3d_bed_temperature
name: Stół
show_state: true
hours_to_show: 1
name: Temperatura dyszy/ stołu
points_per_hour: 120
type: custom:mini-graph-card
conditions:
- entity: binary_sensor.drukarka_3d_printing
state_not: 'off'
type: conditional
- entities:
- entities:
- entity: sensor.filament_temperatura
name: false
entity: sensor.filament_wilgotnosc
icon: mdi:thermometer
name: Temperatura/ wilgotność filamentu
secondary_info: last-changed
type: custom:multiple-entity-row
show_header_toggle: false
type: entities
type: vertical-stack
Thank you in advance for any help and info!
final challenge in my menubar…
this is in full width:
but changing the window makes the text template cover all of my tab icons:
would there be any way to limit the space the text template can use to a fixed width, (and maybe scroll in that text)?
I am using an input_boolean to use that template:
.: |
/* Hide chevrons
paper-tabs$: |
.not-visible {
display: none;
} */
/* Optionally set the three-dots transparency,
to allow for a replacement template text. */
ha-button-menu {
color: {{'transparent' if is_state('input_boolean.menu_options_template','on')}}; /*var(--primary-color)*/
}
/* Optionally set a replacement template text. */
ha-button-menu::before {
content: "{{states('sensor.custom_header_template')}}";
color: var(--app-header-text-color);
visibility: visible;
position: relative;
top: 24px;
white-space: nowrap;
}
so, if it cant be done, I might be able to auto-turn_off that boolean based on the screen width?
hope you can have a look, thanks!
Why does
card-mod-card-yaml: |
.: |
ha-card {
margin-top: 50px;
margin-left: 10px;
margin-bottom: 50px;
margin-right: 10px;
}
apply to the first card of a dashboad differentlythan to the restk?
If I define margin-bottom and top, the first cards on a dashboard has larger margins than all the others.
Hi,
Is is also possible to show the value sof the secundairy entities under the primary?
Its in the mini-graph card
This i allready found to hide the times/dates:
card_mod:
style: |
.info.flex .info__item .info__item__value {
display: none;
}
using this works really nicely:
/* Set the color of the currently selected tab indicator.
Set size of the currently selected tab icon*/
paper-tab[aria-selected=true] {
color: gold;
background-color: rgba(var(--primary),0.3);
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
}
see the screenshots in my post a few above
Hi guys,
I need help with this if statement…it is not working. Why?
elements:
- entity: sensor.latest_grade_adam
style:
color: white
font-size: 3rem
text-align: center
padding-top: 38%
height: 100%
left: 50%
top: 50%
width: 100%
tap_action:
action: more-info
type: state-label
- entity: sensor.latest_grade_adam
attribute: subject
style:
background-color: rgba(0, 0, 0, 0.3)
bottom: 0
color: white
font-size: 11px
left: 0
line-height: 2px
text-align: center
transform: initial
width: 100%
tap_action:
action: more-info
type: state-label
image: /local/unavailable.png
card_mod:
style: |
ha-card {
min-height: 60px !important;
}
hui-state-label-element {
background-color:
{% if (states(sensor.latest_grade_adam) > 3) %}
rgb(60, 179, 113)
{% else %}
rgb(60, 279, 113)
{% endif %}
}
type: picture-elements
try it with a conversion '{% if (states(sensor.latest_grade_adam)|int(default=0) > 3) %}`
Thanks for reply! Not working though 
Ok I fixed it. There where ’ missing arround sensor.latest_grade_adam
yep. that’s one of the easier aspects of card_mod, it uses regular jinja templates you can/should always check in the dev tools/template.
right, so after initial succes downgrading to 3.1.4 and see the icon mods in the tabs work properly again and change based on templates like:
paper-tab[aria-label='Verwarming'] ha-icon$: |
ha-svg-icon {
--card-mod-icon: {% set action = state_attr('climate.front_room','hvac_action') %}
{{'mdi:radiator' if action == 'heating' else
'mdi:radiator-disabled' if action == 'idle' else
'mdi:radiator-off'}};
}
Ive now updated to HA 2022.12.0b2, and the icons wont change any longer.
The template still is fine…
anyone else seeing changes/issues in this regard?
Is it card-mod, or is it HA Frontend…
update
Thought is was fixed updating to 2022.12.0b3 and saw the tab icons change correctly. However, updated to 12.0b4 and as of this morning the icons are again fixed, and not responding to the templates in card-mod…
its the same on ll of my tabs, icon doesnt change, icon color does:
paper-tab[aria-label='Beweging'] ha-icon$: |
ha-svg-icon {
--card-mod-icon: {{'mdi:motion-sensor' if is_state('binary_sensor.motion_sensors_all','on') else
'mdi:motion-sensor-off'}};
color: {{'red' if is_state('binary_sensor.motion_sensors_all','on')}};
}
@arganto please forgive my tag, but you’re the one I remember having discussed several menu-items toggle with me.
mwc-list-item[aria-label="Zoeken"] {
{% if is_state('input_boolean.hide_search','on') %}
display: none;
{% endif %}
}
doesnt work, because there is no label on the Search item. Would you know another way to do so? Meanwhile Ill ask Philip if the menu item an get a label 
Can you point me to place/DOM, where I can find it? Then I have less to search.
that would be
#layout > app-header > app-toolbar > ha-button-menu > mwc-list-item:nth-child(2)```
although the silliest thing just happened: the mdi:loupe now doesnt show anymore, nor does the menu item ‘Search’… huh
So you are talking about the mobile/slim view, where the search you want to hide is in threedotmenu?
Then you can use e.g. the path you have posted, the child(2)-way. If this is always the case this way.
Didn’t we have exactly this already in the past? 
At least I have this already commented out in my theme from the last tests for you.
Yes, I thought so too but then I saw the Search item pop up and figured something might have changed …
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);
}
}