I’m trying to convert from the depreciated lovelace-card-modder to the lovelace-card-mod card.
I’ve used it to fix the minuscule Lovelace alarm card button font.
I can apply borders the way I could with card-modder to most things but, as with the previous modder, not to vertical-stack-in-cards or built in vertical-stack cards. Any idea why?
Is there a work-around?
Solved!
Don’t use a vertical-stack-in card. An entities card works just as well for stacking anything vertical, including other cards.
EDIT: you can use custom cards as entities but not the built in cards 
EDIT2: but it does if you use this trick: My Lovelace Plugins
You can use built in cards but you need to know the ‘under the hood name’.
Would that be these?
yes, those are the under the hood names. I don’t have them memorized. You pretty much need to know how to traverse the home-assistant-polymer library on GitHub and find the names.
Here is most of the cards.
Here is most of the rows.
Horizontal stacks are proving to be a problem.
Ok, for the life of me I can not work out how to remove card-modder from this card. Any ideas?
type: entities
title: Room Climate
show_header_toggle: false
entities:
- type: 'custom:card-modder'
style:
box-shadow: none
card:
type: entities
entities:
- entity: input_select.lounge_ac_mode
name: Lounge AC Mode
- entity: input_select.rumpus_ac_mode
name: Rumpus AC Mode
- type: 'custom:card-modder'
style:
box-shadow: none
card:
type: glance
columns: 4
entities:
- entity: sensor.lounge_room_temperature
name: Lounge
- entity: sensor.rumpus_room_temperature
name: Rumpus
- entity: sensor.dining_room_temperature
name: Dining
- entity: sensor.spare_bedroom_temperature
name: Sp Bedroom
style: |
ha-card {
border: solid 2px var(--primary-color);
}
EDIT: Never Mind. Worked it out:
type: entities
title: Room Climate
show_header_toggle: false
entities:
- type: 'custom:hui-entities-card'
entities:
- entity: input_select.lounge_ac_mode
name: Lounge AC Mode
- entity: input_select.rumpus_ac_mode
name: Rumpus AC Mode
style: |
ha-card {
box-shadow: none
}
- type: 'custom:hui-glance-card'
columns: 4
entities:
- entity: sensor.lounge_room_temperature
name: Lounge
- entity: sensor.rumpus_room_temperature
name: Rumpus
- entity: sensor.dining_room_temperature
name: Dining
- entity: sensor.spare_bedroom_temperature
name: Sp Bedroom
style: |
ha-card {
box-shadow: none
}
style: |
ha-card {
border: solid 2px var(--primary-color);
}
Was missing custom: in front of hui...
Ok one more thing and I’ve got this sorted. Does anyone know the css I should use to override a card background to make it completely transparent (using card-mod)
These dont work (the box shadow bit does):
style: |
ha-card {
--ha-card-box-shadow: 'none';
background-color: "rgba(0, 0, 0, 0)";
}
style: |
ha-card {
--ha-card-box-shadow: 'none';
--ha-background-color: "rgba(0, 0, 0, 0)";
}
style: |
ha-card {
--ha-card-box-shadow: 'none';
--ha-card-background-color: "rgba(0, 0, 0, 0)";
}
style: |
ha-card {
--ha-card-box-shadow: 'none';
--ha-paper-card-background-color: "rgba(0, 0, 0, 0)";
}
Also the same variants with it outside the curly braces fail
style: |
ha-card {
--ha-card-box-shadow: 'none';
}
--ha-paper-card-background-color: "rgba(0, 0, 0, 0)";
Alternatively how do I use the browser inspector to find this?
EDIT:
Solutrion (I’m sure I tried this before) 
:
style: |
ha-card {
--ha-card-box-shadow: 'none';
--paper-card-background-color: rgba(0, 0, 0, 0);
}
should be
--ha-card-background
or what you wrote too
Thanks petro but that does not work in this particular case (spacer image right down the bottom, and apologies for the alpha-bastard-sorting):
cards:
- cards:
- color_thresholds:
- color: '#e45e65'
value: 0
- color: '#e0b400'
value: 60
- color: '#0da035'
value: 80
color_thresholds_transition: smooth
entities:
- sensor.speedtest_download
group: false
hour24: true
line_width: 6
lower_bound: 0
name: Down
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
style: |
ha-card {
border: solid 2px var(--primary-color);
}
- color_thresholds:
- color: '#e45e65'
value: 0
- color: '#e0b400'
value: 24
- color: '#0da035'
value: 32
color_thresholds_transition: smooth
entities:
- sensor.speedtest_upload
group: false
hour24: true
line_width: 6
lower_bound: 0
name: Up
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
style: |
ha-card {
border: solid 2px var(--primary-color);
}
type: horizontal-stack
- cards:
- color_thresholds:
- color: '#e45e65'
value: 40
- color: '#e0b400'
value: 30
- color: '#0da035'
value: 0
color_thresholds_transition: hard
entities:
- sensor.ping
group: false
hour24: true
line_width: 6
lower_bound: 0
name: Ping
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
style: |
ha-card {
border: solid 2px var(--primary-color);
}
- hold_action:
action: none
image: /local/icons/blank.png
tap_action:
action: none
type: picture
style: |
ha-card {
--ha-card-box-shadow: 'none';
--paper-card-background-color: 'rgba(0, 0, 0, 0)';
}
type: horizontal-stack
type: vertical-stack
I hate CSS so much. Neither of these options work:
--ha-card-background:
--paper-card-background-color:
type: entities
title: Room Climate
show_header_toggle: false
entities:
- type: 'custom:hui-entities-card'
entities:
- entity: input_select.lounge_ac_mode
name: Lounge AC Mode
- entity: input_select.rumpus_ac_mode
name: Rumpus AC Mode
style: |
ha-card {
box-shadow: none
--paper-card-background-color: 'rgba(0, 0, 0, 0)';
}
- type: 'custom:hui-glance-card'
columns: 4
entities:
- entity: sensor.lounge_room_temperature
name: Lounge
- entity: sensor.rumpus_room_temperature
name: Rumpus
- entity: sensor.dining_room_temperature
name: Dining
- entity: sensor.spare_bedroom_temperature
name: Sp Bedroom
style: |
ha-card {
box-shadow: none
--ha-card-background: 'rgba(0, 0, 0, 0)';
}
style: |
ha-card {
border: solid 2px var(--primary-color);
}
[
EDIT: Five gin and tonics later and spotting one missing semi-colon and --ha-card-background: 'rgba(0, 0, 0, 0)'; works.
entities:
- entities:
- entity: input_select.lounge_ac_mode
name: Lounge AC Mode
- entity: input_select.rumpus_ac_mode
name: Rumpus AC Mode
style: |
ha-card {
box-shadow: none;
--ha-card-background: 'rgba(0, 0, 0, 0)';
}
type: 'custom:hui-entities-card'
- columns: 4
entities:
- entity: sensor.lounge_room_temperature
name: Lounge
- entity: sensor.rumpus_room_temperature
name: Rumpus
- entity: sensor.dining_room_temperature
name: Dining
- entity: sensor.spare_bedroom_temperature
name: Sp Bedroom
style: |
ha-card {
box-shadow: none;
--ha-card-background: 'rgba(0, 0, 0, 0)';
}
type: 'custom:hui-glance-card'
show_header_toggle: false
style: |
ha-card {
border: solid 2px var(--primary-color);
}
title: Room Climate
type: entities
Have I mentioned how much I hate CSS?
Also I just noticed I need to put a condition in my ‘pm heating off’ automation to not do so if I am still in my lounge chair.