@flirtysanchez You have defined your ātap_actionā for the chip card as navigate. But you did not specify where to navigate to. 
You can either specify an url to navigate to. Or leave the ātap_actionā on āmore_infoā.
See the docs for more examples: here
OK. Thanks for the hint. But it doesnāt work with this option. If i try to click nothing happens.
chips_temp_nas:
template: chips
tap_action:
action: more-info
label: |
[[[
var temp = states['sensor.ds218plus_temperature'].state;
return 'š”ļø' + " " + temp + 'Ā° | DS218+';
]]]
chips_used_space_nas:
template: chips
tap_action:
action: more-info
label: |
[[[
var spacetotal = states['sensor.ds218plus_volume_1_used_space'].state;
var spacepercent = states['sensor.ds218plus_volume_1_volume_used'].state;
return 'š¾' + " " + spacetotal + " TB | " + spacepercent + " %";
]]]
@flirtysanchez Ah yes, I see the next problem.
You didnāt provide an entity to navigate to.
Either specify one for the button-card:
chips_temp_nas:
template: chips
entity: sensor.ds218plus_temperature
tap_action:
action: more-info
label: ......
or specify an entity in your tap_action:
chips_temp_nas:
template: chips
tap_action:
action: more-info
entity: sensor.ds218plus_temperature
label: ......
Thanks! you are awesome!
No time to continue tonight.
Be careful, these are the old names.
It is necessary to adapt the āgenericā template to finish the jobā¦
To share work already done
#left card
type: custom:button-card
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 0px
grid:
- grid-template-areas: '"item1" "item2" "item3" "item4" "item5" "item6"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
custom_fields:
item1:
card:
entity: sensor.canon_mg5700_series
name: Canon MG5750
template:
- icon_info
- generique
styles:
card:
- padding: 12px
type: custom:button-card
item2:
card:
type: custom:bar-card
name: BK
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: black
entities:
- entity: sensor.canon_mg5700_series_black_bk
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item3:
card:
type: custom:bar-card
name: B
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: black
entities:
- entity: sensor.canon_mg5700_series_black_pgbk
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item4:
card:
type: custom:bar-card
name: 'Y'
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(250,179,0)
entities:
- entity: sensor.canon_mg5700_series_yellow
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item5:
card:
type: custom:bar-card
name: M
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(248,75,122)
entities:
- entity: sensor.canon_mg5700_series_magenta
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item6:
card:
type: custom:bar-card
name: C
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(66,126,222)
entities:
- entity: sensor.canon_mg5700_series_cyan
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px 16px 16px;
}
animation:
state: 'off'
type: custom:button-card
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 0px
grid:
- grid-template-areas: '"item1" "item2" "item3" "item4" "item5" "item6"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
custom_fields:
item1:
card:
entity: sensor.canon_mg5700_series
name: Canon MG5750
template:
- icon_info
- generique
styles:
card:
- padding: 12px
type: custom:button-card
item2:
card:
type: custom:bar-card
name: BK
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: black
entities:
- entity: sensor.canon_mg5700_series_black_bk
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item3:
card:
type: custom:bar-card
name: B
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: black
entities:
- entity: sensor.canon_mg5700_series_black_pgbk
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item4:
card:
type: custom:bar-card
name: 'Y'
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(250,179,0)
entities:
- entity: sensor.canon_mg5700_series_yellow
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item5:
card:
type: custom:bar-card
name: M
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(248,75,122)
entities:
- entity: sensor.canon_mg5700_series_magenta
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item6:
card:
type: custom:bar-card
name: C
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(66,126,222)
entities:
- entity: sensor.canon_mg5700_series_cyan
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px 16px 16px;
}
animation:
state: 'off'
Please do not cross post over different threads! Stay in the one you asked the question first. People have already answered there and it is cluttering the threads more than it is useful. 
Despite that mostly the same people will try to answer your question and spreading information over different threads makes answering more difficult!
Thank you!
EDIT: Here we go:
Sorry for that.
Later I was thinking that this question is more suitable for this thread, because if I put entity out of variables card is not working. Probably not the right way to put entity in variables, but card is working. Only problem that I have, I can not read states and attributes from entity if entity is in variables, or I am doing something wrong in JSTemplate. JSTempling is relatively new to me and I am still learning. 
Have you changed something in the icon_info_bg template regards the binary_input to show automatic light status? I get the following error when I try to add this card:
ButtonCardJSTemplateError: TypeError: Cannot read property 'state' of undefined in 'return entity.state === 'off' ? 'Active' : 'Ikke active''
Small note:
If you use the light-slider, DO NOT UPDATE your ha-slider-card! There is an update available that is not really ready for production.
Iāll make a short issue with the author, for now my recommendation is to stay with the āoldā version of ha-slider-card. Iāll update this post and/or make a new one, if all seems to be resolved.
Is there a way to add these without changing to YAML mode? Adding /lovelace/button_card_templates/button_card_templates.yaml as Stylesheet to dashboard > resources did not help
EDIT: Also, would it be to much work to add these as cards in HACS? Somewhat like this DBuit/Homekit-panel-card: Homekit panel card for home assistant (github.com)
And of course well done! This looks really really great!
@filikun It should be possible but you will need to add the template file as yaml somewhere in your configuration and then include it in your configuration by using the ui.
In the case of your example:
/lovelace/button_card_templates/button_card_templates.yaml
lovelace with a folder inside with name button_card_templates
Now you should be able to use the templates in UI mode 
Let me know if you run into more problems
Should we also do something with the resources.yaml file and themes files too? ( for getting this working with only UI mode )
Or @tben maybe you can extend the github page with some more details? ( sorry not knowing what to do with all the files in UI mode - non yaml mode )
The resources should be automatically included when you use HACS.
You will need to add the theme to your configuration.yaml (see here)
Hi tben, thanks for this nice theme.
Iāve been testing it out after installing it.
However Iām experiencing some issues with the theme.
As you can see in the screenshot the icon colors donāt appear, and also the slider button card doesnāt seem to get implemented here.
The first light on the left top is a dimmable light and the slider appears but incorrectly it seems.
Dimmed light on:
Thanks for the advice in advance
Pieter
Seems as it isnāt using the correct theme.
Did you select the correct theme in your user profile for this device?
Thanks Dylan,
That was the option I didnāt checked yet, thought this was fixed in the yaml setup as well.
Thanks again!
Another question I have is the difference in spacing, which is better visible in the dark theme.
Iām using the edge at the beginning and the end of each block.
- template: edge
type: 'custom:button-card'
Is thatās what itās used for or is it for something else still?
Thanks!
Pieter
So the difference in width seems to be the caused by mixing a grid and a horizontal grid card
- type: grid
columns: 2
square: false
cards:
using the grid like above gives a nice layout
How many chips can i show in mobile view?
Some of them only shows as dots, when i change to landscape they shows like it should
I have a problem with buttons no alway on same place during on / off.
Here is code:
widget_temperature:
tap_action:
action: toggle
color: var(--google-grey-500)
show_icon: false
show_name: false
show_label: true
size: 20px
label: |-
[[[
var current_temperature = entity.attributes.current_temperature;
var temperature = entity.attributes.temperature;
if (entity.state == 'off') {
var temperature = current_temperature;
}
return temperature + 'Ā°C'
]]]
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: 'rgba(var(--couleur-theme),0)'
- border-radius: 14px
- place-self: center
- height: 42px
grid:
- grid-template-areas: '"l"'
label:
- color: 'rgba(var(--couleur-theme),0.9)'
########################################################################################################
# #
# HEATING #
# #
########################################################################################################
heating:
tap_action:
action: more-info
icon: |
[[[
if (entity.state =='auto') {
return 'mdi:robot-industrial';
} else if (entity.state =='heat') {
return 'mdi:radiator';
}
return 'mdi:radiator-off';
]]]
label: >-
[[[
if (entity.state =='off') {
return "IzkljuÄeno";
} else if (entity.state =='heat') {
return "Gretje";
} else if (entity.state =='auto') {
return "Auto";
}
return entity.state;
]]]
state:
- operator: template
value: >
[[[
return entity.state != 'off';
]]]
styles:
icon:
- color: 'rgba(var(--couleur-rouge),1)'
img_cell:
- background-color: 'rgba(var(--couleur-rouge),0.2)'
template:
- red
####################################################
# #
# HEATING WITH BOUTONS #
# #
####################################################
heating_buttons:
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
template: list_items_favorite
type: custom:button-card
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: >
[[[
if (variables.name == null) {
return variables.entity;
}
return variables.name;
]]]
tap_action:
action: more-info
template:
- icon_info
- heating
type: 'custom:button-card'
item2:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: mdi:power
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'heat'
type: custom:button-card
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: mdi:power-off
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'off'
type: custom:button-card
template: widget_icon
item2:
card:
template: list_items
type: 'custom:button-card'
custom_fields:
item1:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: 'mdi:minus'
tap_action:
action: call-service
service: script.decrease_heating_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: 'mdi:home-thermometer-outline'
tap_action:
action: none
type: 'custom:button-card'
template: widget_icon
item2:
card:
icon: 'mdi:temperature-celsius'
tap_action:
action: none
type: 'custom:button-card'
template: widget_temperature
entity: '[[[ return variables.entity ]]]'
item3:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: 'mdi:minus'
tap_action:
action: call-service
service: script.increment_heating_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: 'mdi:home-thermometer-outline'
tap_action:
action: none
type: 'custom:button-card'
template: widget_icon