Customize css on section

Hi everyone, i’m moving all my entire ha dashboard to the new (experimental) section view.
I’m trying to add a border and a background color to a specifisection with no success.
I’m also trying the card-mod
this is the code of one of the section




type: grid
cards:
  - type: heading
    heading: Matrimoniale
  - graph: line
    type: sensor
    entity: sensor.sensore_matrimonale_temperature
    detail: 2
    name: Temperatura
    hours_to_show: 6
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - graph: line
    type: sensor
    entity: sensor.sensore_matrimonale_humidity
    detail: 2
    name: Umidità
    hours_to_show: 6
column_span: 1

Have you tried Custom-card-mod? It manages to changes CSS of any card

I’ve try whit no success

Suggest to ask in the main card-mod and post there your unsuccessful card-mod code.

I have managed to get this

test

with custom button

type: custom:button-card
name: matrimonio
custom_fields:
  graph1:
    card:
      type: sensor
      grid-area: graph1
      entity: sensor.sun_solar_elevation
      graph: line
  graph2:
    card:
      type: sensor
      grid-area: graph2
      entity: sensor.sun_solar_azimuth
      graph: line
styles:
  card:
    - border: 3px dotted turquoise
  grid:
    - grid-template-areas: |
        "n . "
        "graph1 graph2"
    - grid-template-rows: 1fr 1fr
    - grid-template-columns: 1fr 1fr

The problem is that i want to apply the border to the entire section like this
i’m able to customize a single card, the problem is if i try to apply customization to the entire section

No problem at all.

What i have done is

  • custom-layout card
  • add custom layout cards inside it
  • you create the border for the first card

I think it is easy to achieve . I have a dash this way, with no border but i will try one for you to see

not so easy as I thought, doable as button card I think, but theres a lot of cards you have to use.