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

color: green

The formula is ok but the css mod I’m lost😉

Change color: blue to something with filter. First of all, add an invert(1). Then, try playing around with brightness and saturate. Finally, to set the color, use hue-rotate. Try googling “css filter” if you’re lost.
And you made a typo in yellow.

Does anyone happen to know if I am using the correct name for the word Fan? I can’t seem to make it do anything. I would like to hide the word Fan.

Fan

Different names I have tried.

info.pointer.text-content

'#info.pointer.text-content div'

.info

It’s probably in a shadow root.

Unfortunately nothing happens

test with brightness, invert and saturate. Is the formatting good ?

                - attribute: BMI
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/b_m_i.webp
                  name: IMC
                  style:
                    hui-image:
                      $: |
                        #image {
                          filter: hue-rotate(10deg);
                        }

Otherwise I found an easy site for the conversion https://codepen.io/sosuke/pen/Pjoqqp
exemple:
green #008000
filter: invert(20%) sepia(84%) saturate(4295%) hue-rotate(96deg) brightness(100%) contrast(107%);

Nice. You might want to use a better shade of colors that isn’t so saturated, but if this works, then that’s great.

on the other hand no it does not work on my image. I think there is still an error on the side of hui-image

What do you mean?

The image remains black.

               - attribute: BMI
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/b_m_i.webp
                  name: IMC
                  style:
                    hui-image:
                      $: |
                        #image {
                          filter: invert(8%) sepia(100%) saturate(7192%) hue-rotate(246deg) brightness(96%) contraste(144%);
                        }
                  type: attribute
cards:
  - cards:
      - elements:
          - entity: bodymiscale.aurelien
            attribute: weight
            style:
              color: 'rgb(3, 222, 244)'
              left: 42%
              opacity: 1
              top: 15%
              transform: 'scale(2,2)'
            type: state-label
          - entity: input_boolean.bodyscale_aurelien_info_toggle
            image: /local/bodyscale/info-off.png
            state_filter:
              'off': brightness(100%) saturate(1)
              'on': brightness(90%) saturate(1)
            state_image:
              'on': /local/bodyscale/information.png
            style:
              bottom: 5%
              left: 20%
              transform: 'translate(240%, 25%) scale(0.7, 0.7)'
            tap_action:
              action: toggle
            title: Information
            type: image
        image: /local/bodyscale/device_scale.webp
        type: picture-elements
      - card:
          entities:
            - entities:
                - attribute: Body fat
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/fat.webp
                  name: Graisse corporelle
                  type: attribute
                - attribute: Water
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/water.webp
                  name: Eau
                  type: attribute
                - attribute: Visceral fat
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/viscera.webp
                  name: Graisse viscérale
                  type: attribute
                - attribute: BMI
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/b_m_i.webp
                  name: IMC
                  style:
                    hui-image:
                      $: |
                        #image {
                          filter: invert(8%) sepia(100%) saturate(7192%) hue-rotate(246deg) brightness(96%) contraste(144%);
                        }
                  type: attribute
                - attribute: Muscle mass
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/muscle.webp
                  name: Muscle
                  type: attribute
                - attribute: Protein
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/protein.webp
                  name: Protéine
                  type: attribute
                - attribute: Basal metabolism
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/metabolize.webp
                  name: Métabolisme de base
                  type: attribute
                - attribute: Bone mass
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/bone.webp
                  name: Masse osseuse
                  type: attribute
                - attribute: Metabolic age
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/body_age_icon.webp
                  name: Age corporel
                  type: attribute
                - attribute: Ideal
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/weight_icon.webp
                  name: Poids idéal
                  type: attribute
              head: bodymiscale.aurelien
              type: 'custom:fold-entity-row'
          show_header_toggle: false
          title: Information
          type: entities
        conditions:
          - entity: input_boolean.bodyscale_aurelien_info_toggle
            state: 'on'
        type: conditional
    type: vertical-stack
type: vertical-stack

CSS isn’t compatible with accent marks.

