Thank you so much @CDRX2 . Where there is background I tried to enter an “if state = on” or off but it didn’t work. This is my code, is very simple code.
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
icon_height: 80px
show_state: true
icon: mdi:ceiling-light
theme: macOS Theme
name: Switch Tavolo
entity: switch.sonoff_tavolo_switch_1
card_mod:
style: |
ha-card {
background: yellow; (here I've tried to use some strings copied on that forum using if else but can't get a good result)
border-radius: 5px;
overflow: hidden;
border: solid 3px rgb(0,0,0,255);
width: 50%;
height: 100%;
}
Thank you so much, it’s worked.
Sorry if I take advantage of your kindness, but I would have another problem. I have now set the buttons to 50% of the width because I wanted to put them side by side, but I see that anyway on my lovelace there are only 3 columns. How do you increase them and maybe put all the buttons for which I have set the width to 50%?
Not exactly sure I understand what you’re trying to do. But take a look at the grid card.
It’ll let you put your buttons into one of the lovelace columns. You can then specify how many columns / rows you want, and it’ll scale the button cards to fit. It can replicate both / either horizontal or vertical stacks, plus more. The next 3 rows are a single 2x3 grid.
The top row of this image is a 1x5 grid, if I add another button, I’d probably make it a 2x3 grid and everything will resize. Both grid cards are nested in a vertical-stack (although I could have used a 1x2 grid )
Could @Ildar_Gabdullin or anyone else help me out and point me in the right direction for adding CSS styles to the regular standard grid card.? I don’t think this is something that normally gets styled so there’s nothing really on it in the forums. I’m specifically trying to add styling to accomplish two things on the grid card.
Add styling that will change the spacing between each of the cards within the grid. I’m trying to increase the space on the side of each card in the grid because some of the cards in my smaller grids look like they’re almost on top of each other. I found one way to do this using mod-card and it works but I want to see if there is a better way or if this is the correct way.
Add styling that will increase the top and bottom margins of the grid to create more space between the grid and the top/bottom of the cards within it. The problem I’m having is the top of the box-shadow style gets cut off on the cards in the top row of the grid. I think this is because the cards in the top row of the grid sit flush or almost flush with the edge of the grid card itself. I used the browser element inspector to increase the top-margin and that solves the problem but I’m lost as to how to correctly add the styling to the grid card. Shadow roots and all of that still confuse me.
I’ve searched and searched and cannot find an answer.
Is it possible with card_mod to remove the background and shadow from an entities card within an auto-entities card?
I’m not able to set the height of a state-switches’ div to 100% to have the same height like the other containers without a state switch. I tried a lot of things, but it still doesn’t work.
The div#root has to be set to 100%, but I’m struggling with the solution.
1st post → link at the bottom → styles for media-player
And next time please post your failed attempts w/o any excessive code which is not related to the issue.
Same is about using jinjia templates. First achieve a desired result w/o templates → then add templates.
Beside, that this is idea is wrong at all, because there is of course a iif, instead of guessing, Michele should always have a first look at the examples from Ildar and then have a look in the html dom, and try there changes in the browser. And you will directly see, that the background CSS attribute in ha-card is not related to the background to change.
Good morning Ildar and thanks for the suggestions. I had completely missed all those examples you posted on the discussion, now I will certainly have less problems to configure my lovelace. Thanks again, and thanks for the tips on how to post, I’ll treasure it.
Edit: I’ve seen your posts, and used for my case this code
my question is simple: it’s possible to add an IF for choose background color according to the state of the media? E.g. I’ve a PS4, it’s in IDLE status, but I see only cyan, and when it’s turned off I can’t choose the color. @Ildar_Gabdullin please can you help me?
)
