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