Did anyone add a custom logo to their button cards? I have devices from different manufacturers. Whenever they go offline for some reason (mostly due to Wink hub), I have to find the name of it and figure out which manufacturer and open their respective app to find out the issue.
Ex: (instead of notification circle, I want to show that the manufacturer’s small logo)
Yeah you would have to use templating. If you look at the author’s Hass example you can see that he just uses html to link the logos. I am using same method to set custom material design icons for weather under time display. Here is how it looks and the code:
cards:
- entity: sensor.simple_time
show_icon: false
show_state: false
show_name: true
show_label: true
name: |
[[[
return states['sensor.simple_time'].state;
]]]
label: |
[[[ return `<ha-icon
icon="mdi:home-thermometer"
style="width: 18px; height: 18px; color: #5f6c83; opacity: 0.6;">
</ha-icon><span> ` + states['climate.living_room'].attributes.current_temperature +`°F</span>
<ha-icon
icon="mdi:weather-cloudy"
style="padding-left: 3px; width: 18px; height: 18px; color: #5f6c83; opacity: 0.6;">
</ha-icon><span> ` + states['sensor.dark_sky_temperature'].state +`°F</span>`
]]]
styles:
card:
- width: 140px
- padding-top: 11%
name:
- font-size: 27px
- padding-bottom: 5px
label:
- font-size: 15px
type: 'custom:button-card'
While we are on the subject, does anyone know how to add the dynamic Dark Sky weather icon instead of my static cloud?
Thank you, @skynet01 I don’t think there is a way to display custom icon/image inside the notification ellipsis. Only icons from Materialdesignicons allowed.
I went ahead with ‘entity_picture’ and got this result instead.
- type: 'custom:button-card'
template: switches_lights_square
size: 70% # icon size
name: Bedroom
entity: switch.bedroom_light
entity_picture: '/local/kasalogo.png'
custom_fields:
notification: >
[[[ return `<ha-icon
icon="mdi:bed-king-outline"
style="width: 18px; height: 18px; color: #5f6c83; opacity: 0.6;">
</ha-icon>` ]]]
Cleaned up grid little bit and arranged icons to this effect.
I’m wondering if anyone has any thoughts on my previous post? I’m still struggling with absent icons.
You can create any html object, including a non-home-assistant style icon. You just can’t use ha-icon.
change color type to icon. then change your color to the grey. You modifying color type to null is causing the problem because switches and lights get their color property from the on/off colors where sensor just pulls the default color.
Trying to figure out the grid setup but cant quit get it.
My current grid code looks like this:
styles:
grid:
- grid-template-areas: '"i n s" "i n l"'
- grid-template-columns: 20% 30% 1fr
- grid-template-rows: min-content min-content min-content
That results whats shown to the left in the picture below. What i would like is whats shown to the right, the name and state are aligned horizontal and label under the state. Any suggestions?
Hi all,
I can’t get the slider entity row nice in the button card
When i set full row to true, the slider knob is placed at the right side of the button and i can not operate it
I folowed the example, what am i doing wrong?
Kind regards
You only have two rows detailed in your grid-template-areas.
See what happens if you try
- grid-template-areas: '"i n ." "i n s" "i n l"'
Thank you, much better. Tried a bunch of combinations but didnt get it right. What does the dot mean/do in the first row “i n .”?
Tried a bunch of combinations but didnt get it right.
You could play with your padding/alignment settings for each grid section to massage it to perfection.
What does the dot mean/do in the first row “i n .”?
It makes the grid area you assign it to blank. Since you have 3 columns and 3 rows you have 3x3 areas you need to account for.
_1_|__2__|____3____
_4_|__5__|____6____
7 | 8 | 9
So when you use ‘“i n .” “i n s” “i n l”’ it looks like this:
_i_|__n__|____.____
_i_|__n__|____s____
i | n | l
The period just makes the top right grid section (section 3) blank, forcing the s and l down. Before, they were centering themselves further up the column towards the center.
Is this card working with 0.106.6? I was using another custom-card and it is pretty clear that it is not under development anymore. Before I take a huge effort to migrate, I would like to be sure that it works. Thanks.
I confirm, it is maintained, although I’m quite slow lately in adding new features 
Hi all,
I have created a row of buttons to replace the header. Each one links to a different page via the navigation path option. Now what I would like to achieve is to change the color of the button based on the page currently displayed. Is it possible?
Thanks!
The lovelace object is not accessible from within templates but you can use window.location to access the current URL and parse it to fit your needs.
Your example inspired me. Was trying to figure out how to change the color of some of my buttons based on the activity state and got that to work but curious. If I wanted to say when in my case entity: input_select.harmonytvsource is “Watch TV” or “Listen To Music” then make the TV button show green that it’s on.
Here is an example of my current card tweaked with your example:
- cards:
- card:
color: var(--primary-text-color)
color_type: icon
icon: TV Power Toggle
name: TV
show_icon: false
size: 25%
entity: input_select.harmonytvsource
styles:
card:
- border-radius: 30px
- height: 32px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
state:
- value: Watch TV
styles:
icon:
- color: 'rgb(255,255,255)'
card:
- background: 'rgb(0,128,0)'
name:
- color: white
tap_action:
action: call-service
service: remote.send_command
service_data:
command: PowerToggle
device: Panasonic TV
entity_id: remote.familyroom_hub
type: 'custom:button-card'
conditions:
- entity: input_select.harmonytvsource
state_not: PowerOff
type: conditional
Support for html`<element hass=${hass}></element>` in templates (Fix #283)
You can now do things like this in templates:
return html`
<ha-relative-time
id="label"
class="ellipsis"
.hass="${hass}"
.datetime="${entity.last_changed}"
></ha-relative-time>`
Support for camera live streams (Requires the stream: component to be enabled in HA’s config (Fix #277)
type: custom:button-card
entity: camera.test
show_live_stream: true
Support for an alternative state (will override the state field) using the state_display parameter (Fix #266)
state_display: >
[[[ return entity.state + ': ' + Math.round(entity.attributes.brightness / 2.55) + '%']]]
Icons now follow the device_class (Fix #265)
Support for templates in variables (Fix #294, Fix #281)
New extra_styles config option which allows you to inject CSS (especially useful to inject CSS animations, but should also work for embedded cards). This field supports templating also (Fix #287):
- type: custom:button-card
name: Change Background
aspect_ratio: 2/1
extra_styles: |
@keyframes bgswap1 {
0% {
background-image: url("/local/background1.jpg");
}
25% {
background-image: url("/local/background1.jpg");
}
50% {
background-image: url("/local/background2.jpg");
}
75% {
background-image: url("/local/background2.jpg");
}
100% {
background-image: url("/local/background1.jpg");
}
}
styles:
card:
- animation: bgswap1 10s linear infinite
- background-size: cover
name:
- color: white
*_actions (tap, hold, double tap, etc…). If anything breaks, please tell me.