Lovelace: Button card

now heres the tricky question.

if the state is off (plug switched off) can the color be white and if the plug is on (state on) then be red?

Yes, you can use jinja2 templates with card mod for that. See this: GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card

And here’s an example of a jinja2 template: Templating - Home Assistant

Maybe below code works (replace where it now says color: red with below, make sure all spaces/indents are correct).

          color:
            {% if is_state(‘switch.nikki_laptop’, 'on') %}
              red;
            {% else %}
              white;
            {% endif %}

I don’t use templates in card-mod myself, so for this question you should really visit card-mod so this thread doesn’t get off tracks any further. Probably there are tons of examples there you can copy the template from if you use the search.

i tried

            points: false
          color_thresholds:
            - value: 0
              color: "#276696"
            - value: 19
              color: "#228C22"
            - value: 22
              color: "#d35400"
            - value: 25
              color: "#c0392b"
          card_mod:
            style: |
              ha-card {
             color:
             {% if states(‘switch.nikki_laptop’, 'on') %}
              red;
             {% else %}
              white;
             {% endif %}

and get

while parsing a block mapping in "/config/button_card_templates.yaml", line 1463, column 13 expected <block end>, but found '<block mapping start>' in "/config/button_card_templates.yaml", line 1465, column 14

As I stated: make sure all spaces/indents are correct). You can see our codes are not the same, you messed up the indents.

Also you seem to ignore my previous post, use the updated code. This should be the complete code:

      graph:
        card:
          type: "custom:mini-graph-card"
          hours_to_show: 24
          points_per_hour: 4
          line_width: 8
          font_size: 75
          decimals: 0
          show:
            name: false
            icon: true
            state: true
            legend: false
            labels: false
            points: false
          color_thresholds:
            - value: 0
              color: "#276696"
            - value: 19
              color: "#228C22"
            - value: 22
              color: "#d35400"
            - value: 25
              color: "#c0392b"
          card_mod:
            style: |
              .state__value {
                  color:
                    {% if is_state(‘switch.nikki_laptop’, 'on') %}
                      red;
                    {% else %}
                      white;
                    {% endif %}
              }
              .states {
                  color:
                    {% if is_state(‘switch.nikki_laptop’, 'on') %}
                      red;
                    {% else %}
                      white;
                    {% endif %}
              }  

If this doesn’t work, please ask for help in card-mod, there is nothing else I can do.

ok the above code allows the homepage to reload but color is back to being white.

image

@tomcoleman according to this post, below code should be the correct (and shorter) code to change the color. I tried it myself and indeed changes the state color to red, so you should use this code now.

      card_mod:
        style: |
          ha-card .states.flex {
            color: red;
          }

Why my template doesn’t work I don’t know (tested myself and indeed doesn’t work). Use the search button in the card-mod thread and look for templates, so you can use above code in a template example.

… and ha-card may be omitted.

P.S.
Some of my card-mod examples contain:

  1. A “simple DOM navigation” instead of “optimized DOM navigation” (the 1st may be more clear for beginners).
  2. A “style” keyword only instead of “card_mod / style” keywords (which are advised to be used since card-mod 3).
1 Like

Please go easy on me! This is my first attempt with the Custom Button Card (although I see the power it holds!) but I can’t figure out how to properly stack my objects?! In the example above (purely in the mockup phase), I need to have the trash can icon (circled in green) to be in front of the gauge card. My code is below. What am I doing wrong?!

type: custom:button-card
icon: mdi:delete
show_name: false
card:
  - overflow: unset
grid:
  - position: relative
styles:
  custom_fields:
    graph:
      - filter: opacity(100%)
      - overflow: unset
      - border-radius: 50%
      - background-color: '#000044'
      - position: absolute
      - left: 0px
      - top: 40px
      - height: 120px
      - width: 200px
      - font-size: 11px
  card:
    - left: 80px
    - top: 10px
    - height: 200px
    - width: 280px
  icon:
    - left: 10px
    - top: 10px
    - height: 35px
    - width: 35px
    - background-color: transparent
entity: light.switch_queen_bedroom
hold_action:
  action: info
custom_fields:
  graph:
    card:
      type: gauge
      entity: input_number.countdown_trash
      max: 7
      min: 0
      name: Trash Collection
      style: |
        ha-card {
          box-shadow: none;
          background-color: red;
        }

I’d like to do something similar as Mark in the post above. I’d like to display a button-card inside another button card (so that I have the option to display a switch for a camera, for example).
cambutton
It seems it can be done with custom fields, but I am not a big programming expert. Can you please help me on how to do this?
This is where I got so far (switch is not displaying over the camera picture):

type: custom:button-card
entity: camera.mycam_mainstreamprofile
show_entity_picture: true
show_icon: false
custom_fields:
  camera_image: |
    [[[
      return html`
        <hui-image
          .hass=${hass}
          .cameraImage=${entity.entity_id}
          .entity=${entity.entity_id}
          .cameraView="auto"
          aspectRatio="1"
        ></hui-image>
      `;
    ]]]
  switch:
    card: 
      type: custom:button-card
      entity: switch.camswitch