<state-badge class="pointer" tabindex="0" style="background-image: url(&quot;MYADRESS/local/bodyscale/b_m_i.webp&quot;);"></state-badge>

Isn’t my problem here? state-badge?

It could be because contrast is spelled without an e, but you could also take a look at the debugging tips in the Dom navigation section of the readme https://github.com/thomasloven/lovelace-card-mod#dom-navigation to see if the styles are applied to the right element.


element.style {
    background-image: url(MYADRESSE/local/bodyscale/b_m_i.webp);
    filter: invert(8%) sepia(100%) saturate(7192%) hue-rotate(
246deg
) brightness(96%) contrast(144%);
}

In manual mode I manage to change the color

long had 2 buttons in an entities card, but was pointed today to the option for buttons in the footer. Which works fine, if only for the size of the buttons in the footer. Would card-mod be able to resize those a bit?
This is what they look like compared:

with the yaml:

  - type: entities
    title: Tunes
    entities:
      - input_select.tune
      - input_select.tune_player
      - input_number.tune_volume
      - type: divider
      - type: custom:hui-element
        card_type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: input_boolean.loop_tune
            show_name: false
            aspect_ratio: 3/1
            style: |
              ha-card {
                box-shadow: none;
              }
          - type: custom:button-card
            entity: script.play_tune
            show_name: false
            aspect_ratio: 3/1
            style: |
              ha-card {
                box-shadow: none;
              }
            icon: >
              [[[ if (entity.state == 'on') return 'mdi:stop';
                  return 'mdi:play'; ]]]
            tap_action:
              action: call-service
              service: script.toggle
              service_data:
                entity_id: entity
              haptic: light
            hold_action:
              action: more-info
              haptic: light
    footer:
      type: buttons
      entities:
        - entity: input_boolean.loop_tune
        - entity: script.play_tune

Not sure if I understand you properly…
Please correct me:

  1. You need 2 buttons located horizontally on the card’s bottom.
  2. You used 'custom:button-card' first.
  3. Then you decided to use stock buttons in a card’s footer.
  4. But these buttons in a card’s footer look smaller.
  5. Task: resize buttons in a card’s footer.
    Right?

Tried to simulate your case.
Started with a more easy task - changing a color.
Then found a problem or a bug.
Have a look at that code:

type: vertical-stack
cards:
  - type: entities
    style:
      .header-footer.footer:
        hui-buttons-header-footer:
          $:
            hui-buttons-base:
              $:
                'div:nth-child(2)':
                  state-badge:
                    $:
                      ha-icon:
                        $: |
                          ha-svg-icon {
                            color: red;
                          }    
    entities:
      - sun.sun
      - type: divider
    footer:
      type: buttons
      entities:
        - entity: sun.sun
        - entity: sun.sun
  - type: entities
    entities:
      - sun.sun
      - type: divider
    footer:
      type: buttons
      entities:
        - entity: sun.sun
        - entity: sun.sun

изображение
Do not know why - but card-mod causes a misplacement for buttons…

Update: The initial task:

  - type: entities
    style: |
      .header-footer.footer {
        --mdc-icon-size: 60px;
        height: 60px;
      }    

изображение

2 Likes

nice! can even do with only:

    style: |
      .header-footer.footer {
        --mdc-icon-size: 40px;
      }   

needs some padding from the bottom though:


btw, never realized we had tooltips on those

    style: |
      .header-footer.footer {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        --mdc-icon-size: 40px;
      }    

Update: yes, you can remove "!important"

sorry, that was too obvious… my bad.

    style: |
      .header-footer.footer {
          --mdc-icon-size: 30px;
          padding-bottom: 10px;
          }

is perfect! Why would we need that !important ? even after reading When Using !important is The Right Choice | CSS-Tricks - CSS-Tricks I am not sure :wink: Since it works in all of my browsers without that.

Usually I add this “!important” and then - if styling OK - try to remove it.
Now was in a hurry and did not test the case w/o “important”.

thanks, will keep an eye on it, to see if I might need it after all.