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

marcorm69 · November 15, 2022, 6:29pm

Unfortunately don’t work for me

arganto · November 15, 2022, 8:12pm

Then you are not using, what I have posted. Because of your feedback I have tested it now and as assumed, it is working.

marcorm69 · November 16, 2022, 6:37am

I am sorry! You’re right, I put it in the wrong place!
In card style and not in card_mod->style!

- type: tile
  entity: person.marco
  icon: mdi:account
  show_entity_picture: true
 # This is correct
  card_mod:
      ha-tile-info$: |
        .primary { font-size: 20px!Important; }
  style: |
# This is wrong
#    ha-tile-info$: |
#      .primary { font-size: 20px!Important; }
    ha-card {
      background-color: #383838;
      border: 1px solid;
      border-color: #000000;
      border-radius: 5px;
    }

Thank you!!

arganto · November 16, 2022, 6:44am

TBH, where is the style coming from? And why did you again not use, what I have posted? There should be (better compability) a style below card_mod. See my example.

And of course, you can combine both styles, the one for root and the one for shadow root. See example in this thread. One questions regarding this is only some posts above yours.

This way:

card_mod:
  style:
    .: |
      ha-card {
        background-color: #383838;
        border: 1px solid;
        border-color: #000000;
        border-radius: 5px;
      }
    ha-tile-info$: |
      .primary { font-size: 20px !important; }

marcorm69 · November 16, 2022, 6:54am

I usually hardly use card_mod if I don’t need it.
Non-standard cards almost all have a “style” section that works well.
In this case, yes, I agree, it is better to “merge” everything

remmob · November 16, 2022, 9:13am

Hi,

I’m trying to set the row height of a particular entities card row, but I think don’t use the right selector.

- type: entities
          entities:
            - type: custom:template-entity-row
              name: "De temperaturen van de laatste 24 uur:" 
              card_mod:
                style: |
                  :wrapper {
                    min-height: 25px;
                  }
                  state-badge {
                    display: none;
                  }

If I set the min-heigt property in chroom dev tools the height changes.
the state-bage style is working.

eggman · November 16, 2022, 9:27am

Go to this post, scroll down a bit and you see a section on managing entity card row height.

Card-mod - Add css styles to any lovelace card - Share your Projects! / Dashboards & Frontend - Home Assistant Community (home-assistant.io)

TimoJ · November 16, 2022, 9:31am

Anyone? Surely this is possible to do somehow?

arganto · November 16, 2022, 9:41am

Possible with card_mod-theme-styling. There is another thread for this, where you can find examples. And you can read this here

e.g.

  card-mod-theme: noctis-grey

  card-mod-more-info-yaml: |

    .: |
      ha-dialog {
        --mdc-dialog-min-width: 1000px !important;
      }

But as said, somehow ot in this thread. So if you have problems with this, try to move to the other thread with further questions.

remmob · November 16, 2022, 2:03pm

Hi,

Trying to get this to work for my “custom:template-entity-row”

- type: custom:template-entity-row
  name: "Maximum:"
  state: " {{ state_attr ('sensor.average_temperature_entree', 'max_value')}} ºC"
  card_mod:
    style: |
       state-badge {
         display: none;
       }
       hui-generic-entity-row {
         height: 25px;
        }

The state-bage part is working, can’t get the hight set. What i’m missing?

eggman · November 16, 2022, 3:06pm

Try this

        card_mod:
          style: |
            state-badge {
              display: none;
            }
        
            div#wrapper {
              height: 25px;
              min-height: 25px;
            }

Ildar_Gabdullin · November 16, 2022, 3:25pm

You are trying to apply a style from card X to card Y.

remmob · November 16, 2022, 4:00pm

Thanks, that worked.

phlepper · November 16, 2022, 4:58pm

Sorry, originally posted this in the middle of all the replies…

I would like to completely remove the app header for a tablet display. I see the example provided in the cookbook for setting app-header display to ‘none’, but that just makes the header disappear, but doesn’t move the rest of the content “up” the page. There is a padding-top of 56px in the example below that needs to be zero.

I’m not very good with CSS, so I’m not sure how this would be accomplished with card-mod (or if it even can)?

How would I specify a change to the padding for that particular div as the id “contentContainer” is not unique. Do I somehow specify the hierarchy of elements? What would that look like in my theme?

Thanks for any pointers,
Paul

phlepper · November 16, 2022, 5:31pm

Nevermind, I figured it out.

I was using card-mod-root-yaml in my theme, but someone said I should use just card-mod-root and that worked. I was using card-mod-root-yaml based on this example on the github page.

So adding the following to the bottom of my theme (actually Caule’s theme), works

  card-mod-theme: "Caule Light Blue (noheader)"
  # Header
  card-mod-root: |
    app-toolbar {
      display: none;
      }

Sorry for the confusion…
Paul

alexandrechoske · November 18, 2022, 10:00pm

Hi can anyone help me sizing this image?
it is a picture elements and I wanted to make if smaller in “height”
it is not working at all
tried to debug on CSS and the height is working when applying on img, but how can I do it on card-mod?

Ildar_Gabdullin · November 18, 2022, 10:21pm

ha-card { height: 100px !important }

alexandrechoske · November 18, 2022, 10:36pm

loool what is the point of the “important”???
hahaha

I would never figure it out…

thanks bro!

Olivier1974 · November 19, 2022, 4:19pm

The !important rule in CSS overrides previous styling rules.
So your style will be used even if it was defined before, otherwise, it is ignored.

chedda61 · November 21, 2022, 8:59pm

Hi,
anybody know how I can style the text and margin of an input_button as the head of a fold-entity-row?
I want to change ‘PRESS’ to ‘Start’ and move it to the left. Using :host will only effect everything else in the head (icon, label, arrow)

  - type: custom:fold-entity-row
    head: input_button.saugen
    entities:
      - input_select.rooms
      - input_select.robo_fan
      - entity: input_select.robo_mop
        style: |
          :host {
            --mdc-select-ink-color: {{ 'white' if is_state('binary_sensor.roborock_vacuum_a15_mop_attached', 'on') else 'grey' }};
            pointer-events: {{ 'x' if is_state('binary_sensor.roborock_vacuum_a15_mop_attached', 'on') else 'none' }};
          }