Yes, can you hit F12 and highlight the buttons grid?
Also, what layout are you using?
1 Like
Thanks
So where is the word seguro coming from ?
translation, you always should go off the states in the states page never what you see in the UI
1 Like
Here are some screenshots of the objects you requested. Interestingly, when I hovered over the icon, it highlighted a small area around the icon. Yet, if I hovered over the empty area between the icon and the text elements to the left, it highlighted a larger area. It’s almost as if there is another element behind the icon.
Here’s the button config
Button Card Template:
lamp-settings:
show_state: true
show_label: true
icon: mdi:floor-lamp
tap_action:
action: toggle
styles:
grid:
- grid-template-areas: '"n i" "s i" "l i"'
- grid-template-columns: 1fr 60%
card:
- border-radius: 10px
- height: 55px
- background-color: '#222222'
label:
- font-weight: bold
icon:
- justify-self: end
name:
- justify-self: start
- padding-left: 4px
- font-weight: bold
- text-transform: Titlecase
- font-size: 14px
state:
- justify-self: start
- padding-left: 10px
- font-size: 10px
- text-transform: uppercase
state:
- value: 'on'
color_type: icon
color: rgb(181, 142, 49)
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
Card Declaration:
- type: custom:button-card
template: lamp-settings
name: Pendants
entity: light.kitchen_pendants
So it’s your grid columns.
try this:
- grid-template-columns: auto 55px
If you want it super close try
- grid-template-columns: auto 40px
you were right. now works…but does not work for the other sensor
cards:
- name: INFORMAÇÃO
template: header_marcelo
type: 'custom:button-card'
- cards:
- entity: sensor.riscoincendio
name: RISCO DE INCÊNDIO
show_label: true
show_state: true
size: 70%
state:
- color: green
value: REDUZIDO
template: cartao
type: 'custom:button-card'
- dbltap_action:
action: more-info
entity: binary_sensor.meteoalarm
name: ALERTA METEO
show_label: true
show_state: true
size: 70%
state:
- color: orange
icon: 'mdi:weather-sunny'
value: 'off'
- color: red
icon: 'mdi:format-line-spacing'
value: 'on'
tap_action:
action: toggle
template: cartao
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack
gotta figure out what the actual states are for the sensor.riscoincendio, remember these things are case sensitive.
I need some help please. I cant get any of the styles to work with this card (v1.9.0) For example
- title: Test
cards:
- type: 'custom:button-card'
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ContextMenu
entity_id: media_player.kodi
styles:
icon:
color: rgb(228, 94, 101)
icon: 'mdi:menu-open'
I would expect the icon to change color but it does not. If I use
- title: Test
cards:
- type: 'custom:button-card'
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ContextMenu
entity_id: media_player.kodi
color: rgb(228, 94, 101)
icon: 'mdi:menu-open'
It works as expected.
styles is an array, so it should be:
styles:
icon:
- color: xxxxx
I tried that, but it still did not work
- title: Test
cards:
- type: 'custom:button-card'
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ContextMenu
entity_id: media_player.kodi
styles:
icon:
- color: rgb(228, 94, 101)
icon: 'mdi:menu-open'
Thank you, @petro. Now I understand how to manipulate that specific area of the grid. It’s interesting to see how the reduction of the px value affects the size on the X axis and makes the overall icon size smaller. I’m going to have to play around with the values to find a way to reduce the overall area being occupied without affecting the size of the icon so drastically.
1 Like
are you clearing your cache when you reload? CTRL+F5
Yes and I also use the custom cards directory.
- url: /local/customcards/button-card.js
type: module
needs to be rgba
The thing is no styles are being applied. I’ve tried this in firefox and chrome
- title: Test
cards:
- type: 'custom:button-card'
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ContextMenu
entity_id: media_player.kodi
styles:
card:
- width: 100px
- height: 100px
- background-color: green
icon:
- color: red
icon: 'mdi:menu-open'
then something is wrong with your install or you are using an old version
1 Like
Thanks, double checked everything and you were right. It was an install error
1 Like
So this is wrong unless you actually created a customcards folder inside the www folder.
Remember, local is just a link to www and customcards is also a link to www. Neither local nor customcards folders actually ‘exist’
1 Like
trying to concatenate the state: in a template and the actual config for an entity won’t work just yet.
please check with me if this should be possible:
template bit:
state:
- value: 'on'
# icon: 'mdi:desk-lamp'
styles:
name:
- color: black
state:
- color: gray
label:
- color: red
- value: 'off'
# icon: 'mdi:flashlight-off'
styles:
card:
- opacity: 0.6
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: grey
name:
- color: grey
state:
- color: grey
- value: 'unavailable'
styles:
label:
- color: rgba(0, 0, 0, 0.0)
- opacity: 0.4
- color: grey
- --paper-item-icon-color: grey
and the entity config:
- type: horizontal-stack
cards:
- type: custom:button-card
template: switch
entity: switch.master_bed_outlet
name: Master-b light
label_template: >
var id = entity.entity_id.split('.')[1].slice(11);
return id;
state:
- value: 'on'
icon: 'mdi:desk-lamp'
- value: 'off'
icon: 'mdi:flashlight-off'
as far as I can check it now, the template is used, up to the state: section posted above, because the icons from the entity config take over the state: section. As a consequence, all other state: settings are ignored.
reading this: button-card/README.md at master · custom-cards/button-card · GitHub
specifically:
The state arrays in templates will be concatenated together with your config, meaning you can add new states but not change/delete states. Your main config states will be appended to the ones in the template.
As far as I can test it now, the whole state: section is ignored and only the icon bit is active, when using the icon in the entity-config. No concatenation at all taking place. Which would really be a pity, because if one only wants to set an icon depending on state, one needs to set to whole state section on each individual entity. In this case, they are all identical, so that’s a whole lot of code duplicated many times…
thanks for having a look!