How to ignore default card styles?

[areyoufserious]

First of all, Thanks for your awesome custom card. I would like to apply own styles, so i don't need padding and background I'm trying to do that using card_mod, but it doesn't work. Is there any way to ignore card styling totally?

[areyoufserious]

I edited card js file, but i don't think that this is good approach. Maybe it could be great to add some config/flag for that

[PiotrMachowski]

Can you show your edit? I'm not sure what you mean

[mbrammer]

Hey @PiotrMachowski.

I have the same concern. I used html-card in the past and styled the content with card_mod, which worked fine. Now I need to use some templating and switched to html-template-card. The card_mod seems not to work with it.

EXAMPLES

Working:

type: custom:html-card
content: >-
  <div class="title">Gaskosten</div>
  <div class="subtitle">(heute - [[ sensor.gas_daily ]]kWh)</div>
  <div class="value">[[ sensor.gas_daily_costs ]]€</div>
card_mod:
  style: |
    ha-card {
      text-align: center;
    }

    .title {
      font-size: 1.45rem;
    }

    .subtitle {
      font-size: 1rem;
      line-height: 1rem;
    }

    .value {
      font-size: 2.25rem;
      font-weight: bold;
      margin-top: 1rem;
    }

Not working (CSS not applied):

type: custom:html-template-card
content: >-
  <div class="title">Gaskosten</div>
  <div class="subtitle">(heute - {{ states('sensor.gas_daily') |
  round(2) }}kWh)</div>
  <div class="value">{{ states('sensor.gas_daily_costs') }}€</div>
ignore_line_breaks: true
card_mod:
  style: |
    ha-card {
      text-align: center;
    }

    .title {
      font-size: 1.45rem;
    }

    .subtitle {
      font-size: 1rem;
      line-height: 1rem;
    }

    .value {
      font-size: 2.25rem;
      font-weight: bold;
      margin-top: 1rem;
    }

In the Chrome dev tools I see, the styles where not applied to the elements.

[PiotrMachowski]

@mbrammer it seems to work perfectly fine on my HA (I'm not on the latest version of HA/card_mod though):

You can also try following config:

type: custom:html-template-card
content: >-
  <div class="title">Gaskosten</div>
  <div class="subtitle">(heute - {{ states('sensor.gas_daily') |
  round(2) }}kWh)</div>
  <div class="value">{{ states('sensor.gas_daily_costs') }}€</div>
  <style>
    ha-card {
      text-align: center;
    }

    .title {
      font-size: 1.45rem;
    }

    .subtitle {
      font-size: 1rem;
      line-height: 1rem;
    }

    .value {
      font-size: 2.25rem;
      font-weight: bold;
      margin-top: 1rem;
    }
  </style>
ignore_line_breaks: true

[mbrammer]

Thank you for testing it @PiotrMachowski. Strange that it is working on you side with card_mod. I am on Version 3.1.5. The approach with <style></style> is working fine on my side. Thank you for the hint 👍

[PiotrMachowski]

Strange that it is working on you side with card_mod. I am on Version 3.1.5.

I use 3.0.12, maybe something has changed, or it just has a bad day 😉

The approach with <style></style> is working fine on my side.

I also think that this is a better approach, as everything is contained in the card and no additional postprocessing is required