lovelace-card-mod: Custom font styling is not applied to markdown card

@ASNNetworks

I think it would be like this:

style:
  .: |
    ha-card {
      --paper-card-background-color: none !important;
      box-shadow: none !important;
      height: 30px; 
    }
  ha-markdown:
    $: |
      h1 {
        font-size: 10px;
        font-weight: thin;
        font-family: Helvetica;
        letter-spacing: '-0.01em';
      }

The markdown card now has the following structure

ha-card |__ shadow-root |__ha-markdown |__shadow-root |__ha-markdown-element

So, you need to follow the advanced usage instructions and do something like:

type: markdown
content: |
  ## <br>
  # {{states("sensor.time")}}
  ## <br>
  ## {{ states("sensor.date_time") }}
style:
  ha-markdown:
    $: |
      h1 {
        text-align: center;
        font-size: 6em;
        margin-bottom:12px;
        margin-top: 12px;
      }
      h2 {
        text-align: center;
      }

That appears to work and gives me:

Because it makes Home Assistant and it’s core functionality work better and more pretty. You can’t expect the core to accommodate for dirty hacks like card-mod.

The problem with h2 can be solved by using a more specific selector than the built in one, such as

ha-markdown-element:first-of-type h2 {
  font-size: 50px !important;
}

@gadgetchnnel has the correct solution here.

Yeah, I found the offending code here:

https://github.com/home-assistant/frontend/blob/9ff2eece3aafe6e7ba26075aed2f981e12dbee1a/src/components/ha-markdown.ts#L72-L75

I’ve added that info to the (closed) issue I had created, asking Bram to review if this is as intended.

https://github.com/home-assistant/frontend/issues/6147

Works great - except for H2 headers? Seems there is some fixed styling somewhere that doesn’t get overridden.

I change the exact same lines to H1 (and #) and then it works, but styling h2 and using ## doesn’t work.

Non working code:

      - type: markdown
        content: |
         ## Thermostaat
        style:
          .: |
            ha-card {
             margin: 12px 14px -5px 14px;
             box-shadow: none;
             --paper-card-background-color: rgba(0, 0, 0, 0.0)
            }
          ha-markdown:
            $: |
             h2 { 
              font-size: 18px !important;
              font-weight: 400 !important;
              padding-left: 10px !important;
              border-left: 3px solid rgba(81, 134, 236);
             }

Change the ## to # and h2 to h1 to get a working styling.

Thanks Thomas, much appreciated.

Looks great, but in the end is more a workaround than it is the solution 😃

Done and pretty happy with the result.

entities:
  - card_type: markdown
    content: |
      <br>
      <br>
      <br>
      <b>
      {{states("sensor.time")}}
      </b>
    style: |

      ha-card {
        --ha-card-background: 'rgba(0, 0, 0, 0)';
        --ha-card-box-shadow: 'none';
        font-size: 84px;
        text-align: center;
      }
    type: 'custom:hui-element'
  - card_type: markdown
    content: |
      <b>
      {{states('sensor.simple_time_date')}}
      </b>
    style: |
      ha-card {
        --ha-card-background: 'rgba(0, 0, 0, 0)';
        --ha-card-box-shadow: 'none';
        font-size: 22px;
        text-align: center;
      }
    type: 'custom:hui-element'

You can style markdown by applying styles to ha-card. That’s what I did to solve this issue.

Same issue on 0.111.0, rollback to 0.110.* fixes it immediately. As I’ve got a feeling it is HA frontend related, I’ve created an issue there.