If I scroll down see the transparent:
When not scroll see this without transparent:
Replace part of my code above with
background: url("/local/backgrounds/yourname.jpg") !important;
Could you share a mockup? Also this should be in regular card-mod, not the themes thread.
Did you figure out how to make the header bar transparent on iOS. Adding -webkit prefix doesn’t work for me. Even better for what I’m trying to do - would you happen to know how to remove the header all together?
As for removing the header, just use kiosk-mode with only disable_header.
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?