does this work for you?
card_mod:
style: |
.icon-name {
color: grey;
}
.title-controls .media-info {
color: grey;
}
.more-info {
color: grey;
}
.title-controls .controls {
color: grey;
}
.background.no-image > * {
background-color: rgba(0, 0, 0, 1);
}
ha-card {
--ha-card-background: #;
border-radius: 15px;
box-shadow: rgba(140, 20, 252,1) 0px 1px 50px;
}
ha-card {
--card-mod-icon: phu:sky-alt;
}
ha-state-icon {
color: red;
--mdc-icon-size: 100px;
}
2 Likes
Indeed that did the job.
Thank you very much, will note ha-state-icon for future references.
1 Like
its not always going to be ha-state-icon btw, you have to ensure you check the DOM.
2 Likes
you can set a color on the
element
card_mod:
style:
ha-markdown:
$:
ha-markdown-element: |
hr {
color: red;
}
or, use the compound method to set a border, like
card_mod:
style:
ha-markdown:
$:
ha-markdown-element: |
hr {
border: 1px dashed red;
}
and even use the theme colors in that:
card_mod:
style:
ha-markdown:
$:
ha-markdown-element: |
hr {
border: 1px groove var(--divider-color);
}
note this is applied to all
elements in the markdown card. If you want to target a single
you need to invent other tricks
haha, the tag is interpreted in this post too… should have used <hr>, sorry
1 Like
TheStigh
August 15, 2024, 2:55pm
6933
Hi guys, have some issues after the update from 2024.8.0 to 2024.8.1 and the thermostat card.
Earlier I controlled the height of buttons and icons like this:
card_mod:
style:
hui-card-features $ hui-climate-hvac-modes-card-feature $ ha-control-select $: |
:host {
--control-select-thickness: 100px !important;
--mdc-icon-size: 30px !important;
}
…but after the update, this didn’t work anymore. I figured out the button height, now like this:
card_mod:
style:
hui-card-features$: |
:host {
--feature-height: 100px !important;
}
hui-card-features $ hui-climate-hvac-modes-card-feature $ ha-control-select $: |
:host {
--mdc-icon-size: 30px !important;
}
So far, so good.
Also, I would like to change the background of the non-active buttons to transparent (opacity: 0) and see the --control-select-background-opacity also under :host and when changing both --control-select-background-opacity and --mdc-icon-size from the console, it works. But from my code it doesn’t change.
hui-card-features $ hui-climate-hvac-modes-card-feature $ ha-control-select $: |
:host {
--mdc-icon-size: 30px !important;
--control-select-background-opacity: 0 !important;
}
Anybody with some good tip what I’m missing ??
prudy
August 15, 2024, 5:43pm
6934
Hello,
type: picture-elements
elements:
- type: icon
icon: >-
url('data:image/svg+xml;charset=UTF-8,<svg
xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 10 10"><circle r="4"
fill="rgb(128,0,255)"/></svg>');
style:
left: 40%
top: 30%
width: 20%
height: 20%
background: blue
image: https://demo.home-assistant.io/stub_config/floorplan.png
In any valid form, utf, bas64, etc., as some suggested in inline-svg-in-css .
Hey Guys, is it possible to make the right side like the left side with 3 lines?
type: custom:stack-in-card
title: ''
mode: vertical
cards:
- type: custom:simple-weather-card
entity: sensor.weather_penthouse_tag_0
name: ' '
primary_info:
- extrema
secondary_info:
- precipitation
- wind_speed
card_mod:
style: |
ha-card {
padding-left: 8px !important;
padding-right: 8px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
height: 70px;
}
.weather__info__state {
max-width: 90px;
white-space: normal !important;
}
iorifly
August 16, 2024, 2:33pm
6936
Hello, does anyone know how to change the color of this card? When I turn it on in the cold, the bar is turning red. I would like to make it blue.
type: custom:better-thermostat-ui-card
Ricks88
August 16, 2024, 4:43pm
6937
Thanks a lot!!
1 Like
louski
August 16, 2024, 5:21pm
6938
Hello dear community,
can someone help me to add a margin to a virtual stack? I can’t seem to get it right with card_mod. See picture
Thank you very much
Ricks88
August 16, 2024, 9:02pm
6939
I made the design how I liked it
Did I do it the right way or did I got lucky haha
It is not very future proof I think:
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: entities
entities:
- type: divider
- entity: sensor.panasonic_vloermodel_bijkamer_inside_temperature
name: Kamer temperatuur
icon: mdi:thermometer
- entity: climate.panasonic_vloermodel_bijkamer
name: Panasonic Airco/Heater
icon: mdi:air-conditioner
- type: divider
title: Bijkamer
icon: hue:room-office
state_color: true
card_mod:
class: content-entities
style: |
ha-icon {
--mdc-icon-size: 29px;
}
- type: thermostat
entity: climate.panasonic_vloermodel_bijkamer
name: Panasonic Airco/Heater (Vloermodel)
features:
- type: climate-hvac-modes
hvac_modes:
- heat_cool
- heat
- cool
- dry
- fan_only
- 'off'
- type: climate-fan-modes
style: dropdown
- type: climate-swing-modes
style: dropdown
card_mod:
class: content
style:
hui-card-features$: |
hui-card-feature:nth-child(1) {
width: 600px !important;
margin: 0px auto 0px auto;
}
hui-card-feature:nth-child(2) {
width: 225px !important;
position: relative;
margin: 25px auto 0px 90px;
}
hui-card-feature:nth-child(3) {
width: 225px !important;
position: relative;
margin: -54px 90px 0px auto;
}
.: |
ha-card {
#
}
- type: horizontal-stack
cards:
- type: tile
entity: switch.panasonic_vloermodel_bijkamer_eco
name: Eco
color: light-green
tap_action:
action: toggle
hold_action:
action: toggle
icon_tap_action:
action: toggle
vertical: true
hide_state: true
show_entity_picture: false
card_mod:
class: content-tile
style: |
ha-card {
width: 100px;
float: left;
margin: -240px 0px 0px 80px;
}
ha-tile-info {
margin: -15px 0px 0px 0px;
font-size: 16px;
}
- type: tile
entity: switch.panasonic_vloermodel_bijkamer_nanoe
name: NanoeX
color: orange
tap_action:
action: toggle
hold_action:
action: toggle
icon_tap_action:
action: toggle
vertical: true
hide_state: true
show_entity_picture: false
card_mod:
class: content-tile
style: |
ha-card {
width: 100px;
float: right;
margin: -240px 80px 0px 0px;
}
ha-tile-info {
margin: -15px 0px 0px 0px;
font-size: 16px;
}
- type: horizontal-stack
cards:
- type: tile
entity: input_select.climate_panasonic_wandmodel_woonkamer_select_fanmode
name: Ventilator snelheid
color: blue-grey
vertical: false
hide_state: true
show_entity_picture: false
tap_action:
action: none
hold_action:
action: none
icon_tap_action:
action: none
card_mod:
class: content-tile
style: |
ha-card {
width: 50px;
float: left;
margin: -55px 0px 0px 40px;
}
ha-tile-info {
display: none !important;
}
.icon-container {
position: absolute !important;
margin: -8px 0px 0px -5px !important;
}
- type: tile
entity: input_select.climate_panasonic_wandmodel_woonkamer_select_swingmode
name: Ventilator swing
color: blue-grey
vertical: false
hide_state: true
show_entity_picture: false
tap_action:
action: none
hold_action:
action: none
icon_tap_action:
action: none
card_mod:
class: content-tile
style: |
ha-card {
width: 50px;
float: right;
margin: -55px 40px 0px 0px;
}
ha-tile-info {
display: none !important;
}
.icon-container {
position: absolute !important;
margin: -8px 0px 0px -1px !important;
}
- type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.panasonic_vloermodel_bijkamer_current_power
name: Huidig gebruik
icon: mdi:flash
columns: '1'
direction: right
height: 40px
decimal: '0'
min: '0'
max: '3000'
unit_of_measurement: W
positions:
name: inside
icon: outside
value: inside
indicator: outside
minmax: 'off'
severity:
- from: '0'
to: '100'
color: green
- from: '100'
to: '750'
color: yellow
- from: '750'
to: '1500'
color: orange
- from: '1500'
to: '3500'
color: red
- from: '3500'
to: '15000'
color: '#820914'
entity_row: true
card_mod:
style: |
ha-card {
margin: 30px 55px 0px 5px;
box-shadow: none;
border: 0px;
--ha-card-border-width: 0px;
}
.card-content {
padding: 10px 13px 5px 10px !important;
box-shadow: none;
}
- type: custom:bar-card
entities:
- entity: sensor.panasonic_vloermodel_bijkamer_daily_energy_w
name: Vandaag gebruikt
icon: mdi:meter-electric
columns: '1'
direction: right
height: 40px
decimal: '0'
min: '0'
max: '15000'
unit_of_measurement: W
positions:
name: inside
icon: outside
value: inside
indicator: outside
minmax: 'off'
severity:
- from: '0'
to: '2000'
color: green
- from: '2000'
to: '4000'
color: yellow
- from: '4000'
to: '7000'
color: orange
- from: '7000'
to: '12000'
color: red
- from: '12000'
to: '25000'
color: '#820914'
entity_row: true
card_mod:
style: |
ha-card {
margin: 0px 55px 0px 5px;
box-shadow: none;
border: 0px;
--ha-card-border-width: 0px;
}
.card-content {
padding: 10px 13px 5px 10px !important;
box-shadow: none;
}
- type: custom:gap-card
height: 15
card_mod:
style: |
ha-card {
width: 100% !important;
margin: 0px 0px 0px 0px
}
what cards do you have there, with the temp/humid/battery?
The card mod code is all fine (i dont like the word correct, because as long as it works and doesnt seem to slow down your phone/pc, then its “correct”)
Except this bit which i suspect that you know is superfluous:
Ricks88:
.: |
ha-card {
#
}
With how many different stacks you have i would probably look into the layout card (from HACS) instead so you dont have to have so many different ones going on.
1 Like
….and “#” should not be used inside card-mod code
1 Like
Ricks88
August 17, 2024, 12:30pm
6944
Edit
It could be done with just 1 stack card
type: custom:stack-in-card
mode: vertical
cards:
- type: entities
entities:
- type: divider
- entity: sensor.panasonic_vloermodel_bijkamer_inside_temperature
name: Kamer temperatuur
icon: mdi:thermometer
- entity: climate.panasonic_vloermodel_bijkamer
name: Panasonic Airco/Heater
icon: mdi:air-conditioner
- type: divider
title: Bijkamer
icon: hue:room-office
state_color: true
card_mod:
class: content-entities
style: |
ha-icon {
--mdc-icon-size: 29px;
}
- type: thermostat
entity: climate.panasonic_vloermodel_bijkamer
name: Panasonic Airco/Heater (Vloermodel)
features:
- type: climate-hvac-modes
hvac_modes:
- heat_cool
- heat
- cool
- dry
- fan_only
- 'off'
- type: climate-fan-modes
style: dropdown
- type: climate-swing-modes
style: dropdown
card_mod:
class: content
style:
hui-card-features$: |
hui-card-feature:nth-child(1) {
width: 600px !important;
margin: 0px auto 0px auto;
}
hui-card-feature:nth-child(2) {
width: 225px !important;
position: relative;
margin: 25px auto 0px 90px;
}
hui-card-feature:nth-child(3) {
width: 225px !important;
position: relative;
margin: -54px 90px 0px auto;
}
.: |
ha-card {
}
- type: tile
entity: switch.panasonic_vloermodel_bijkamer_eco
name: Eco
color: light-green
tap_action:
action: toggle
hold_action:
action: toggle
icon_tap_action:
action: toggle
vertical: true
hide_state: true
show_entity_picture: false
card_mod:
class: content-tile
style: |
ha-card {
width: 100px;
float: left;
margin: -240px 0px 0px 80px;
}
ha-tile-info {
margin: -15px 0px 0px 0px;
font-size: 16px;
}
- type: tile
entity: switch.panasonic_vloermodel_bijkamer_nanoe
name: NanoeX
color: orange
tap_action:
action: toggle
hold_action:
action: toggle
icon_tap_action:
action: toggle
vertical: true
hide_state: true
show_entity_picture: false
card_mod:
class: content-tile
style: |
ha-card {
width: 100px;
float: right;
margin: -240px 80px 0px 0px;
}
ha-tile-info {
margin: -15px 0px 0px 0px;
font-size: 16px;
}
- type: tile
entity: input_select.climate_panasonic_wandmodel_woonkamer_select_fanmode
name: Ventilator snelheid
color: blue-grey
vertical: false
hide_state: true
show_entity_picture: false
tap_action:
action: none
hold_action:
action: none
icon_tap_action:
action: none
card_mod:
class: content-tile
style: |
ha-card {
width: 50px;
float: left;
margin: -65px 0px 0px 40px;
}
ha-tile-info {
display: none !important;
}
.icon-container {
position: absolute !important;
margin: -4px 0px 0px -5px !important;
}
- type: tile
entity: input_select.climate_panasonic_wandmodel_woonkamer_select_swingmode
name: Ventilator swing
color: blue-grey
vertical: false
hide_state: true
show_entity_picture: false
tap_action:
action: none
hold_action:
action: none
icon_tap_action:
action: none
card_mod:
class: content-tile
style: |
ha-card {
width: 50px;
float: right;
margin: -65px 40px 0px 0px;
}
ha-tile-info {
display: none !important;
}
.icon-container {
position: absolute !important;
margin: -20px 0px 0px -1px !important;
}
- type: custom:bar-card
entities:
- entity: sensor.panasonic_vloermodel_bijkamer_current_power
name: Huidig gebruik
icon: mdi:flash
columns: '1'
direction: right
height: 40px
decimal: '0'
min: '0'
max: '3000'
unit_of_measurement: W
positions:
name: inside
icon: outside
value: inside
indicator: outside
minmax: 'off'
severity:
- from: '0'
to: '100'
color: green
- from: '100'
to: '750'
color: yellow
- from: '750'
to: '1500'
color: orange
- from: '1500'
to: '3500'
color: red
- from: '3500'
to: '15000'
color: '#820914'
entity_row: true
card_mod:
style: |
ha-card {
margin: 10px 55px 0px 5px;
box-shadow: none;
border: 0px;
--ha-card-border-width: 0px;
}
.card-content {
padding: 10px 13px 5px 10px !important;
box-shadow: none;
}
- type: custom:bar-card
entities:
- entity: sensor.panasonic_vloermodel_bijkamer_daily_energy_w
name: Vandaag gebruikt
icon: mdi:meter-electric
columns: '1'
direction: right
height: 40px
decimal: '0'
min: '0'
max: '15000'
unit_of_measurement: W
positions:
name: inside
icon: outside
value: inside
indicator: outside
minmax: 'off'
severity:
- from: '0'
to: '2000'
color: green
- from: '2000'
to: '4000'
color: yellow
- from: '4000'
to: '7000'
color: orange
- from: '7000'
to: '12000'
color: red
- from: '12000'
to: '25000'
color: '#820914'
entity_row: true
card_mod:
style: |
ha-card {
margin: 0px 55px 0px 5px;
box-shadow: none;
border: 0px;
--ha-card-border-width: 0px;
}
.card-content {
padding: 10px 13px 5px 10px !important;
box-shadow: none;
}
- type: custom:gap-card
height: 15
card_mod:
style: |
ha-card {
width: 100% !important;
margin: 0px 0px 0px 5px
}
It’s still from the beginning that i used to think like tables “start with a vertical stack and put horizontal rows in it” haha.
Emiel86
August 18, 2024, 3:20pm
6945
I really hope that they will add the “ha-card” css style element to the new badges, so that we can change how the badges look.
Well you can just change the color like this:
card_mod:
style: |
bt-ha-control-circular-slider {
--control-circular-slider-color: var(--label-badge-blue) !important;
}
but it seems more like a bug with the card. the reason i say this is because the bar is colored based on a variable called --mode-color and mode color is being set to --label-badge-red when the cool symbol is selected? it should probably be set to --label-badge-blue. i would raise an issue on the github of better thermostat if i were you.
so you can fix it for real like this, and thats probably how it should be set from the card creator anyway:
card_mod:
style: |
.cool {
--mode-color: var(--state-climate-cool-color) !important;
}
1 Like
iorifly
August 18, 2024, 4:21pm
6948
You were perfect!! Thank you so much!!
loocd
August 19, 2024, 2:57pm
6949
Hi all,
type: custom:auto-entities
card:
type: custom:layout-card
filter:
template: |
{% set groups = defining the variable)
%}
{% set members = groups | expand
| some more processing
%}
[
{% for group in groups %}
{
"type": "custom:stack-in-card",
"cards":
[
{
"type": "custom:mushroom-light-card",
"entity": "{{ group }}",
"use_light_color": "true",
"show_brightness_control": "true",
"show_color_temp_control": "true",
"show_color_control": "true",
"collapsible_controls": "true",
"fill_container": "false",
},
{
"type": "custom:collapsable-cards",
"title": "Einzelne Lampen",
"card_mod":
{
},
"cards": [ my cards ]
},
],
}{% if not loop.last %},{% endif %}
{% endfor %}
]
include: []
exclude: []
with all the brackets and quotes I’m honestly a bit confused how to add my card_mod styles. In my initial, non-automatic card it looked like this:
style: |
ha-card button {
font-family: "Kollektif", sans-serif !important;
}
ha-card button:focus {
background: none !important;
}
Could you tell me how to format the card_mod styling in this application?
or would it be better to take card_mod out of the template, put it at the very beginning under type: custom:auto-entities and navigate the DOM from there?
