2022.11: Card borders

Configuration Frontend
1

Just started HA, not checked other functionality - but this new design with borders broke my whole UI.

6 Likes
2

Yeah the frontend seems to have changed to make child cards inherit the border properties of parent cards. I spent ages fixing it.

2 Likes
3

I simply hate these huge round corners.
Why not to make this radius to 50% ?
Then HA will be better adapted to these clients:
изображение
Dev people, don’t you know that a huge radius makes a card SMALLER?
Do not turn the whole Lovelace into a big mushroom card please.
At least revert to the old radius please.

9 Likes
4

I don’t think you’ll persuade the devs to move away from the Material Design standards, but I do note that there are various degrees of rounding that can be applied according to the standard

But what is used for different elements does seem to be defined in this part Material Design (what is a FAB?) EDIT to answer my own question FAB = Floating Action Button!

3 Likes
5

Don’t yell man. This needs two lines in themes, if you want to fix it:

ha-card-border-width: '0px'
ha-card-border-radius: '5px'

At least we can now remove all box-shadow patches from the YAML files.

Edit: check this too

16 Likes
6

Why people need to create a custom theme only to restore the old look? Let us just to revert to the old radius - at least.
Also, are you sure that zero border on your theme will not remove the outer border? Have not tested by myself, seems suspicious.

1 Like
7

Exactly. Here radius seems to be chosen similar to the round icons of the new tile card - which is the ONLY card with a background for icons and this fact makes this new card look not like other standard cards.

8

Sorry for a really noob question, but where should i add this 2 lines to?

9

The second part of my posts points to the fact that there are standard radii for different type of elements. If you think the devs have applied Material 3 wrongly, then tell us where.

If you don’t like Material 3, that is another matter. That is what themes are for.

1 Like
10

Like it says, in your theme.

1 Like
11

I will look at this Material 3 with an attention. Anyway, these rules should be considered as recommendations, not a dogma.

1 Like
12

hm… I have added the ha-card-border-radius to several of my themes, trying different border-radius values - to get more edged look… but nothing does change… ?!

13

This is great, but I too am noobish enough to not know exactly where to enter these lines. Any guidance would be appreciated (I also am not fond of the new look).

Thanks!

14

Have you reloaded themes?

15

If you never use themes it is enough to follow the steps described here:
Defining Themes


# Example configuration.yaml entry
frontend:
  themes:
    No Borders:
      ha-card-border-radius: 1px ## or whatever radius you want
      ha-card-border-color: rgba(0,0,0,0) ## transparent
6 Likes
16

Fo those dissappointed with new card borders; you can restore previous look using these theme variables:

  ha-card-border-width: "0px"         # controls the width of border, set to 0 to remove
  ha-card-border-color: "#xxyyzz"     # controls the color of the border line, set to card background color to blend with card

Either of above will visually remove border line.

6 Likes
17

I really dislike the new UI it broke my dashboard added borders and made cards look like balloons is there any way to revert to previous theme please?

5 Likes
18

There is an even better way to get rid of borders. The following needs the card-mod addon to work. It only removes boarders from the lovelace view, so for example the integration page looks normal.

In your theme config:

your-theme-name:
  card-mod-theme: your-theme-name
  card-mod-root-yaml: |
    .: |
      ha-app-layout {
        --ha-card-border-width: 0px;
      }

Dark mode

1 Like
19

Hi, this is great, is there any way to make it the default dark theme? Using

  no-borders:
    card-mod-theme: no-borders
    card-mod-root-yaml: |
      .: |
        ha-app-layout {
          --ha-card-border-width: 0px;
          --ha-card-border-radius: 1px
        }

removes the borders, but turns the theme light. Thanks for any suggestion!

20

I’ve created a theme based on @Frenck’s “outline” theme - which he has set to depricated…

It just follows the default theme from HomeAssistant (as he’s did) - but does now have edged cornors for the cards…

GitHub - ChristophCaina/home-assistant-theme-outline-edge: 🎨 Home Assistant Theme: Outline

before-after
before-after1012Ă—187 5.5 KB

I’m still trying to figure out how to “publish” it to HACS… - of course, if Frenck would agree with it… ?!

1 Like