šŸ”¹ Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
3825

This is because .info and even more .primary are not at the top level of the DOM query.

image

And Iā€™d love someone to explain how this works because it is 6 days that Iā€™m struggling with almost the same issue with the same card but for .shape under ha-tile-icon of icon-container.

3826

Same as for all other shadow roots most probably. As in every other example with shadow root in this thread. Didnā€™t use this card, but without test:

card_mod:
  style:
    ha-tile-info$: |
      .primary { font-size: 20px !important; }
1 Like
3827

Unfortunately donā€™t work for me :frowning:

3828

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

3830

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!!

3831

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; }
1 Like
3832

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

3833

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.

3834

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

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

3835

Anyone? Surely this is possible to do somehow?

3836

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.

1 Like
3837

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?

3838

Try this

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

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

3840

Thanks, that worked.

3841

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.

app-header
app-header1808Ɨ1256 470 KB

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

3842

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

3843

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 :confused:
tried to debug on CSS and the height is working when applying on img, but how can I do it on card-mod?
image
image

image
image909Ɨ439 85.2 KB

3844

ha-card { height: 100px !important }

3845

loool what is the point of the ā€œimportantā€???
hahaha

I would never figure it outā€¦

thanks bro!