I am not using card mod as well, I was using the bubble card style in a vertical stack. I don’t know if you saw my code above and my image, but the only thing I wasn’t able to do is to change the background color of the HA card itself:
I’m new to the party and just digging into this card. I’ve searched the documentation and this thread but there’s a lot of info so I may have missed this. I’ve created two pop-ups and a horizontal stack. Why is the stack at the bottom of the page? How do I move it to the top? Thanks.
Thank you @Cloos! I was able to achieve what I needed based on your suggestion and I am using card_mod. Is there a way to decrease the height of this slider?
ahhh, I see. I love what you’ve developed so far. I’ve built multiple software companies (though I still can’t code worth a damn), so I know how hard it is to build good UX/UI. Hats off to you for creating and evolving this card.
Have you tried this in your pop up icon container? By that I mean, when you click the Weather button in your horizontal button stack, are you able to get the dynamic Weather icon in your pop up header?
I ask because I’m using the same workaround in my horizontal button stack, which works as you’ve noted with card mod, yet cannot achieve the same in my Weather popup itself - the icon to the left of the .bubble-name is just a space where an icon should be.
Unfortunately I have not been able to template a header icon inside a popup yet. I’ll let you know if I manage to do it eventually.
Meanwhile, do you by any chance know how to template the actual text inside a horizontal button stack? I want my button inside horizontal stack for a weather popup to display a state of an entity.
Thanks for the quick reply! I was having trouble using the example from the documentation “change the background of a button…” using .button-buble-card-container only, as the color “mixed” with the background of the card itself when the entity is ‘on’. I noticed in the HTML that when the entity is using an “is-on” class, the background is set to --accent-color, which means to use a customized color I would need to also set .button-bubble-background-color to 0,0,0,0 to avoid blending. Does that sound right?
You may have to change your weather provider entity (weather.forecast_home) to something else though. I have not fully tested it yet but it works for current conditions.
When I color the icon against a white background, it’s washed out, as if the white is a layer above the icon. In the example shown, the icon color is the same as the button background but clearly doesn’t appear that way. Is this something I can adjust via CSS or is the result of how the buttons are constructed?
Sorry to reply to my own - hope that’s not bad form? I realize my question does reference the Bubble theme, but I think the real question deals with how to implement the problem statement via the Bubble cards and CSS. Let me know if it’s too much off-topic!
Problem statement is simple: I want to ignore --accent-color for buttons that are ‘on’. They use the is-on style defines in styles.ts, which sets the card background to --accent-color. This hides the new background I want to conditionally set based on the entity state. I don’t want to delete --accent-color because it has a nice effect on other areas of the dashboard.
This seems a little funky, so could someone tell me if this is correct? If I use to use background-color: or color: under the .bubble-button-background, it has no effect.
Hi there, I have an issue that just popped up after installing the latest version. I have kiosk mode on, and now when I put ?edit=1 at the end of the string to edit my dashboard the entire screen goes black and I can’t see anything. Please help.
I have a whole load of dashboards with heavy use of bubble card pop ups and buttons. I’m trying to implement a feature where I overlay a full screen with customisable opacity to further ‘dim’ the screen at night. It partly works but all of the cards including the vertical stack pop up cards are over the overlay element. That element is set with a z-index of 9999 so in theory should appear over the top of everything. The possible issue is if something has broken the z-index layers? Any idea if bubble card should support that?
This is the snippet of the code I’m using for the overlay:
cards:
- type: custom:mod-card
style: |
ha-card {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, {{ states('input_number.bedside_table_device_overlay_brightness') }}); # Use the variable here
z-index: 9999;
pointer-events: none; # Make overlay non-interactive
display: flex;
justify-content: center;
align-items: center;
}
ha-card > div {
pointer-events: auto; # Make the inner elements interactive
}
Of course it could be my code or something else on the page.
I have a similar overlay feature (for dimming the screen if a dropdown is opened) which broke a few updates ago, I think it was because of some changes to the z-index. I’m not totally sure how I fixed it, but it was some of the following:
add ‘!important;’ to the z-index (always worth a try)
add ‘transform: none !important;’ to the bubble popup container (stops changes to the z-index of cards if your overlay is within a popup)
make sure your applying the z-index to the topmost container if the overlay is not inside a popup (you can check this in the dev console of your browser)
