No, I decided to embrace the colored header with my theme and style instead.
Thank you @KTibow. I wasnāt aware of kiosk mode and have now implemented it. However, I was actually referring to the bar with an āXā at the top that appears when a popup is activated. See the picture below. Would you know how to make that not display? I figure since you can close out of the popup by clicking anywhere outside of the popup, having an āXā in the top left corner to close out of it is kinda pointless for me. It also causes issues on iOS. In the screenshot below the bar at the top is transparent so itās not a big deal but on iOS the bar isnāt transparent so I figured I would just remove it altogether if possible
What are you using to make popups?
In the meantime, mind making an FR over there?
on styling badges, is it in anyway possible to use entity in the templates, instead of the entity_name per styled entity? Not wanting to crosspost an entire thread, please allow me to post the example only:
badges:
- entity: person.anne_laure
style: &badge_style
ha-state-label-badge:
$:
ha-label-badge:
.: |
:host {
{% if is_state(entity,'home') %} --label-badge-red: green;
{% else %} --label-badge-red: red;
{% endif %}
}
- entity: person.emmanuel
style: *badge_style
- entity: person.etc
style: *badge_style
I was kinda hoping this to be possible, since Thomasās jinja templates in template-entity-row allow for the entity to be used.
thanks for having a look
NM: had a brainwaveā¦ config.entity it isā¦
sorry.
Has the more-info theme changed yet again? I updated from 116.4 to latest version and am currently fixing all the breaking changes. On iOS the more-info background still works correctly after multiple refreshes, on desktop (Chrome and Edge Chromium) it doesnāt work.
This is my code:
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
background: rgba(0,0,0,0.25);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 0px;
}
Any help?
Full theme post please?
Here you go. It worked fine untill HA 116.4 with code below. I donāt know what has changed since HA117 that causes this with some browsers. Worls fine on iOS (surprisingly), but not on desktop (Win10 Chrome and Edge Chormium)
hohm-day-footer:
# Background image
# Colors
text-color: '#404040' # Black
text-medium-light-color: '#404040' # Medium-light grey text
text-medium-color: '#404040' # Medium grey text
text-dark-color: '#404040' # Dark grey text
bullet-color: 'rgba(64, 64, 64, 0.5)'
accent-color: '#9FD848' # Light Blue
accent-medium-color: '#9FD848' # Decent blue
background-color-2: '#1E293F' # Dark Purple-Blue #3b4049
background-color: '#FFFFFF' # White
background-card-color: '#E0E0E0' # Grey background
border-color: 'rgba(0, 0, 0, 0.00)' #383C46 # Grey border
background-popcard: 'rgba(0, 0, 0, 0.00)'
background-sidebar-selection: "rgba(0, 0, 0, 0.1)"
search-card-background: '#DDDDDD'
# Header
# header-height: 0
primary-color: '#FFFFFF' # Background color
text-primary-color: 'var(--text-color)' # Text
ch-background: '#F5F5F5'
ch-active-tab-color: 'var(--text-color)'
ch-tab-indicator-color: 'var(--text-color)'
ch-all-tabs-color: "rgba(0, 0, 0, 0.30)" # Text
# Left Menu
sidebar-background-color: 'var(--background-color)'
paper-listbox-background-color: 'var(--background-color)' # Background
sidebar-icon-color: 'var(--text-medium-color)' # icons
sidebar-selected-icon-color: 'var(--text-medium-light-color)' # Selected row icon and background (15%)
sidebar-selected-text-color: 'var(--text-color)' # Selected row label
# UI
paper-card-header-color: 'var(--text-color)' # Title in settings
primary-background-color: 'var(--background-color)' # Background (also title background in left menu)
mdc-theme-primary: 'var(--accent-medium-color)' # Action Buttons (save, restart etc.)
card-background-color: 'var(--background-card-color)' # Entity Registry Background
header-shadow-color: 'rgba(0, 0, 0, 0.4)'
# Card
ha-card-background: 'var(--card-background-off)' # Background
dark-primary-color: 'var(--text-color)'
primary-text-color: 'var(--text-color)'
paper-listbox-color: 'var(--text-color)'
light-primary-color: 'var(--text-dark-color)'
secondary-text-color: 'var(--text-medium-color)'
disabled-text-color: 'var(--text-dark-color)'
paper-dialog-button-color: 'var(--text-color)'
mini-media-player-mmp: 'rgba(255, 255, 255, 0.8'
jukebox-card: 'rgba(255, 255, 255, 0.4'
jukebox-slider: 'rgba(255, 255, 255, 0.2'
# jukebox-card: 'rgba(0, 0, 0, 0.4'
# jukebox-slider: 'rgba(0, 0, 0, 0.2'
jukebox-progress: '#FFFFFF'
jukebox-text-color: 'var(--text-color)'
mini-media-player-overlay-base-color: 'var(--text-color)'
mini-media-player-background-opacity: 1
mini-media-player-overlay-color: 'rgba(0, ,0 , 0, 0.0)'
mini-media-player-overlay-color-stop: '1%'
mini-media-player-accent-color: 'var(--media-accent-color)'
mini-media-player-base-color: '#FFFFFF'
time-picker-elements-background-color: 'var(--switch-accent-color)'
time-picker-icon-color: 'var(--text-color)'
time-picker-text-color: 'var(--text-color)'
# Popup-card
# iron-overlay-backdrop-filter: 'blur(17px)'
# iron-overlay-backdrop-background-color: 'rgba(0 ,0 ,0 ,0.25)'
card-mod-theme: hohm-day-footer
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
background: rgba(0,0,0,0.25);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 0px;
}
ha-header-bar:
$: |
.mdc-top-app-bar {
background: none !important;
}
ha-header-bar $: |
.mdc-top-app-bar {
background: none !important;
}
card-mod-root: |
app-header {
display: none;
}
# Icons
state-icon-color: 'var(--accent-color)'
paper-item-icon-color: 'var(--text-dark-color)' # Off
paper-item-icon-active-color: 'var(--accent-color)' # On
light-entity-color: '#FFFFFF' # Light On
switch-entity-color: '#FFFFFF'
radiator-entity-color: '#FFFFFF'
sensor-entity-color: '#FFFFFF'
media-entity-color: '#FFFFFF'
music-entity-color: '#FFFFFF'
mini-media-player-icon-color: '#FFFFFF'
radial-menu-button-color: 'var(--text-color)'
radial-menu-item-color: 'var(--text-color)'
swiper-pagination-bullet-active: 'var(--text-color)'
#Card Button Background
card-background-off: 'rgba(0, 0, 0, 0.05)'
card-background-on: 'rgba(255, 255, 255, 1)'
card-background-light: '#FFD402' # Light On
card-background-switch: '#9FD848'
card-background-radiator: '#C73967'
card-background-sensor: '#F7941D'
card-background-media: '#FA6164'
card-background-music: '#00D1D4'
light-accent-color: '#FFD402'
switch-accent-color: '#9FD848'
radiator-accent-color: '#C73967'
sensor-accent-color: '#F7941D'
media-accent-color: '#FA6164'
music-accent-color: '#00D1D4'
button-text-color: 'var(--background-color)'
# Switches
switch-checked-button-color: 'var(--text-medium-light-color)' # Knob On
switch-unchecked-button-color: 'var(--text-medium-light-color)' # Knob Off
switch-checked-track-color: 'var(--accent-color)' # Background On
switch-unchecked-track-color: 'var(--text-color)' # Background Off
# Slider
paper-slider-active-color: 'var(--accent-color)' # Line On
paper-slider-knob-color: 'var(--text-medium-light-color)' # Knob On
paper-slider-container-color: 'var(--text-dark-color)' # Line Off
paper-slider-knob-start-color: 'var(--text-medium-light-color)' # Knob Off
# Shadows
ha-card-box-shadow: 'inset 0px 0px 0px 1px var(--border-color)'
# HACS
hacs-badge-color: 'var(--accent-color)' # New Badge
hacs-status-installed: 'var(--text-color)' # Installed Icon
hacs-status-pending-restart: 'var(--text-dark-color)' # Restart Icon
hacs-status-pending-update: 'var(--accent-color)' # Update Icon
ha-card-border-radius: '20px'
label-badge-background-color: "#A9A9A9"
label-badge-text-color: "#FFFFFF"
label-badge-red: 'var(--accent-color)' # from Apple systemOrange dark mode
!important should do the trick, or you could just set --dialog-backdrop-filter in the case of the blur.
1 Like
Thanks! Fixed it with !important, should have tried that first.
Has anyone figured out the code to change the text color of all the text inside a more-info dialogue? I managed to change the header text color and close button, but canāt seem to change the rest of the text. Anyone else achieved this?
This is for the close button and header text btw.
.: |
mwc-icon-button {
margin-top: -10px;
color: #FFFFFF;
}
.main-title {
color: #FFFFFF;
letter-spacing: '-0.01em';
font-family: Helvetica;
font-weight: bold;
}
Screenshot with mockup / markup? You might need to shadow-root into it.
I made a screeshot, the ones in red I see is changable with inspect_elements (I have no clue what code I need to insert into theme.yaml though).
The ones in blue I cannot seem to change through inspect element. All it does is change the red parts to white, but not the blue parts.
edit: hereās a imgur link to make it more readable: https://imgur.com/a/WTcbDfD
This is my card-mod section inside theme.yaml so you know what I have currently:
card-mod-theme: hohm-day-footer
card-mod-more-info-yaml: |
.: |
app-toolbar {
background: none !important;
}
mwc-icon-button {
margin-top: -10px;
color: #FFFFFF;
}
.main-title {
color: #FFFFFF;
letter-spacing: '-0.01em';
font-family: Helvetica;
font-weight: bold;
}
$: |
.mdc-dialog {
backdrop-filter: blur(17px) !important;
-webkit-backdrop-filter: blur(17px) !important;
background: rgba(0,0,0,0.25);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 0px;
}
ha-header-bar:
$: |
.mdc-top-app-bar {
background: none !important;
}
ha-header-bar $: |
.mdc-top-app-bar {
background: none !important;
}
Could you give an example of the code that doesnāt work?
Compact Header for card-mod
Iām currently using the below card-mod code for my theme (since itās slightly more compact than the native compact header for Home Assistant). Thereās only one small issueā¦ the microphone icon is a little too close to the 3 dots:
Could someone please let me know what I need to change to make the microphone icon and 3 dots icon spaced further apart?
card-mod-theme: MyCustomTheme
# Header
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
/*Uncomment this if you want the header on the bottom
#selectionBar {
bottom: unset !important;
}
*/
ha-app-layout$: |
/* This corrects top padding for the view. */
#contentContainer {
/* Change this to 0px if you want the header on the bottom */
padding-top: 48px !important;
}
ha-button-menu$mwc-menu$mwc-menu-surface$: |
.mdc-menu-surface {
margin: 10px;
box-shadow: var(--ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));
}
.: |
/* This hides the unused portion of the header. */
app-toolbar {
height: 0;
}
/* This forces background-color and text-color. */
.edit-mode, app-header, app-toolbar {
background-color: var(--app-header-background-color) !important;
color: var(--primary-text-color) !important;
}
/* Uncomment this if you want the header on the bottom
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
hui-masonry-view {
padding-bottom: 60px !important;
}
*/
/* This gives the header in edit mode a different look from the standard header. */
app-header.edit-mode {
border-bottom: 2px var(--primary-color) solid;
padding-bottom: 10px;
}
/* Make the color of the plus white instead of black. */
#add-view ha-svg-icon {
color: #EEE !important;
}
/* Bring voice button back down */
app-toolbar:not([class="edit-mode"]) mwc-icon-button[label] {
top: 0;
right: calc(48px * 1);
z-index: 2;
position: absolute;
}
/* Bring help button back in */
a[href="https://www.home-assistant.io/lovelace/"] > mwc-icon-button {
right: calc(48px * 2);
position: absolute;
z-index: 2;
}
/* Bring close button back in */
mwc-icon-button[title="Close"] {
top: 0;
left: 0;
position: absolute;
z-index: 2;
}
/* Bring add view button back in */
mwc-icon-button#add-view {
position: fixed;
right: 48px;
}
/* Bring edit UI overflow menu back in */
ha-button-menu {
top: 0;
right: 0;
z-index: 2;
position: absolute;
/*Uncomment this out to hide the overflow menu
display: none;
*/
}
/* Hide the title */
app-toolbar > [main-title] {
display: none;
}
/* Hide buttons that are taking up space, but invisible */
menu-button[style="visibility: hidden;"] {
display: none;
}
/* Bring sidebar button back in */
ha-menu-button {
z-index: 2;
top: 24px;
}
/* Set margin on left to be smaller,
and set the bar color to be the primary color
instead of white */
paper-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
margin-left: 48px !important;
}
/* When not in edit mode, shrink the left margin */
app-toolbar:not(.edit-mode) > div > paper-tabs {
margin-left: 6px !important;
}
/* Color selected tabs */
paper-tab[aria-selected="true"] > ha-icon {
color: var(--primary-color) !important;
}
paper-tab[aria-selected="true"] {
color: var(--primary-color) !important;
}
/* Styles for mobile */
@media (orientation: portrait) {
/* Hide sidebar button and keep room for the overflow menu button */
paper-tabs {
margin-left: 5px !important;
margin-right: 48px !important;
}
/* Hide voice button */
mwc-icon-button[label="Start conversation"] {
display: none !important;
}
/* Hide sidebar button */
ha-menu-button {
display: none !important;
}
}
/* Make help button have contrast */
app-toolbar a {
color: var(--primary-text-color) !important;
}
# Badges and columns
card-mod-view-yaml: |
hui-masonry-view$: |
/*Uncomment this if you want the header on the bottom
mwc-fab[title="Add Card"] {
bottom: 96px !important;
}
*/
What HA version are you using? If youāre using the latest version of HA, hereās the latest version of the theme (scroll down to the 
sign): https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook#compactcustom-header
Does anyone know what code to use in order to add blur transparency effect to card-modās compact header code using popup-background filter? ā¦considering the below example would add transparency to dialog-related resources using card-mod in my custom theme. Iām not very good with manipulating styles.
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(10px);
background: rgba(0,0,0,0.0);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 1em;
}
Below, is the code I tried to add to my theme. which is obviously wrong:
card-mod-more-info-yaml: |
$: |
app-header, app-toolbar {
backdrop-filter: blur(5px);
background: rgba(0,0,0,0.32);
}
I donāt think you could style another element based off another item.
1 Like