Lovelace: Button card

anon33484932 · September 16, 2022, 10:41am

Hello everyone, is it possible to vertically center the cards?

immagine

type: vertical-stack
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 10% 10% 60% 10% 10%
      grid-template-rows: auto
    cards:
      - type: custom:button-card
        entity: light.contessa
        icon: mdi:air-conditioner
        show_name: false
        aspect_ratio: 1/1
        state:
          - value: 'off'
            styles:
              card:
                - box-shadow: none
                - background: none
      - type: custom:button-card
        entity: light.contessa
        icon: mdi:air-conditioner
        show_name: false
        aspect_ratio: 1/1
        state:
          - value: 'off'
            styles:
              icon:
                - color: yellow
              card:
                - background: none
                - box-shadow: 0px 0px 10px 1px var(--button-card-light-color)
                - box-radius: 120px
      - type: markdown
        content: <ha-alert alert-type="error">Sta suonando l'allarme!</ha-alert>
      - type: custom:button-card
        entity: light.contessa
        icon: mdi:air-conditioner
        show_name: false
        aspect_ratio: 1/1
        state:
          - value: 'off'
            styles:
              card:
                - box-shadow: none
                - background: none
      - type: custom:button-card
        entity: light.contessa
        icon: mdi:air-conditioner
        show_name: false
        aspect_ratio: 1/1
        state:
          - value: 'off'
            styles:
              card:
                - box-shadow: none
                - background: none

tomerbs · September 17, 2022, 8:51am

Hi all,
After HA update I have noticed the border added to my popup cards, can you please take a look at my code and advise how I can remove it:

The Code:

       action: fire-dom-event
       browser_mod:
         service: browser_mod.popup
         large: true
         hide_header: true
         data:
           content:
             type: "custom:button-card"
             styles:
               grid:
                 - grid-template-areas: "'header' 'content2' 'buttons' 'footer'"
                 - grid-template-rows: "16vh 52vh 14vh 14vh;"
                 - grid-template-columns: "1fr"
               card:
                 - background: "none"
                 - box-shadow: "none"
                 - padding: "4%"
               custom_fields:
                 content1:
                   - display: "none"
                 content2:
                   - display: "block"
                   - align-self: "center"
                 content3:
                   - display: "none"
             extra_styles: |
               @media (max-width: 800px) {
                 #container {
                   grid-template-areas: "header" "content1" "buttons" "footer" !important;
                   grid-template-rows: 16vh 8vh 62vh 8vh !important;
                   grid-template-columns: 1fr !important;
                 }
                 #buttons {
                   display: block !important;
                   align-self: start !important;
                 }
                 #content1 {
                   display: none;
                 }
                 #content3 {
                   display: none;
                 }
             custom_fields:
               header:
                 card:
                   type: "custom:button-card"
                   template: "popup_list_3_items"
                   styles:
                     card:
                       - background: "none"
                   custom_fields:
                     item2:
                       card:
                         type: 'custom:decluttering-card'
                         template: popup-icon
                         variables:    
                           - template: "[[template]]"
                           - entity-1: "[[entity-1]]"
                           - name-1: "[[name-1]]"
                           - state-1: 'on'
                           - state-2: 'off'
               buttons:
                 card:
                   type: "custom:button-card"
                   template: "list_3_items"
                   styles:
                     card:
                       - background: "none"
                   custom_fields:
                     item2:
                       card:
                         type: custom:light-popup-card
                         entity: "[[entity-1]]"
                         fullscreen: false
                         hideIcon: true
                         hideState: true
                         borderRadius: "var(--popup-border-radius)"
                         brightnessHeight: 400px
                         brightnessWidth: 150px
                         switchHeight: 400px
                         switchWidth: 150px
                         switchColor: "rgba(var(--homekit-card-on), 0.9)"
                         switchTrackColor: "rgba(var(--homekit-popup-card-off), 0.6)"
               
  
               footer:
                 card:
                   type: "custom:button-card"  
                   template: "popup_list_2_items"
                   custom_fields:
                     item1:
                       card:
                         type: "custom:button-card"
                         template: "popup_button_back"
                     item2:
                       card:
                         type: "custom:button-card"
                         template: "popup_button_power"
                         entity: "[[entity-1]]"

Thanks

not_a_coder · September 20, 2022, 11:13am

