How do I customize heading css? | Home Assistant | Page 1

sudden oasis Mar 16, 2025, 2:29 PM

#

I'm trying to use card-mod to customize heading styles via css, but have been struggling to do the simplest style changes (e.g. font-size & padding)

Right now I'm trying to do it to a markdown card like below, but the font-weight style isn't applying. How do I update the h2 font weight in this instance, or otherwise add a heading where I can customize the css? I'm only using markdown right now because I could at least use a h2 which has a smaller font-size than the default headings.

type: markdown
content: " ## Front door"
text_only: true
card_mod:
  style: |
    ha-card {
      padding: 8px 8px 8px 8px;
    }
    ha-card h2 {
      font-weight: normal !important;
    }

fair remnant Mar 19, 2025, 9:07 PM

#

If you are just using the card to act as a header/title, you don't need to target the h2 specifically; just set the font-weight for the whole card. Here's some code from one of my examples: ```yaml
card_mod:
style: |
ha-markdown {
padding: 0 0 0 0 !important;
font-size: 12px !important;
font-weight: normal !important;
line-height: 1.4 !important;
}
ha-card {
font-family: Arial;
text-align: center;
width: 275px;
box-shadow: 0px 2px 5px 1px red;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: 4px;
padding-top: 15px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 15px;
padding: 15px;
{% if is_state('light.bedroom_lights', 'on') %}
background-color: yellow;
color: black;
box-shadow: inset 0px 0px 5px 1px black;
{% else %}
background: transparent;
color: yellow;
box-shadow: inset 0px 0px 5px 1px yellow;
{% endif %}
}

#

Alternatively, the Markdown card also accepts (some) HTML so you can apply style in the content that way too.

sudden oasis Mar 20, 2025, 9:19 AM

#

fair remnant If you are just using the card to act as a header/title, you don't need to targe...

I'm still getting font-weight not applying when I try that

#

I tried using this but it looks like the quotations got sanitised:

content: '<h2 style="font-weight: normal;">hello</h2>'

It didn't preserve the style attribute

#

I've managed to get it working like so:

type: markdown
content: "# Front door"
text_only: true
card_mod:
  style:
    .: |
      ha-card {
        padding: 8px 8px 8px 8px;
      }
    ha-markdown:
      $: |
        h1 {
          font-size: 24px;
          font-weight: normal;
          font-family: Helvetica;
        }

I don't know what this syntax is, but it works, and it specifically only seems to work for h1, not h2

fair remnant Mar 20, 2025, 9:56 AM

#

sudden oasis I'm still getting `font-weight` not applying when I try that

I wonder if it is because the content is still using h2. ```yaml
type: markdown
content: |
This is font-weight of 900.
card_mod:
style: |
ha-markdown {
font-weight: 900 !important;
}

fair remnant Mar 20, 2025, 10:05 AM

#

sudden oasis I've managed to get it working like so: ```yaml type: markdown content: "# Fron...

It looks like h2 needs !important for card_mod to work with it. (I still don't completely understand shadow-root stuff...) ```yaml
type: markdown
content: " ## Front door"
card_mod:
style:
.: |
ha-card {
padding: 8px 8px 8px 8px;
}
ha-markdown:
$: |
h2 {
font-size: 24px !important;
font-weight: normal !important;
font-family: Helvetica important;
color: red !important;
}

#How do I customize heading css?