now heres the tricky question.
if the state is off (plug switched off) can the color be white and if the plug is on (state on) then be red?
Yes, you can use jinja2 templates with card mod for that. See this: GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card
And here’s an example of a jinja2 template: Templating - Home Assistant
Maybe below code works (replace where it now says color: red with below, make sure all spaces/indents are correct).
color:
{% if is_state(‘switch.nikki_laptop’, 'on') %}
red;
{% else %}
white;
{% endif %}
I don’t use templates in card-mod myself, so for this question you should really visit card-mod so this thread doesn’t get off tracks any further. Probably there are tons of examples there you can copy the template from if you use the search.
i tried
points: false
color_thresholds:
- value: 0
color: "#276696"
- value: 19
color: "#228C22"
- value: 22
color: "#d35400"
- value: 25
color: "#c0392b"
card_mod:
style: |
ha-card {
color:
{% if states(‘switch.nikki_laptop’, 'on') %}
red;
{% else %}
white;
{% endif %}
and get
while parsing a block mapping in "/config/button_card_templates.yaml", line 1463, column 13 expected <block end>, but found '<block mapping start>' in "/config/button_card_templates.yaml", line 1465, column 14
As I stated: make sure all spaces/indents are correct). You can see our codes are not the same, you messed up the indents.
Also you seem to ignore my previous post, use the updated code. This should be the complete code:
graph:
card:
type: "custom:mini-graph-card"
hours_to_show: 24
points_per_hour: 4
line_width: 8
font_size: 75
decimals: 0
show:
name: false
icon: true
state: true
legend: false
labels: false
points: false
color_thresholds:
- value: 0
color: "#276696"
- value: 19
color: "#228C22"
- value: 22
color: "#d35400"
- value: 25
color: "#c0392b"
card_mod:
style: |
.state__value {
color:
{% if is_state(‘switch.nikki_laptop’, 'on') %}
red;
{% else %}
white;
{% endif %}
}
.states {
color:
{% if is_state(‘switch.nikki_laptop’, 'on') %}
red;
{% else %}
white;
{% endif %}
}
If this doesn’t work, please ask for help in card-mod, there is nothing else I can do.
@tomcoleman according to this post, below code should be the correct (and shorter) code to change the color. I tried it myself and indeed changes the state color to red, so you should use this code now.
card_mod:
style: |
ha-card .states.flex {
color: red;
}
Why my template doesn’t work I don’t know (tested myself and indeed doesn’t work). Use the search button in the card-mod thread and look for templates, so you can use above code in a template example.
… and ha-card may be omitted.
P.S.
Some of my card-mod examples contain:
- A “simple DOM navigation” instead of “optimized DOM navigation” (the 1st may be more clear for beginners).
- A “style” keyword only instead of “card_mod / style” keywords (which are advised to be used since card-mod 3).
1 Like
Please go easy on me! This is my first attempt with the Custom Button Card (although I see the power it holds!) but I can’t figure out how to properly stack my objects?! In the example above (purely in the mockup phase), I need to have the trash can icon (circled in green) to be in front of the gauge card. My code is below. What am I doing wrong?!
type: custom:button-card
icon: mdi:delete
show_name: false
card:
- overflow: unset
grid:
- position: relative
styles:
custom_fields:
graph:
- filter: opacity(100%)
- overflow: unset
- border-radius: 50%
- background-color: '#000044'
- position: absolute
- left: 0px
- top: 40px
- height: 120px
- width: 200px
- font-size: 11px
card:
- left: 80px
- top: 10px
- height: 200px
- width: 280px
icon:
- left: 10px
- top: 10px
- height: 35px
- width: 35px
- background-color: transparent
entity: light.switch_queen_bedroom
hold_action:
action: info
custom_fields:
graph:
card:
type: gauge
entity: input_number.countdown_trash
max: 7
min: 0
name: Trash Collection
style: |
ha-card {
box-shadow: none;
background-color: red;
}
1 Like
I’d like to do something similar as Mark in the post above. I’d like to display a button-card inside another button card (so that I have the option to display a switch for a camera, for example).
It seems it can be done with custom fields, but I am not a big programming expert. Can you please help me on how to do this?
This is where I got so far (switch is not displaying over the camera picture):
type: custom:button-card
entity: camera.mycam_mainstreamprofile
show_entity_picture: true
show_icon: false
custom_fields:
camera_image: |
[[[
return html`
<hui-image
.hass=${hass}
.cameraImage=${entity.entity_id}
.entity=${entity.entity_id}
.cameraView="auto"
aspectRatio="1"
></hui-image>
`;
]]]
switch:
card:
type: custom:button-card
entity: switch.camswitch
size: 95%
styles:
grid:
- position: relative
custom_fields:
camera_image:
- position: relative
- width: 100%
- height: 100%
- z-index: 0
switch:
- position: absolute
- left: 60%
- top: 10%
- height: 20px
- width: 20px
- font-size: 8px
- line-height: 20px
Thank you.
So I have a navigation button that takes me to another screen. This is working great. I want to add some kind of indication on the button that there is a problem that needs attention on the other screen.
Is there a way that I can add a top triangle red notice to the user? In my case an example would be to show the red triangle if automation.master_bedroom_blinds is off. If that automation is on then the red triangle would not show.
Thank you!
I found that an inherited state: object cannot be overridden anymore.
Here is an example of a complete code of the new dashboard. Change entity and operator/value to fit your needs
button_card_templates:
tpl_test:
state:
- operator: '=='
value: 'off'
styles:
name:
- color: pink
views:
- title: Home
cards:
- type: custom:button-card
template: tpl_test
entity: light.pc_room
state:
- operator: '=='
value: 'off'
styles:
icon:
- color: green
The template sets the color of the name with the use of the state: object. Then the template is used by the card.
It causes that
- the color of
nameis set to pink color (which is expected) - the color of the icon remains default (which is not expected, since we expect to set it by the
state:defined in the card)
Of course, removing the template from the card immediately makes the icon change color to green.
Worth to mention (while it seems to be clear), that you cannot override the name color in the card too.
The described behavior applies also when overriding is expected between templates.
Is it known behavior? I’m not aware that this limitation is mentioned in docs. AFAIK most attributes/objects can be overridden
we are supposed to merge by ID: GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant to override these state styling settings
Is it possible to embed a map card or a picture entity card in a button card? I have tried using a grid but every time I add a map or picture as a custom field it locks up my HA dashboard and I need to close and reopen.
Ok, so I know this can be done using a value template, but from what I can tell it can also be accomplished with the state_label in the button card integration. However, I can’t figure out why it isn’t working for me!
I simply want to remove the decimal points from my humidity sensor (note this is just a work in progress, not the final button). Can anyone tell me what I’m doing wrong?
- type: custom:button-card
show_name: false
grid:
- position: relative
styles:
custom_fields:
humidity:
- filter: opacity(100%)
- overflow: unset
- border-radius: 50%
- position: absolute
- left: 55px
- top: 35px
- height: 200px
- width: 200px
- font-size: 10px
style: |
ha-card {
height: 185px;
width: 200px
box-shadow: none;
}
custom_fields:
humidity:
card:
type: glance
entities:
- entity: sensor.temp_sensor_garage_humidity
name: Humidity
icon: mdi:water
state_display: [[[ return entity.state.toFixed(1) ]]]
I got rid of the decimal and the figures behind like this:
target_temp: |
[[[
var statestr = states['input_number.cooling_temperature'].state;
var intvalue = parseFloat(parseFloat(statestr).toFixed(0));
return (isNaN(intvalue)) ? 'NA' : 'Target: ' + intvalue + '°';
]]]
Pretty sure it doesn’t work because you’re using a glance card as a custom field. So basically this has nothing to do with button-card on it’s own, since the card you’re using as custom field, doesn’t support that variable (state_display).
Use a custom:button-card as custom_field card instead.
@RomRider is it possible to style the parent element of the card?
I would like to style the highlighted section but I don’t know how.
There should be new entry -webkit-transform: translateZ(0);
I want to do that because I use vanilla-tilt.js and it causes some rendering issues with safari browser.
I would appreciate if anyone has some tips for me.
1 Like
Is it possible to set how long an animation will run for? I have several buttons that just call scripts or automations, so the state of entity is always “on”. For example, the green button calls a “vacuum specific room” script.
I’d like to be able to click those and have a twisting animation run for 60 seconds or something like that.
Here’s my working code for an entity that changes state. Just not sure how to do it when clicked and the state doesn’t change.
- type: custom:button-card
entity: input_boolean.map_mode_enabled
state:
- value: 'off'
color: rgb(179, 179, 45)
icon: mdi:map
- value: 'on'
color: rgb(250, 250, 62)
icon: mdi:map-check
styles:
icon:
- animation:
- twister .9s linear infinite
extra_styles: |
@keyframes twister {
0% {transform: rotatez(0deg): top: 10px}
25% {transform: rotatez(15deg)}
50% { top: 0px}
75% {transform: rotatez(-15deg)}
100% {transform: roatatez(0deg): top: 10px}
}
tap_action:
action: toggle
show_name: false
1 Like
I believe in your animation property you can use 60s instead of infinite.
Thanks, that does work for the specified amount of time when a state changes, but when I click the “call script” button, it doesn’t do anything. Probably because the script is always on. I wonder if there’s a way to trigger the animation from the “zoned cleaning” property of my robot.