(RESOLVED) - Struggling with 'button-card'

Configuration Frontend
1

Hi all,

I’m using a theme with more or less transparent cards.

I want to achieve follwing (if possible):

  • Name of card above icon (so I can have a state below)
  • 100% transparent card (see below code what I’ve tried, doesn’t work)
  • Only icon should blink, not the text (label/name/state), is this possible?

Here is the current code and below is the current button:

  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: sensor.cisco_rv320_online
            layout: icon-label
            label: Cisco
            show_label: true
            styles:
              card:
                - --paper-card-background-color: rgba(0, 0, 0, 0.0)
              grid:
              - grid-template-areas: '"l" "i" "n" "s"'
              - grid-template-rows: min-content 1fr min-content min-content
              - grid-template-columns: 1fr
            #size: 15%
            confirmation: true
            state:
              - value: 'Online'
                name: Cisco RV320
                icon: mdi:folder-key-network
                color: green
                style:
                  - font-size: 12px
              - value: 'Offline'
                name: Cisco RV320
                color: red
                style:
                  - font-size: 12px
                  - animation: blink 2s ease infinite
                icon: mdi:folder-key-network

Capture

2

I don’t think this is possible. Icon is always at the top in every layout.

        styles:
          card:
            - --paper-card-background-color: rgba(0, 0, 0, 0.0)
            - box-shadow: 'none'

If you have this card in another card, then you need to match the color/transparency of the card you are in. 100% transparent inside a card will make the button look like a cutout. If you don’t have it in another card, what I posted should work.

              - value: 'Offline'
                name: Cisco RV320
                color: red
                styles:
                  name:
                    - font-size: 12px
                  icon:
                    - animation: blink 2s ease infinite
                icon: mdi:folder-key-network
3

@petro I’ve tested what you wrote, I created a brand new button directly under ‘views’ to test - now the icon is static, nothing blinks. I can’t change the transparency neither - could this be overwritten by the theme used?

Code and image (you can see the edges of the card, I want it all removed):

  - type: vertical-stack
    cards:
    - type: custom:button-card
      entity: lock.ytterdor
      styles:
        card:
          - --paper-card-background-color: rgba(0, 0, 0, 0.0)
          - box-shadow: 'none'
      state:
        - value: 'locked'
          name: Ytterdør Låst
          icon: mdi:shield-check
          color: green
          style:
            - font-size: 12px
        - value: 'unlocked'
          name: Ytterdør Åpen
          color: red
          styles:
            icon:
              - animation: blink 2s ease infinite
          style:
            - font-size: 12px
          icon: mdi:shield

PNG

4

this should override the theme. Stop using style and place everything into styles. I’m guessing that’s overriding you.

5

I believe you can adjust the layout to put text over the icon. @TheStigh, check the first example here:

6

@petro Did as you told me to (see code below), still a sold red icon, no blinking.
Tried to change from my theme to ‘default’ of HA, still no change.
I even removed ‘vertical-stack’ so now the card is at root level.

I also updated the button-card.js today, so it is the latest version…

I’m getting so frustrated, especially if you get it to work.

  - type: custom:button-card
    entity: lock.ytterdor
    show_last_changed: true
    styles:
      card:
        - --paper-card-background-color: rgba(0, 0, 0, 0.0)
        - box-shadow: 'none'
    state:
      - value: 'locked'
        name: Ytterdør Låst
        icon: mdi:shield-check
        color: green
      - value: 'unlocked'
        name: Ytterdør Åpen
        color: red
        styles:
          icon:
            - animation: blink 2s ease infinite
        icon: mdi:shield
7

Yes but you can’t re-arrange the grid, icon is always on top, right-top, or left-top. You’d have to choose the on top one, place the text alignment to align-self: end, then add padding until it was ‘above’ the icon. Then in the icon you’d have to make sure that it was align-self end for the img_cell. It probably wouldn’t look right on every system either.

8

