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.
1 Like
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?
The red lines are just to illustrate the offsets.
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.
3 Likes
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 
2 Likes
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
New Features
-
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_displayparameter (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_stylesconfig 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
Bug Fixes
- tap-action: more-info doesn’t work, with an entity defined in the action fields options only (Fix #284)
Others
- Integrated latest core updates on handling
*_actions(tap, hold, double tap, etc…). If anything breaks, please tell me.
5 Likes
Hi @RomRider
After upgrading to 3.2.0 I have an issue with scrolling on my Android phone, I have a couple of views that are filled with buttons and now can’t scroll without pressing the button where I touch the screen.
I tried to reduce the sensitivity of the touchscreen with no luck, going back to 3.1.1 solves the issue so it seems to be something with the upgrade?
Thanks Brad
I can reproduce that, I’m currently checking what is happening. Better use github to file an issue though
looks like i can´t get the state_display: working.
maybe someone sees the mistake that i did.
card:
- type: custom:button-card
template: system_automation
name: HACS Update
icon: fas:store-alt
entity: sensor.hacs
show_label: true
show_last_changed: false
state_display: >
[[[ return entity.state + " Update(s)" ]]]
tap_action:
haptic: light
action: navigate
navigation_path: /hacs
styles:
img_cell:
- width: 45px
- height: 45px
- background: var(--dwains-theme-background)
- color: white
- border-radius: 100%
state:
- value: '0'
styles:
icon:
- color: var(--dwains-theme-grey)
- value: '1'
styles:
icon:
- color: var(--dwains-theme-accent)
- value: '2'
styles:
icon:
- color: var(--dwains-theme-accent)
template:
system_automation:
show_name: true
show_icon: true
show_state: true
show_label: false
show_last_changed: false
color: var(--dwains-theme-accent)
tap_action:
haptic: light
action: toggle
state:
- value: 'off'
styles:
icon:
- color: var(--dwains-theme-grey)
styles:
grid:
- grid-template-areas: '"i n""i s""i l"'
- grid-template-columns: 30% 70%
- grid-template-rows: min-content
card:
- background-color: var(--dwains-theme-primary)
- border-radius: 5px
- margin-bottom: 0px
- padding-top: 14px
- padding-bottom: 14px
icon:
- width: 55%
img_cell:
- width: 45px
- height: 45px
- background: var(--dwains-theme-background)
- color: white
- border-radius: 100%
name:
- color: var(--dwains-theme-names)
- justify-self: start
- font-size: 15px
- align-self: center
state:
- justify-self: start
- align-self: left
- font-size: 13px
- color: var(--dwains-theme-grey)
label:
- justify-self: start
- align-self: left
- font-size: 12px
- color: var(--dwains-theme-grey)
1 Like
Are you sure you are running 3.2.0? What does the console say, it should display the version.
yes i´m on 3.2.0. at least HACS says so
Check the javascript console please (and reinstall the card), it is not the first time this would have happened with HACS.