Hi,
I’m just starting out trying to build my own custom dashboard. I have the below code for my first custom card and I can’t seem to get it the way I want it. Is there a way for me to completely remove the border/shading/3-d around the button cards? I want them to sit flush on the grid.
Also, is there a way to change the name/state font colors? the “color: red” line of code I thought would do it, but no luck. Thanks all.
type: custom:mod-card
card:
type: grid
columns: 4
square: false
title: Services
cards:
- type: custom:mod-card
card:
type: button
tap_action:
action: toggle
entity: light.zoey_light
card_mod: null
style: |
ha-card {
--ha-card-background: teal;
border: none;
box-shadow:none;
color: red;
}
- type: custom:mod-card
card:
type: button
tap_action:
action: toggle
entity: fan.zoey_fan
card_mod: null
style: |
ha-card {
--ha-card-background: teal;
border: none;
box-shadow:none;
color: red;
}
card_mod:
style:
hui-grid-card:
$: |
.card-header {
color: black !important;
text-align: center;
}
.: |
ha-card {
color: black !important;
border: 3px solid yellow;
padding: 25px;
background-color: teal;
ha-card-border-radius: 10000px
}
