Styling elements in Picture elements card: a small tutorial

Share your Projects! Dashboards & Frontend
207

Please help!
How can I place and align text “content-text” in the middle between the images?

button-text

type: custom:button-card
entity: sensor.tennis_atp_alexander_zverev_card
name: false
show_name: false
show_state: false
show_icon: false
styles:
  card:
    - border-radius: 0.5rem
    - overflow: hidden
    - position: relative
    - padding: 0
    - display: flex
    - flex-direction: column
    - justify-content: center
    - align-items: center
  custom_fields:
    background-images:
      - position: absolute
      - inset: 0
      - display: flex
      - justify-content: space-between
      - align-items: center
      - opacity: 0.3
    foreground-images:
      - position: absolute
      - inset: 0
      - display: flex
      - justify-content: space-between
      - align-items: center
      - z-index: 1
    content-text:
      - position: relative
      - z-index: 2
      - color: white
      - font-size: 1rem
      - font-weight: bold
      - text-align: center
      - padding: 5px
      - display: flex
      - justify-content: center
      - align-items: center
      - width: 100%
      - height: 100%
      - box-sizing: border-box
custom_fields:
  background-images: |
    [[[
      return `
        <img src="/local/sportpng/flagen/ger.png" alt="Left Background" style="height: 10rem; width: 10rem;">
        <img src="${states['sensor.tennis_atp_alexander_zverev'].attributes.opponent_logo}" alt="Right Background" style="height: 10rem; width: 10rem;">
      `;
    ]]]
  foreground-images: |
    [[[
      return `
        <img src="/local/sportpng/zverev.png" alt="Left Foreground" style="height: 7.5rem; width: 10rem;">
        <img src="https://a.espncdn.com/combiner/i?img=/i/headshots/tennis/players/full/${states['sensor.tennis_atp_alexander_zverev'].attributes.opponent_id}.png" alt="Right Foreground" style="height: 7.5rem; width: 10rem;">
      `;
    ]]]
  content-text: |
    [[[
      return 'Text <br/> Text <br/>';
    ]]]
208

This is not related to Picture-elements. Ask in the main button-card thread (find it).

209

Not supported, you can only use vars for css properties.

211

UPDATE: ok, I should have read this thread more carefully. Looks like card-mod is what I need to use. Will have a play around with that!

ORIGINAL POST:

No mention of the ‘state_filter’ options in this thread. I’m assuming it only support “on” / “off” states (as per the documentation here), and that I’ll need to do something different if I want the appearance of an element to vary based on a sensor reading rather an a binary on/off.
e.g.:

image
image740×603 62.7 KB

Current code for the bit I’m working on:

  - type: state-label
    tap_action: toggle
    entity: sensor.myenergi_home_power_export
    style:
      font-size: 75%
      text-align: right
      top: 46%
      left: 97%
    state_filter:
      "0": opacity(0%)   ## Does not work, not supported

I have a separate binary sensor called binary_sensor.exporting which can tell me if I’m exporting i.e. if the value circled in red above should be shown or not.

What would the syntax be for using the state of this binary sensor to determine the visibility of the separate sensor (sensor.myenergi_home_power_export). So that if I’m not exporting, no value is shown?

212

Hi everyone!
Is there a way to change the size of the clickable area?
Screenshot 2024-09-06 alle 05.57.02
it’s too big and overlaps with the others

Thank you!
Diego

213

@diegoves

use these parameters to manage in your code:

style:
      left: 53%
      top: 30%
      opacity: 0%
      scale: 1

They are self explanatory!