This is the card, I would like the transparent upper part (text DOMANI RACCOLTA). I just want the text without the custom_fields box
Without full code I can only assume that a box-shadow is the reason. Add
- box-shadow: none
to your custom_fields styles.
Not working 
type: grid
cards:
- type: custom:auto-entities
show_empty: true
card_param: cards
card:
type: grid
square: true
columns: 1
sort:
attribute: days
method: attribute
numeric: true
count: 1
first: 0
style:
transform: translate(0%, 0%)
bottom: 0%
left: 5%
filter:
exclude:
- entity_id: group.garbage_collection
attributes:
entity_id: []
include:
- group: group.garbage_collection
options:
type: custom:button-card
entity: this.entity_id
triggers_update: all
show_entity_picture: true
show_icon: false
show_label: false
aspect_ratio: 1/1
tap_action:
action: more-info
entity_picture: /local/hassiohelp/pkg_raccolta/bidone.png
label: |-
[[[
return entity.attributes.friendly_name;
]]]
styles:
card:
- font-size: 100%
- padding: 5%
custom_fields:
title:
- align-self: start
- background-color: transparent;
- box-shadow: none
- position: absolute
- filter: opacity(90%)
- left: 0%
- top: 0%
- height: 10%
- width: 100%
- line-height: 0px
- font-size: 80%
name:
- color: yellow
- align-self: middle
- font-weight: normal
entity_picture:
- max-width: 100%
- filter: |
[[[
return 'var(--'+ entity.attributes.friendly_name.toLowerCase().replace(' ','_') +')';
]]]
custom_fields:
title:
card:
type: markdown
content: DOMANI RACCOLTA
styles:
- box-shadow: none
extra_styles: |
#img-cell #icon {
/*
SETTINGS - Change the variables name (i.e. --bianco)
based on the friendly name of the bin
and the style (i.e. hue-rotate(00deg)) for the color of the bin
*/
--plastica: hue-rotate(20deg) brightness(1.2); /* yellow */
--umido: hue-rotate(0deg) grayscale(50%) brightness(0.7); /* brown */
--carta: hue-rotate(160deg) brightness(0.7); /* blue */
--indif: hue-rotate(0deg) grayscale(100%) brightness(0.7); /* gray */
--vetro: hue-rotate(100deg) brightness(0.7); /* dark green */
borde-radius: var(--ha-card-border-radius);
}
columns: 2
Correct, because you used a markdown card as custom field. If you use card-mod, you can manipulate the background of the markdown card. For now, I replaced the markdown, have a look:
type: custom:button-card
entity: light.flur
triggers_update: all
show_entity_picture: true
show_icon: false
show_label: false
aspect_ratio: 1/1
tap_action:
action: more-info
entity_picture: /local/hassiohelp/pkg_raccolta/bidone.png
label: |-
[[[
return entity.attributes.friendly_name;
]]]
styles:
card:
- font-size: 100%
- padding: 5%
- background: black
custom_fields:
title:
- box-shadow: none
- position: absolute
- filter: opacity(90%)
- left: 0%
- top: 20%
- width: 100%
- font-size: 80%
- color: yellow
name:
- color: yellow
- align-self: middle
- font-weight: normal
entity_picture:
- max-width: 100%
- filter: |
[[[
return 'var(--'+ entity.attributes.friendly_name.toLowerCase().replace(' ','_') +')';
]]]
custom_fields:
title: |
[[[ return 'DOMANI RACCOLTA' ]]]
extra_styles: |
#img-cell #icon {
/*
SETTINGS - Change the variables name (i.e. --bianco)
based on the friendly name of the bin
and the style (i.e. hue-rotate(00deg)) for the color of the bin
*/
--plastica: hue-rotate(20deg) brightness(1.2); /* yellow */
--umido: hue-rotate(0deg) grayscale(50%) brightness(0.7); /* brown */
--carta: hue-rotate(160deg) brightness(0.7); /* blue */
--indif: hue-rotate(0deg) grayscale(100%) brightness(0.7); /* gray */
--vetro: hue-rotate(100deg) brightness(0.7); /* dark green */
border-radius: var(--ha-card-border-radius);
}
1 Like
thanks now it works great!
what youâre asking for is hours of work and I donât have that kind of time. Sorry. Hereâs the closest config for it. Be warned, this is extremely advanced and newbies should take it slow.
It took me a while to figure out how to get a card that way I wanted but I just finished making some custom:button cards for a wall mounted FireHD. In case anyone wants to know how to get the buttons to show label, icon, state without the icon being too big I am sharing what I did.
type: custom:button-card
entity: sensor.inovelli_unknown_type_000d_id_0001_temperature
name: ' '
label: Inovelli Temp
show_state: true
show_label: true
show_icon: true
show_name: false
size: 20%
styles:
grid:
- grid-template-areas: '"l" "i" "s"'
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr
state:
- justify-self: center
- font-size: 25px
card:
- font-size: 18px
- height: 150px
Hi All,
Still loving this card and wanted to make a mobile friendly button with easy access to more settings. There is only one thing that i donât understand. Someone knows why i need to use the padding (in red) to keep the second button centered? If i remove the paddings the second button is âlostâ outside the card.
Cheers Niels
type: custom:button-card
entity: light.office_rack_1
name: Office Rack 1
color: auto
color_type: card
show_state: true
size: 50%
styles:
grid:
- grid-template-areas: '"i n info" "i s info"'
- grid-template-columns: 80px auto 80px
- grid-template-rows: 1fr 1fr
name:
- align-self: end
- justify-self: start
- font-weight: 550
state:
- align-self: start
- justify-self: start
- font-weight: 350
custom_fields:
info:
- align-self: center
- justify-self: center
- padding-bottom: 55px
- padding-right: 55px
custom_fields:
info:
card:
aspect_ratio: 1/1
color: auto
color_type: card
entity: |
[[[ return entity.entity_id; ]]]
icon: mdi:tune-variant
show_name: false
size: 50%
styles:
card:
- background: none
- border-radius: 50%
- box-shadow: none
- height: 50px
- width: 50px
tap_action:
action: more-info
type: custom:button-card
Did you try
background: none
Delete the line aspect_ratio: 1/1 in your âinfoâ.
1 Like
Hi Pedolsky,
Yes, that did the trick. I didnât realize that making the button square makes it bigger.
Anyway Thanks! 
Thank youâŠ
made some progress in the mean while⊠will share once presentable 
I have these input booleans for my room selection for robot vacuum.
I tried changing the text for the state with this line of code using state_display:
state:
- value: 'on'
entity_picture: \local\img\open_door.png
color: white
state_display: Cleaning
- value: 'off'
entity_picture: \local\img\dor.png
color: rgba(65,65,63,0.2)
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
That doesnât work. Is there a way to make this happen? Change the state from «on» to «cleaning»
1 Like
Use it this way:
type: custom:button-card
entity: your_vacuum
show_state: true
state:
- value: 'on'
entity_picture: \local\img\open_door.png
color: white
- value: 'off'
entity_picture: \local\img\dor.png
color: rgba(65,65,63,0.2)
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
state_display: |
[[[ return entity.state == 'on' ? 'Cleaning' : 'zzzâŠ' ]]]
Cheers!
That did the trick
Hello,
In my button card, I would like to color the WAN Status
Like this:
Iâm sure that the solution is pretty here:
The code if someone could help me:
entity: binary_sensor.wan_status
show_icon: false
aspect_ratio: 1/1
name: Livebox
styles:
card:
- border-radius: 15%
- padding: 8%
- font-size: 100%
grid:
- grid-template-areas: '"i WAN" "n n" "Down Down" "Upl Upl" "HPB HPB" "HPC HPC"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 100%
- align-self: middle
- justify-self: start
- padding-bottom: 9%
img_cell:
- justify-content: start
- align-items: start
- margin: none
custom_fields:
WAN:
- align-self: start
- justify-self: end
Down:
- padding-bottom: 5%
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.orange_livebox_download_speed"].state > 80)
return "red"; ]]]
Upl:
- padding-bottom: 5%
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.orange_livebox_upload_speed"].state > 80)
return "red"; ]]]
HPB:
- padding-bottom: 5%
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.hp_envy_5640_series_black_ink"].state < 30)
return "red"; ]]]
HPC:
- padding-bottom: 5%
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.hp_envy_5640_series_tri_color_ink"].state < 30)
return "red"; ]]]
custom_fields:
WAN: |
[[[
return `<ha-icon
icon="mdi:server-network"
style="width: 20px; height: 20px; color: var(--primary-text-color) ">
</ha-icon><span><span style="color: auto;"></span>`
]]]
Down: |
[[[
return `<ha-icon
icon="mdi:download"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>Down: <span style="color: var(--text-color-sensor);">${states['sensor.orange_livebox_download_speed'].state}MBs</span></span>`
]]]
Upl: |
[[[
return `<ha-icon
icon="mdi:upload"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>Up: <span style="color: var(--text-color-sensor);">${states['sensor.orange_livebox_upload_speed'].state}MBs</span></span>`
]]]
HPB: |
[[[
return `<ha-icon
icon="mdi:water"
style="width: 12px; height: 12px; color: black;">
</ha-icon><span>HP Black: <span style="color: var(--text-color-sensor);">${states['sensor.hp_envy_5640_series_black_ink'].state}%</span></span>`
]]]
HPC: |
[[[
return `<ha-icon
icon="mdi:water"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>HP Color: <span style="color: var(--text-color-sensor);">${states['sensor.hp_envy_5640_series_tri_color_ink'].state}%</span></span>`
]]]
type: custom:button-card
var(--paper-item-icon-color)
If it doesnât change color after that, you need to use an if statement based on the state because âstate_colorâ is not an option in templates. At that point, youâd use 'var(--paper-item-icon-active-color)' for on and 'var(--paper-item-icon-color)' for off.
It changes the icon color but only with color icon off statement
How could I do it with the If condition for On : var(âpaper-item-icon-active-color) and Off : var(âpaper-item-icon-color) ?
This post has some if statement examples
I donât find the solution for the icon color 
Only with the state:
WAN: |
[[[
return `<ha-icon
icon="mdi:server-network"
style="width: 20px; height: 20px; color: var(--icon-color);">
</ha-icon>${states['binary_sensor.wan_status'].state}`
]]]