3.4.0: Style issues with for example background

[pergolafabio]

My Home Assistant version: 2023.12.4

My lovelace configuration method (GUI or yaml): Yaml

What I am doing: Applying s style

What I expected to happen: Transparant color

What happened instead: uses the theme background, and is not transparant Rolling back to 3.3.0 fixes it...

  style: |
    ha-card {
      box-shadow: none;
      height: 33px;
      background-color: transparent;
      padding: 0px 10px;
      color: var(--header-color);

Error messages from the browser console:

---

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

• [X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [X] Have made sure I am using the latest version of the plugin.

• [X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [X] 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.

[SmarterHomeLife]

I have similar issues, none of the styling is applied to cards with 3.4.0 but rolling back to 3.3.1 and clearing cache fixed the issue for now.

  type: custom:button-card
  style: |
    ha-card {
        background: var(--button-background-color);
        border-radius: var(--border-radius);
        border: var(--border);
        font-family: var(--font-family);
        box-shadow: var(--box-shadow-static);
    }

[Johnyboy1984]

Good morning,

I am also a user of the Card Mod in Home Assistant and I can confirm that installing the latest update simply deactivates many of my design adjustments or that they are no longer visible and the sometimes ugly frames become visible again.

When you return to the last version, all design changes work again.

[LucasHokerberg]

I'm also having issues applying customizations. I'm only using one card-mod card, and all styles are gone.

card_mod: null
style: |
  ha-card {
    --ha-card-background: red;
    color: white;
  }

Unfortunately, I updated both card-mod and Home Assistant to the lastest versions at the same time, so I'm not sure which one caused the issues. However, I can confirm reverting back to card-mod 3.3.1 (but keep HA 2023.12.4) gave me back the styling.

[Mariusthvdb]

I have similar issues, none of the styling is applied to cards with 3.4.0 but rolling back to 3.3.1 and clearing cache fixed the issue for now.

  type: custom:button-card
  style: |
    ha-card {
        background: var(--button-background-color);
        border-radius: var(--border-radius);
        border: var(--border);
        font-family: var(--font-family);
        box-shadow: var(--box-shadow-static);
    }

no need to use card-mod there, simplynuse the native button-card styling options

[Mariusthvdb]

how odd, I have all of my backgrounds all over...

my issue is with styling/modding the sidebar. But thats another topic, so wont pollute here

[reprogerman]

Good morning, I have the same problems, style does not work, and there are many things that are not adjusted now

[Mariusthvdb]

just experienced something unexpected in the other 3.4.0 issue I opened (and closed just now):

date logging out and back in again, my issues were gone. might be worth the trouble for your issues here too?

also, take the time to bring your configs up to date, by using the complete and prescribed config everywhere:

type: entities
card_mod:
  style: |
    ha-card {
    }

so, using both the card_mod and style keys, and in correct yaml spacing. not sure if card_mod: [] is correct (never saw that before), but is seems to put an emtpy list there, while you actually want it to do something. take that out and see if it starts behaving?

[Johnyboy1984]

Good day,

I was hoping you were right. I did everything that could have affected this:

• Restart HA
• Deregistration app
• Logging out of the PC using the browser
• Cache cleared from browser
• Browser closed and then reopened

However, the problem is back and I will go back a version again.

(Frames are back)

Here I had stored different colors for different battery levels on the radiator valves. After the update it looks like the code is no longer there.

As an example that the code is stored and no longer has any effect, I am including it in its entirety below, including the cards. The cards is in the Zip File. It'S in Yaml Code

Card-mod.zip Card-mod.txt

[reprogerman]

Does Style have anything to do with card mod? I have style on other cards without card mod, to modify other parameters and it does not work, before it worked, maybe what fails is the style function. Forgive my little knowledge on the subject

[Mariusthvdb]

Does Style have anything to do with card mod? I have style on other cards without card mod, to modify other parameters and it does not work, before it worked, maybe what fails is the style function. Forgive my little knowledge on the subject

always read the documentation.... https://github.com/thomasloven/lovelace-card-mod#quick-start

[reprogerman]

This structure has always worked for me.

[Mariusthvdb]

That’s because it is backward compatible with how it worked before. you should update .

[reprogerman]

I have everything updated, card-mod, home assistant, etc., I have everything up to date on updates, I guess that's what you're referring to?

[pickonedev]

Same

[Johnyboy1984]

I'm fixing the problem. Thank you for the useful tips

[Mariusthvdb]

I have everything updated, card-mod, home assistant, etc., I have everything up to date on updates, I guess that's what you're referring to?

no. I meant you should update your config using the prescribed keywords and hierarchy, as I showed you, and as is in the documentation. custom: bar-card uses the old format from over 3 years ago, it should also be updated, but seems no longer maintained.

this is probably all besides any issue here, so if you dont, suit yourself, only trying to help reduce any reason for errors

[RobertoCravallo]

Same thing with my HA, but: My fault!!! Bad coding and up to 3.4 it just worked.

Lot of the above examples are missing "card_mod:" before the " style: |" argument, that was my problem. PLUS, faulty indentation. Worked fine till the update, but now that I have corrected my code, all is well.

So check for "card_mod" and faulty indentation. It will work, if you fix that.

[RobertoCravallo]

card_mod: null style: | ha-card { --ha-card-background: red; color: white; }

No good!!! Loose the null and correct the indentation. Then it should work. card_mod: style: | __ha-card { --ha-card-background: red; color: white; ____}

card_mod: style: | ha-card { --ha-card-background: red; color: white; }

This should work... Had to use "__" for spaces, because they are deleted when posting. How stupid is that?

[Mariusthvdb]

yep, as I hoped it would..

@RobertoCravallo please format your code with code block <> in the editor

[RobertoCravallo]

code block <> in the editor

But that formats the code differently from the way I want it to show!!!

[reprogerman]

Tengo todo actualizado, card-mod, asistente de casa, etc, tengo todo al día en actualizaciones, ¿supongo que a eso te refieres?

No. Quise decir que deberías actualizar tu configuración usando las palabras clave y la jerarquía prescritas, como te mostré y como está en la documentación. custom: bar-cardUtiliza el formato antiguo de hace más de 3 años, también debería actualizarse, pero parece que ya no se mantiene.

Probablemente esto sea todo además de cualquier problema aquí, así que si no lo hace, haga lo que quiera, solo intentará ayudar a reducir cualquier motivo de error.

Thank you very much, what's wrong is that, now you have to put card_mod: in all the styles where you didn't have it before. Thank you very much mate!!

[LucasHokerberg]

I can confirm removing the "null" part and making sure the intendation is correct. solved the issue. Thanks for the help!

[pergolafabio]

Hmm, i believe it doesnt fix my issue, i use declutter cards as example below, intendation is correct?

card:
  type: markdown
  style: |
    ha-card {
      box-shadow: none;
      height: 33px;
      background-color: transparent;
      padding: 0px 10px;
      color: var(--header-color);
    }
  content: '[[content]]'

      - type: custom:decluttering-card
        template: header
        variables:
          - content: '##### Some text...'   

I have a transparant background with card mod 3.3.0 , when i update to 3.4.0 , there is no transparant anymore?

[LucasHokerberg]

Hmm, i believe it doesnt fix my issue, i use declutter cards as example below, intendation is correct?

card:
  type: markdown
  style: |
    ha-card {
      box-shadow: none;
      height: 33px;
      background-color: transparent;
      padding: 0px 10px;
      color: var(--header-color);
    }
  content: '[[content]]'

      - type: custom:decluttering-card
        template: header
        variables:
          - content: '##### Some text...'   

I have a transparant background with card mod 3.3.0 , when i update to 3.4.0 , there is no transparant anymore?

Nope, that's not right. Remove two spaces before everything within {}.

style: |
  ha-card {
  box-shadow: none;
  height: 33px;
  background-color: transparent;
  padding: 0px 10px;
  color: var(--header-color);
  }

[pergolafabio]

Hmm, same issue, i have it now like:

card:
  type: markdown
  style: |
    ha-card {
    box-shadow: none;
    height: 33px;
    background-color: transparent;
    padding: 0px 10px;
    color: var(--header-color);
    }
  content: '[[content]]'

[Mariusthvdb]

Still missing card_mod:

[pergolafabio]

yeah, but thats strange, i dont use card_mod: there, but card_mod breaks it?

now tested with below, but same issue

card:
  type: markdown
  card_mod:
  style: |
    ha-card {
    box-shadow: none;
    height: 33px;
    background-color: transparent;
    padding: 0px 10px;
    color: var(--header-color);
    }
  content: '[[content]]'

[Mariusthvdb]

Cmon… That mod Is card_mod, where else did you think it came from.

and you need correct yaml…

indent is off

[pergolafabio]

yeah, sorry, its a bit new to me

but whyats wrong then with this yaml? i removed the 2 spaces under ha-card ...

card:
  type: markdown
  card_mod:
  style: |
    ha-card {
    box-shadow: none;
    height: 33px;
    background-color: transparent;
    padding: 0px 10px;
    color: var(--header-color);
    }
  content: '[[content]]'

[FancyNerd92]

Problem with 3.4.0 and bar-card. As you see not working at all.

v3.3.1 working like a charm:

v.3.4.0 broken....:

here is my code:

type: custom:bar-card
entities:
  - align: center-split
    direction: up
    entity: sensor.temperature
    stack: horizontal
    height: 60px
    max: 100
    min: 0
    name: Στάθμη H₂O
    severity:
      - color: null
        from: 0
        to: 100
    width: 95px
    icon: nul
columns: 1
entity_row: false
style: |-
  bar-card-currentbar, bar-card-backgroundbar {
    border-radius: 8px;}
  .value-direction-up {
    position: relative;
    top: -13px;
    font-size: 18px;}
  bar-card-name {
    position: relative;
    top: 62px;}
  bar-card-iconbar{
  display: none;}
  bar-card-indicator {
    color: transparent;}
  ha-card {
    display: inherit;
    flex-direction: column;
    height: 100%;}

[ildar170975]

So, instead of discussing bugs people have to sort out wrongly written card-mod styles.

[Mariusthvdb]

yeah, sorry, its a bit new to me

…. please don’t , you’ve been around for years now ,-)

see https://github.com/thomasloven/lovelace-card-mod/issues/329#issuecomment-1871107636 again

[pergolafabio]

yeah, sorry, its a bit new to me

…. please don’t , you’ve been around for years now ,-)

see #329 (comment) again

But , I was never good with styling:-)

[LucasHokerberg]

yeah, sorry, its a bit new to me

but whyats wrong then with this yaml? i removed the 2 spaces under ha-card ...

card:
  type: markdown
  card_mod:
  style: |
    ha-card {
    box-shadow: none;
    height: 33px;
    background-color: transparent;
    padding: 0px 10px;
    color: var(--header-color);
    }
  content: '[[content]]'

The whole "style:" must be intended under card_mod.

[pergolafabio]

ok, fixing yaml now works

But seems the behaviour is still different, on every page view or refresh i see the card mod applying the card, i dont notice that on 3.3.0 On 3.3.3 my cards are immediately transparant on 3.4.0 my card first have a background color, and it goes away in less then a second, its a flickr only, but i see it evenrytime

edit: maybe a cache issue

[Mariusthvdb]

ok, fixing yaml now works

As expected. Good to hear you finally got it ;/)

Please close