I sent a picture, and marked red.
对不起，我误解了你的意思，我以为你需要的是上面的外出文本提醒，这个天气的加入很简单只需要在侧边栏的相应位置加入一张天气的卡片即可
- entity: weather.forecast_wo_de_jia
theme: Caule Black Rose Glass
style:
border-radius: 5%
height: 15%
left: 11.1%
top: 58%
width: 18%
type: weather-forecast
Thank you. On the code
how would i add another state to this
So it changes colour both on Max temp Reached and Diverting
- type: custom:button-card
entity: sensor.myenergi_eddi_21533936_status
name: <marquee behavior=scroll scrollamount="3">Eddi Status</marquee>
variables:
state_on: >
[[[ return ['Max temp reached'].indexOf(!entity || entity.state) !== -1; ]]]
custom_fields:
icon: >
<ha-icon icon="mdi:shower"></ha-icon>
template:
- base
I do something similar with my alarm card.
- type: custom:button-card
entity: alarm_control_panel.home_alarm
name: Security
tap_action: !include popup/alarm.yaml
template:
- base
- icon_home_shield
variables:
state_on: >
[[[ return ['armed_night', 'armed_away', 'armed_home'].indexOf(!entity || entity.state) !== -1; ]]]
state_off: >
[[[ return ['disarmed'].indexOf(!entity || entity.state) !== -1; ]]]
state: >
[[[ return !entity || entity.state; ]]]
styles:
card:
- background-color: >
[[[
return variables.state_on ? 'rgba(255, 255, 255, 0.85)'
: variables.state_off ? 'rgba(115, 115, 115, 0.25)'
: variables.state === 'triggered' ? 'rgba(255, 204, 204, 0.85)'
: variables.state === 'pending' ? 'rgba(255, 227, 190, 0.85)'
: 'rgba(115, 115, 115, 0.25)';
]]]
- color: >
[[[
return variables.state_on ? '#4b5254'
: variables.state === 'triggered' ? '#4b5254'
: variables.state === 'pending' ? '#4b5254'
: '#97989c';
]]]
2 Likes
Seems like the 2023.4 version has broken the background image. Anyone figured out how to fix already?
card-mod-root: |
ha-app-layout {
background: url('/local/background.png');
background-size: cover;
}Hello, do anyone sitting on a code for a battery icon for the phone?
1 Like
2023.4 Cannot read properties of null (reading'config') · Issue #173 · matt8707/hass-config · GitHub
1 Like
Actually, i have tried that before, but the “cover” it’s only covering this part:
Wich its not wrong, because the hui-view its only that part:
Btw, card-mod and button card are up to date. The issue is that my height is bigger than yours, so even with the header-hide fix, the background still get this bug.
Did anyone know how to aply the effects directly on the ? this should solve the problem.
Hello, your weather card is very cool. Can you share your ui overlay. yaml card configuration and which weather entity do you use? I copied the code you shared, it doesn’t work properly
Hello again. Well… your solution was working perfect for almost a year now… Until 2023.4.0… Now I had quite some fight to get my animated background and transparencies back everywhere… I managed to “fix” all stuff, except the sidebar. Any clue how to get my transparency back like it was before? I tred dozens of things, but I don’t find the one layer to get transparent to break through to the video background…
Bram Kragten came up with this idea:
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer").shadowRoot.querySelector(".mdc-drawer").style.setProperty("--mdc-theme-surface", "transparent");
It does change something aka the sidebar parts that should be transparent are now lighter, but there is some layer left somewhere…
// resources:
// - url: '/local/sidebar.js?v=2'
// type: module
// test red background
const body = document.querySelector("body");
body.style.backgroundColor = "red";
// transparent sidebar
const main = document.querySelector("home-assistant").shadowRoot.querySelector("home-assistant-main");
const haDrawer = main?.shadowRoot.querySelector("ha-drawer");
const haSidebar = main?.shadowRoot.querySelector("ha-drawer > ha-sidebar");
haDrawer.style.setProperty("--mdc-theme-surface", "transparent");
haSidebar.style.backgroundColor = "transparent";
Red background test confirmed. And if it helps… the whole screen flashes red on a refresh. I hope that my “fixed” addon is not the culprit, but as I can switch the sidebar to slim mode and the video is working behind it I hoped that this is not the problem.
Or here as video: MS Snipping Tool record of Firefox - YouTube
On the right you see my fixed stuff showing the animated background again. These two realized that:
//Transparent background of Main-Section
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view").style.setProperty("background", "transparent");
//Semi-Transparent background of Header
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("div:nth-child(1) > div.header").style.setProperty("background-color", "rgba(0,0,0,0.5)");
hey
how did you make the floorplan on the right card on your screen?
Hi
i used your code and everything works well but the background, fanart is sometimes not visible, but in the sensor the jpg are definied.
aired:2023-02-24|title:Die Hart|fanart:/local/upcoming-media-card-images/plex/Plex_Recently_Added_Movies/f12325.jpg|poster:/local/upcoming-media-card-images/plex/Plex_Recently_Added_Movies/p12325.jpg
I am still far away from understanding all the styling mess. But if I get things right, something chops off a part of the layer where Animated Background addon would like to draw the video on. Thus the red down below shows up. Am I right with that? Closing / expanding the sidebar changes the size of the draw area and thus the video works fine “behind” the sidebar. Soo that is why adding more and more transparent does not help as I would need a trick to increase the draw size to the whole screen first?