Hi and apologies if this has already been asked elsewhere (I have looked (extensively) but been unsuccessful in my search).
I am trying to set up a page and I’m struggling with styling. I’m generally ok with CSS but I’m finding HA is different.
I have a page which is split between header, main, and footer. These are all fine, I’m happy with those.
In the ‘main’ section I want to apply a style to all nested ‘child’ cards i.e. if I have custom:stack-in-card with multiple entity cards and want to remove the border from all the entity cards, is there a simple way to do that?
Of course I can add card_mod ha-card to each to each entity card but that doesn’t seem elegant.
type: custom:mod-card
card:
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-rows: 100%
grid-template-columns: 30% 70%
grid-areas: outlook weather_station
cards:
- type: vertical-stack
title: Outlook
cards:
- type: custom:stack-in-card
cards:
- type: weather-forecast
show_current: true
show_forecast: false
entity: weather.iprest154
forecast_type: daily
name: ' '
- type: custom:hourly-weather
entity: weather.forecast_home
num_segments: 18
name: Next 18 hours
icons: true
- type: weather-forecast
show_current: false
show_forecast: true
entity: weather.iprest154
forecast_type: daily
- type: custom:weather-radar-card
show_marker: true
show_range: true
show_zoom: true
show_recenter: true
show_playback: true
zoom_level: 7
extra_labels: true
frame_count: 15
map_style: satellite
view_layout:
grid_area: main