However, I only see the picture centered | Home Assistant | Page 1

finite sphinx Dec 15, 2023, 12:16 AM

#

So, the custom_fields should be two sections. A main section within the card that defines the cards/info to show and then another section within styles that actually styles the custom_fields. This is the beginning part of the toggle button example: yaml type: custom:button-card entity: light.living_room_lights styles: card: - width: 250px - height: 200px custom_fields: entities_card: - position: absolute - left: 0% - top: 0% - transform: rotate(270deg) - opacity: 75% custom_button_card: - position: absolute - right: 2% - top: 5% - transform: rotate(270deg) - opacity: 75% custom_fields: entities_card: card: type: entities entities: - entity: input_boolean.tester card_mod:EDIT: Full example code: http://pastie.org/p/799OWosw8tpcHmg4RCeb9g (Good for 24 hours.)

#

This example is a bit more complex but you can see how the two custom_fields sections work. http://pastie.org/p/4zKfWEy4SELjvHd6vkm6wA (Link good for 24 hours.)

lilac wedge Dec 15, 2023, 12:49 AM

#

Here is what I have now

#

entity: update.u6_mesh
show_icon: false
show_name: false
styles:
  card:
    - width: 450px
    - height: 200px
  custom_fields:
    entities_card:
      - position: absolute
      - left: 0%
      - top: 70%
    custom_button_card:
      - position: absolute
      - right: 20%
      - top: 7%
      - opacity: 100%
custom_fields:
  custom_button_card:
    card:
      type: custom:button-card
      entity: update.u6_mesh
      show_entity_picture: true
      entity_picture: /local/UnifiU6Mesh.png
      show_name: false
      show_icon: false
      styles:
        card:
          - border-radius: 10px
          - padding: 10px
          - flex-direction: column
          - position: left
          - right: 25%
          - top: 0%
  tap_action:
    action: more-info

#

So I was able to left align the picture but now I have a weird [object][object] text on the lower right side. How would I add a normal button card for my restart entity where the text is?

#

Also can I curve the corners of my image?

finite sphinx Dec 15, 2023, 12:52 AM

#

It looks like you defined a entities_card: in the styles > custom_fields but don't actually have an entities_card: in the custom_fields section.

lilac wedge Dec 15, 2023, 12:54 AM

#

I am trying to make that card a home assistant button card instead and not sure how

finite sphinx Dec 15, 2023, 12:57 AM

#

Post a screenshot and lemme see what you have so far.

lilac wedge Dec 15, 2023, 12:58 AM

#

finite sphinx Dec 15, 2023, 1:05 AM

#

For right now, delete yaml entities_card: - position: absolute - left: 0% - top: 70%

lilac wedge Dec 15, 2023, 1:08 AM

#

Ok that part is removed, How is it that my picture click space id so much larger than the pic

finite sphinx Dec 15, 2023, 1:17 AM

#

I don't understand why that Object is still showing up.

#

Ah. I'm dumb. The tap_action at the bottom is not spaced properly. Highlight the last two lines and either tab twice to add it to the custom:button-card at the bottom. Or shift+Tab once to put it in the entire custom:button-card. (Or just get rid of it for now.)

#

It is technically a new custom_field called tap_action with its current spacing.

lilac wedge Dec 15, 2023, 1:24 AM

#

Ok tabbed it over, Now I don't see my image at all

#

finite sphinx Dec 15, 2023, 1:28 AM

#

And everything else is the exact same as the code that you posted above? Because everything is working for me (for the most part.)

lilac wedge Dec 15, 2023, 1:29 AM

#

Wait its back, found a typo

#

Ok, so now how would I add my restart button to the lower left?

finite sphinx Dec 15, 2023, 1:52 AM

#

I would say the easiest way is to add a stock button card. yaml restart_button: card: type: button name: Restart show_state: false tap_action: action: call-service service: button.press service_data: entity_id: button.u6_mesh_restartAnd then it needs a style section.

lilac wedge Dec 15, 2023, 1:59 AM

#

Like this?

#

entity: update.u6_mesh
show_icon: false
show_name: false
styles:
  card:
    - width: 450px
    - height: 200px
  custom_fields:
    custom_button_card:
      - position: absolute
      - right: 20%
      - top: 7%
      - opacity: 100%