I just used this on my system and it works perfectly. When off it blinks red, when on it has a large green shield with a check.

      - type: custom:button-card
        entity: group.office
        show_last_changed: true
        styles:
          card:
            - --paper-card-background-color: rgba(0, 0, 0, 0.0)
            - box-shadow: 'none'
        state:
          - value: 'on'
            name: Ytterdør Låst
            icon: mdi:shield-check
            color: green
          - value: 'off'
            name: Ytterdør Åpen
            color: red
            styles:
              icon:
                - animation: blink 2s ease infinite
            icon: mdi:shield

Granted I changed the entity id and the states. So…

  1. Take a look at the state of your lock device and make sure it actually gets set to locked or unlocked. Check this on the states page.
  2. Are you refreshing your cache when you reload the page? CTRL+F5 will do that.
  3. Are you using Microsoft Edge? If so, do not. Switch to firefox or chrome.
9

@petro I copied and pasted your code, still the icon is steady and not flashing. It changes from GREN to RED and back, but not flashing if turns red. So the entity and state is correct.

I will paste the theme here, if you would be so kind to test with this - I can’t figure out any other reason why it wouldn’t work.

PS; I also tried to add a ‘click’ action (call.service: homeassistant.toggle and the entity_id:), didn’t work neither… wtf?!?

###################################### Midnight Theme ######################################
midnight:

Main colors

primary-color: ‘#5294E2’ # Header
accent-color: ‘#2F7EFD’ # Accent color
dark-primary-color: ‘var(–accent-color)’ # Hyperlinks
light-primary-color: ‘var(–accent-color)’ # Horizontal line in about
ha-card-border-radius: ‘13px’
ha-card-background: ‘rgba(150, 150, 150, 0.1)’

Text colors

primary-text-color: ‘#FFFFFF’ # Primary text colour, here is referencing dark-primary-color
text-primary-color: ‘var(–primary-text-color)’ # Primary text colour
secondary-text-color: ‘#5294E2’ # For secondary titles in more info boxes etc.
disabled-text-color: ‘#7F848E’ # Disabled text colour
label-badge-border-color: ‘green’ # Label badge border, just a reference value

Background colors

primary-background-color: ‘#383C45’ # Settings background
secondary-background-color: ‘#383C45’ # Main card UI background
divider-color: ‘var(–accent-color)’ # Divider

Table rows

table-row-background-color: ‘#353840’ # Table row
table-row-alternative-background-color: ‘#3E424B’ # Table row alternative

Nav Menu

paper-listbox-color: ‘var(–primary-color)’ # Navigation menu selection hoover
paper-listbox-background-color: ‘#2E333A’ # Navigation menu background
paper-grey-50: ‘var(–primary-text-color)’
paper-grey-200: ‘#414A59’ # Navigation menu selection

Paper card

paper-card-header-color: ‘var(–accent-color)’ # Card header text colour
paper-card-background-color: ‘rgba(150, 150, 150, 0.1)’ # Card background colour
paper-dialog-background-color: ‘#434954’ # Card dialog background colour
paper-item-icon-color: ‘var(–primary-text-color)’ # Icon color
paper-item-icon-active-color: ‘#FBCD41’ # Icon color active
paper-item-icon_-color: ‘green’
paper-item-selected-_background-color: ‘#434954’ # Popup item select
paper-tabs-selection-bar-color: ‘green’

Labels

label-badge-red: ‘var(–accent-color)’ # References the brand colour label badge border
label-badge-text-color: ‘var(–primary-text-color)’ # Now same as label badge border but that’s a matter of taste
label-badge-background-color: ‘#2E333A’ # Same, but can also be set to transparent here
label-badge-background: ‘rgba(255, 255, 255, 0.1)’

Switches

paper-toggle-button-checked-button-color: ‘var(–accent-color)’
paper-toggle-button-checked-bar-color: ‘var(–accent-color)’
paper-toggle-button-checked-ink-color: ‘var(–accent-color)’
paper-toggle-button-unchecked-button-color: ‘var(–disabled-text-color)’
paper-toggle-button-unchecked-bar-color: ‘var(–disabled-text-color)’
paper-toggle-button-unchecked-ink-color: ‘var(–disabled-text-color)’

Sliders

