Need help with picture Elements card CSS style

[ChrisBarber (Christian Barbier)]

Hello,

I would be happy if anybody could help me with CSS. i have no knowledge about it and reading the docs doesn´t help me much.

Here is my setup:
I created with NodeRed and RssFeed an entity which tells me what is currently running on a TVchannel(want to do it with my popular TVchannels). I created an picture elemnts card, because i wanted also to have a button to press, so that the TV changes to that channel (the button will be the TVchannel logo image, but i didn’t implemented it yet). In the following you will see, what i mean.

No the problem:
When the name of the show is too long, it get cut like in the following example.

I understand that i set with left: and top: the center of the element, but i would like it so that it writes from right to left, if you know what i mean. And is it possible, that when the name is really too long for the whole card, that the text ends with an “…” or that it adds a second row but with logical seperation?

Thanks to anybody who can help me.
Cheers

[tom_l]

Try this

    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;

[ChrisBarber (Christian Barbier)]

Thanks, but it doesn’t seem to change anything. Did i do something wrong? I also treid it without the “;” at the end.

[tom_l]

You probably need card-mod (which was why I had ; at the end of each).

[ChrisBarber (Christian Barbier)]

I tried it, but it dowsn’t seem to work at all. I found this thread and it seems that card-mod doen’t work with elements within picture elements card:
https://community.home-assistant.io/t/state-based-styling-in-picture-elements/162226/6?u=chrisbarber

[tom_l]

You might have to consider a different approach then. Maybe the custom-button card. You can make that look like anything.

Lovelace: Button card

Button card Lovelace Button card for your entities. -> github [all] Features works with any toggleable entity 3 actions on tap toggle, more_info and service state display (optional) custom color for on and off state (optional) custom state definition with customizable color (optional) custom size (optional) custom icon (optional) custom css style (optional) automatic color for light (optional) custom default color for lights (when color cannot be determined) (optional) 2 color types icon :…

[ChrisBarber (Christian Barbier)]

Thanks for the hint, but it seems that the whole card will become a button. I will loook/wait for an other solution, but thank you

[tom_l]

If you put those button/cards in an entities card you will end up with the same as you have shown above.

This is one of mine:

All you have to do is only stack one per row and layout the button with your image and sensor text, which you have already done (the hard bit IMO).

Took a couple of seconds to change it to this:

Still needs some work to get the sensor state to show next to the image.

[ChrisBarber (Christian Barbier)]

oh wow, thanks. Could you paste me your config here? That would be really great

[tom_l]

This template goes at the top of your raw edit mode in lovelace:

button_card_templates:
  picture_button:
    aspect_ratio: 6/1
    hold_action:
      action: none
    layout: icon-state
    show_entity_picture: true
    show_icon: false
    show_label: false
    show_name: false
    show_state: true
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--ha-card-background': 'rgba(0, 0, 0, 0)'
      entity_picture:
        - width: 100%
        - height: 100%
        - object-fit: contain
    tap_action:
      action: call-service

This is the card config:

type: entities
title: TV Channels
show_header_toggle: false
entities:
  - entity: sensor.your_sensor_here
    entity_picture: /local/tv_logos/abc.png
    tap_action:
      service: script.lounge_tv_ch_abc
    template: picture_button
    type: 'custom:button-card'
  - entity: sensor.your_sensor_here
    entity_picture: /local/tv_logos/sbs.png
    tap_action:
      service: script.lounge_tv_ch_sbs
    template: picture_button
    type: 'custom:button-card'
  - entity: sensor.your_sensor_here
    entity_picture: /local/tv_logos/sbs-vice.png
    tap_action:
      service: script.lounge_tv_ch_sbs_vice
    template: picture_button
    type: 'custom:button-card'
  - entity: sensor.your_sensor_here
    entity_picture: /local/tv_logos/southern-cross-television.png
    tap_action:
      service: script.lounge_tv_ch_sthnx
    template: picture_button
    type: 'custom:button-card'

