@paddy0174 hanks for sharing that! I hadn’t encountered that slider component yet and I like the simplicity of it. I like how it lights up when the entity is turned on, but still shows the level clearly when the entity is toggled off.
I enhanced it a bit, sorry, posted the “old” code before. 
I assume you get the variables, if not I can post some instructions.
Here are the changes for the “new” version, use them instead of the item2 definitions above:
item2:
card:
type: conditional
conditions:
- entity: "[[[ return entity.entity_id ]]]"
state: 'on'
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
It hides the slider, if the entity is off. 
I like the look of that theme, but I do enough digging through yaml and the like in my work hours, I don’t want to have to do it when I’m off work too. The WAF was apparently high enough to pass muster when I told her to long press on the icon to get the color changing pallet.
Appreciate the suggestion though.
One last (?) question, I have six lights in a container that I’d like to split into two rows. When I change the button type to grid and set columns to 3, I get huge amounts of spacing between the two rows. I imagine I’d need to add styling directly to the cards to fix this, but I’m not sure which need to be adjusted.
So you mean you’re an UI guy? Compared to what you’re doing now with the buttons, I can tell you, there is something in the making for the Minimalist “theme” to make that easier in the future. 
At least a lot easier than what you’re doing now. 
I’m not ready yet, but there will be some kind of generator to use the Minimalist theme. It will not free you from working in the UI editor (not the raw-config-editor, but the code editing mode), but it will be possible to generate the code to paste in there.
Take a look in the above linked thread in a few days, to get more info.
Please, no cross posting! 
You won’t get more help, if you ask in two different threads, as mostly the same people will answer, no matter if here or there, but not in both. 
So let’s stay where you want to end up, a swipe through your button-card, see here:
HI there,
is it possible to create templates using other templates for custom fields and pass the entity object?
This code here fails with “Unsupported entity type: entity” and I have no idea why.
button_card_templates:
cover_card_template:
show_name: false
show_label: true
show_icon: true
custom_fields:
position_slider:
card:
type: custom:slider-entity-row
entity: entity
attribute: position
full_row: true
hide_state: true
It works if I don’t create this card through a template but pass the entity myself.
I don’t fully understand your question, sorry, but with button_card_templates you can do almost everything!
Inheriting a template is possible in all ways, even nested templates are ok, or calling one template through the other.
But you need to call the entity in the correct way, that’s why it won’t work in your case. Try something like this:
button_card_templates:
cover_card_template:
show_name: false
show_label: true
show_icon: true
custom_fields:
position_slider:
card:
type: custom:slider-entity-row
entity: "[[[ return entity.entity_id ]]]"
attribute: position
full_row: true
hide_state: true
But you need to have the entity set in your view. There are cases, where you don’t want the entity set for the “wrapper” card, but onl for one of the “custom_fields”-card, you need to work with a variable.
Something like this:
button_card_templates:
cover_card_template:
show_name: false
show_label: true
show_icon: true
custom_fields:
position_slider:
card:
type: custom:slider-entity-row
entity: "[[[ return variables.entity_name ]]]"
attribute: position
full_row: true
hide_state: true
and in your view:
- type: custom:button-card
template: cover_card_template
variables:
entity_name: sensor.my_livingroom_temp_sensor
You need to see, what suits your design/layout best.
1 Like
Thanks, I did not know that I can pass the entity_id like that, problem solved.
Quick follow up question: Whats the correct way and/or theme variable to set the background of the label to the same color then the root card itself? If I delete the “styles” in the code, the background is just black.
button_card_templates:
position_label_right_aligned:
label: >
[[[ return `Position:
${states[entity.entity_id].attributes.current_position}%` ]]]
show_state: false
show_icon: false
show_label: true
show_name: false
cover_card_template:
show_name: false
show_label: true
show_icon: true
custom_fields:
position_label:
card:
type: custom:button-card
template: position_label_right_aligned
entity: '[[[ return entity.entity_id ]]]'
styles:
card:
- background-color: red
Hi,
Just wondering if there’s a way to use card mods to resize the containers? It seems to work to move the containers but I’m not able to resize the containers when using horizontal stack.
Thanks!
I’m not sure this is the right spot to ask for some assistance but… I really like using the custom fields/grid element card that the github page shows the raspberry pi. It works great when I’m using sensors but I have a card that uses binary sensors and I don’t know how to change the state from ‘off’ to something else like ‘clear’.
Try this (inserted in the same spot you you have the temp display defined).
temp: >
[[[
var stat="clear";
if (${entity.state}=="on") then stat="wet!";
return `<ha-icon
icon="mdi:water-alert"
style="width: 16px; height: 16px; color: orange;">
</ha-icon><span style="font-size: 12px;">${stat}</span>`
]]]
1 Like
[quote=“qoheleth, post:215, topic:238450”]
Thank you so much, it actually gave me an error but it got me thinking and I was able to config an if/else condition…
temp: >
[[[
if (entity.state == "on")
return `<ha-icon
icon="mdi:water-alert"
style="width: 16px; height: 16px; color: red;">
</ha-icon><span style="font-size: 12px;">Wet</span>`
else
return `<ha-icon
icon="mdi:water-off"
style="width: 16px; height: 16px; color: orange;">
</ha-icon><span style="font-size: 12px;">Dry</span>`
]]]
The error was “state” instead of “stat”. You can’t use state as a variable because it’s already defined as something else.
Styling question: The following screenshot shows my cover card I built using button-card.
The text "Position 100% is an embedded button-card through custom_fields of the root card. The text itself is the “name” attribute taking an attribute from the entity.
The question is, how can I make the background of the embedded card transparent? I only want the text to be displayed.
Any way to make an IF based entity with an embedded button?
In the custom_fields below I would want to do something like:
entity >
[[[
if (states["alarm_control_panel.ring_alarm"].state == "armed_home") return 'switch.ringdisarm';
if (states["alarm_control_panel.ring_alarm"].state == "disarmed") return 'switch.ringarmhome';
]]]
What I want to have a button change to different actions based on the current state: if alarm is armed, button should disarm etc. Similar to how the standard alarm-panel works by default.
- type: 'custom:button-card'
show_state: true
show_name: false
entity: alarm_control_panel.ring_alarm
state:
- value: 'armed_home'
icon: mdi:shield-account
color: red
- value: 'disarmed'
icon: mdi:shield-off
color: darkgreen
styles:
icon:
- width: 24%
- margin-left: 10%
state:
- margin-top: -35%
- margin-left: 80%
custom_fields:
button:
card:
type: 'custom:button-card'
entity: switch.ringarmhome
show_icon: false
styles:
name:
- text-transform: uppercase
- letter-spacing: 0.1em
- font-size: 13px
- font-weight: bold
card:
- border-radius: 5px
- height: 35px
- width: 100px
- box-shadow: 0px 0px 1px 1px
- margin: 0px 120px 0px -30%
Question about the button shadow:
I would like to control the button shadow color based on a few conditions.
For example, for a plug, I would like the border to be green when on, and the template primary when it is off.
for a light, I would like to make it the color light when on, and the theme primary when off.
I have done some research, and I see the use of the template. This is what I have now:
standard:
color_type: card
size: 80%
hold_action:
action: more-info
styles:
card:
- padding: 0.2em
- "--mdc-ripple-color": var(--light-primary-color)
- "--mdc-ripple-press-opacity": 0.5
- box-shadow: 0px 0px 3px 3px var(--light-primary-color)
icon:
- opacity: 0.75
I found that using - box-shadow: 0px 0px 9px 3px var(--button-card-light-color) will give me what I need for the light.
How can I program the border to set a color based on the entity state? I have it for the icon based on the template provided earlier in the thread.
- color: >
[[[
if (entity.state == 'on') return 'lime';
else return 'red';
]]]
But how do I do that when the color is not under its own tag, but part of the box-shadow. Can’t tell what code I am in now, JSON, YAML, CSS.
Any guide to help with the mix of codes for lovelace would help me figure out, or any pointers.
Hi,
I want to get a value of the weekday.
Did someone now’s how to do that?
Thanks
custom_fields:
test: >
[[[ return [now().weekday()] ]]]
You should use “states” for the different styles.
state:
- value: 'on'
some style
- value: 'off'
some other style