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

Can you use triple backticks instead of single ones?

Sorry, apparently I was not paying close enough attention to that warning that popped up. Here ya go:

type: light
entity: light.kitchen_lights
style: |
  ha-card {
    --name-font-size: 10px;
  }

What I’m actually trying to do is shrink everything on the light card so that it is roughly the size of a custom button card, but I’m unsure if I need to do that piecemeal or if it can be done with an overall piece of code.

Actually, you can try something like this:


Cannot check it with light since I do not have any lights so far.

Is it possible to adjust the card size with card mod? Just installed the card mod but still trying to figure out how to adjust the card size.

Thanks in advance.

Styling "mini-graph-card":

изображение

type: entities
entities:
  - entity: sun.sun
title: height
style: |
  ha-card {
    height: 300px !important;
  }

изображение

type: entities
entities:
  - entity: sun.sun
title: height
style: |
  ha-card {
    height: 90px !important;
  }

I have a light card that capable of brightness, but I don’t need the control of brightness, how to hide the big circle that adjust brightness in the light card?
image

If you’ll never use it, I think you can remove it via the customization panel by setting the supported stuff to 0.

Sorry I should be more clear, I mean I don’t adjust the brightness for this light in this card. It is in the first page of lovelace ui that I used it to quickly turn stuff on/off. I also have it configured in another page so I can adjustment brightness over there.

round-slider {
  visibility: hidden !important;
}
1 Like

works great! :+1::+1::+1:

Hi , i am using homekit button , but when i use different cards
if i put :host nothing happens.
i am trying to change the background and increase fonts , but no luck.
Any idea ?

                      - card: 'custom:upcoming-media-card'
                        wider: true
                        higher: true
                        widerSize: 2
                        higherSize: 2
                        noPadding: true
                        cardOptions:
                            entity: sensor.recently_added_movies
                            icon: 'mdi:kodi'
                            name: New movies
                            image_style: fanart   
                          
                        cardStyle: |
                          ha-card {
                              padding: 5px!important;
                              display: flex!important;
                              flex-direction: column!important;
                              background: transparent!important;
                              box-shadow: none!important;
                              border-radius:0!important;
                              background: var( --ha-card-background, #fff0 );
                          }                                
                          .rece_line0_fanart {
                              font-size: 25px;
                          }      

Why do you think it’s cardStyle? It’s documented that you use style, not cardStyle.

following git for that card if i well understood @DBuit , made that instead of style you use cardstyle.
that’s why. but i might be wrong

You don’t need card-mod to apply cardStyle. It’s built in to the custom card. You can also use card-mod with style instead.

Thanks , and sorry if i ask , how do you think my code would be changed to get a transparent background ?

I’ve never used that card. Can you provide me with a mockup?

as you can see if i change host the bkgnd becomes transparent

      - type: "custom:homekit-card"
        home: false
        title: "Home"
        useBrightness: false
        useTemperature: false
        titleColor: "#FFF"
        enableColumns: true
        statePositionTop: true
        style: |
          :host {
            --tile-background: rgba(192,192,192,0.1);
            --tile-border-radius: 12px;
            --tile-width: 85px;
            --tile-height: 90px;
            --tile-on-background: rgba(255, 255, 255, 0.3);
          
            --tile-name-text-color: rgba(0, 0, 0, 0.4);
            --tile-on-name-text-color: rgba(0, 0, 0, 1);
          
            --tile-state-text-color: rgba(0, 0, 0, 0.4);
            --tile-on-state-text-color: rgba(0, 0, 0, 1);
          
            --tile-state-changed-text-color: rgb(134, 134, 134);
            --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
          
            --tile-value-text-color: rgba(255, 0, 0, 1);
          
          
            --tile-icon-color: rgba(0, 0, 0, 0.3);
            --tile-on-icon-color: #f7d959;
          
          
            --tile-width-mobile: 90px;
            --tile-height-mobile: 90px;
    
            --min-header-height: 150px;
    
            --tile-icon-size: 30px;
    
            --tile-image-radius: 100%
    
            --slider-width: 120px;
            --slider-height: 120px;
          }   


        rows:
          - row: 1
            columns:
            - column: 1
              tileOnRow: 2
              entities:              
                - title: New Movies
                  entities:       
                      - card: 'custom:upcoming-media-card'
                        wider: true
                        higher: true
                        widerSize: 2
                        higherSize: 2
                        noPadding: true
                        cardOptions:
                            entity: sensor.recently_added_movies
                            icon: 'mdi:kodi'
                            name: New movies
                            image_style: fanart   
                          
                        cardStyle: |
                          ha-card {
                              padding: 5px!important;
                              display: flex!important;
                              flex-direction: column!important;
                              background: transparent!important;
                              box-shadow: none!important;
                              border-radius:0!important;
                              background: var( --ha-card-background, #fff0 );
                          }                                
                          .rece_line0_fanart {
                              font-size: 25px;
                          }     

Try using style instead of cardStyle, and just so it’s visible, instead of var( --ha-card-background, #fff0 ) use red !important