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

[KTibow (Kendell R)]

Where is the app-toolbar in the inspector?

[Mariusthvdb (Marius)]

review needed indeed… after updating to todays card-mod 3.0.9, the badges aren’t styled anymore at all…

not really sure if this is related, but there is only 1 error in the inspector:

Could not load content for webpack://home-assistant-frontend/chunk.bcc24dc7f2504ad36740.js (HTTP error: status code 404, net::ERR_UNKNOWN_UR

[KTibow (Kendell R)]

I think you didn’t configure card-mod to load properly.

[Mariusthvdb (Marius)]

yes, you are right! its back, was just going to type I had it configured as always, when I noticed the edit in the resources file had accidentally erased the type: module line…

my bad
sorry.

[not_a_coder]

@KTibow

Make a custom theme and only apply it to those views.

I tried that but it’s not working either when applying to a specific dashboard. I created a new thread since it is now OT from this thread. Set paper-font-body1_-_font-size in theme to 24px?

[valvex]

@NdR

Try adding it at the bottom, like this

    style:
      $: |
        .mdc-dialog {
          backdrop-filter: blur(17px);
          -webkit-backdrop-filter: blur(17px);
          background: rgba(0,0,0,0.25);
        }
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          background: none !important;
          box-shadow: none;
          border-radius: 0px;
        }
       .: |
            :host {
                 --secondary-background-color: none !important;
             }  

[LeFab (Fabien Dostie)]

Hello I need some help on a card for my hp printer.
why am I posting this here you might ask, well… It’s because I have a printer with a black and a cyan/magenta/yellow cartridge and I would like to add some kind of rainbow color “fill” to the “custom: bar-card”
for that cartridge.

I thought I could have just used css as follows:

....
entities:
- color: black
  entity: sensor.hp_printer_inkcartridge_black
  name: K
- color: #grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
  entity: sensor.hp_printer_inkcartridge_cyanmagentayellow
  name: CMY   
height: 150px
....

but it aint working…
I am not really great with coding or scripting, i’m learning.

I would really appreciate the help.

Thanks

[KTibow (Kendell R)]

@LeFab

I am not really great with coding or scripting, i’m learning.

Don’t worry, everyone is! Eventually you’ll pick up the syntax. In this case, color is a field provided by the custom card. First of all, try setting it to linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet). Does that work?

[LeFab (Fabien Dostie)]

let me try that…

I love this community it’s very active and generous.
I’ve learned so much in the short time iwas here.

I’ll get back to you

thanks

[LeFab (Fabien Dostie)]

@KTibow

linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet) . Does that work?

It almost works perfect thanks, the only thing is that the “color” needs to not fill the whole “container” but only up to the current percentage of ink that is contained in the said cartridge.

I should also NOT use a card with some transparency i am realising !

here’s all the code I have for the card up to now, it’s a work in progress

type: 'custom:bar-card'
columns: '2'
direction: up
entities:
  - color: black
    entity: sensor.hp_printer_inkcartridge_black
    name: K
  - color: 'linear-gradient(to top, red,orange,yellow,green,blue,indigo,violet)'
    entity: sensor.hp_printer_inkcartridge_cyanmagentayellow
    name: CMY
height: 150px
min: 0
max: 100
padding: 0 px
target: 20
title_position: bottom
align: center-split
icon_position: inside
unit_of_measurement: '%'
width: 50%
title: HP Deskjet 3050A
icon: 'mdi:water-outline'
severity:
  - from: '100'
    icon: 'mdi:water-outline'
    to: '30'
  - icon: 'mdi:water-alert-outline'
    from: '29'
    to: '20'
  - to: '0'
    icon: water-plus-outline
    from: '19'
animation:
  state: 'on'

thank you

[KTibow (Kendell R)]

You’ll need to use card-mod, then. I don’t have the most time at the moment, but I’ll get back to you fairly soon.

[LeFab (Fabien Dostie)]

Ok thank you, that is very much appreciated.

Thanks

[Dadlord]

Hi All,

Huge kudos to the developer and contributers for this card-mod module. It’s amazing!

My apologies if this has been asked, but I can’t seem to find it.

I am wanting to use card mod to add a box-shadow around a card element for a light that changes colour based on the current colour state of the light entity.

I just can’t work out a variable or some form of simple way to capture the current colour state of the entity and feed that into the style command.

