Custom font styling is not applied to markdown card #52

Knapoc · 2020-06-10T20:42:55Z

My Home Assistant version: 0.111.0

My lovelace configuration method (GUI or yaml): yaml

What I am doing: applying custom styling to a markdown-card

What I expected to happen: font styling is applied to element h1

What happened instead: no styling is applied. Safari reports User Agent Style Sheet. Issue is present in Firefox too.

Minimal steps to reproduce:
Use the aforementioned yaml in a view.

- type: markdown
   content: |
     # Vacuum automation
   style: |
     ha-card {
       height: 50px;
       --paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
       box-shadow: 2px 2px rgba(0,0,0,0.0);
     }
     h1 {
       font-size: 14px;
       font-weight: thin;
       font-family: Helvetica;
       letter-spacing: '-0.01em';
     }

Error messages from the browser console: (I don't think these are related)

[Error] hui-thermostat-card – Error: Specify an entity from within the climate domain.
Error: Specify an entity from within the climate domain.
	s (chunk.6dbb65acb727c33dd251.js:2144:318438)
	value (chunk.ab96942901cd9a8d7754.js:146:46870)
	(anonymous function) (chunk.ab96942901cd9a8d7754.js:146:47612)
	asyncFunctionResume
	(anonymous function)
	promiseReactionJobWithoutPromise
	promiseReactionJob
[Error] hui-alarm-panel-card – Error: Invalid card configuration
Error: Invalid card configuration
	s (chunk.6dbb65acb727c33dd251.js:2144:318438)
	value (chunk.ab96942901cd9a8d7754.js:146:46870)
	(anonymous function) (chunk.ab96942901cd9a8d7754.js:146:47612)
	asyncFunctionResume
	(anonymous function)
	promiseReactionJobWithoutPromise
	promiseReactionJob
[Error] Failed to load resource: the server responded with a status of 404 () (index.m.js.map, line 0)

By putting an X in the boxes ([ ]) below, I indicate that I:

Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
Have made sure I am using the latest version of the plugin.
Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

The text was updated successfully, but these errors were encountered:

filikun · 2020-06-11T06:43:32Z

I might have this problem as well. From 110 to 111 I can no longer customise font size on markdown and all my cards now have massive font size. Easy to read but not as nice looking ^^.

My code is similar to the example above.

DevMighty · 2020-06-11T09:47:06Z

I have recreated this exact same issue on 3 different instances. Using the GUI doesn't fix it.

joaofl · 2020-06-11T11:03:44Z

Same here. Also after Upgrading to 111.

hmmbob · 2020-06-11T20:16:02Z

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.

joaofl · 2020-06-11T20:31:55Z

Indeed. There were many changes to the frontend meant to speed up the loading, as mentioned in the release notes of version 111.

warwickofthegh · 2020-06-13T01:30:49Z

can confirm the same. Styling no longer applies to any element targeted below ha-card and ha-markdown, I figure as others have suggested it due to the front-end changes in 0.111

Joca72 · 2020-06-13T10:38:56Z

I have the same problem after Upgrading to 0.111

ASNNetworks · 2020-06-13T21:23:52Z

Came here to confirm the styling CSS does not stick anymore with Markdown. When using inspect element I see different CSS stylings than I have written/applied.

ijustlikeit · 2020-06-13T22:15:58Z

Same style within markdown is ignored. Worked in 110.

ghost · 2020-06-14T08:32:11Z

CSS style applied to ha-icon under markdown not working anymore since 0.111

tomlut · 2020-06-16T05:16:35Z

Hi @thomasloven is this likely to be fixable?

It's the only thing stopping me updating to 0.111

If not, I guess I'll just have to find a different method of displaying a large clock using the markdown card on my homepage.

Knapoc · 2020-06-16T05:55:00Z

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

tomlut · 2020-06-16T06:01:58Z

No I cant. The card does not contain the Heading1 and Heading2 html tags.

  - card_type: markdown
    content: |
      ## <br>
      # {{states("sensor.time")}}
      ## <br>
      ## {{states('sensor.simple_time_date')}}
    style: |
      ha-card {
        --ha-card-background: 'rgba(0, 0, 0, 0)';
        --ha-card-box-shadow: 'none'
      }
      h1 {
        text-align: center;
        font-size: 6em;
        margin-bottom:12px;
        margin-top: 12px;
      }
      h2 {
        text-align: center;
      }
...etc

Knapoc · 2020-06-16T06:06:36Z

You’re right. In your use case it wouldn’t work because you want to style date, time, etc differently.
If you want to apply only one style to the whole markdown card, you’re able to do so by setting text size, alignment in ha-card.

tomlut · 2020-06-16T06:15:46Z

I guess I could split the sections into separate vertically stacked markdown cards.

tomlut · 2020-06-16T10:32:49Z

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'

hmmbob · 2020-06-16T10:36:01Z

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

tomlut · 2020-06-16T10:40:18Z

Not if the frontend changes are permanent :/

gadgetchnnel · 2020-06-16T13:30:49Z

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:

ASNNetworks · 2020-06-16T13:45:24Z

@gadgetchnnel

Is it possible to use both ha-card and ha-markdown together? I need ha-card to remove the background of the markdown card, but when using that, ha-markdown gets ignored (pretty much like what happens to h1 now).

This was my styling prior to the changes,.

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

When putting the font-sizes in ha-card it does work, but the sizes are different so I have to see what font-size is the same as before. But when I copy your ha-markdown, it does work but then I can't change ha-card. Using ha-card and ha-markdown seems to ignore the ha-markdown and only sees ha-card (same as now with h1).

This is what I tried but seems to ignore ha-markdown (unless I remove ha-card)

type: markdown
content: >
  # {% if is_state('sensor.lights_on', '0')%} Alle lampen
  staan uit. {% elif is_state('sensor.lights_on', '1')%} Er
  staat 1 lamp aan.  {% else %}  Er staan
  {{states('sensor.lights_on')}}  lampen aan.  {% endif%}
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';
      }