paper-slider-knob-color: ‘var(–accent-color)’
paper-slider-knob-start-color: ‘var(–accent-color)’
paper-slider-pin-color: ‘var(–accent-color)’
paper-slider-active-color: ‘var(–accent-color)’
paper-slider-container-color: ‘linear-gradient(var(–primary-background-color), var(–secondary-background-color)) no-repeat’
paper-slider-secondary-color: ‘var(–secondary-background-color)’
paper-slider-disabled-active-color: ‘var(–disabled-text-color)’
paper-slider-disabled-secondary-color: ‘var(–disabled-text-color)’

States and Badges

state-icon-color: “#2F7EFD”
state-icon-active-color: “#FBCD41”
state-icon-unavailable-color: var(–disabled-text-color)

Google colors

google-red-500: ‘#E45E65’
google-green-500: ‘#39E949’

10

what browser are you using?

11

I’ve been using latest FF on W10 - I now tested with Chrome - then it works (!).
I’m so embarrassed for not testing Chrome - sorry man…

Though - I cant get tap_action to work… Do I need to activate it somewhere in configuration.yaml or should it work straight out of the box ? Neither in FF or Chrome… (had to test it again now)

12

what’s your tap action code look like?

EDIT: I’m using chrome and it’s working. So aparently firefox doesn’t work. Who knew. :man_shrugging:

13

I re-created the tap_action code, and replaced the ‘lock.ytterdor’ with a switch I created in config - now it works … in CHROME of course :smiley:

Good damn FF - normally FF doesn’t give issues - but now… well…

Also; putting label above icon and status below now works as expected.

But have a look at the second card (Cisco RV320) which is placed inside a ‘vertical-stack-in-card’ even with the :

            styles:
              card:
                - --paper-card-background-color: rgba(0, 0, 0, 0.0)
                - box-shadow: 'none'

… you can see that the button card is not 100% transparent (you see the top of the card is different). Can this be fixed somehow ?

PNG
PNG860×821 113 KB

14

paste your full code for the cisco please, i’ll take a look here.

15 
  - type: custom:vertical-stack-in-card
    title: " "
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: sensor.cisco_rv320_online
            layout: icon-label
            label: Cisco RV320
            show_label: true
            styles:
              card:
                - --paper-card-background-color: rgba(0, 0, 0, 0.0)
                - box-shadow: 'none'
              grid:
              - grid-template-areas: '"l" "i" "n" "s"'
              - grid-template-rows: min-content 1fr min-content min-content
              - grid-template-columns: 1fr
            size: 15%
            confirmation: true
            state:
              - value: 'Online'
                name: Online
                icon: mdi:folder-key-network
                color: green
              - value: 'Offline'
                name: Offline
                color: red
                styles:
                  icon:
                    - animation: blink 2s ease infinite
                icon: mdi:folder-key-network
16

looks good on my end. Only thing I can say is the horizontal stack isn’t doing anything. The vertical stack is creating a card. You could just remove both of those and do your styling with a single button card.

Also, is that your true config? I’m not seeing rounded corners like yours. Are you using another custom card somewhere?

17

Yes, this is my real code - to get the rounded corners I’ve set it in the themes.yaml.
The image from above contain the lock which is the last code without vertical/horizontal stacks, but I want to put all the button-cards inside a single card so it all looks like them all are in a single card, like these with two entities in each card (using modder):

Capture
Capture828×474 146 KB

18

so if you remove the title: " " line it will remove the discoloration but the card transparency seems to be overridden by your theme. Which is odd because it does not do that with my theme.

Also, can you roughly layout what you want to do and how many buttons?

19

I have 12 different sensors I monitor on my LAN which I want in a single card without showing each sensor as an independent card (doesn’t look good at all). Using vertical-stack and horizontal-stack to get 3 x 4 rows of sensors :slight_smile:

20

Try this:

styles:
  card:
    - —paper-card-background-color: 'rgba(0,0,0,0.0)'
    - box-shadow: 'rgba(0,0,0,0.0)'

This works for me to get full transparency, just make sure you don’t have hidden styles somewhere that could overwrite it.

image
image1125×513 213 KB

As you can see in the screenshot the text above the buttons have no border, it is actually a markdown card but then fully transparent.