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

[William_Rodriguez]

Have spent a few hours working with card-mod in a pictures-elements card to make the background of the mini-graph-card transparent and remove the shadow, both of those items work. What I haven’t been able to figure out is how to do the placement of the graph anywhere in the picture-elements card, I can get it to move left but it won’t move up…

type: picture-elements
image: /local/pics/transparent1080.png
elements:
  - type: 'custom:mini-graph-card'
    style: |
      ha-card {
      background: rgba(0,0,0,0);
      box-shadow: none;
      left: 56%;
      top: 30%;
      }    
    animate: true
    entities:
      - sensor.processor_use
    font_size: 75
    line_color: var(--accent-color)
    line_width: 8
    name: test
    show:
      icon: false
      name: false
      state: false
  - type: 'custom:text-element'
    text: Processor
    style:
      top: 30%
      left: 10%
      font-family: Arial
      font-weight: bold
      color: white
  - type: state-label
    entity: sensor.processor_use
    style:
      top: 40%
      left: 10%
      font-weight: bold
      font-size: 30px
  - type: 'custom:text-element'
    text: Processor
    style:
      top: 30%
      left: 10%
      font-family: Arial
      font-weight: bold
      color: white
  - type: state-label
    entity: sensor.processor_use
    style:
      top: 40%
      left: 10%
      font-weight: bold
      font-size: 30px

I’m sure I’m missing something obvious, so hit me with it.

Thanks!

Edit - this is how it looks like

[bengt]

Is it possible to remove the sensor state from this card ?

    - type: conditional
      conditions:
        - entity: timer.vaskemaskin
          state: idle
        - entity: binary_sensor.vaskemaskin
          state_not: "off"
      card:
        type: entities
        entities:
          - entity: binary_sensor.vaskemaskin
            name: Vaskemaskinen er tom
            icon: mdi:washing-machine

[Mariusthvdb (Marius)]

@bengt

Is it possible to remove the sensor state from this card ?

see GitHub - thomasloven/lovelace-dummy-entity-row: 🔹 An entity row with only icon and name

[ricreis394 (Ricardo Reis)]

I’m trying to make state-badge of an entity square instead of circle

This is my code:

- type: entities
  entities:
    - type: 'custom:secondaryinfo-entity-row'
      entity: switch.hot_water_tank
      name: "Resistência elétrica"
      secondary_info: "Pode ter gastos muito elevados<br>de energia"
      style: |
        state-badge {
          border-radius: 0;
        }

Ommited some code to not make confusion, but the main code is placed above.
Tried various ways for styling but didn’t make it work in any way.

Is this even possible??

[klogg]

Is it possible to change the icon in an entity?

I’ve tried many, many versions of this…

style: |
  :host {
    icon: wifi-strength-1;
- and -
    ha-icon: wifi-strength-1;
- and -
    icon: 'mdi:wifi-strength-1';
-etc, etc -
}

[scstraus]

I can’t seem to get card-mod to do any changes whatsoever to my cards. I had a similar problem with card-modder, which worked for overriding card height, but nothing else in terms of changing the look of cards. I’ve tried many things, but basically just lifting the exact example out of the documentation doesn’t work. Is there a possibility it’s conflicting with my theme or another card or something? I’ve reloaded, cleared cache 1000x…

Here’s what I did (you can see my full config here, and the card shown is at the bottom of this file)

  - type: entities
    style: |
      ha-card {
        color: red;
      }
    title: Basement
    show_header_toggle: false
    entities:
    - climate.garage
    - climate.laundry_room

[petro]

change card-mod type to module, not null.

[scstraus]

Are you sure I won’t incur the wrath of HACS if I do that? It was quite specific about what it wanted me to do:

And it holds a lot of power to make my life difficult!

[petro]

why would hacs care? hacs just moves files. Yes i’m sure.

thomasloven/lovelace-card-mod

[scstraus]

It does more than that or it wouldn’t have broken all my installed cards when I installed it ;-). I’m scared of it now… Okay here I go.

[Jer78 (Jeremy Percival)]

I’ve never seen a card that is “null”. They are js or module. It’s definitely a typo.

[petro]

You’re overestimating what hacs does… It really just installs custom made items. You still gotta configure it yourself

[scstraus]

I dunno, I was pretty surprised that I could have all my cards still installed in the www folder and in my lovelace config and it somehow overrode all them and they all stopped working.

But you were right about making a module, now it works. Thanks.

[William_Rodriguez]

@William_Rodriguez

I’m sure I’m missing something obvious

Figured it, but I won’t say it was obvious, using

transform: translate(50%, -120%);

allows me to move it around.

[scstraus]

So card-mod is working fine, but for some reason I cannot get the mod-card to work… Is there something additional that needs to be done to install it? I have tried like this on all the cards where card-mod didn’t work, but none of them took. Same exact style I’ve been applying to my other cards that worked.

    - type: custom:mod-card
      style: |
        ha-card {
         background-color: var(--primary-background-color);
         border-radius: 15px;
         box-shadow: 
           {% if is_state('sun.sun', 'above_horizon') %}
             -8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
           {% else %}
             -8px -8px 8px 0 rgba(77, 77, 77,.5),8px 8px 8px 0 rgba(0,0,0,.3);
           {% endif %}    
        }   
      card: 
        type: custom:vertical-stack-in-card
        cards:

        - type: "custom:button-card"
          name: Hlubočepy
          styles:
            card:
              - padding: 8px 0px

        - type: custom:air-visual-card 
          air_pollution_level: sensor.hlubocepy_air_pollution
          air_quality_index: sensor.hlubocepy_air_quality
          main_pollutant: sensor.u_s_main_pollutant
          hide_title: true
          svg_location: "/local/icons/aqi_icons"

[jimz011 (Jim)]

I have a problem using card-mod and entities card. Whenever I apply any css through card-mod the entities card take up some time to load (unlike other cards that I have styled in the same way). At first I thought it might be that I had too much code in the card, but then I tried it only with a single entity and it does the same, it will show the theme style before applying the styles within card-mod.

It is not a big deal, though the entities card does take quite some time to load. I do not understand why though. Anyone else having this issue?

[William_Rodriguez]

@scstraus

Does anyone have any idea how you replace the report_size option from card-modder with equivilent functionality from card-mod?

According to github at the very bottom its used in the same manner. However, I haven’t gotten it to work.
Have you figured it out?

type: custom:mod-card
report_size: 5
card:

[scstraus]

I asked @thomasloven and he said it hadn’t been implemented but that he’d consider adding it as a feature to mod-card. Here’s his quote:

report_size has always been a bit hit-or-miss, so I didn’t bother to add it back when I refreshed card-modder into card_mod. I could add it to mod-card, though…

I will try to open some of the items I’ve found in my experiments as issues on github so he can track them. I hadn’t noticed the bit you had found so I will try it and see if it does anything, maybe he just forgot he implemented it.

[William_Rodriguez]

@scstraus

it hadn’t been implemented

That is interesting since it shows up on the mod-card github page, thats where I pulled the example from.
Thanks for the update!

[scstraus]

Aha, he added it 8 hours ago, the man works fast :-).

Improved mod-card. Added report_size option, fix #17