Closed stmrocket closed 10 months ago
I am seeing this behavior as well. I used to set the header background as transparent and then draw a background image across the whole screen. Now the header will go transparent but the image is not drawn behind the header.
Have the same problem before have transparent but now it is not working after update. If scroll down see transparent:
I have the same issue. 118.5 worked well and all releases after that has broken this.
Another person here who was enjoying transparent title bar and is now looking for a solution
If someone is interested in a workaround with card-mod simply put this to your theme. Don't forget to edit the theme name, delete the background in your views and put it in the css code. (background-image)
card-mod-theme: YOURTHEMENAME
card-mod-root: |
hui-view {
background: none !important;
}
ha-app-layout {
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-image: url("/local/images/wallpaper/background.png") !important;
background-attachment: fixed !important;
}
I am having the same issue. Adding the code suggested by panhans to my theme had no impact (I changed the theme name and also the background image url). Still not transparent until scrolling.
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.
The issue persists in Home Assistant Core 2021.7.2.
The issue persists in Home Assistant Core 2021.8.8
Issue is still there with 2021.9.7
Issue is still there for me. Very frustrating. 2021.10.4
Issue persists in HA Core 2021.11.5 Would really like a HA that doesn't look totally horrible.
Issue persists in HA Core 2022.2.1
Any update on this? Issue still persists on HA Core 2022.2.9.
2022.4.7 seems to hold on to the problem
Any update on the issue? Still broken in 2022.6.6 :(
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.
The issue persists in Home Assistant Core 2022.9.5
2022.11 and issue persists
The issue persists in Home Assistant Core 2022.12.6
2023.2.5 and issue persists
Now I can no longer get transparent header at all
ITS WORKINGGG!!! 👍🏼
ITS WORKINGGG!!! 👍🏼
How are you doing it? Please provide some detail...
ITS WORKINGGG!!! 👍🏼
How are you doing it? Please provide some detail...
I am using this theme: https://github.com/JOHLC/transparentblue
Weird, applying that theme mine is still not transparent. Are you applying any other code with card-mod outside the theme?
Weird, applying that theme mine is still not transparent. Are you applying any other code with card-mod outside the theme?
Are you on the latest version of Home Assistant? Also note: You have to scroll down one for it to show like that.
Previously with 2023.4 it was opaque, even if I scrolled down. I can confirm that is no longer the case, not using that theme but the ios dark theme and google dark theme. I can scroll and the header is transparent, however I still have not managed to extend the background under the header.
I realize that was the original issue, but in 2023.4 it broke to the point where the header was not transparent even when scrolling.
I was able to make the header transparent but still cannot get the background to show under the header, which was the point of this issue. Your theme is loading a separate header background in only that section as far as I can tell…Sent from my iPadOn May 10, 2023, at 1:44 PM, Joel @.***> wrote:
Weird, applying that theme mine is still not transparent. Are you applying any other code with card-mod outside the theme?
Are you on the latest version of Home Assistant? Also note: You have to scroll down one for it to show like that.
—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.***>
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.
3 years on-going issue, any updates on this please?
Bumping this. Have not found a way to make the header transparent in-app
And his done it ladies and gentlemen, Ill post my yaml below for everyone.
`Google-Dark-Theme: card-mod-theme: Google-Dark-Theme header-height: 45px card-mod-root: |
background: url('/local/colour.png') fixed;
background-size: cover;
margin-top: auto !important;
height: calc(100vh - env(safe-area-inset-top)) !important;
}
.header {
background: rgba(20,20,20,0.1) !important;
}
card-mod-view-yaml: | .: | hui-view { background: none !important; } hui-masonry-view { padding-top: var(--header-height); }
app-header-text-color: 'rgba(255, 184, 5, 1)' app-header-text-color: "white" lovelace-background: 'center / cover no-repeat url("/local/colour.png") fixed' app-header-background-color: 'rgba(1, 87, 140, 0.1)' primary-color: "#209cee" light-primary-color: "#B6B6C1" primary-background-color: "#212121" secondary-background-color: rgba(25, 25, 25, 0.7) divider-color: var(--primary-background-color) accent-color: rgba(255, 159, 9, 1) modes: light: {} dark: {}`
@Bergasha This looks great! I haven't worked with card mod before, is this a required custom component? Also, which version of Home Assistant Core are you running?
@fenster24 it is a requirement mate, just install it in Hacs. I'm running version 2024.3.0
After upgrading to the latest today, my transparent header now works! I didn't make any changes, or add any card mods.
Core 2024.5.3
Supervisor 2024.05.1
Operating System 12.3
Frontend 20240501.1
Checklist
The problem
Prior to 2020.12.0, adding transparency to the header using a theme would result in the Lovelace background showing through the header. After upgrading, the background appears to start below the header even with header transparency.
Expected behavior
The header will change to the specified transparency and the Lovelace background will show through.
Steps to reproduce
Environment
State of relevant entities
Not Applicable
Problem-relevant configuration
From theme:
Background image from ui-lovelace:
Javascript errors shown in your browser console/inspector
None shown.
Additional information
Header as shown in Frontend 20201111.2:
Header as shown in 20201212.0:
The view icons are different as the 20201111.2 image was taken from a system running the same theme / background configuration but not yet upgraded.