thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.05k stars 169 forks source link

READ THIS FIRST! - CARD-MOD 3.4.0 IS NOT WORKING? #332

Open thomasloven opened 6 months ago

thomasloven commented 6 months ago

If card-mod 3.4.0 is not working for you, please check your configuration.

style: |
  ... styles go here...

has not been the recommended way to do things for more than two years and has been causing trouble since the start, so I didn't think twice about removing it.

If you have that in your configuration, use the following instead:

card_mod:
  style: |
    ...styles go here...

You know... as it says in the readme. ...which you claim to have re-read when you check the box at the bottom of the issue template:

It's really there to avoid wasting both of our time 😉

Phoenix-DH commented 6 months ago

@thomasloven Thanks a lot for this! I was wondering what I missed, but this solved my issue! Thank you!

ghallford commented 6 months ago

I got it working. Deleted. Thank you anyways.

-- Geoff Hallford

On Sat, Dec 30, 2023, 12:26 PM ildar170975 @.***> wrote:

What is "cards" here?

— Reply to this email directly, view it on GitHub https://github.com/thomasloven/lovelace-card-mod/issues/332#issuecomment-1872569588, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEH3ED7C3XWG4JA7AGWSXT3YMBFCFAVCNFSM6AAAAABBGSDPUKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZSGU3DSNJYHA . You are receiving this because you commented.Message ID: @.***>

ghallford commented 6 months ago

Interesting. I changed one below in the same yaml and it worked, so went back to the top and it let me change that one too

thomasloven commented 6 months ago

Very interesting. I can almost see how this can happen, but not entirely... Please open a separate issue if you can reproduce it consistently. I have failed in both chrome and firefox so far.

dafunkydan commented 6 months ago

Thanks for your continious Work on this awesome Component! No Issue, but Question for Recommendations: Is there a Best-Practice how to adapt all Settings to the (not new, but) new Configuration (semi-)automated? Looking at my Dashboard-Code, there are >900 (!!) Places with style: |, different configurations, and without card_mod.

Now i would need to add the card_mod Line, and add everywhere manually 2 Spaces for correct indentation. How did you and all handle that, are you using a special RegEx or similar to do that? I would love to avoid those hours of stupid spacebar-hitting... ;-)

thomasloven commented 6 months ago

Well. A good editor, like Visual Studio Code (or vim), should let you indent a whole block by selecting it and pressing tab (or >) once. That's a start.

ghallford commented 6 months ago

In the YAML editors you can select a block of code and hit tab, it will move the entire block the text indented in (no need to use spacebar or individual lines). If you need to outdent, you can do a block and use shift+tab. Vscode is also a great suggestion.

-- Geoff Hallford

On Sun, Dec 31, 2023, 8:09 AM Thomas Lovén @.***> wrote:

Well. A good editor, like Visual Studio Code https://code.visualstudio.com/ (or vim), should let you indent a whole block by selecting it and pressing tab (or >) once. That's a start.

— Reply to this email directly, view it on GitHub https://github.com/thomasloven/lovelace-card-mod/issues/332#issuecomment-1872945312, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEH3ED7AQ3LDGGNNS3YDZ33YMFPZPAVCNFSM6AAAAABBGSDPUKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZSHE2DKMZRGI . You are receiving this because you were mentioned.Message ID: @.***>

dafunkydan commented 6 months ago

Thanks guys! Im used to notepad++, but since it would take me 3+ hrs to go through everything (even with doing it in blocks), I thought there is maybe a more automated way... Anyway, if there's nothing u guys are aware of, I have some meditational work to do in the morning 😀

brinkgit commented 6 months ago

Hello,

I cannot get the new card-mod 3.4.0 working.

I use the code:

    type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:arrow-left-bold
    icon_color: '#A49B9B'
    card_mod:
      style: |
        ha-card {margin-left: '-10px'; width: 70px;border: solid 0px ;
        background: rgba(0,0,0,0)}

What ever part do change, nothing happens in the layout of the card. In the old version (3.3) it worked well.

