Why do you have a plus inside of your if statement? 
Also you might need to quote your entity IDs.
Icons spread out or clumped together in the middle?
To break the really long {% if %} construct over multiple lines for readability. Have tested it both ways - split this way using plus as well as all of it on one really long line.
Oh, missed the 2nd part of your message. Let me test quoting entity-ids. Will revert.
Clumped together in the middle (just like it is on left but in the middle)
Including overflow menu and sidebar or leave them in their default places.
Did it work?
Kendell, at the moment I have Overflow menu and sidebar hidden, microphone icon and āthree dotsā as well and I would like to keep it hidden.
Apply
display: flex;
justify-content: center;
to #tabsContainer in the shadow-root of ha-tabs
Thank you.
Sorry for my following question, as it may hit my limits
Is this correct portion of the code:
ha-tabs: {
height: var(--header-height);
--paper-tabs-selection-bar-color: var(--button-card-background-color-on) !important;
color: var(--app-header-text-color) !important;
display: flex;
justify-content: center;
}
Under card-mod-root-yaml, do something like this:
card-mod-root-yaml: |
ha-tabs$: |
#tabsContainer {
display: flex;
justify-content: center;
}
.: |
/* The rest of the code here */
Kendell, you sir are da MAN ! Sorry couldnāt test this any earlier. Busy day at work.
Your suggestion to put entities in quotes was spot on! The following construct works perfect:
{% if is_state('binary_sensor.all_leak_sensors_group', 'on') or +
is_state('sensor.main_garage_protect_smoke_co2_group', 'Emergency') or +
is_state('sensor.ecolink_firefighter_smoke_co2_group', 'Emergency') %}
ha-tabs {
--paper-tabs-selection-bar-color: var(--leak_detected_color) !important;
}
{% elif is_state('sensor.main_garage_protect_smoke_co2_group', 'Warning') %}
ha-tabs {
--paper-tabs-selection-bar-color: var(--lux_hi) !important;
}
{% else %}
ha-tabs {
--paper-tabs-selection-bar-color: var(--accent) !important;
}
Apologizing in advance, I have another question for you regarding an earlier post to change color of specific tabs. Following your advice, tried the following construct adding it at the bottom of the above code:
paper-tab[label='Kitchen'] {
color: red !important;
}
Tried different variations, putting the tab name (Kitchen, in this example code) in single quotes, double quotes, no quotes, but no luck.
Any idea what am I doing wrong above?
Thanks for your help.
Try aria-label instead of label.
Iām using the Card-mod code below to select which elements are āblurredā using the addon popup-backdrop-filter.
Example:
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
background: rgba(0,0,0,0.0);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 1em;
}
It does a great job with popups. However, I canāt figure out how to also blur the background when the card editor is open (see below screenshot). Could someone please assist me to also blur the card editorās background? I havenāt been successful in finding the right element(s) to add to the code above.
This is what the card editor looks like currently:
Thanks in advance for your time.
Worked perfect! Thank you so much!!
I can now change the tab icon colors basis an entity-id state, example below:
/*************************************************************************/
/* change the color of Kitchen tab if any water leak sensor is activated */
/*************************************************************************/
{% if is_state('binary_sensor.kitchen_leak_sensors_group', 'on') %}
paper-tab[aria-label='Kitchen'] {
color: var(--leak_detected_color) !important;
}
{% endif %}
Kendell, thank you for your inputs. Couldnāt have done this without your expertise!
What happens if you put * { color: red; }? Can it even apply? What if you donāt use the shadow root selector and apply directly with the * with .:?
Iāve tried to use the code youāve posted above to have the header at the bottom. After hours of trying, Iāve managed to have a theme that suits my needs. The only problem i have is that i would like to increase the height of the header (which currently is at the bottom) in order to accomodate space for the iPhone āhomeā bar. Iāve tried all I was able to immagine but nothing is working. Iāll leave my current theme here if someone . Thanks!
#
final:
card-mod-theme: final
header-height: 48px
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)
Itās standing right in front of you.
Also this isnāt valid, change it to var(--header-height).
Iāve corrected the mistake. Iād also tried modifying the header-height value before writing here but the result is not what I was expecting. If i decrease it the header background becomes thinner, while if i increase it the header background doesnāt change but the icons move down. Iāve attached a couple of screenshot to clarify my explanation. My goal is to expand the header up and bring the icons up as well to avoid using the back to home gesture instead of swiping through cards. Thanks for the help!