Is there a way to get the button card to only show the name and the state and have them equal size fonts and evenly spaced taking filling as much as the card as possible? I have tried a lot of combinations and nothing works. For example I want a card that has the name Temp and the state of the temp sensor

maxym · September 28, 2022, 9:09am

Considering I fill the button card with HTML containing links (A HTML elements). How should I setup the card to make those links active?
When pointer-events are set to auto, card intercepts clicks making the link is ignored. Is there any other CSS I should be aware of?

wouter · October 6, 2022, 8:40am

I’m using a managed dashboard. Is there a way to move the templates to an external file and include that so i can share templates across dashboards and different home assistant installations?

Proxlx · October 6, 2022, 12:35pm

Icon Spin On Axis

Hi all! I have searched hi and low for this so apologies if it has been answered.

Is it possible to spin an icon on its own axis. Like a coin spinning? It doesn’t need to have anything clever like front & back being different just like spinning a fan icon but left to right rather than around.

Many thanks!

CDRX2 · October 6, 2022, 3:47pm

Unfortunately, that only works in yaml mode.

wouter · October 10, 2022, 2:12pm

Thanks! I’ll switch to yaml mode.

One more question. If i change the template file it keep using the cached version.
(it refreshes when i change the template name, reload the page, and change it back)
same goes for other yaml files included in my dashboard.

is there an easy way to refresh?

ktownsend-personal · October 10, 2022, 5:28pm

On the dashboard at top right is the 3-dot menu. Use refresh item in that menu.

wouter · October 10, 2022, 5:46pm

ok, thats quite embarrassing I didn’t see that.

thank you!!

KaherdinTristan · October 15, 2022, 5:39am

Help wanted
Could someone please help me construct a card that mimics this example.
I’m having trouble understanding all the different ins and outs of the custom button card, and yes, I’ve tried reading up on it

Pirol62 · October 15, 2022, 7:34am

First, you should explain, what the different values represent. There seem to be a power usage, a light switch but what does ‘Timed’ mean? The percent value, is this outdoor humidity and the current weather condition?
Do you have sensors for all these different states?

KaherdinTristan · October 15, 2022, 11:12am

I’ve tried researching this my self, and I’ve also tried copying others work and adapting it, but the time I have left when the family is all taken care of here at home is just too scares, all before just bluntly asking for this;

I was wondering if someone could help me to create a custom button card (template to re-use)that has placeholders/makes it possible to choose different entities, states, icons, values or text in a way, roughly described as the example images below shows?

And if there is some element to this that cant be done without expert knowledge in coding, I would settle to the next best solution