gadgetchnnel · 2020-06-16T13:52:19Z

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

ASNNetworks · 2020-06-16T13:54:01Z

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

YES! That works excellent! Thanks alot, you have saved me a lot of testing and headaches!

hmmbob · 2020-06-16T19:12:43Z

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.

warwickofthegh · 2020-06-17T00:05:39Z

Thanks @gadgetchnnel - all it takes is for one person to RTFM and we're back in business, haha :)

joaofl · 2020-06-17T15:52:33Z

@tomlut @Knapoc
Actually, if you use and customize the h3 style along with the h1. The problem seems to be only with the h2.

My code looks like this:

content: |
  ## <br>
  # {{states("sensor.time")}}
  ## <br>
  ### {{ now().strftime('%d %B %Y') }}
style:
  ha-markdown:
    $: |
      h1 {
        text-align: center;
        font-size: 8em;
        margin-bottom:5px;
        margin-top: 5px;
      }
      h3 {
        text-align: center;
        font-size: 3em;
      }
type: markdown

And it looks like this:

hmmbob · 2020-06-17T16:28:51Z

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.

home-assistant/frontend#6147

thomasloven · 2020-06-17T18:12:20Z

@gadgetchnnel has the correct solution here.

thomasloven · 2020-06-17T18:22:04Z

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

tomlut · 2020-06-17T18:39:45Z

Why do this though?

Why make it more complicated?

thomasloven · 2020-06-17T18:59:17Z

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.

hmmbob · 2020-06-17T19:10:41Z

Thanks Thomas, much appreciated.

KTibow · 2020-06-27T01:24:02Z

Just saying: You might need to change style: | to style: to make it work, if that wasn't already clear.

hmmbob mentioned this issue Jun 11, 2020

Markdowncard h2 does not accept styling since 0.111 home-assistant/frontend#6147

Closed

3 tasks

thomasloven closed this as completed Jun 17, 2020

qiz-li mentioned this issue Jun 18, 2020

Font Size Problem in Vertical Buttons Card qiz-li/lovelace-soft-ui#13

Closed

ghost mentioned this issue Jun 18, 2020

