3.4.0: Style issues with for example background
pergolafabio opened this issue · comments
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:
-
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.
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);
}
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.
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.
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
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
Good morning, I have the same problems, style does not work, and there are many things that are not adjusted now
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?
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.
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
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
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
That’s because it is backward compatible with how it worked before.
you should update .
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?
Same
I'm fixing the problem. Thank you for the useful tips
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
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.
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?
yep, as I hoped it would..
@RobertoCravallo please format your code with code block <> in the editor
code block <> in the editor
But that formats the code differently from the way I want it to show!!!
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-card
Utiliza 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!!
I can confirm removing the "null" part and making sure the intendation is correct. solved the issue.
Thanks for the help!
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?
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);
}
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]]'
Still missing card_mod:
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]]'
Cmon…
That mod Is card_mod, where else did you think it came from.
and you need correct yaml…
indent is off
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]]'
Problem with 3.4.0 and bar-card. As you see not working at all.
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%;}
So, instead of discussing bugs people have to sort out wrongly written card-mod styles.
yeah, sorry, its a bit new to me
…. please don’t , you’ve been around for years now ,-)
see #329 (comment) again
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:-)
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.
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
ok, fixing yaml now works
As expected. Good to hear you finally got it ;/)
Please close