We should be able to easily identify sections because they have different background colors. Now it feels like i’m scrolling and looking for my card, could be much easier with some nice colors, right?
Also being able to specify a border easily from within the section would be great, as part of the same enhancement.
6 Likes
I fully support Border + Background for sections…
It would be the end of custom stack-in-cards for me…
I had long submitted it into the github: Feature request: option to display border and background around sections · home-assistant/frontend · Discussion #22288 · GitHub
2 Likes
1000% in for this. I do it already using card-mod but it’s way more effort than it should be and makes editing very janky.
1 Like
Change every beginning of a section from this:
- type: grid
cards:
To this:
- type: custom:mod-card
style: |
ha-card {
margin-top: 20px;
background-color: #e5eafa !important;
padding: 5px;
padding-bottom: 10px;
}
card:
type: vertical-stack
cards:
This assumes you have card-mod installed and working. That’s all it takes!
2 Likes
Why these css properties are used to change a background? )
I’m guessing so it extends past the edge of the cards…maybe?
No, not that simple…
Right, adding a margin merely extends a background of a stack/grid.
But changing a background color should not cause a re-positioning of a content.
Not to mention that mod-card for sections may be used only in SOME cases.
Pretty much anything can be done with a good dose of card-mod, which is great, but this has drawbacks. When used like this it disables the GUI editing.
I think the OP is after a simple way in the GUI to change the bg of blocks which I fully support!
Fully support this anaysis.
Card-mod is a nice workaround, but when feasible, core is better.
And for this specific need a core function could be feasible. It would just request an “appearance” tab into the section menu dealin with section width, section background and section border…
I would love it.
1 Like
This is right I just liked how it looked better when done like this. I’m not sure if I did it correctly or if there are other drawbacks, I am 100% aware it is janky and am not holding my code up as great or anything.
The disabling UI editing is a real pain in the ass. This would be 100x better as a native feature.
I would greatly prefer native support as well. In the meantime, I slightly modified the code that @awilson13 shared earlier [see comment #6] in order to retain the header and the grid/tile formatting within the section.
Original code:
type: grid
cards:
- type: heading
icon: mdi:bed-king
heading: Bedroom
heading_style: title
badges:
- type: entity
entity: sensor.bedroom_fan_temperature
- type: entity
show_state: true
show_icon: true
entity: sensor.aranet4_bedroom_carbon_dioxide
- type: tile
entity: light.bedroom_closet
name: Closet
- type: tile
entity: fan.bedroom_fan
name: Fan
- type: tile
entity: light.bedroom_nightstand
name: Nightstand (mc)
- type: tile
entity: light.bedroom_sconce_light
name: Sconce
- type: tile
entity: light.bedroom_table_lamp
name: Table Lamp
Using previously suggested code:
type: custom:mod-card
style: |
ha-card {
margin-top: 20px;
background-color: rgb(32, 33, 36) !important;
padding: 5px;
padding-bottom: 10px;
}
card:
type: vertical-stack
cards:
- type: heading
icon: mdi:bed-king
heading: Bedroom
heading_style: title
badges:
- type: entity
entity: sensor.bedroom_fan_temperature
- type: entity
show_state: true
show_icon: true
entity: sensor.aranet4_bedroom_carbon_dioxide
- type: tile
entity: light.bedroom_closet
name: Closet
- type: tile
entity: fan.bedroom_fan
name: Fan
- type: tile
entity: light.bedroom_nightstand
name: Nightstand (mc)
- type: tile
entity: light.bedroom_sconce_light
name: Sconce
- type: tile
entity: light.bedroom_table_lamp
name: Table Lamp
New code:
type: custom:mod-card
style: |
ha-card {
margin-top: 20px;
background-color: rgb(32, 33, 36) !important;
padding: 5px;
padding-bottom: 10px;
border-color: rgb(42, 43, 46);
outline-style: solid;
outline-width: thin;
outline-color: rgb(42, 43, 46);
}
card:
type: vertical-stack
cards:
- type: heading
icon: mdi:bed-king
heading: Bedroom
heading_style: title
badges:
- type: entity
entity: sensor.bedroom_fan_temperature
- type: entity
show_state: true
show_icon: true
entity: sensor.aranet4_bedroom_carbon_dioxide
- type: grid
columns: 2
square: false
cards:
- type: tile
entity: light.bedroom_closet
name: Closet
- type: tile
entity: fan.bedroom_fan
name: Fan
- type: tile
entity: light.bedroom_nightstand
name: Nightstand (mc)
- type: tile
entity: light.bedroom_sconce_light
name: Sconce
- type: tile
entity: light.bedroom_table_lamp
name: Table Lamp
Note that I’m using @JuanM’s Google Dark Theme, so the colors in the CSS I pasted above are catered to that specific theme.
That is a nice workaround.
But I initialy thought we were able to card-mod the section, but in fact it is a custom mod card…
To my view it should be simpler, and use theme variable color so that for example switching from light to dark theme is easy and straightforward.
Also it should keep the DNA of sections : be user friendly for beginners, with drag and drop available.
Your proposal is close to what I personally achieve with vertical stack-in-card. And it that does not require card mod, offers a graphical interface, and is theme compatible, thus for beginners, it only breaks drag n drop…
But the aim for me of this would be to offer a way to do this without custom elements.
That sounds more appealing than what I posted earlier. Have you shared the code anywhere, or is it pretty straight forward? I suppose I have more experimenting to do.
I wholeheartedly agree. I posted the code in case anyone else was struggling to implement a workaround, but to be honest I’m tempted to revert the changes I made and cross my fingers that the feature is eventually added…
in HACS you have for example vertical-stack-in-card that allow you to blend cards into one card. I think it is pretty straightforward, but ready to share code if needed. (I have some post on it but on the french speaking forum)
As long as you remain in a vertical stack, like the core grid or stack cards, it preserves the graphical UI but kills the drag n drop.
If you use only one stack in card per section you have a section with border and background, fully compatible with your theme.
You can also use as many stack-in-cards as you want, but then it is no more at section level…
To my opinion, the aim of this WTH is to try to get rid of as many custom integration as I can to ease maintenance. And this WTH would be a nice way to remove my dependence to stack-in-cards.
For your example above you would just have to test that:
type: custom:vertical-stack-in-card
cards:
- type: heading
icon: mdi:bed-king
heading: Bedroom
heading_style: title
badges:
- type: entity
entity: sensor.bedroom_fan_temperature
- type: entity
show_state: true
show_icon: true
entity: sensor.aranet4_bedroom_carbon_dioxide
- type: grid
columns: 2
square: false
cards:
- type: tile
entity: light.bedroom_closet
name: Closet
- type: tile
entity: fan.bedroom_fan
name: Fan
- type: tile
entity: light.bedroom_nightstand
name: Nightstand (mc)
- type: tile
entity: light.bedroom_sconce_light
name: Sconce
- type: tile
entity: light.bedroom_table_lamp
name: Table Lamp
And thats it…
No card mod and GUI kept (but no drag n drop, old fashion GUI)
Card mod can be added after to this vertical-stack-in-card to adjust colors, margins and padding if requested and does not break the GUI availability.
for example:
But again, and like the other proposition before, this is not section background… It is only one card mimicking a section this is an alternative to mimic a section background, not a section background.
Thus it kills the new features of the sections, especially the drag n drop… You can only drag n drop the full card (mimicking the section) and not what is inside, exactly like if it was a grid or an horizontal or vertical stack (which it is in fact).
Thus this is to be added only at the end of your dashboard construction, if you want to use drag n drop to arrange your sections…
To my knowledge there is for the time being no workaround (card-mod or equivalent) that would create a section level background / border while preserving the user friendly drag n drop…
Moreover, this WTH would help remove some custom cards (namely card-mod or vertical-stack-in-card).
1 Like
+1 for this
The sections dashboard are difficult to follow what section is where without some kind of border / background to each section different than the overall background. Using card-mod means you lose all visual editor (not to mention the benefits of section drag and drop).
Please add some basic formatting ability.
1 Like