I a not that expert in CSS 
Can I change it with the card mod? just the dividers, I donât want to change others (e.g., secondary text color).
hello I asked if you could take a look at my problem, I think it is some conflict, as I have already indicated, the error message occurs even if in my configuration I do not use the style command.
Because there are other ways to style elements using card-mod https://github.com/thomasloven/lovelace-card-mod#mod-card
Youâre giving me very little to work with. I donât use the button-card, so I have no idea how or why it works. Especially since I can only guess on how you have tried to configure itâŠ
Conflict with what?
My crystal ball is away being polished today.
Either way, the code that produces that error runs ONLY if thereâs a style: in some element.
Thanks for your answer, @thomasloven
Iâm sorry not having given you more details earlier but I was trying to troubleshoot it more in order to isolate the issue the best I can so I can show you a way to reproduce it.
Btw, I tried with a mod-card and the same problem occured.
For now, Iâm using your deprecated card-modder which doesnât have the issue (but I am limited with it because of the shadow-root)
Here is a basic code of it (I have many more CSS rules in my current setup) so you can reproduce it easily (youâll need custom:button-card for it though)
Note. In the custom:button-card version, I tried to put style and debug_cardmod: true under custom_fields: > slider > card: but it didnât work at all - I mean, there was none debug like if cardmod wasnât detecting the style tag âŠ?
Hope thatâll help you to either help me on this or fix it if thatâs something fixable from your side.
# Works well
- type: entities
show_header_toggle: false
entities:
- type: custom:slider-entity-row
entity: light.office
full_row: true
#debug_cardmod: true
style: |
ha-slider{
background-color: rgba(0,0,0,0.2);
border-radius: 15px;
}
# The buggy one
- type: custom:button-card
entity: light.office
custom_fields:
slider:
card:
type: custom:slider-entity-row
entity: light.office
full_row: true
styles:
grid:
- grid-template-areas: '"i n" "i l" "slider slider"'
- grid-template-columns: 7% 1fr
- grid-template-rows: 1fr
debug_cardmod: true
style:
"div#container div#slider slider-entity-row":
$: |
ha-slider{
background-color: rgba(0,0,0,0.2)!important;
border-radius: 15px!important;
}
Now try to shift both sliders⊠The one under the button card will remove the customized CSS rulesâŠ
Thanks. That lets me se the problem.
Card-mod applies styles after the card has finished rendering the first time, it then assumes there will be no major changes to the card layout during the lifetime of the card.
In the case of button-card, however, it seems it constantly throws away and rebuilds anything in custom_fields->...->card every time anything changes in the render (which would e.g. happen when the hass object updates - i.e. when any state changes in your HA system).
Thatâs kind of a bad thing, but hard to avoid - while possible. Though it will have to be fixed in button-card (Let me know if you need to discus this @RomRider).
I can imagina a workaround, though; see below.
The reason I was confused was because I thought you had:
- type: custom:button-card
custom_fields:
slider:
card:
type: custom:slider-entity-row
style: |
... etc...
which shouldnât work.
However, thatâs where mod-card could help you. If you wrap only slider-entity-row in it:
- type: custom:button-card
custom_fields:
slider:
card:
type: custom:mod-card
card:
type: custom:slider-entity-row
...etc...
style: |
Styles for slider-entity-row goes here
...etc...
Then mod-card will be rebuild along with slider-entity-row and apply new styles every time that happens.
is it possible to change the margins of all cards? I inspected with the browser and I should modify:
.cards > * {
display: block;
margin: 4px 4px 8px;
}
how can i do it?
Apply the style to the wrapping card - which I can only assume one - as described in the readme - which I can only assume that you have read and understood.
read yes, understood less.
I set panel mode: true.
this is what i got with card-modder. I created 3 large cards (the three columns) and then I inserted the cards in each of the three columns. and I got a space between the three vertical columns.
now I would like to simplify the structure simply by setting a greater margin between the cards.
I can get the effect with this code for each card:
style: 'ha-card {margin: 0px 16px 0px 16px;}'
but I would like to set it once for all the cards or set it directly, if possible, in the theme
1 Like
I have been using this card without a problem and itâs awesome.
But now I am stuck.
When I use it in combination with conditional cards the change doesnât apply until I reload the page.
What am I doing wrong?
Sorry, my english is poor, and thanks
- type: custom:mod-card
style: |
ha-card {
overflow: hidden;
--ha-card-box-shadow: none;
border-radius: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
box-shadow: 0px 4px 5px 4px rgb(66, 74, 82);
}
card:
type: custom:vertical-stack-in-card
cards:
- type: picture-elements
image: /local/images/controlaire/controlaire_entero.png
elements:
- type: conditional
conditions:
- entity: switch.airedorm_power
state: "on"
elements:
- type: image
entity: switch.airedorm_modocool
tap_action:
action: toggle
state_image:
"on": /local/images/controlaire/cool_on.png
"off": /local/images/controlaire/cool_off.png
style:
top: 5%
left: 40%
width: 15%
Thomas⊠I asked you a question on teh auto-entities thread about card not refreshing when an entity disappears (I am using geo_location entities which can be added and removed and I get a yellow band on the card. This has only just started happening with latest auto-entities card or maybe Home Assistant frontend has changed). Anyway, I was wondering if wrapping the card using card-mod might force it to refresh when a state changes�? Or if you have any other solutions.
Problem solved going back to card-modder.
Thank you Thomas for your work and dedication!
Youâd have to put your cards in a stack, and apply styles to that using mod-card.
Or you could try putting a gap-card between your cards: https://github.com/thomasloven/lovelace-gap-card
vertical-stack-in-card has a ha-card element, so using mod-card on that wonât work.
Mod-card is not the solution, itâs the workaround for the few cases where the good method doesnât work.
1 Like
I canât see that that could help⊠not sure what may be causing your problems, reallyâŠ
@thomasloven
Only problem that drives me nuts is that âauto-refreshâ which makes inspecting elements with a browser dev tools impossible âŠ
Yep. Thatâs the very same problem. Button-card, not card-mod.
You can pause javascripts in the âSourcesâ tab, perhapsâŠ
I would really appreciate an example of how you style the slider-entity-row, because Ive tried the exact config, and cant get anything to change in the sliderâŠ
would love to style the margin to the card border (0px), the color, and the background of the sliderâŠ
Iâm having trouble styling vertical-stack-in-card. It contains a ha-card, so I thought I could style it like anything else but it doesnât appear to be working.
Here are two test cards I set up to demonstrate it:
type: 'custom:vertical-stack-in-card'
style: |
ha-card {
border: 5px outset rgb(50,50,50);
}
cards:
- type: entities
title: Lights
entities:
- light.bedside_light
- light.porch_light
- type: entities
title: Switches
entities:
- switch.remote_plug_1
- switch.remote_plug_2
type: entities
style: |
ha-card {
border: 5px outset rgb(50,50,50);
}
entities:
- entity: light.bedside_light
- entity: light.porch_light
title: Lights (Outside of stack)
Here is what they look like:
You can see that only the one not in the vertical-stack-in-card has the border applied.
Normally, the the Chrome Developer Tools, I can see a card-mod element added to the DOM under the ha-card element when it is working correctly but this isnât appearing for the one in the vertical-stack-in-card. It does show up if I use card-mod on nested cards in the stack.
Is there something wrong with my config?