pedolsky
October 30, 2023, 3:23pm
847
Put it in styles —> card:
card:
- '--c-color-home': '#32a852'
- '--c-color-away': rgb(255,0,0)
- '--c-color-zone': '#ffbf00'
- '--c-color-stationary': '#3182b7'
- '--c-stroke-width': 2.3
- '--c-icon-color-on': rgb(0,0,0)
- '--c-icon-color-off': '#97989c'
- border-radius: 10px
- border-width: 0px
- '-webkit-tap-highlight-color': rgba(0,0,0,0)
- transition: none
- '--mdc-ripple-color': |
[[[
return variables.state_on
? 'rgb(0,0,0)'
: '#97989c';
]]]
- color: |
[[[
return variables.state_on
? 'rgb(0,0,0)'
: '#97989c';
]]]
- background-color: |
[[[
return variables.state_on
? 'rgba(255,255,255, 0.85)'
: 'rgba(115, 115, 115, 0.25)';
]]]
- background-image: |
[[[
return variables.state_on
? 'linear-gradient(to bottom, rgba(255,0,0,.5) 0%, rgba(255,0,0,.5) 50%, rgba(0,0,0,0) 50%)'
: 'rgba(115, 115, 115, 0.25)';
]]]
larryo108
October 30, 2023, 3:39pm
848
Perfect. Thanks. I’ll give it a try and report back. I’ve actually got three colors I want to choose from, but I think this will point me in the right direction.
pedolsky
October 30, 2023, 4:14pm
849
You can also use variables:
variables:
state_on: …
…
…
bg: green
styles:
…
…
- background-image: |
[[[
return variables.state_on
? 'linear-gradient(to bottom, ' + variables.bg + ' 0%, ' + variables.bg + ' 50%, rgba(0,0,0,0) 50%)'
: 'rgba(115, 115, 115, 0.25)';
]]]
larryo108
October 30, 2023, 6:42pm
850
Thank you so much for your help. I’ve got it working now. Still deciding if I like it or not, but it will make it easier to see on the wall-mounted tablet from a distance.
1 Like
Card variables in extra_styles CSS.
Does anybody know how (or even if) you can use the card variables inside the extra_styles section?
extra_styles: |
@keyframes slideshow {
0% {
background: [[[ return variables.img1 ]]];
}
100% {
background: [[[ return variables.img2 ]]];
}
}
edwardtich
November 1, 2023, 6:32am
852
square: false
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.termometr_kukhnia_temperature
show_icon: false
name: Living
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.termometr_kukhnia_temperature'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.termometr_kukhnia_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.termometr_kukhnia_temperature
name: Temperature
color: '#ff8c00'
- entity: sensor.termometr_kukhnia_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.verkhnii_svet_gostinaia
content_info: none
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
z-index: 1;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.svetilnik_kukhnia
content_info: none
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 95%;
top: 0px;
z-index: 1;
}
- type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.termometr_kukhnia_temperature
show_icon: false
name: Kitcten
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.termometr_kukhnia_temperature'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.termometr_kukhnia_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.termometr_kukhnia_temperature
name: Temperature
color: '#ff8c00'
- entity: sensor.termometr_kukhnia_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.verkhnii_svet_gostinaia
content_info: none
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
z-index: 1;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.svetilnik_kukhnia
content_info: none
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 95%;
top: 0px;
z-index: 1;
}
columns: 1
how to make the entire card clickable?
square: false
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.termometr_kukhnia_temperature
show_icon: false
name: Living
tap_action:
action: url
url_path: http://google.com
this does not work
2 Likes
dbrunt
November 1, 2023, 8:12am
853
This worked for me at a higher level as I’m not using custom:stack-in-card…
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
name: Aquarium
icon: mdi:fish
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/aquarium
- type: custom:button-card
name: Bedroom
icon: mdi:bed
entity: light.bedroom_lighting
tap_action:
action: url
url_path: https://www.google.ca
hold_action:
action: toggle
entity: light.bedroom_lighting
custom_fields:
motion: |
727283671
November 2, 2023, 9:08am
854
type: custom:button-card
tap_action:
action: none
custom_fields:
wuguan:
card:
type: custom:button-card
entity: device_tracker.neo6
show_entity_picture: true
card mode:
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: none
show_name: true
name: |
[[[ return states['sensor.wu_guan_bu_shu'].state + '步';]]]
entity_picture: /local/header/wuguan.png
aspect_ratio: 1/1.4
styles:
card:
- background-color: transparent
img_cell:
- padding: 60%
- margin-top: '-50%'
name:
- font-weight: bold
- font-size: 13px
- color: black
- align-self: middle
- justify-self: center
- padding-bottom: 4px
- margin-top: '-50%'
state:
- value: not_home
styles:
card:
- filter: opacity(100%)
icon:
- filter: grayscale(100%)
baby:
card:
type: custom:button-card
entity: device_tracker.neo8
show_name: true
name: |
[[[ return states['sensor.bao_bao_bu_shu'].state + 'setup; ]]]
show_entity_picture: true
entity_picture: /local/header/baby.png
aspect_ratio: 1/1.4
tap_action:
action: none
styles:
img_cell:
- padding: 60%
- margin-top: '-50%'
name:
- font-weight: bold
- font-size: 13px
- color: black
- align-self: middle
- justify-self: center
- padding-bottom: 4px
- margin-top: '-50%'
state:
- value: not_home
styles:
card:
- filter: opacity(100%)
icon:
- filter: grayscale(100%)
weather:
card:
type: custom:button-card
entity: weather.yinchuan
show_name: true
name: >
[[[ return states['weather.yinchuan'].attributes.apparent_temperature +
'℃'; ]]]
show_entity_picture: false
aspect_ratio: 1/1.4
tap_action:
action: none
styles:
icon:
- padding: 20%
- margin-top: '-50%'
- color: '#f9d840'
name:
- font-weight: bold
- font-size: 13px
- color: black
- align-self: middle
- justify-self: center
- padding-bottom: 4px
- margin-top: '-50%'
styles:
custom_fields:
wuguan:
- background-color: transparent
- padding-left: 0%
- width: 55px
- align-self: start
- justify-self: start
- justify-content: start
- align-items: start
baby:
- padding-left: 30%
- width: 55px
- align-self: start
- justify-self: start
- justify-content: start
- align-items: start
weather:
- padding-left: 30%
- width: 55px
- align-self: start
- justify-self: end
- justify-content: start
- align-items: start
notice:
- width: 100%
info:
- width: 100%
card:
- overflow: unset
- height: min-content
- border-radius: 0%
- padding-left: 0%
- padding-top: 0%
- padding-bottom: 0%
grid:
- grid-template-areas: '"wuguan baby weather" "notice notice notice" "info info info"'
- grid-template-columns: min-content min-content 1fr
- grid-template-rows: min-content min-content min-content
Set tap_action to none, there is no click result but the click effect cannot be deleted
cismarine
November 4, 2023, 2:28pm
855
Hi,
stickman89
November 5, 2023, 1:41pm
856
Hi,
I created a binary sensor (Aqara T1 Door Sensor) button card which calls a script to turn on my A/C on tap action. This function works fine, and I’m also able to change the state name to On/Off instead of the default Open/Closed.
However, I have difficulty changing the icon color based on the state. Below is my code, is there anything I’m doing wrong?
type: custom:button-card
entity: binary_sensor.living_room_air_con_sensor_contact
name: Air Con
show_name: false
show_state: true
size: 30%
tap_action:
action: call-service
service: script.living_room_air_con_toggle
color_type: icon
color: |
[[[
if (entity.state === 'off')
return 'Green'
else
return 'Grey'
]]]
state_display: |
[[[
if (entity.state === 'off')
return 'Off'
else
return 'On'
]]]
I’ve also tried using;
state:
- value: 'On'
color: Green
- value: 'Off'
color: Grey
The icon color changes to yellow despite the above coding, which seems to be the default color for this senor/entity.
Thanks.
tomcoleman
November 6, 2023, 7:49am
857
guys ive got a real werid one and not sure if this is the right place to post.
my setup is as follows.
Core2023.11.1
Frontend20231030.1
So I have 2 lights (sideboard & underlight)
The code for these lights is
- type: custom:button-card
entity: light.kitchen_sideboard
name: <marquee behavior=scroll scrollamount="3">Side Board Lamp</marquee>
template:
- light
- icon_lamp
#- loader
- type: custom:button-card
entity: light.kitchen_under_light
name: Underlight
template:
- base
- icon_lamp
If i turn light.kitchen_sideboard on/off works fine no issues.
BUT if i turn off light.kitchen_under_light i get this error
When i turn the light back on goes back to normal.
So its as if it can report something in its off state? BUT the strange thing is the other light light.kitchen_sideboard works fine when on/off with no errors.? which is throwing me to work out what it is.?!?!
I have tried switching templates from -base to -light
Any help would be great
Scoff
November 6, 2023, 10:17am
858
I’ve not managed to make any progress with this - can anyone shed any light on how to achieve? Would it require CSS styling instead, in order to split out the format?
Can anyone help me with a multi line state display, using custom:button-card please? I’m ‘simply’ trying to display the day and date over 2 lines, as per the way my template sensor renders.
Template sensor:
- name: "Date Formatted"
state: "{{ as_timestamp(states('sensor.date_time_iso')) | timestamp_custom('%A\n%-d %B') }}"
icon: "mdi:calendar-clock"
and in the template editor in Dev Tools, the resulting string renders correctly over 2 lines:
[image]
however in the custom:but…
cismarine
November 7, 2023, 11:27am
859
Hi,
type: custom:button-card
entity: input_select.bs9000
show_name: true
show_icon: true
variables:
- var_disc: input_select.bs9000
- var_pos: input_number.bs9000_sled
name: [[[ return variable.var_disc; ]]]
Hello,
I’m able to display the name of the logged in user with this code.
type: custom:button-card
name: |
[[[
return "Hi "+ user.name + "!"
]]]
Does anyone know if it’s also possible to display the profile picture for the logged in user?
The image above is done by statically setting entity: person.drew and show_entity_picture: true. I’m looking for the picture to by dynamic, just like the name based on whoever is logged in.
sebbaT
November 8, 2023, 9:24pm
861
guy0nabuffalo:
show_entity_picture:
This should work:
type: custom:button-card
entity: '[[[ return "person." + user.name.toLowerCase(); ]]]'
show_entity_picture: true
name: '[[[ return "Hi " + user.name + "!" ]]]'
1 Like
Ranur
November 9, 2023, 8:51pm
863
Is oit posssible to use two images in an setup like
cismarine
November 13, 2023, 10:56pm
864
Hi,
- type: custom:button-card
entity: media_player.lounge_2
label: >
[[[ return '<marquee> entity.attributes.media_title <\marquee>' ]]]
This scrolls: entity.attributes.media_title and not the value of entity.
Nemesis24
November 16, 2023, 4:37pm
865
Hi,
is it possible to use something like replace here on ${states[“sensor.enceinte_etat”].state
enceinte: '[[[return `<ha-icon icon="mdi:speaker" style="width: 14px;
color: var(--color-icon-blue); margin-right: 2px;"></ha-icon><span>
${states["sensor.enceinte_etat"].state}</span>`]]]'
Thanks for all help
Scoff
November 17, 2023, 5:49pm
866
Your closing marquee tag should be </marquee> - see if that resolves it
1 Like
