Cards, Picture-elements and Markdown does not work

Share your Projects! Dashboards & Frontend
1

Card Picture-elements and Markdown does not work together?

Some time back I used the ‘custom:useful-markdown-card’ with the Picture-elements card, making a display screen for a media controller. The display (Picture-elements card) showing my speaker set up with icons, and the display text (Markdown card) as an element into the picture-element card.

I deleted the setup back then, and now I am trying to set it up again, now with the standard markdown card. But the card throws an error. And I can’t figure it out. This works still with the Picture-elements and custom:useful-markdown-card.which is deprecated.

The ‘custom:useful-markdown-card’ stills work, but not the standard Markdown card. Is it a bug?

Using, on its own, the standard Markdown:
image
The Picture-elements:
image

Both together:
image

elements:
  - entity: binary_sensor.rsp1570_speaker_front_left
    style:
      left: 3%
      top: 25%
    type: state-icon
  - entity: binary_sensor.rsp1570_speaker_center
    style:
      left: 8%
      top: 25%
    type: state-icon
  - entity: binary_sensor.rsp1570_speaker_front_right
    style:
      left: 13%
      top: 25%
    type: state-icon
  - entity: binary_sensor.rsp1570_speaker_surround_left
    style:
      left: 3%
      top: 75%
    type: state-icon
  - entity: binary_sensor.rsp1570_speaker_surround_right
    style:
      left: 13%
      top: 75%
    type: state-icon
  - type: markdown
    content: |     #Have tried with > and >- 
       Standard Markdown card...
    style:
      left: 50%
      top: 40%
image: /local/lovelace-ui/RSP-1570_Display.png
type: picture-elements
2

Try replacing

type:  markdown

with

type: custom:hui-markdown-card

I do this to use built in cards as rows in entity cards, it might also work here.

3

It worked with the:
type: custom:hui-markdown-card
image

This style works for the Picture-elements card:

image: /local/lovelace-ui/RSP-1570_Display.png
style: |
  ha-card {
  --ha-card-background: black
  }
type: picture-elements

And it works if the hui-markdown-card is alone, getting black backgroound and white text.

content: >-
  Bla bla bla
style: |
  ha-card {
  --ha-card-background: black;
  color: white
  }
type: 'custom:hui-markdown-card'

But I am not able to style the hui-markdown-card with color black, and text color white, combined with the Picture-elements card. Any ideas?

4
1 Like
5

I am getting closer with your excellent help. Not there yet, due to the text color don’t work. Have tried this without luck:

primary-text-color:
text-primary-color:
color:

Any ideas?

 - type: 'custom:hui-markdown-card'
    content: The hui-markdown-card...
    style:
      left: 50%
      top: 40%
      '--ha-card-background': var(--my-card-background)
      text-primary-color: var(--my-card-text-color)
style: |
  ha-card {
  --ha-card-background: black;
  --my-card-background: black;
  --my-card-text-color: white
  }
image: /local/lovelace-ui/RSP-1570_Display.png
type: picture-elements

Gives:
image
I have to use, --ha-card-background: black;, to gte the Picture-element to become black.

UPDATE:
The color white in the markdown card was solved with:
<font color= white> my text</font>
image