Can someone assist me in removing this border line in the middle of my card? I saw someone mention to use card_mod (code below) and I installed it via HACS and was looking at the documentation. I played around with it and can get my font color for my text to change so I know it’s working. Tried plugging it into different places in my YAML, but no change.
well, as said, I use the global theme variable, so don’t have those borders anywhere. Not into Mushroom that much, so you’d best hop over to that dedicated thread, where many have preceded you…
I was able to do in it in this manner. I found that using the custom:stack-in-card makes a difference, versus the custom:vertical-stack-in-card that you used. I couldn’t get it to work with that method.
I am quite new to custom styling and i don’t know whats wrong but no matter what i do i cannot remove the border at all when using horizontal stack card, as you can see its both in the buttons that say “-1 -5 +5 +1” but also on the top status and light card
It doesnt work doesnt matter if i delete the “hui-horizontal-stack-card $: |” lines and just have the code you sent. borders are still there. is it possible you could insert your code to mine just incase i am formatting it wrong
box-shadow: none wont take out borders, it will block any shadow on the cards.
you can set ha-card-border-width: 0px in your theme and have it make any card borderless (its what we need ever since HA change the borders some time ago).
or you can use that on an individual card-mod (for the stack cards you indeed need the mod-card) using border-width: 0px
also it would probably be required to set it to :host
Do you by chance know a good source for how to create a theme and just add the “border-width: 0px” line since ive tried googling how to create themes but can’t really find a way without downloading external themes. again i am a noob to custom home assistant stuff and also not having english as first lang is not helping
The solution of @Mariusthvdb worked for me in the combination of vertical-stack-in-card, conditional-card and Mushroom entity-card or Mushroom number-card.
I didn’t need the custom:mod-card (which by the way isn’t recommended by the card-mod developer) since both vertical-stack-in-card and the mushroom-card contain ha-card elements.
What I can’t seem to do is combine them, I have tried a bunch of different iterations, anyone got any Idea?
As a secondary question I have noticed that when I add a card mod, it works, but when I save the card and go back later to edit it, the card mod is gone. Wondering if anyone else has experienced that?
I’ve tried dozens of modifications with the help of 3 different AI assistants and still cannot manage to remove the top border of my second card (the restriction card).
I’d appreciate any advice!
type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-title-card
title: Front Door
subtitle: Lock Control
alignment: center
- type: custom:restriction-card
card:
type: button
entity: input_boolean.august
show_name: false
state:
- icon: mdi:lock-outline
value: "on"
color: var(--restriction-regular-lock-color, var(--primary-text-color))
- icon: mdi:lock-open-outline
value: "off"
color: var(--restriction-success-lock-color, var(--primary-color))
size: 50px
custom_fields:
name: Unlock Front Door
description: Tap to unlock the front door
restrictions:
confirm:
text: >-
To unlock the front door, please tap the button again to confirm
after clicking "OK".
card_mod:
style: |
custom-restriction-card {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-title-card
title: Front Door
subtitle: Lock Control
alignment: center
- type: custom:restriction-card
custom_fields:
name: Unlock Front Door
description: Tap to unlock the front door
restrictions:
confirm:
text: >-
To unlock the front door, please tap the button again to confirm
after clicking "OK"
card:
type: button
entity: input_boolean.august
show_name: false
state:
- icon: mdi:lock-outline
value: "on"
color: var(--restriction-regular-lock-color, var(--primary-text-color))
- icon: mdi:lock-open-outline
value: "off"
color: var(--restriction-success-lock-color, var(--primary-color))
size: 50px
card_mod:
style: |
ha-card {
border: none;
}
