Yes, Either by using Card-Mod, or Action_button Mode: Custom
Everything explained in the Documentation of the Card ![]()
thank you very much
Did you try to do what you had in mind? I’m interested to use Deejayfool/hass-shutter-card as you done, for example hiding the default buttons. If yes, could you share the code you used for?
Similar to this?
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:shutter-card
entities:
- entity: cover.bed_curtains
shutter_width_px: 100
always_percentage: false
name: Bed
card_mod:
style: |
.sc-shutter-top {
width: 100px;
}
.sc-shutter-position {
background: none !important;}
.sc-shutter-buttons {
display: none !important;}
- type: custom:shutter-card
entities:
- entity: cover.tv_curtains
shutter_width_px: 100
always_percentage: false
name: PC
- type: custom:shutter-card
entities:
- entity: cover.pc_curtains
shutter_width_px: 100
always_percentage: false
name: TV
card_mod:
style: |
ha-card {
padding-left: 10px;}
Thank you. It works. Now the next step is to create buttons card to open, close, stop and put it at a desired percentage.
I need to to study the button-card tap_action entry how it works.
Is this card still in development? I’m looking for a way to disable the slider function if the entity is off, since im turning lights on all the time by mistake when scrolling down the page in the HA app. Quite anoying
Could you share the code for those amazing and realistics cover sliders? Thank you.
@Juanpermon
Sure. (Thought I would post in the “my-slider” thread but couldn’t find one…)
Sample for a single cover below. Glad you like it.
My final version is for 3 covers + extra buttons to control all covers at once.
In order to optimize screen estate I added a custom:state-switch to show/hide/auto-hide after timeout but code is much longer. I will (eventually) replace the generic outdoor shots with the real thing.
I suggest you open a new thread for further questions/share results so it doesn’t hijack the Slider button card thread. Cheers.
- type: custom:my-slider-v2
entity: cover.rollershade3
vertical: true
styles:
card:
- height: 25rem
- width: 100%
- left: 3%
container:
- width: 102%
- height: 102%
- position: relative
- overflow: hidden
- border-radius: 5px
- background: null
- opacity: 100%
track:
- width: 100%
- height: 100%
- position: relative
- background: transparent
progress:
- height: 100%
- background: url('/local/dashboard/sliders/roller_blind.jpg')
- background-position: top
- background-repeat: no-repeat
- background-size: 95% 97%
- position: absolute
- width: 100%
- left: 0px
thumb:
- height: 100%
- background: black
- position: absolute
- left: 0px
- width: 0px
card_mod:
style: |
ha-card {
background: url('/local/dashboard/sliders/window_outdoor_view.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
Edit: I solved using bubble button card and adding a sub button
I’m using this card to command my speakers.
I’d like the icon to give me a selection of various sources (I think I can do it with input select next), but what I need is having a reference of what source (from a dropdown list) is actually associated to the speaker.
Is there a way to add text from the state of the dropdown list at the end of the name?
Hello, I’m trying to replicate the looks and function of HA entity dialoge sliders for covers:
Is this possible with this card? Meaning can I give it a “handle” that I can “grab” like with the dialoge sliders? And can I give the left slider that cool looking venetian blinds background?
Thanks a lot!
Solution: How to create Slider Button Cards inside Auto-Entities that use filters
I searched a ton but did not find anyone post use with Auto-Entities Filter cards. It was not intuitive (not much with dashboard cards is!) and Claude & ChatGPT didnt know either.
Hope this helps others (wish people would post more code and screenshots!)
If you change the columns to a different number it will change the card sizes, etc. you can also use vertical-stack or other card types in place of grid.
type: custom:auto-entities
show_empty: false
card:
type: grid
columns: 1
square: false
card_param: cards
filter:
include:
- domain: light
name: "*RGB*"
options:
type: custom:slider-button-card
compact: true
exclude: []
I’ve had the same problem…the solution I found was to add “card_mod” before the “style”…then it worked for me. (given you have installed card_mod). Here is a working example:
card_mod:
style: |
:host {
--slider-color: rgba(50, 205, 50, 1) !important;
}
How to make the background transparent?
I have tried multiple card-mod settings and no matter what I try, it never removes the background color. Here's some screenshots showing the results trying the setting...
these do not work
--ha-card-background: none
--ha-card-background: transparent
setting a specific color works...
--ha-card-background: black
Try some of this, thou you could maybe also use a theme variable
Not sure which part you want transparent, i have all my card background set as transparent in Theme
If it's the Slider, it's another story.
Use Inspect
something like ha-card div.button --slider-color: transparent;
slider:
direction: left-right
background: transparent






