no you shouldnât do that.
you can however create a new theme, and leave it empty except for the generic bit.
It used to work before, but since the introduction of modes this stopped (was a bug in the first place, so never meant to be working)
Default adjusted:
<<: *generic
just noticed (by chance, because only happening in my Christmas theme 
) that
card-mod-card-yaml: |
.: |
ha-card {
overflow: hidden
}
interferes with the menu options popups (overflows) of the integration cards.
while it should be:
I need the overflow: hidden because I have a default mod on my card-headers, and border-radius: 0px. In my Christmas theme I use 25px, and that makes the card -header mod overflow:
created a template for now:
ha-card {
overflow: {% if is_state('input_boolean.hide_card_overflow','on')%} hidden {% endif %};
}
that I can use if needed (when checking the integrations during Christmas time).
Its too bad really we can not set that in a .card-header mod? example, my current header mods:
card-mod-card-yaml: |
.: |
ha-card.class-header-margin .card-header {
background-color: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
ha-card.class-header-no-margin .card-header {
background-color: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
}
if anyone has a suggestion to do this differently Id be glad to check. thanks!
can we hide the cogwheel on the more-info-dialog cards Entity settings? Id like to prevent that other than administrators can edit the entitiesâŚ:
I do already have several more-info options in place under card-mod-more-info-yaml: | in my card-mod-theme, but cant find the correct selector hereâŚ
(âha-more-info-dialogâ).shadowRoot.querySelector(âha-dialog > div.heading > ha-header-bar > ha-icon-button:nth-child(3)â).shadowRoot.querySelector(âmwc-icon-buttonâ).shadowRoot.querySelector(âbuttonâ)
card-mod-more-info-yaml: |
.: |
ha-icon-button {
display: none;
}
I would still propose, forget about all this and try to see this in the tree. For me itâs much easier, esp. if you see then possible improvements there (e.g. point 3 below).
Example.
thanks! very nice.
Ive added:
.: |
ha-icon-button {
display: {{'none' if is_state('input_boolean.hide_more_info_settings','on')}};
} /* hide more info settings cogwheel */
it does also hide the closing X, but we can simply click next to the panel to do that tooâŚ
Same tree example. If you see such things, you directly see, that there is a slot attribute, different in both ha-icon-buttons, so you can e.g. narrow down to
ha-icon-button[slot="actionItems"] {
display: none;
}
in this case.
Even better , because on mobile, we do need the X
Thanks!
Did you get this figured out Marius?
I was working on something similar. Iâve been able to adjust the size of all the icons and I can colorize them individually. But what Iâd like to do is get only the currently selected icon to be colourized and slightly bigger than the other header icons. I canât figure out how the âcurrent pageâ line under the icon knows what current selection is.
Like you, I was going to try and figure out the active path using the browser_mod sensor to get the colorization to work, but I think Iâd have to actually create separate themes for each device since the device canât be determined. Obviously as it stands the navigation changes on the specified device affect all devices sharing the same theme. Not sure I want to go that route just for this. And I have idea how to go about sizing for just the current selected icon.
card-mod-root: |
ha-icon {
--mdc-icon-size:
{% if state_attr('sensor.browser_kiosk_internal','path') == '/lovelace-kiosk/home'%} 45px
{% else %} 20px
{% endif %}
;
}
paper-tab[aria-label="Home"] {
{% if state_attr('sensor.browser_kiosk_internal','path') == '/lovelace-kiosk/home' %} color: orange
{% else %} color: var(--primary-color)
{% endif %}
;
}
BTW - my css templates donât interfere with navigation at all in android, fully kiosk, or chrome. Not really sure what the difference is between mine and yours.
no, I couldnât bother anymore. Cast is not that useful in the first place, as it only shows half of the items in my dashboard⌠and, since we can not template the device_id with âthisâ it didnt work as I believe it should work, merely a hack of things.
Ive now moved my Cast items to another view, where we can suffice using the hide_if_unavailable.
fwiw, of have a complete separate menubar made out of custom:button-card, thats does all that I want in coloring etc etc and change icons. The card-mod-theme options simply are too complex or inadequate to do all of that. Hope the dynamic icon will one day be available. Using all SVG paths is way too complex.
have a look if you want: Shortcut menu bar ¡ GitHub
btw, about the icon size for the active selected tab, I take it you want this:
/* 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: 40px;
}
or
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
Makes it dynamic.
but now we need to change the tab indicators position again to align with thatâŚ
Does anyone know, Is there a way to override the sidebar and/or toolbar icons with images using card-mod?
One of my posts in this thread is exactly about this, use Search
Thank you!
Does anyone know how I can change the Sidebar icons to images? I managed a similar thing with the toolbar but can manage to do the same for the Sidebar.
I thought I had followed the instructions.
Why isnt the header placing itself on the bottom with this code?
#
headerbottomtheme:
card-mod-theme: headerbottomtheme
height: var(48);
bg-filter: blur(5px)
card-mod-root-yaml: |
ha-app-layout$: |
#contentContainer {
padding-top: 0px !important;
padding-bottom: 48px !important;
}
.: |
ha-tabs {
height: var(48);
--paper-tabs-selection-bar-color: var(--primary-color) !important;
color: var(--app-header-text-color) !important;
}
paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
color: var(--primary-color) !important;
}
app-header {
top: calc(100vh - 48px) !important;
bottom: 0 !important;
transform: unset !important;
background: rgba(0,0,0,0.5); !important;
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px)
}
ha-menu-button {
display: none !important;
}
paper-tabs$: |
paper-icon-button {
display: none;
}
app-header {
height: 200px !important;
}
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
background: rgba(0,0,0,0.5);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 20px;
}
ha-header-bar:
$: |
.mdc-top-app-bar {
background: none !important;
}
card-mod-card: |
ha-card {
backdrop-filter: var(--bg-filter);
-webkit-backdrop-filter: var(--bg-filter);
}
# Header:
background-image: url ("/local/wallpaper/19730")
app-header-background-color: var(--secondary-background-color)
app-header-text-color: rgb(229, 229, 234)
# Main Interface Colors
primary-color: rgb(10, 132, 255)
light-primary-color: var(--primary-color)
primary-background-color: rgb(0, 0, 0)
secondary-background-color: rgba(0, 0, 0, 0.5)
divider-color: rgb(44, 44, 46)
accent-color: rgb(10, 132, 255)
# Text
primary-text-color: rgb(242, 242, 247)
secondary-text-color: rgb(174, 174, 178)
text-primary-color: var(--primary-text-color)
disabled-text-color: rgb(72, 72, 74)
# Sidebar Menu
sidebar-icon-color: rgb(199, 199, 204)
sidebar-text-color: var(--primary-text-color)
sidebar-background-color: rgb(28, 28, 30)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: rgb(10, 132, 255)
sidebar-selected-text-color: var(--sidebar-selected-icon-color))
# Buttons
paper-item-icon-color: rgb(174, 174, 178)
paper-item-icon-active-color: rgb(10, 132, 255)
# States and Badges
state-icon-color: rgb(10, 132, 255)
state-icon-active-color: rgb(174, 174, 178)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: rgb(242, 242, 247)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: rgb(10, 132, 255)
paper-slider-active-color: rgb(10, 132, 255)
paper-slider-secondary-color: var(--paper-slider-active-color)
# Labels
label-badge-background-color: rgb(28, 28, 30)
label-badge-text-color: rgb(242, 242, 247)
label-badge-red: rgb(255, 69, 58)
label-badge-green: rgb(48, 209, 88)
label-badge-blue: rgb(10, 132, 255)
label-badge-yellow: rgb(255, 214, 10)
label-badge-gray: rgb(72, 72, 74)
# Cards
card-background-color: var(--secondary-background-color)
paper-listbox-background-color: var(--primary-background-color)
ha-card-border-radius: "20px"
ha-card-background: rgba(10, 10, 10, 0.4)
paper-card-background-color: var(--ha-card-background)
paper-card-backdrop-filter: blur(5px)
code-editor-background-color: var(--disabled-text-color)
# Switches
switch-checked-button-color: rgb(242, 242, 247)
switch-checked-track-color: rgb(48, 209, 88)
switch-unchecked-button-color: rgb(242, 242, 247)
switch-unchecked-track-color: rgb(99, 99, 102)
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: rgb(28, 28, 30)
table-row-alternative-background-color: rgb(44, 44, 46)
data-table-background-color: rgb(0, 0, 0)
# Dropdowns
material-background-color: rgb(28, 28, 30)
material-secondary-background-color: rgb(44, 44, 46)
mdc-theme-surface: var(--secondary-background-color)
# Pre/Code
markdown-code-background-color: rgb(58, 58, 60)
Hey Arganto!
did you already check the new quickbar entity in the menu of the latest frontend:
Though maybe nice in functionality, it is not my preference to always show that, and to anyone⌠so. Id like to hide it, but can not find the correct item.
Also, on Mobile this takes away costly screen estate. I really feel it should be optional
this is the PR: Quickly search for entities from the Overview Dashboard by bdraco ¡ Pull Request #12324 ¡ home-assistant/frontend ¡ GitHub
inspector shows:
is this enough info to add a line in the card-mod-theme and hide it?
now what do I set display: none; to
using:
ha-icon-button {
display: {{'none' if not is_state('input_select.mode','Developer')}};
}
is a bit too active and changes the bar to:
probably because thereâs also the 3-dots icon:
we can see setting the color to red
if I set the color to be transparent:
ha-icon-button {
color: {{'transparent' if not is_state('input_select.mode','Developer')}};
}
that hides the icon but still hovers the handle, and doesnt free the space
ha-icon-button {
visibility: {{'hidden' if not is_state('input_select.mode','Developer')}};
}
kills all functionality in the menu.
all in all I need it to only address the Magnifier icon
would appreciate if you could have a lookâŚ
Not yet. But will do so as soon as I have it in an update.
thx. as far as I can see now, its a bit of an issue because the ha-icon-button hasnât got an identifier, like the next button. Maybe we can set it to the first-child or something like that, but thats beyond my current insightsâŚ
I did have a go with one if my other regular cards:
card_mod:
style:
'.box div:nth-child(3)':
'div:nth-child(1)':
ha-icon-button:
$:
mwc-icon-button:
$: |
.mdc-icon-button {
and that didnt help ;-0
so, Ill await your findings with some healthy impatience
something else: I made nice progress on modding the tab icons, with things like:
card-mod-root-yaml: |
paper-tab[aria-label='Presence'] ha-icon$: |
ha-svg-icon {
--card-mod-icon: {{states('sensor.presence_icon')}};
color: {{states('sensor.presence_color')}};
}
however, if the view title contains spaces, this throes an error, eg on
paper-tab[aria-label='Settings motion'] 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')}};
}
is this a bug? or can we somehow mitigate that in the syntax?
issue in the card-mod repo: SyntaxError: The string did not match the expected pattern ¡ Issue #199 ¡ thomasloven/lovelace-card-mod ¡ GitHub
please have a look, thanks!
btw, for now, I fixed by taking out the spaces and replacing them with a - to make Settings-motion. Although I dint particularly like it to show like that in the hover
or when as active tab (and sized up):
I do like the icon changing
find my adapted card-mod-themes in my Gist
just as a small followup, add animation to your tab/view icons:
paper-tab[aria-label='Summary-groups'] ha-icon$: |
ha-svg-icon {
--card-mod-icon: {{'mdi:alert' if states('sensor.hubs_badge') > '0' or states('sensor.critical_badge') > '0'}};
color: {{'red' if states('sensor.hubs_badge') > '0' or states('sensor.critical_badge') > '0'}};
animation: {{'pulse 2s ease 0s infinite normal none' if states('sensor.hubs_badge') > '0' or
states('sensor.critical_badge') > '0' else 'none'}};
}
@keyframes pulse {
0% {
opacity: 0.8;
transform: scale(0.2);
}
80% {
opacity: 0;
transform: scale(1.2);
}
100% {
opacity: 0;
transform: scale(2.2);
}
};
or, shorter:
paper-tab[aria-label='Summary-groups'] ha-icon$: |
ha-svg-icon {
{% if states('sensor.hubs_badge') > '0' or states('sensor.critical_badge') > '0' %}
--card-mod-icon: mdi:alert;
color: red;
animation: pulse 2s ease 0s infinite normal none;
{% endif %}
}
and find a nice animation and build it here: https://webcode.tools/generators/css/keyframe-animation
quick result:
alert:
no alert:
The easiest way to create a separator between tabs in the header:
card-mod-root-yaml: |
.: |
paper-tab[aria-label='separator'] {
/* separator */
padding-left: 0px;
padding-right: 0px;
pointer-events: none;
}
title: separator
path: separator
panel: false
badges: []
icon: mdi:blank
cards: []
views:
- !include ....
##############################################################
- !include views/separator.yaml
##############################################################
- !include ....
padding-left & padding-right values if you want to have the separator shorter or wider:
Also you may use different sets for different widths:
paper-tab[aria-label='separator_short'] {
/* separator */
padding-left: 0px;
padding-right: 0px;
pointer-events: none;
}
paper-tab[aria-label='separator_wide'] {
/* separator */
padding-left: 32px;
padding-right: 32px;
pointer-events: none;
}
and create two files - âseparator_short.yamlâ & âseparator_wide.yamlâ.