🔹 Card-mod - Add css styles to any lovelace card

loocd · August 26, 2024, 8:32am

I’m assuming you’re trying to remove the colored circle around the icon, right? If so, you’re targeting the wrong element. The background color is given by the ::before element. You were probably able to overwrite this with another color because you literally just put another color over top of the existing one. But you tried to set something to none that isn’t there.

You need to look at the html to see where the color is set and then target that element specifically.

card_mod:
  style:
    ha-tile-icon $: |
      .shape::before {
        background-color: unset !important;
      }

Tadies · August 26, 2024, 8:38am

Yay!!!..that part i missed!..
Thank You for guiding… it did indeed solved it!
Kuddo’s loocd!

Sp33dFr34k · August 26, 2024, 2:17pm

Kick, can someone point me in the right direction, please?

loocd · August 26, 2024, 2:37pm

@Sp33dFr34k In my opinion the DOM navigation isn’t working the way it is set up - but I’m unable to test it right now.

I would have written it like this:

    card_mod:
      style: 
        hui-horizontal-stack-card $: |
            div#root > :first-child {
              width: 43%;
              flex: auto; 
            }

Give this a try. If it doesn’t work, please let me know what’s happening in the browser dev tools - is it not being applied to the elements at all or is it just being overwritten by different styles? is it being applied to the wrong element? …

jeroenvdd89 · August 26, 2024, 3:23pm

Very short question, the search doesn’t find a clear answer:

I’d like to give the new section an opaque black bacground, is this possible? or should i try to do this with all the individual cards?

martindybal · August 26, 2024, 10:54pm

How can I style the badge wrapper so that all badges appear on a single line with horizontal scrolling? I know it’s a simple CSS task, but how do I apply it to the .badges class within the view component? Also, is it possible to use card mod for this?

Dmitry3650 · August 27, 2024, 7:48am

Thank you friend!!! it really works and it helped me.

loocd · August 27, 2024, 7:52am

not sure how to do this, as the badges don’t have a ha-card element that you can work with. But take a look at this and take it for a spin - I’d expect it’s possible through this:
lovelace-card-mod/README-themes.md at master · thomasloven/lovelace-card-mod (github.com)

rgroothuis · August 27, 2024, 11:41am

This is driving me crazy, any suggestions why the font-size style is not changing the actual font size?

type: entity
entity: sensor.zonneplan_goedkoopste_prijs_uur
name: Goedkoopste Prijs
icon: mdi:currency-usd
state_color: true
card_mod:
  style: |
    ha-card {
      color: white;
      font-size: 6px;
      background-color: #00A964;
    }

loocd · August 27, 2024, 12:15pm

@rgroothuis You can add !important just before the semicolon to make sure the style gets applied.
But I really don’t think this is going to get you what you’re looking for. You’ll need to figure out which font size you’re actually trying to change. I doubt it’s the ha-card. ha-card doesn’t have any text in it, but just a bunch of children that contain the actual text.

Figure out which element(s) you’re trying to target using your browser’s dev tools and then put that as the css selector instead of ha-card. And then first try it without the !important and if that doesn’t work add ain !important

Ildar_Gabdullin · August 27, 2024, 8:21pm

Most of your questions may be resolved if you check the 1st post → link at the bottom.
Particularly for Entity card: changing a font-size for elements also described there.

iorifly · August 28, 2024, 2:10am

Does anyone know how I can get an image that can be resized and looks like this attached image? With the text on the same side and everything. I tried with a grid… but I can’t make the image smaller.

Mine is getting like this. Everything is really big.

I also wanted to make the card background disappear, for example from markdown

type: grid
square: false
columns: 2
cards:
  - type: picture
    tap_action:
      action: none
    hold_action:
      action: none
    image: /api/image/serve/48ab1bbacf56ced37591aeee8e982488/512x512
    card_mod:
      style: |
        ha-card {
          padding: 8px;  /* Ajuste o padding para reduzir o tamanho do cartão */
        }
  - type: markdown
    content: |
      <div class="center-text">
        <ha-icon icon="mdi:wifi"></ha-icon>  Wifi: ALHN-C336-11ac

       <ha-icon icon="mdi:lock"></ha-icon> Senha: 8430674053
      </div>
    card_mod:
      style: |
        ha-card {
          opacity: 70%;
          padding: 8px;  /* Ajuste o padding para reduzir o tamanho do cartão */
        }
        .center-text {
          text-align: center;
        }

bycippy · August 29, 2024, 9:26am

good morning, I have a problem
I would need the background to change when the value is = or greater than 0.100. but I can’t do it in any way.
currently I’m like this

card_mod:
  style: |
    ha-card {
      background: {{ '#194006' if is_state('sensor.c5_x_km_session', '0.100') else '#811616' }};
    }

and below 0.100 it’s green, above 0.100 it’s red

Ildar_Gabdullin · August 29, 2024, 9:51am

Try testing your templates in Dev tools - Template

bycippy · August 29, 2024, 10:45am

thanks, but I don’t know what formula to use with >= doesn’t work.
surely it is a problem of how I write the code

GoodyGizmos · August 29, 2024, 2:34pm

I’m trying to dynamically change styles for individual cards based on the dark mode setting. Here is what I tried so far, but it does not work:

card_mod:
  style: |
    ha-card {
      background-color: ${this.hass.themes.darkMode ? 'green' : 'yellow'};
    }

Of course, substituting a color directly in place of ${this.hass.themes.darkMode ? 'green' : 'yellow' works, but it’s not dynamic. Do I have to handle this through themes or is there a way to directly query the device’s dark mode like this?

dimitri.landerloos · August 29, 2024, 3:46pm

Use an @media query like so:

card_mod:
  style: |
    ha-card {
      background: yellow;
    }
    @media (prefers-color-scheme: dark) {
      ha-card {
         background: green;
      }

GoodyGizmos · August 29, 2024, 4:38pm

Thanks, but after making the change and a refresh across three test devices, that doesn’t seem to be working quite right for me:

Edge on Windows 11 - Green regardless of dark mode
Companion App on iOS - Yellow regardless of dark mode
Fully Kiosk Browser on Fire Tablet - Yellow regardless of dark mode

marcusn · August 29, 2024, 5:42pm

I’ve been trying to fix the Alarm Panel status icon misalignment since forever, and I can’t find a way to reference it in the styles.

The js path for it is:
hui-alarm-panel-card $ ha-card > h1 > ha-assist-chip $ #button > span:nth-child(1)

I used all my css skills and couldn’t make it work. Can somebody help me with it?

The fix is simply to add this css to it:

align-self: auto;

Just to make it clearer, I’m trying to fix this:

I believe the component itself should be fixed, but this would work for now.

Thanks a lot!

parautenbach · August 29, 2024, 7:11pm

Try:

{{ '#194006' if states('sensor.c5_x_km_session') | float(0) >= 0.1 else '#811616' }}