Anybody got any tips they could please share?

[parautenbach (Pieter Rautenbach)]

I’ve seen pictures of this a few times on this thread. Check this post for example (simply searching for box-shadow).

[alnavasa (A)]

Hi,
I am trying to rotate an icon 90º,
with this code:

@Ildar_Gabdullin

      - entity: sensor.test_empty_value
        name: false
        unit: false
        icon: 'mdi:link'
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          '--paper-item-icon-color': cyan

I made this other code:

      - entity: sensor.test_empty_value
        name: false
        unit: false
        icon: 'mdi:link'
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          '--paper-item-icon-transform': rotate(-90deg)

But of course it is not working, It is an icon in one of the entities in a ‘custom:multiple-entity-row’ (see the post I am replying to)

[KTibow (Kendell R)]

That’s because those variables aren’t just applying those values, they’re defined by the framework.

[Ildar_Gabdullin]

@Ildar_Gabdullin

styles:
          '--paper-item-icon-color': cyan

Also this is not related to Card-mod ("styles" is a property for "multiple-entity-row").

[alnavasa (A)]

Yo used that in the Prost I was mentioning before and I thought I could use something like that to rotate it. How can I rotate it?

[Ildar_Gabdullin]

@alnavasa

How can I rotate it?

Entities card:

type: vertical-stack
title: Icon
cards:
  - type: entities
    entities:
      - entity: sensor.cleargrass_1_co2
        name: Colored (sensor)
        style: |
          :host {
            --paper-item-icon-color: red;
          }
      - entity: sensor.cleargrass_1_co2
        name: Colored (sensor)
        style:
          hui-generic-entity-row:
            $:
              state-badge:
                $:
                  ha-icon:
                    $: |
                      ha-svg-icon {
                        color: red;
                        transform: rotate(20deg);
                      }      
      - entity: input_boolean.test_boolean
        name: Colored (input_boolean)
        style:
          hui-generic-entity-row:
            $:
              state-badge:
                $:
                  ha-icon:
                    $: |
                      ha-svg-icon {
                        color: red;
                        transform: rotate(-20deg);
                      }      
  - type: entities
    title: Common styling (full path)
    style:
      hui-sensor-entity-row:
        $:
          hui-generic-entity-row:
            $:
              state-badge:
                $:
                  ha-icon:
                    $: |
                      ha-svg-icon {
                        color: red;
                        transform: rotate(-45deg);
                      }      
    entities:
      - entity: sensor.cleargrass_1_co2
      - entity: sensor.cleargrass_1_co2

multiple-entity-row:

type: vertical-stack
title: Colored icons (diff colors)
cards:
  - type: entities
    entities:
      - type: 'custom:multiple-entity-row'
        entity: sensor.yandex_time_home_ildar
        style:
          hui-generic-entity-row:
            'div.entity:nth-child(2) state-badge':
              $:
                ha-icon:
                  $: |
                    ha-svg-icon {
                      color: green;
                      transform: rotate(180deg);
                    }
            'div.entity:nth-child(4) state-badge':
              $:
                ha-icon:
                  $: |
                    ha-svg-icon {
                      color: red;
                      transform: rotate(45deg);
                    }
            $:
              state-badge:
                $:
                  ha-icon:
                    $: |
                      ha-svg-icon {
                        color: orange;
                        transform: rotate(-45deg);
                      }
        entities:
          - entity: sensor.yandex_time_home_ildar
            attribute: jamsrate
            name: пробки
            unit: ''
          - entity: sensor.service_empty_value
            name: false
            unit: false
            icon: 'mdi:car'
          - entity: sensor.yandex_time_home_ildar
            name: на дорогу
            unit: ''
            styles:
              width: 60px
              text-align: center
          - entity: sensor.service_empty_value
            name: false
            unit: false
            icon: 'mdi:car'
            tap_action:
              action: url
              url_path: xxxcc
        name: Colored all icons
        unit: ''
        icon: 'mdi:car'
        toggle: false
        show_state: false
        state_header: ''
        secondary_info: last-changed

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

transform: rotate(-20deg)

now that might be the one reason to move from custom-ui to card-mod… Ive never been able to find a way to rotate the icons, or use any of the mdi icon helper_classes in custom-ui javascript, though it should somehow at least theoretically be possible…