You could try putting your button cards inside a custom stack-in-card
In combination with card-mod it should allow you to control the background of both the card itself, and the child cards.
Can you show your attempts, so that we can try to improve them?
check my post directly above yours…🔹 Card-mod - Add css styles to any lovelace card - #2781 by Mariusthvdb
and leave out the scroll part if you dint need that.
O.k. got it. Must have been blind to not see that it is possible to combine with css stye notations.
.card-content div:nth-child(2) hui-text-entity-row:
$:
hui-generic-entity-row:
$: |
.info {
color: red;
}
entities:
1 Like
Certainly, and thank you for responding. One attempt was posted here: 🔹 Card-mod - Add css styles to any lovelace card - #2769 by msymms
Marius, thank you. I will try this approach. This is what I am doing.
This is one big custom:button-card. It works okay, but not exactly how I want it. I would like clickable areas within this panel.
I’m pretty sure, that in this example some things are not working (without card_mod) or I didn’t get the approach. Or you did some copy&paste&remove.
Perhaps this could be a starting point:
type: custom:mod-card
card_mod:
style: |
ha-card {
background: linear-gradient(0deg, rgba(158,196,233,1) 0%, rgba(43,105,144,1) 100%) !important;
}
card:
type: custom:layout-card
layout_type: grid
layout:
grid-template-areas: |
"sky city"
cards:
- type: markdown
view_layout:
grid-area: sky
content: "Round Rock"
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: initial
}
- type: markdown
view_layout:
grid-area: city
content: "Round Rock"
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: initial
}
Wow. yes, thanks. Let me try that.
tbh, this is a bit of a mixed card… why dont you use one of the weather cards? you can set a background there too:
Marius, I like this, especially the background. I did look at the weather cards. I am trying to put together a kiosk “view/panel” that would have 6 of these cards in one view; showing weather from cities with family. The problem is all that information is tough to get on one screen. So, I wanted to hide some, making it available through a more-info dialogue (especially with the weather alerts - a link to the entire alert is my goal there). Then there is the mobile phone display to deal with later on. I will keep posting my progress. You and @arganto have given me some hope. Thanks so much. I am sure I will be back.
I see. And sure, please come back, we’re here to help !
Use template sensor
type: custom:stack-in-card
keep:
background: false
box_shadow: false
margin: true
outer_padding: false
cards:
- type: entities
entities:
- sun.sun
- sun.sun
- type: custom:mod-card
card:
type: grid
columns: 4
cards:
- &ref_button
type: custom:button-card
aspect_ratio: '1:1'
name: Laundry
entity: binary_sensor.service_on_value
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
- *ref_button
card_mod:
style:
hui-grid-card $: |
div#root {
overflow-y: scroll !important;
padding-right: 8px;
padding-bottom: 1px;
max-height: calc(3*101px + 2*8px) !important;
}
- type: entities
entities:
- sun.sun
- sun.sun
I’m trying to achieve the same as you, I have copied your code and moved the hui-horizontal-stack-card (and the #root block) one indent to the left (so it lines up with the .: |), but I’m getting an error currently.
Am I missing something, or is this fixed / bugged in a later version of the card (since your message is over a year old at this point)? Have you still got it working with version 3.1.2?
Edit;
Never mind! Finally figured it out after a couple of hours of trying…
style:
hui-horizontal-stack-card$: |
#root {
justify-content: space-between;
}
- A code should be always placed formatted:
type or paste code here
-
Probably you should use “
|round(0)” - otherwise you get 3 digits after period. -
This issue should not be discussed here - creating template sensors is an off-topic in this thread.
Please create a separate thread in this section in case the problem is not solved yet.
hi Ildar, thanks!
in my experiments, I forgot the hui-grid-card $: | and immediately ran the mod on div#root…
still, Ive solved that bit by using the extra entities card, with the grid card as single entity, so I can mod the entities card as I did above. No need for the mod-card because of that.
however, in both our solutions, the right side scroll bar is taking space of the buttons, which are pushed to the left, while I would love them to stay as before, and take up the full width of the card, and have the scroll bar being displayed over that right side buttons
so, still looking for that.
found it!!
- type: entities
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: none;
}
.card-content {
max-height: 400px;
overflow-y: scroll;
margin: -8px 0px -8px -16px;
padding-right: 0px;
}
thanks to your suggestion above, which made me remember… and test, moving the buttons from the default 16px to the right by 8px. I only had to set padding to 0px and there we are!
no scrollbar when steady:
scrolling beautifully:
and all buttons using the full width!
I do not know what you want to achieve but I must admit that:
-
Posting a code as a picture is not helping to solve the problem - people will not be able to “copy/paste” the code to reproduce the issue.
-
You got this style:
style:
.: |
ha-card {
...
}
element_a:
$:
element_b {
...
}
which is WRONG.
At least it should be (i.e. MAY work if elements & CSS properties are specified properly):
style:
element_a:
$: |
element_b {
...
}
.: |
ha-card {
...
}
I am not a CSS expert at all but I think that scrollbar always occupies some horizontal space…
see above, it is done 
gave it an extra padding-top: 8px; to make the buttons start a bit closer to the header, as they did before scrolling. perfect. and straightforward.