custom_fields:
  custom_button_card:
    card:
      type: custom:button-card
      entity: update.u6_mesh
      show_entity_picture: true
      entity_picture: /local/UnifiU6Mesh.png
      show_name: false
      show_icon: false
      styles:
        card:
          - border-radius: 10px
          - padding: 10px
          - flex-direction: column
          - position: left
          - right: 25%
          - top: 0%
      tap_action:
        action: more-info
  restart_button:
    card:
      type: button
      name: Restart
      icon: mdi:restart
      show_name: false
      show_state: false
      tap_action:
        action: call-service
        service: button.press
        service_data:
          entity_id: button.u6_mesh_restart
      styles:
      custom_fields:
        custom_button_card:
          - position: absolute```

#

How do I edit the size?

#

And is it possible to curve the edges of the picture?

finite sphinx Dec 15, 2023, 2:01 AM

#

Needs a style in the style section: yaml styles: card: - width: 450px - height: 200px custom_fields: custom_button_card: - position: absolute - right: 20% - top: 7% - opacity: 100% restart_button: - stuff goes here.

lilac wedge Dec 15, 2023, 2:04 AM

#

So the style section precedes the actual card info?

finite sphinx Dec 15, 2023, 2:06 AM

#

There's two separate main sections: styles and custom_fields. An item has to be defined in both.

lilac wedge Dec 15, 2023, 2:10 AM

#

entity: update.u6_mesh
show_icon: false
show_name: false
styles:
  card:
    - width: 450px
    - height: 200px
  custom_fields:
    custom_button_card:
      - position: absolute
      - right: 20%
      - top: 7%
      - opacity: 100%
custom_fields:
  custom_button_card:
    card:
      type: custom:button-card
      entity: update.u6_mesh
      show_entity_picture: true
      entity_picture: /local/UnifiU6Mesh.png
      show_name: false
      show_icon: false
      styles:
        card:
          - border-radius: 10px
          - padding: 10px
          - flex-direction: column
          - position: left
          - right: 25%
          - top: 0%
      tap_action:
        action: more-info
  restart_button:
    card:
      type: button
      name: Restart
      icon: mdi:restart
      show_name: false
      show_state: false
      tap_action:
        action: call-service
        service: button.press
        service_data:
          entity_id: button.u6_mesh_restart
      styles:
      custom_fields:
        custom_button_card:
          - position: absolute
          - border-radius: 5px
          - padding: 5px

finite sphinx Dec 15, 2023, 2:12 AM

#

type: custom:button-card
entity: update.u6_mesh
show_icon: false
show_name: false
styles:  <------ Styles - Main Section
  card:
    - width: 450px
    - height: 200px
  custom_fields:```[...]```yaml
     - top: 7%
      - opacity: 100%
custom_fields:  <---- Custom_fields - Main section
  custom_button_card:
    card:
      type: c```

lilac wedge Dec 15, 2023, 2:13 AM

#

This is getting very tricky for me to understand, I think I'll come back to it with a fresh mind tomorrow, Thanks for you help today!

finite sphinx Dec 15, 2023, 2:18 AM

#

Hold on a second. Let's take a step back and make it a bit more simple.

#

type: custom:button-card
entity: update.hacs_update
show_icon: false
show_name: false
styles:
  card:
    - width: 450px
    - height: 200px
  custom_fields:
    picture_card:
      - position: relative
      - left: 0%
      - top: 0%
      - opacity: 100%
      - padding: 0px
      - margins: 0px
      - width: null
    restart_button:
      - position: absolute
      - left: 80%
      - top: 7%
      - opacity: 100%
custom_fields:
  picture_card:
    card:
      type: picture
      image: /local/front.jpg
  restart_button:
    card:
      type: button
      name: Restart
      show_state: false
      tap_action:
        action: call-service
        service: button.press
        service_data:
          entity_id: button.u6_mesh_restart```

lilac wedge Dec 15, 2023, 2:23 AM

#

Ok, then what is the variable name to put in the style to move it down, also I think I want the corners on the button to be less curved, also the slight border on the top (which I assume is because of the button)

finite sphinx Dec 15, 2023, 2:26 AM

#

left, right, top, and bottom.

lilac wedge Dec 15, 2023, 2:33 AM

#

So I insert the styles here? This doesn't seem right becaus eits doesn't look like its applying

#

type: custom:button-card
entity: update.hacs_update
show_icon: false
show_name: false
styles:
  card:
    - width: 450px
    - height: 200px
  custom_fields:
    custom_button_card:
      - position: relative
      - left: 0%
      - top: 0%
      - opacity: 100%
      - padding: 0px
      - margins: 0px
      - width: null
    restart_button:
      - position: absolute
      - left: 80%
      - top: 7%
      - opacity: 100%
custom_fields:
  custom_button_card:
    card:
      type: picture
      image: /local/UnifiU6Mesh.png
  styles:
    card:
      - bottom: 20%
    restart_button:
      card:
        type: button
        name: Restart
        icon: mdi:restart
        show_state: false
        show_name: false
        tap_action:
          action: call-service
          service: button.press
          service_data:
            entity_id: button.u6_mesh_restart

finite sphinx Dec 15, 2023, 2:34 AM

#

What is this?

lilac wedge Dec 15, 2023, 2:35 AM

#

Oh and the button has disappeared now

finite sphinx Dec 15, 2023, 2:35 AM

#

Definitely not what I showed you.#1185011327069081680 message

#

You just made a new custom_field called styles by putting that there.

lilac wedge Dec 15, 2023, 2:36 AM

#

So to style the restart card the style section goes under what

finite sphinx Dec 15, 2023, 2:37 AM

#

Styles. Litlerally, the styles section. Starting at Line 5 is the Styles sections.

lilac wedge Dec 15, 2023, 2:38 AM

#

I thought that was just for the image card? Is that my styling for the whole button card? If so then do i select the individual elements by specifying the field?

#However, I only see the picture centered