Colours Needed in Markdown Cards (but Separators Sorted)

CrypticError · March 6, 2022, 8:42pm

Okay, following some much needed help : -

I got into markdown and attributes - Many Thanks

I went back to my monitoring Heat On Times (HOT)
I found that the markdown could display the same information (minus the state indicative icons) as entities card but in just less than half the height
Using Attributes I could drop that by another two thirds
Inserting muliple ‘||||’ lines gives separators : -
But readabilty could be further improved by using colours

Less than half the height of entities card

      - type: markdown
        title: HOT History - Day
        content: |
          |{{'<b>Item&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}}|{{'&nbsp;&nbsp;-&nbsp;&nbsp;'}}|{{'Value&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>'}}
          |----:|:----:|----:|
          ||||
          |{{'<b>' ~ state_attr('sensor.s_hot_heat_status', 'friendly_name') | replace('HOT ', '') ~ '</b>'}}|{{'-'}}|{{ states('sensor.hot_heat_status')}}|
          |{{'<b>Last ON / OFF</b>' }}|{{'-'}}|{{ as_timestamp(states('input_datetime.hot_last_on')) | timestamp_custom('%H:%M', false) }}{{'&nbsp; - &nbsp;'}}{{ as_timestamp(states('input_datetime.hot_last_off')) | timestamp_custom('%H:%M', false)}}|
          |{{'<b>Last ON Duration</b>' }}|{{'-'}}|{{ states('sensor.heat_last_on_duration') ~ ' h:m'}}|
          |{{'<b>So Far Today</b>' }}|{{'-'}}|{{ states('sensor.hot_day_sofar_h') ~ ' h:m'}}|
          |{{'<b>So Far Today</b>' }}|{{'-'}}|{{ states('sensor.hot_day_sofar_p') ~ ' % on'}}|
          ||||
          ||||
          {% for item in states.sensor | selectattr('object_id', 'match', 'hot_dy_tot_h') -%}
          |{{'<b>' ~ item.name | replace('HOT ', '') ~ '</b>' }}|{{'-'}}|{{item.state_with_unit}}|
          {% endfor -%}
          ||||
          ||||
          {% for item in states.sensor | selectattr('object_id', 'match', 'hot_dy_tot_p') -%}
          |{{'<b>' ~ item.name | replace('HOT ', '') ~ '</b>'}}|{{'-'}}|{{('%.2f' | format(item.state | float(0))) ~ ' % on'}}|
          {% endfor %}

Code for Above

AND -

Is about 1/6th the height and MUCH easier to compare values

      - type: markdown
        title: HOT History - Month
        content: |
          |{{'<b>Item'}}|{{'&nbsp;&nbsp;-&nbsp;'}}|{{'&nbsp;&nbsp;% Yr-0'}}|{{'&nbsp;&nbsp;% Yr-1'}}|{{'&nbsp;&nbsp;% Yr-2</b>'}}|
          |----:|:----:|----:|----:|----:|
          ||||||
          ||||||
          |{{'<b>Rng This Mnth</b>'}}|{{'-'}}|{{states('sensor.hot_mth_0_sofar')}}|||
          ||||||
          ||||||
          {% for item in states.sensor | selectattr('object_id', 'match', 'hot_mth_y0_tot_') -%}
          |{{'<b>' ~ (item.name | replace('HOT ', '') | replace(' This Year', '')) ~ '</b>'}}|{{'-'}}|{{'%.2f' | format(item.state | float(0)) }}|{{'%.2f' | format(item.attributes.yr_1 | float(0))}}|{{'%.2f' | format(item.attributes.yr_2 | float(0))}}|
          {% endfor %}

Code for Above

I’ve looked at many posts for markdown colour but none seem to work (has something changed ?)
posts checked : -

(not sure how (the one above) this would help anyway, as I’d need to apply to single cells)

Do I need to use a custom card or is a mod/development on the way ?
Cheers

Mariusthvdb · March 6, 2022, 9:34pm

well, sorry but im nt sure what you want, you post that many links…

but if you want to color individual lines or strings in markdown, thats entirely possible, just not with theme variables like var(–primary-color)

you can do things like:

content: >

  <!--- **Overview** -->

  <font color = {{state_attr('sensor.family_home','icon_color')}} > - {{state_attr('sensor.home_badge','Home')}} </font>

  <font color = {{'darkgreen' if is_state('sensor.hubs_badge','0') else 'maroon'}} > - {{state_attr('sensor.hubs_badge','Hubs')}} </font>

  <font color = {{'darkgreen' if is_state('sensor.critical_badge','0') else 'maroon'}}> - {{state_attr('sensor.critical_badge','Critical')}} </font>

  <font color = {{'grey' if is_state('sensor.play_badge','0') else 'dodgerblue'}}> - {{state_attr('sensor.play_badge','Play')}} </font>

  <font color = {{'grey' if is_state('sensor.lights_badge','0') else '#fbb911'}}> - {{state_attr('sensor.lights_badge','Lights')}} </font>

or

    type: markdown
    content: >

     {% if states.binary_sensor.weatherbit_alert is defined and is_state('binary_sensor.weatherbit_alert','on') %}
      ## <font color= dodgerblue> {{state_attr('binary_sensor.weatherbit_alert','city')}}, {{state_attr('binary_sensor.weatherbit_alert','region')}}</font>

      ## <font color= red> {{state_attr('binary_sensor.weatherbit_alert','title')}}</font>

      <font color= dodgerblue> **Description:**</font>
      <font color= grey> {% if state_attr('binary_sensor.weatherbit_alert','description') %}
                            {{state_attr('binary_sensor.weatherbit_alert','description')}}
                         {% else %} No description
                         {% endif %} </font>

      <font color= dodgerblue> **Severity:**</font> <font color= grey> {{state_attr('binary_sensor.weatherbit_alert','severity')}} </font>

      <font color= dodgerblue> **Effective:**</font> <font color= grey> {{state_attr('binary_sensor.weatherbit_alert','effective')}} to {{state_attr('binary_sensor.weatherbit_alert','expires')}} </font>

      <font color= dodgerblue> [{{state_attr('sensor.weatherbit_weather_alerts','attribution')}}]({{state_attr('binary_sensor.weatherbit_alert','uri')}})</font>
      {% else %} Unavailable/Initializing
      {% endif %}

does that help?

CrypticError · March 6, 2022, 10:17pm

Thanks for the response
I’m sorry about the many links, new to this wanted to show I had looked
So I tried ‘parts’ of what you gave (not sure what I missed
Code used : -

      ### Test
      - type: markdown
        title: Colour Test Card
        content: |
          |{{'<b>Item'}}|{{'&nbsp;&nbsp;-&nbsp;'}}|{{'<font color=red>Column 1</font>'}}|{{'<font color=blue>Column 2</font>'}}|{{'<font color=green>Column 3</b></font>'}}|
          ||||||
          |{{'<b>Item 1</b>'}}|{{'-'}}|{{'<font color=red>Red1</font>'}}|{{'<font color=blue>Blue1</font>'}}|{{'<font color=green>Green1</font>'}}|
          |{{'<b>Item 2</b>'}}|{{'-'}}|{{'<font color=red>Red2</font>'}}|{{'<font color=blue>Blue2</font>'}}|{{'<font color=green>Green2</font>'}}|
          |{{'<b>Item 3</b>'}}|{{'-'}}|{{'<font color=red>Red3</font>'}}|{{'<font color=blue>Blue3</font>'}}|{{'<font color=green>Green3</font>'}}|

Obtained : -

So nearly there but clearly something not quite right
I checked best I could everything ‘should’ be okay but … not

CrypticError · March 6, 2022, 10:31pm

Hang on; just tried this without colour and got a similar error so I must have messed something up

      ### Test
      - type: markdown
        title: Sans Colour Test Card
        content: |
          |{{'<b>Item'}}|{{'&nbsp;&nbsp;-&nbsp;'}}|{{'Column 1'}}|{{'Column 2'}}|{{'Column 3</b>'}}|
          ||||||
          |{{'<b>Item 1</b>'}}|{{'-'}}|{{'Red1'}}|{{'Blue1'}}|{{'Green1'}}|
          |{{'<b>Item 2</b>'}}|{{'-'}}|{{'Red2'}}|{{'Blue2'}}|{{'Green2'}}|
          |{{'<b>Item 3</b>'}}|{{'-'}}|{{'Red3'}}|{{'Blue3'}}|{{'Green3'}}|

I’ll try to find the mistake … but …

Edit : I still can’t find it but in an actual usage case, I got it to work

It’s a bit garish but I’ll try and find some slightly more subtle colours

Code : -

      ### HOT History Month
      - type: markdown
        title: HOT History - Month
        content: |
          |{{'<b>Item'}}|{{'&nbsp;&nbsp;-&nbsp;'}}|{{'&nbsp;&nbsp;% Yr-0'}}|{{'&nbsp;&nbsp;% Yr-1'}}|{{'&nbsp;&nbsp;% Yr-2</b>'}}|
          |----:|:----:|----:|----:|----:|
          ||||||
          ||||||
          |{{'<b>Rng This Mnth</b>'}}|{{'-'}}|{{'<font color=orange>' ~ states('sensor.hot_mth_0_sofar') ~ '</font>'}}|||
          ||||||
          ||||||
          {% for item in states.sensor | selectattr('object_id', 'match', 'hot_mth_y0_tot_') -%}
          |{{'<b>' ~ (item.name | replace('HOT ', '') | replace(' This Year', '')) ~ '</b>'}}|{{'-'}}|{{'<font color=cyan>%.2f' | format(item.state | float(0)) ~ '</font>'}}|{{'<font color=red>%.2f' | format(item.attributes.yr_1 | float(0)) ~ '</font>'}}|{{'<font color=lime>%.2f' | format(item.attributes.yr_2 | float(0)) ~ '</font>'}}|
          {% endfor %}

Thanks Marius

CrypticError · March 6, 2022, 11:08pm

Found the mistake
I hadn’t included the justification Header line, i.e. : -

          |----:|:----:|----:|----:|----:|

maxym · August 27, 2022, 1:58pm

I’m just facing the same problem. WTH a style=“color:…” is parsed out from html passed to markdown card? Do you know why?
As you proved we can use font color, but it doesn’t work with css variables. It breaks coherency with the rest of the UI.

Are there any other options?

maxym · August 28, 2022, 1:47pm

I did check markdown documentation referenced in markdown card docs.
I did use their renderer to check if using additional attributes like “style” is allowed. And you know what? It is:

Why does HA strip those attributes out?
Can anyone answer this question? Markdown card doesn’t mention that at all.

BTW HA markdown card cannot interpret correctly style declaration, since markdown card documentation mentions it in working examples:

<style
  type="text/css">
h1 {color:red;}

p {color:blue;}
</style>
okay

maxym · August 29, 2022, 9:27am

I answer myself. It seems others feel hopeless though.
The only way to achieve total freedom in matter of card content is to use Custom Button Card. While it has a button in the name, it must not behave like a button. It’s the most configurable card I know. I know it’s the big cannon but it seems that HA devs strategy is to limit users

Here is my example of using it as a replacement to markdown. The sensor sensor.shelly_status contains a collection of HTML code for each Shelly device. The HTML is generated in NodeRed based on various sources. I can confirm that the HTML is not filtered - everything you put here is rendered as expected, incl style sheets, inline styles, tables etc.

type: custom:button-card
name: Shelly DW1
show_icon: false
show_name: true
show_state: false
extra_styles: |
  a {color:var(--primary-color)}
styles:
  grid:
    - grid-template-areas: '"n" "content"'
    - grid-template-columns: 1fr
    - grid-template-rows: min-content 1fr
  card:
    - padding: 16px 16px 16px 16px
    - font-size: 14px
  name:
    - font-size: 24px
    - font-weight: 400
    - padding: 0px 0px 16px 0px
    - align-self: start
    - place-self: start
  custom_fields:
    content:
      - align-self: start
custom_fields:
  content: >
    [[[ return  states['sensor.shelly_status']['attributes']['info']['SHDW-1'];
    ]]]

and the result