Icon/image
?
entity_1 (name/state/last changed/last updated/none)
entity_1 (name/state/last changed/last updated/none)
entity_1 (name/state/last changed/last updated/none)
icon based on a value from entitiy_1 (such as "If on; icon_1, green; Else icon_1, grey)

button_012

Image 2.
@Pirol62
Best regards

KaherdinTristan · October 15, 2022, 3:03pm

While we are at it;
Why is the preview showing “correct” design with no borders around the temp and humidity

But when I switch back to “normal” view, it shows the borders;

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    secondary: Markplan
    icon: mdi:sofa
    tap_action:
      action: navigate
      navigation_path: soggiorno
    icon_color: blue
    multiline_secondary: true
    primary: Vardagsrummet
    card_mod: null
    style: |
      ha-card {
        box-shadow: 0px 0px;
      }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.lumi_lumi_sens_temperature
        icon_color: blue
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
      - type: entity
        entity: sensor.lumi_lumi_sens_humidity
        icon_color: blue
        card_mod: null
        style: |
          ha-card {
            box-shadow: 0px 0px;
          }
alignment: center

Leandrial · October 15, 2022, 7:16pm

Hi

Can someone tell me why i get this black “background” of my icon… And how to manipulate it (basicly to tranparent, so i wont c it… i want the icon on the card background, which is the white, that can be seen behind…)

the colors are just to show the different shapes…

I am trying to shape my custom field (button card) to be round with just the icon in it… kinda like some of the Lovelace icons… I have tried now with both a custom button card and a button card… and both show this black square that i cant seem to be able to manipulate…

my code is as follows…

type: custom:button-card
show_icon: false
show_state: false
show_name: false
show_label: false
name: Test1
view_layout:
  grid-column: 3
  grid-row: 4
grid:
  - position: absolute
styles:
  card:
    - width: 200px
    - height: 200px
    - padding-left: 0%
    - padding-right: 0%
    - border-radius: 20px
    - background-color: blue
  grid:
    - grid-template-areas: >-
        "n n n n n 6 7 8 9 10" "ls1 ls1 ls1 ls1 ls1 6 7 8 9 10" "ls1 ls1 ls1 ls1
        ls1 6 7 8 9 10" "1 2 3 4 5 6 7 8 9 10" "1 2 3 4 5 6 7 8 9 10" "1 2 3 4 5
        6 7 8 9 10" "1 2 3 4 5 6 7 8 9 10" "1 2 3 4 5 6 7 8 9 10" "1 2 3 4 5 6 7
        8 9 10" "1 2 3 4 5 6 7 8 9 10"
    - grid-template-columns: repeat(10, 1fr)
    - grid-template-rows: repeat(10, 1fr)
  name:
    - align-self: start
    - justify-self: start
    - padding-left: 10%
    - padding-top: 5%
    - font-size: 18px
  custom_fields:
    ls1:
      - align-self: end
      - justify-self: start
      - padding-left: 10%
      - padding-top: 5%
      - border-radius: 0%
      - background-color: white
custom_fields:
  ls1:
    card:
      type: button
      entity: light.standerlampe
      icon: mdi:lightbulb-variant
      show_name: false

ASNNetworks · October 15, 2022, 10:18pm

Because your custom_field is just a core button-card (not to be confused with custom:button-card, which is what this thread is about.

The core button-card is very limited and uses your theme for its colors, like the background: Button card - Home Assistant

So either change your theme colors, or use a custom:button-card instead of button-card in your custom_field. Then you can easily set the background to none, like you did with your main card to blue.

Leandrial · October 15, 2022, 10:36pm

Thank you for your reply.

Only, i already did that… first I tried with a custom:button card and the the regular button card… same result… the “background” of the custom field is the white field you c there… that I can manipulate… it is the black background I can’t manipulate… it seems to be dependent on the icon… if I do show_icon: false, the black background turn into a black line… but it doesn’t go away fully even then… ??

ASNNetworks · October 15, 2022, 10:39pm

Use custom-button-card in the custom_field I mentioned and post your code. Then I can show you what styling you need and what I meant.

Leandrial · October 15, 2022, 11:02pm

type: custom:button-card
show_icon: false
show_state: false
show_name: false
show_label: false
name: Test1
view_layout:
  grid-column: 3
  grid-row: 4
grid:
  - position: absolute
styles:
  card:
    - width: 200px
    - height: 200px
    - padding-left: 0%
    - padding-right: 0%
    - border-radius: 20px
    - background-color: blue
  grid:
    - grid-template-areas: >-
        "1 2 3 4 5 6 7 8 9 10" "ls1 ls1 ls1 ls1 ls1 6 7 8 9 10" "ls1 ls1 ls1 ls1
        ls1 6 7 8 9 10" "1 2 3 4 5 6 7 8 9 10" "1 2 3 4 5 6 7 8 9 10" "1 2 3 4 5
        6 7 8 9 10" "1 2 3 4 5 6 7 8 9 10" "1 2 3 4 5 6 7 8 9 10" "1 2 3 4 5 6 7
        8 9 10" "1 2 3 4 5 6 7 8 9 10"
    - grid-template-columns: repeat(10, 1fr)
    - grid-template-rows: repeat(10, 1fr)
  custom_fields:
    ls1:
      - align-self: end
      - justify-self: start
      - padding-left: 20%
      - padding-top: 20%
      - border-radius: 50%
      - background-color: white
custom_fields:
  ls1:
    card:
      type: custom:button-card
      entity: light.standerlampe
      icon: mdi:lightbulb-variant
      show_name: false

custom card

Here my code with the custom:button-card instead…

I ermoved the styling for “name”, since i am not using that… that makes the custom field placement move… But i still dont get where the black “background” originate from… The background of the custom:button-card (custom field) is the white area, as i have defined it for custom field styling…

ASNNetworks · October 15, 2022, 11:06pm

Try this:

custom_fields:
  ls1:
    card:
      type: custom:button-card
      entity: light.standerlampe
      icon: mdi:lightbulb-variant
      show_name: false
      styles:
        card:
          - background: none
        img_cell:
          - background: none

Alternatively, you can remove background: white from the styling of your custom_field through the main card and use it in the code I posted instead of background: none.