Select the element under two nested shadow roots #51

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom font styling is not applied to markdown card #52

Custom font styling is not applied to markdown card #52

Knapoc commented Jun 10, 2020 •

edited

filikun commented Jun 11, 2020 •

edited

DevMighty commented Jun 11, 2020 •

edited

joaofl commented Jun 11, 2020 •

edited

hmmbob commented Jun 11, 2020 •

edited

joaofl commented Jun 11, 2020

warwickofthegh commented Jun 13, 2020 •

edited

Joca72 commented Jun 13, 2020 •

edited

ASNNetworks commented Jun 13, 2020 •

edited

ijustlikeit commented Jun 13, 2020

ghost commented Jun 14, 2020 •

edited by ghost

tomlut commented Jun 16, 2020 •

edited

Knapoc commented Jun 16, 2020

tomlut commented Jun 16, 2020

Knapoc commented Jun 16, 2020

tomlut commented Jun 16, 2020

tomlut commented Jun 16, 2020

hmmbob commented Jun 16, 2020

tomlut commented Jun 16, 2020

gadgetchnnel commented Jun 16, 2020

ASNNetworks commented Jun 16, 2020

gadgetchnnel commented Jun 16, 2020

ASNNetworks commented Jun 16, 2020

hmmbob commented Jun 16, 2020

warwickofthegh commented Jun 17, 2020

joaofl commented Jun 17, 2020 •

edited

hmmbob commented Jun 17, 2020 •

edited

thomasloven commented Jun 17, 2020

thomasloven commented Jun 17, 2020 •

edited

tomlut commented Jun 17, 2020

thomasloven commented Jun 17, 2020

hmmbob commented Jun 17, 2020

KTibow commented Jun 27, 2020

Custom font styling is not applied to markdown card #52

Custom font styling is not applied to markdown card #52

Comments

Knapoc commented Jun 10, 2020 • edited

filikun commented Jun 11, 2020 • edited

DevMighty commented Jun 11, 2020 • edited

joaofl commented Jun 11, 2020 • edited

hmmbob commented Jun 11, 2020 • edited

joaofl commented Jun 11, 2020

warwickofthegh commented Jun 13, 2020 • edited

Joca72 commented Jun 13, 2020 • edited

ASNNetworks commented Jun 13, 2020 • edited

ijustlikeit commented Jun 13, 2020

ghost commented Jun 14, 2020 • edited by ghost

tomlut commented Jun 16, 2020 • edited

Knapoc commented Jun 16, 2020

tomlut commented Jun 16, 2020

Knapoc commented Jun 16, 2020

tomlut commented Jun 16, 2020

tomlut commented Jun 16, 2020

hmmbob commented Jun 16, 2020

tomlut commented Jun 16, 2020

gadgetchnnel commented Jun 16, 2020

ASNNetworks commented Jun 16, 2020

gadgetchnnel commented Jun 16, 2020

ASNNetworks commented Jun 16, 2020

hmmbob commented Jun 16, 2020

warwickofthegh commented Jun 17, 2020

joaofl commented Jun 17, 2020 • edited

hmmbob commented Jun 17, 2020 • edited

thomasloven commented Jun 17, 2020

thomasloven commented Jun 17, 2020 • edited

tomlut commented Jun 17, 2020

thomasloven commented Jun 17, 2020

hmmbob commented Jun 17, 2020

KTibow commented Jun 27, 2020

Knapoc commented Jun 10, 2020 •

edited

filikun commented Jun 11, 2020 •

edited

DevMighty commented Jun 11, 2020 •

edited

joaofl commented Jun 11, 2020 •

edited

hmmbob commented Jun 11, 2020 •

edited

warwickofthegh commented Jun 13, 2020 •

edited

Joca72 commented Jun 13, 2020 •

edited

ASNNetworks commented Jun 13, 2020 •

edited

ghost commented Jun 14, 2020 •

edited by ghost

tomlut commented Jun 16, 2020 •

edited

joaofl commented Jun 17, 2020 •

edited

hmmbob commented Jun 17, 2020 •

edited

thomasloven commented Jun 17, 2020 •

edited