[cdk222]

Hi tom_I - do you have a public github repository with your setup available?

I see so many of your posts with great ideas and id love to see the code if possible

[tom_l]

No I don’t, sorry.

[Ildar_Gabdullin]

@ChrisBarber

I found this thread and it seems that card-mod doen’t work with elements within picture elements card:

Outdated info.
Ref this:

• card-mod styling
• stock picture-elements styling

Also, you may try using template-entity-row, it may be looking like this:

type: vertical-stack
cards:
  - type: markdown
    content: |
      image
    style: 'ha-card { color: red; }'
  - type: entities
    entities:
      - type: custom:template-entity-row
        name: ESPN
        image: >-
          data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHcAAAAdCAMAAACniAOEAAAAb1BMVEXlJTT////86OnjABLlIzLnQEvkGyzrbHTlKTjlJDPsdnzkAB/lHzDkEyfkCCHjABj0srXoTFb++frjAAn2x8nvjpP4z9HiAAD97/DtgIbnRU/vk5jqYmnwmZ7uhov63d71vcDpVl/ypqnmN0P51tgohUI5AAACsElEQVRIicVW3ZqqMAxsAMtfCwKKrCAq+v7PuCmHFFga3O/c7Fxppu2kbTJUAMA7Orjx6sDg1HdXZoQL12d/Gue1LxddhMcSQCB/zAI3dGJUVSoVM8ANJfMrLg2ddLNZWo+6Ny3c0DeARxUw7B7kFdd9KYYN/MboJpLhsyM0fvwfskLkeNSSnarPRvfJ5YXn0XJn8QH6DE3Osqowui/uJHMPCi6nD5AJ3HndOELdMuXotNw5q33oHh7suiI4oK538RlU0LDcB1wGuPFzq6fZr8dij/uAEpoddqznv8Af6t5CBt0JBieRtP+MsOm4qSE6rCXPJPagUHdH3UJLN/wakszJ6Fy9cZ3aZ2ZKHUFTTb+zL9Jt0ylUeagbce3re/DFWZmq7sbYuUaR3dy+eiBda4xpKaDUTIvGWQkDv/Jzx9iNs9v2zR6kS8YYSLxfj7OVIIIde47RVFhjD/IGBkoqf5MunawqULeedeMVZIFDjxcZrKJ2MJrobOyrIUpXWHc96foN6fpTBE1ULC4pS1fwzdcX3qEY/2UT7BZxS4oqQy7n6cPZKHU00idZj3R1i7r2knADvwClGetymf8WB7rMiCK1vfEj6tqSrcrf6FKawaIyMP8tbFLdz5TF+N6wRRb/RtbWEtbzMv8Nmop0bfvak8UGFSCmS4qjZI2wgT7ZgD7WuNyc/2mru9O+pkEFpFSi8U+7KsHhZMG83FwZ963ug5Ka27dY3LjYbd8Lwxmtem5f31EZ++0L4s3pImsLf4s4L+Fpz81RB7Z9c2rfkpRM+YsH54TI1vxLxZg9VYa6OnS7TVLL9gUxsI/ndsf39QEXshUbOnSvdJkviqzKX/Q7j2f3IzaQerSyVf4b0NfG3b4gwiByI8PCUY64OITD6Gx1NkW0q339iVQ9hVo5hVKc/g37NjInOxWZTQAAAABJRU5ErkJggg==
        card_mod:
          style: |
            state-badge {
              background-size: 100%;
              background-repeat: no-repeat;
              background-position-y: center;
              border-radius: 0%;
            }
            .info {
              text-align: right;
            }

Here the channel’s name is inside the name property - but you may use it inside a state too (show state & hide name in the row).
Values of the entity_picture & friendly_name (or state) may be set inside a corresponding template sensor.

Same may be achieved with a conventional entity-row with a bit more card-mod.