Need help with picture Elements card CSS style

Configuration Frontend
1

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.

Screenshot 2020-11-10 132623
Screenshot 2020-11-10 132623996×580 26.3 KB

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

Screenshot 2020-11-10 132723
Screenshot 2020-11-10 132723995×583 27.6 KB

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

2

Try this

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

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

Screenshot 2020-11-10 140022
Screenshot 2020-11-10 140022998×623 29.9 KB

4

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

6

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

7

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

8

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

9

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:

Screenshot_2020-11-10 Overview - Home Assistant

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:

Screenshot_2020-11-10 Administration - Home Assistant

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

10

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

11

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'
12

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

13

No I don’t, sorry.

14

Outdated info.
Ref this:

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;
            }

image

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.