Even if I do copy/paste the lines from the manual in a new card:

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

Nothing red comes up.

Card-mot is installed (actualy:updated). I tried with and without

frontend:
  extra_module_url:
    - /local/card-mod.js

in th config yaml

What do I do wrong?

ildar170975 commented 6 months ago

@brinkgit Compare your image with what is written in Docs in fact: image

brinkgit commented 6 months ago

I dis as you mentioned above:

Scherm­afbeelding 2024-01-04 om 17 53 43
ildar170975 commented 6 months ago

@brinkgit It does work: image If you do not have it working - this could be a bug (which you need to prove as a bug) or a wrong use. Suggest to ask similar questions in the dedicated HA community thread, you will definitely attract more people.

DrSpaldo commented 6 months ago

I am not sure if mine is correct, this is my config and since 3.4 (and HA 2024.1) it has stopped working properly. I am not getting the reduced spacing I have been previously getting. My config is not the first one you posted @thomasloven but it is also not the second, it is somewhere in between....

type: custom:vertical-stack-in-card
view_layout:
  column: 2
cards:
  - type: glance
    card_mod:
      style:
        .entities:
          .entity:
            $: |
              state-badge {
                margin-top: 20px;
                margin-bottom: -5px;
              }
              .name {
                margin-top: 0px !important;
                margin-bottom: -10px !important;
              }
              div:not(.name) {
                margin-bottom: 0px !important;
              }
    entities:
      - entity: camera.frontroad
        name: Front 1
        show_state: false
      - entity: camera.frontdoor
        name: Front 2
        show_state: false
      - entity: camera.frontdriveway
        name: Front 3
        show_state: false
ildar170975 commented 6 months ago

I am not sure if mine is correct

No need to post here since it is unrelated to the topic. Ask in the huge main card-mod HA Community thread.

DrSpaldo commented 6 months ago

Since it stopped working on this release and the differences in the OP are similar, it looks related to the topic to me..

KTibow commented 6 months ago

I'm surprised that nobody has mentioned that a major change should be a major version bump, not a minor one.

ildar170975 commented 6 months ago

Probably because it not a "major change".

brinkgit commented 6 months ago

@brinkgit It does work: image If you do not have it working - this could be a bug (which you need to prove as a bug) or a wrong use. Suggest to ask similar questions in the dedicated HA community thread, you will definitely attract more people.

Finaly I found a solution. I run HA on a VM machine on windows. I connect to it on firefox, running on a mac. After restart the mac, clearing cache on the mac, deleting cookies on the mac the miracle happens: it works. Done nothing to the windows machine or the VM. Anyway: no idea how it happend, but I am happy.

brinkgit commented 6 months ago

I'm surprised that nobody has mentioned that a major change should be a major version bump, not a minor one.

I am not sure that 3.4.1 was the one who gave the trouble, I did not intall 3.4.0. Could have been a problem also in 3.4.0, and that seems to me a more major change

thomasloven commented 6 months ago

I'm surprised that nobody has mentioned that a major change should be a major version bump, not a minor one.

The change was in a major version bump. https://github.com/thomasloven/lovelace-card-mod/releases/tag/3.0.0

KTibow commented 6 months ago

That's fair going by my original comment, but that's not what I meant. Breaking changes should be signified by major versions, to make it more clear that there was a major change to both users and bots.

thomasloven commented 6 months ago

Yes. I admit I should have communicated this more clearly. But after the two years, I honestly forgot about it and didn't even remember that there was anything to communicate...

Sorry.

KTibow commented 5 months ago

I guess that's fair, given that this isn't that big of a problem considering that I don't think HACS or any auto-updaters look at the major version. It's just a mismatch between the semantic versioning spec.

lollo78 commented 5 months ago

Just installed 3.4.2 version and my badge didn' t change colors. What i wrong? ` - badges:

pcb1962 commented 5 months ago

The answer is here: https://github.com/thomasloven/lovelace-card-mod/releases