size: 95%
styles:
  grid:
    - position: relative
  custom_fields:
    camera_image:
      - position: relative
      - width: 100%
      - height: 100%
      - z-index: 0
    switch:
      - position: absolute
      - left: 60%
      - top: 10%
      - height: 20px
      - width: 20px
      - font-size: 8px
      - line-height: 20px

Thank you.

So I have a navigation button that takes me to another screen. This is working great. I want to add some kind of indication on the button that there is a problem that needs attention on the other screen.

Is there a way that I can add a top triangle red notice to the user? In my case an example would be to show the red triangle if automation.master_bedroom_blinds is off. If that automation is on then the red triangle would not show.

IMG_0374

IMG_B3C49559D2F3-1 copy

Thank you!

I found that an inherited state: object cannot be overridden anymore.

Here is an example of a complete code of the new dashboard. Change entity and operator/value to fit your needs

button_card_templates:
  tpl_test:
    state:
      - operator: '=='
        value: 'off'
        styles:
          name:
            - color: pink
views:
  - title: Home
    cards:
      - type: custom:button-card
        template: tpl_test
        entity: light.pc_room
        state:
          - operator: '=='
            value: 'off'
            styles:
              icon:
                - color: green

The template sets the color of the name with the use of the state: object. Then the template is used by the card.
It causes that

  • the color of name is set to pink color (which is expected)
  • the color of the icon remains default (which is not expected, since we expect to set it by the state: defined in the card)

Of course, removing the template from the card immediately makes the icon change color to green.
Worth to mention (while it seems to be clear), that you cannot override the name color in the card too.

The described behavior applies also when overriding is expected between templates.

Is it known behavior? I’m not aware that this limitation is mentioned in docs. AFAIK most attributes/objects can be overridden

we are supposed to merge by ID: GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant to override these state styling settings

Is it possible to embed a map card or a picture entity card in a button card? I have tried using a grid but every time I add a map or picture as a custom field it locks up my HA dashboard and I need to close and reopen.

Ok, so I know this can be done using a value template, but from what I can tell it can also be accomplished with the state_label in the button card integration. However, I can’t figure out why it isn’t working for me!

I simply want to remove the decimal points from my humidity sensor (note this is just a work in progress, not the final button). Can anyone tell me what I’m doing wrong?

humid

          - type: custom:button-card
            show_name: false
            grid:
              - position: relative
            styles:
              custom_fields:
                humidity:
                  - filter: opacity(100%)
                  - overflow: unset
                  - border-radius: 50%
                  - position: absolute
                  - left: 55px
                  - top: 35px
                  - height: 200px
                  - width: 200px
                  - font-size: 10px
            style: |
              ha-card {
                height: 185px;
                width: 200px
                box-shadow: none;
              }
           custom_fields:
              humidity:
                card:
                  type: glance
                  entities:
                    - entity: sensor.temp_sensor_garage_humidity
                      name: Humidity
                      icon: mdi:water
                      state_display: [[[ return entity.state.toFixed(1) ]]]

I got rid of the decimal and the figures behind like this:

  target_temp: |
    [[[
      var statestr = states['input_number.cooling_temperature'].state;
      var intvalue = parseFloat(parseFloat(statestr).toFixed(0));
      return (isNaN(intvalue)) ? 'NA' : 'Target: ' + intvalue + '°';
    ]]]

Pretty sure it doesn’t work because you’re using a glance card as a custom field. So basically this has nothing to do with button-card on it’s own, since the card you’re using as custom field, doesn’t support that variable (state_display).

Use a custom:button-card as custom_field card instead.

@RomRider is it possible to style the parent element of the card?

I would like to style the highlighted section but I don’t know how.
There should be new entry -webkit-transform: translateZ(0);

I want to do that because I use vanilla-tilt.js and it causes some rendering issues with safari browser.
I would appreciate if anyone has some tips for me.

Is it possible to set how long an animation will run for? I have several buttons that just call scripts or automations, so the state of entity is always “on”. For example, the green button calls a “vacuum specific room” script.

I’d like to be able to click those and have a twisting animation run for 60 seconds or something like that.

chrome_KVS6kYR2T2

Here’s my working code for an entity that changes state. Just not sure how to do it when clicked and the state doesn’t change.

      - type: custom:button-card
        entity: input_boolean.map_mode_enabled
        state:
          - value: 'off'
            color: rgb(179, 179, 45)
            icon: mdi:map
          - value: 'on'
            color: rgb(250, 250, 62)
            icon: mdi:map-check
            styles:
              icon:
                - animation:
                    - twister .9s linear infinite
        extra_styles: |
          @keyframes twister {
                    0% {transform: rotatez(0deg): top: 10px}
                    25% {transform: rotatez(15deg)}
                    50% { top: 0px}
                    75% {transform: rotatez(-15deg)}
                    100% {transform: roatatez(0deg): top: 10px}
            }
        tap_action:
          action: toggle
        show_name: false

I believe in your animation property you can use 60s instead of infinite.

Thanks, that does work for the specified amount of time when a state changes, but when I click the “call script” button, it doesn’t do anything. Probably because the script is always on. I wonder if there’s a way to trigger the animation from the “zoned cleaning” property of my robot.