Hi, can i also use this code for Horizontal Stack Card Configuration ? If so where do I need to place the code
Can someone help me here, I am missing something I know in the YAML setup.
when I add this to my config file:
frontend:
themes: !include_dir_merge_named themes
No Borders:
ha-card-border-radius: 0px
ha-card-border-color: rgba(0,0,0,0)
I get this error when I check config.
Invalid config for [frontend]: [No Borders] is an invalid option for [frontend]. Check: frontend->frontend->No Borders. (See /config/configuration.yaml, line 84).
If I take out this part:
!include_dir_merge_named themes
Then it checks out ok, but when I restart my system all my custom Themes are gone that I use for other pages.
How can I fix the border issue and keep my link of the themes folder?
No Borders:
ha-card-border-radius: 0px
ha-card-border-color: rgba(0,0,0,0)
This is already a theme, compare the structure with your other themes in your theme directory. Create a new yaml file in your theme directory with the content abov No Borders:
ha-card-border-radius: 0px
ha-card-border-color: rgba(0,0,0,0) .
2 Likes
that should not go into your configuration yaml but into the yaml file of the theme you are using.
YES! That would be great. I personally hate the new one, with outline/borders it feels like the UIs I wrote in the 2000āsā¦ If we could set details like border, radius it would be best, and everyone would be happy. Now, is there anyone who can contribut that? xD
1 Like
have a look into the āpre 2022.11 themesā Iāve createdā¦ 
3 Likes
I am using the same google theme, and I would like to add the no border to it. Did you find out to do it?
Using your them over the google one, I kind of like it more. From GitHub, I understood that the outline version has no border and a couple of options for shadow, but instead, it does have borders. Does it?
I tried all 4 options and only Home-Assistant Pre-2022.11.0 Theme has no border. Am I doing something wrong?
The Therme was supposed to have the Same Border and Border Radius as the Default Theme before 2022.11.
I still need to do an Update/Change on the Icon colors ā¦ What exactly do you want?
Maybe I can add a Variant completely without borders, but Not Sure how this will Look like
Hi, yes, thatās correct.
The āPre-2022.11.0ā Theme is the default one to recreate the look of HA before the 2022.11 update where basically only the shadows created a slight border around the cards.
The other ones are some alternate themes where I wanted to remove the shadows for example, so it required a slight border to keep the cards divided from the background.
let me check what further options I can implementā¦ maybe, I can remove the border on the "outline edge with shadows variant, since there, the shadows will work the same way as in the default pre 2022.11 version.
And maybe, I will add a new variant completely without borders and shadows.
1 Like
I like a modern and clean look. I am still learning the differences between cards and theme to understand what I would like to achieve and how.
I am working on it
I still consider some additional changes on the icon colors - since there were also some changes within the last releasesā¦
Most of the colors have been reverted back within the recent updates so I donāt need to have them in the theme
Maybe, Iāll implement some different colors which Iām using locally on my theme right nowā¦
right now, I am thinking of having (most) of the state colors in green ā¦ which does work for me personally:
rather than having yellow, purple, and so on ā¦ but I canāt change everything within the theme.
If the people are OK with the color choices, I think Iāll update the themes accordingly [the colors can then still be changed in the theme itselfā¦ but would be lost with another update]
1 Like
Looks great to me.
thanks
I will then add these color changes to the theme and push an update later
1 Like
Iām having the same same problem, and I canāt figure out where this code to fix it goes. Can you please provide some clarity?
you can either use the yaml of your theme (if you are using a custom theme)
or you can use card mod to get rid of the borders.
theme:
./themes/{theme_name}/{file}.yaml
add
ha-card-border-radius: "4px"
ha-card-border-width: "0px"
ha-card-box-shadow: "0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)"
that should restore the default with a slight shadow around the cards
If you remove the ha-card-box-shadow then the card will not have any shadows.
If you donāt use any custom theme, you need to use Card_mod.
In this case, you probably need to add the above code from C.G.B.Spender to the yaml of every cardā¦
1 Like
Hi all, can someone help me?
I am using ācustom:stack-in-cardā to combine 2 cards. It looks like this:
I would like to get rid of that rectangle thatās in the middle but cannot figure out how.
Here is my code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
background: none;
border: none;
}
entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate
multiline_secondary: false
primary: |2-
{% set d ={
'Delayed start': 'Delayed Start',
'Running': 'Running',
'Cycle is finished': 'Cycle Ended',
'Off': 'Off'
} %}
{{ d.get(states(entity)) }}
secondary: >
Time - {{states('sensor.electrolux_sawa_washing_machine_wm1_timetoend')}}
Min
{{states('sensor.electrolux_sawa_washing_machine_wm1_cyclephase')}}
{{states('sensor.electrolux_sawa_washing_machine_wm1_cyclesubphase')}}
icon: >-
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %}
mdi:washing-machine
{% elif
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Cycle is finished') %}
mdi:washing-machine-alert
{% else %}
mdi:washing-machine
{% endif %}
icon_color: >-
{% set state=states(entity) %} {% if state=='Running' %} blue {% elif
state== 'Delayed start' %} orange {% elif state== 'Cycle is finished' %}
purple {% else %} grey {% endif %}
- type: custom:mushroom-template-card
entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate
- type: custom:mushroom-chips-card
alignment: center
card_mod:
style: |
ha-card {
background: none;
border: none;
}
div.chip-container {
margin-top: -20px;
--chip-border-width: 0px;
--chip-background: none;
}
chips:
- type: template
icon: mdi:tshirt-crew-outline
entity: sensor.electrolux_sawa_washing_machine_wm1_programuid
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: '{{states(''sensor.electrolux_sawa_washing_machine_wm1_programuid'') }} '
- type: template
icon: mdi:thermometer
entity: sensor.electrolux_sawa_washing_machine_wm1_analogtemperature
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{{states('sensor.electrolux_sawa_washing_machine_wm1_analogtemperature')
}}Ā°C
- type: template
icon: mdi:alpha-s-circle-outline
entity: sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{{states('sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed')
}}
- type: template
entity: binary_sensor.electrolux_sawa_washing_machine_wm1_doorlock
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{% set d ={ 'off': 'Locked', 'on': 'Unlocked', } %}
{{d.get(states(entity)) }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:lock
{% else %}
mdi:lock-open-outline
{% endif %}
card_mod:
style: |
ha-card {
height:110px !important;
width: 285px
background: none;
border: none;
}
Any help would be appreciated.
The stack-in-card custom card does not hide the borders added with 2022.11 release. There is an issue on that in their issuetracker Borders are showing up from HA Core version 2022.11 Ā· Issue #46 Ā· custom-cards/stack-in-card Ā· GitHub
That project has not had commits in 3 years, it is probably not getting updates any time soon.
Hi all, Iām losing my mind pinpointing my particular issue and could really use some guidance. Iām using the āGoogle Themeā from HACS, and after seeing the original post here months ago, I was able to remove the borders from all my cards by updating both dark and light portions of the theme YAML to include āha-card-border-width: 0pxā. (Code snippets below).
However, for the last few months I have a situation where my browser (Brave and MS Edge mobile/desktop) displays a card border outline ONLY on the Light theme. Nothing has changed, yet the theme has decided to ignore the additional code snippet I included months ago. What is super odd to me are two things:
- Switching to the dark theme in the browser removes the borders.
- Using the Home Assistant Android app doesnāt display the borders for either light or dark theme.
Light theme:
card-background-color: rgb(255, 255, 255)
ha-card-background: rgb(255, 255, 255)
ha-card-border-color: rgb(235, 235, 235)
ha-card-border-width: 0px
paper-dialog-background-color: var(--card-background-color)
paper-listbox-background-color: var(--card-background-color)
paper-card-background-color: var(--card-background-color)
Dark theme:
card-background-color: rgb(32, 33, 36)
ha-card-background: rgb(32, 33, 36)
ha-card-border-color: rgb(42, 43, 46)
ha-card-border-width: 0px
paper-dialog-background-color: var(--card-background-color)
paper-listbox-background-color: var(--card-background-color)
paper-card-background-color: var(--card-background-color)
I donāt have theme, so where should I put this 2 lines?