Button icon color and template

Configuration Frontend
1

Hello

I have a problem with a button icon color
No mater what the state is it’s always return false

          - type: custom:button-card
            template: header
            entity: binary_sensor.1bgt360_park_brake_status
            show_state: true
            show_name: false
            styles:
              state:
                - color: white
                - font-size: 12px
              icon:
                - color: |
                    [[[ if (entity.state == 'Aan') return "Green" ;
                      else return "blue"; ]]]

The state show me Aan or Off but even if i set it to true or Aan of On it’s always return blue

Second question i try to play with templates

button_card_templates:
  header:
    styles:
      card:
        - background-color: var(--paper-item-icon-active-color)
      name:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold
      label:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold
  header_red:
    template: header
    styles:
      card:
        - background-color: '#FF0000'

but if i add these parameters to the template it wont work

            styles:
              state:
                - color: white
                - font-size: 12px

button_card_templates:
  header:
  show_state: true
  show_name: false
    styles:
      card:
        - background-color: var(--paper-item-icon-active-color)
      name:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold
      label:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold
  header_red:
    template: header
    styles:
      state:
        - color: white
        - font-size: 12px
      card:
        - background-color: '#FF0000'

And can i add a separate yaml file to use with my template’s and use include or do i need to add them to te lovelace file,because if you have x different templat’s it will become messy i think :slight_smile:

Thx

2

because the state is “on” or “off”.
States do not depend on a language, of course.

3

Do it like this for each dashboard file:

button_card_templates: !include_dir_merge_named templates-button-card/
views:
 ....

And create that “templates-button-card” folder and fill it by yaml-files with your templates (one file = 1 template, or 1 file = several related templates).

4

Impossible, should work.

5

thx, but i try it already with:
On/Off
True/False
Aan/Uit

Nothing works

6

i add these line to my dashboard file

button_card_templates: !include_dir_merge_named templates/button-card/
views:
  - title: Home
    type: custom:grid-layout
    badges: []
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        cards:
          - type: vertical-stack
            cards:
            ...

But i get this error when saved


Kan YAML niet parseren: YAMLException: unknown tag !<!include_dir_merge_named> (1:71) 1 | ... ge_named templates/button-card/ -----------------------------------------^ 2 | ... 3 | ...
7

Thats works now thx

8

Because you are trying to use “!include” in a “storage mode” Dashboard.
This code works in “yaml mode” Dashboards only.
here
here

9

Try this:

 [[[ if (entity.state == 'on') return "green" ;
                      else return "blue"; ]]]
10

I start reading about the yaml mode
No i add this tot my configuration yaml file

lovelace:
  mode: yaml
  dashboards:
    home-dashboard:
      mode: yaml
      title: MyHome
      icon: mdi:home
      show_in_sidebar: true
      filename: MyHome.yaml

i’m running HA in a docker envoirement , but where do i need to place te MyHome.yaml file?

11

This question is misplaced.
Create a separate thread for it.