@LiQuid_cOOled thanks so much for your help. You seem to be much better at CSS than me. I never learned it properly.
I would like to use this in the new dashboard sections.
Here is my code to replicate on a new dashbboard:
- type: sections
max_columns: 4
title: slider
path: slider
visible:
- user: 3041326924d94e72b1278f029b152ea6
sections:
- type: grid
cards:
- type: horizontal-stack
cards:
- features:
- type: light-brightness
type: tile
name: Eaves
state_content: brightness
entity: light.g093_roof_eaves_lights_master_bedroom
tap_action:
action: toggle
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
--control-slider-border-radius: 12px !important;
height: 100% !important;
width: 50% !important;
#--handle-size: 0px;
--control-slider-color: red !important;
--control-slider-background: red !important;
margin-top: -50px;
margin-left: 50%;
}
.: |
ha-card {
--tile-color: red !important;
}
- features:
- type: light-brightness
type: tile
name: Eaves
state_content: brightness
entity: light.g093_roof_eaves_lights_master_bedroom
tap_action:
action: toggle
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
--control-slider-border-radius: 12px !important;
height: 100% !important;
width: 50% !important;
#--handle-size: 0px;
--control-slider-color: red !important;
--control-slider-background: red !important;
margin-top: -50px;
margin-left: 50%;
}
.: |
ha-card {
--tile-color: red !important;
}
you can see the issues that I have in the above screenshot.
In an ideal case scenario I would like to use the tile card as a “compact” tile card (ie smaller version to fit into the grid) with the slider next to it.
See how the fans are small nice cards so just with the slider in it.
The other option (which you almost got perfect) is the bigger/wider card where I had to use the horizontal stack nesting but there the mouse pointer does not work in the tile card in some areas over icon/text (which also highlights the background of the card) and it would be nice to actually not nest it into a horizontal card if possible. .
Lastly - when you move the slider right and left, the percentage notification on top of the slider seems to move way over to the left when you get to <10% or so - it seems to use the very left card boarder as reference.
I am really trying to use the new section dashboard and make things as compact as possible
Once again, thanks for your help!
Martin
Let me see what I can do… Sections is going to be a great addition, but currently customizations are limited by the available layout types used within the Sections.
Thanks.
The mouse situation and the % notification is easily resolved by modifying the container instead of slider.
type: horizontal-stack
cards:
- features:
- type: light-brightness
type: tile
name: Eaves
state_content: brightness
entity: light.g093_roof_eaves_lights_master_bedroom
tap_action:
action: toggle
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.container {
--control-slider-border-radius: 50px !important;
height: 100% !important;
width: 50% !important;
--control-slider-color: red !important;
--control-slider-background: red !important;
margin-top: -50px;
margin-left: 50%;
opacity: 0.3; /* Add this line for 30% transparency */
}
.: |
ha-card {
--tile-color: red !important;
}
the only thing that I have not figured out is how to do it without the horizontal stack for the bigger card, and how to fix it for the smaller card.
Like this
but you will still need to use the horizontal stack.
As soon as you add the feature it locks in the larger card size in Sections
type: horizontal-stack
cards:
- type: tile
name: Eaves
state_content: brightness
entity: light.pc_lights
color: red
tap_action:
action: toggle
features:
- type: light-brightness
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
--control-slider-border-radius: 12px !important;
height: 100% !important;
width: 42% !important;
--handle-size: 0px;
--control-slider-color: red !important;
--control-slider-background: red !important;
margin-top: -50px;
margin-left: 60%;
}
.: |
ha-card {
height: 65px !important;
- type: tile
name: Eaves
state_content: brightness
entity: light.pc_lights
color: red
tap_action:
action: toggle
features:
- type: light-brightness
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
--control-slider-border-radius: 12px !important;
height: 100% !important;
width: 42% !important;
--handle-size: 0px;
--control-slider-color: red !important;
--control-slider-background: red !important;
margin-top: -50px;
margin-left: 60%;
}
.: |
ha-card {
height: 65px !important;
}
thanks - that is amazing. much appreciated.
Is there a way to “templatise” this like with the custom button?
then I could create a global template for this behaviour and add to those cards where I want to use this?
hm…looks like there is still an issue with the height of the card. although the slider height is correct, there is still some space below which corresponds with the max width of the normal tile card.
Any ideas?
Here the current code base:
views:
- type: sections
max_columns: 4
title: slider
path: slider
visible:
- user: 3041326924d94e72b1278f029b152ea6
sections:
- type: grid
cards:
- type: horizontal-stack
cards:
- features:
- type: light-brightness
type: tile
name: Eaves
state_content: brightness
entity: light.g093_roof_eaves_lights_master_bedroom
tap_action:
action: toggle
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.container {
#--control-slider-border-radius: 12px !important;
--control-slider-border-radius: 50px !important;
height: 100% !important;
width: 50% !important;
#--handle-size: 0px;
--control-slider-color: red !important;
--control-slider-background: red !important;
margin-top: -50px;
margin-left: 50%;
opacity: 0.3; /* Add this line for 30% transparency */
}
.: |
ha-card {
--tile-color: red !important;
}
- features:
- type: light-brightness
type: tile
name: Eaves
state_content: brightness
entity: light.g093_roof_eaves_lights_master_bedroom
tap_action:
action: toggle
color: pink
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.container {
--control-slider-border-radius: 12px !important;
height: 100% !important;
width: 50% !important;
#--handle-size: 0px;
#--control-slider-color: red !important;
#--control-slider-background: red !important;
margin-top: -50px;
margin-left: 50%;
}
.: |
ha-card {
#--tile-color: red !important;
height: 65px !important;
}
- features:
- type: light-brightness
type: tile
name: Eaves
state_content: brightness
entity: light.g093_roof_eaves_lights_master_bedroom
tap_action:
action: toggle
color: pink
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.container {
--control-slider-border-radius: 12px !important;
height: 100% !important;
width: 50% !important;
#--handle-size: 0px;
#--control-slider-color: red !important;
#--control-slider-background: red !important;
margin-top: -50px;
margin-left: 50%;
}
.: |
ha-card {
#--tile-color: red !important;
height: 65px !important;
}
- type: custom:mushroom-light-card
entity: light.g093_roof_eaves_lights_master_bedroom
Thanks
Martin
Copy this code and paste it in one of the squares
type: horizontal-stack
cards:
- type: tile
entity: light.g093_roof_eaves_lights_master_bedroom
features:
- type: light-brightness
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.container {
#--control-slider-border-radius: 12px !important;
--control-slider-border-radius: 50px !important;
height: 100% !important;
width: 50% !important;
#--handle-size: 0px;
--control-slider-color: red !important;
--control-slider-background: red !important;
margin-top: -50px;
margin-left: 50%;
opacity: 0.3; /* Add this line for 30% transparency */
}
- type: tile
entity: light.g093_roof_eaves_lights_master_bedroom
features:
- type: light-brightness
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.container {
--control-slider-border-radius: 12px !important;
--control-slider-border-radius: 50px !important;
height: 100% !important;
width: 50% !important;
#--handle-size: 0px;
--control-slider-color: red !important;
--control-slider-background: red !important;
margin-top: -50px;
margin-left: 50%;
opacity: 0.3; /* Add this line for 30% transparency */
}
You should see this with no space below
Entire Dashboard code… You need two horizontal stacks
type: grid
cards:
- type: horizontal-stack
cards:
- features:
- type: light-brightness
type: tile
name: Eaves
state_content: brightness
entity: light.g093_roof_eaves_lights_master_bedroom
tap_action:
action: toggle
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.container {
#--control-slider-border-radius: 12px !important;
--control-slider-border-radius: 50px !important;
height: 100% !important;
width: 50% !important;
#--handle-size: 0px;
--control-slider-color: red !important;
--control-slider-background: red !important;
margin-top: -50px;
margin-left: 50%;
opacity: 0.3; /* Add this line for 30% transparency */
}
.: |
ha-card {
--tile-color: red !important;
}
- features:
- type: light-brightness
type: tile
name: Eaves
state_content: brightness
entity: light.g093_roof_eaves_lights_master_bedroom
tap_action:
action: toggle
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.container {
#--control-slider-border-radius: 12px !important;
--control-slider-border-radius: 50px !important;
height: 100% !important;
width: 50% !important;
#--handle-size: 0px;
--control-slider-color: red !important;
--control-slider-background: red !important;
margin-top: -50px;
margin-left: 50%;
opacity: 0.3; /* Add this line for 30% transparency */
}
.: |
ha-card {
--tile-color: red !important;
}
- type: horizontal-stack
cards:
- features:
- type: light-brightness
type: tile
name: Eaves
state_content: brightness
entity: light.g093_roof_eaves_lights_master_bedroom
tap_action:
action: toggle
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.container {
#--control-slider-border-radius: 12px !important;
--control-slider-border-radius: 50px !important;
height: 100% !important;
width: 50% !important;
#--handle-size: 0px;
--control-slider-color: red !important;
--control-slider-background: red !important;
margin-top: -50px;
margin-left: 50%;
opacity: 0.3; /* Add this line for 30% transparency */
}
.: |
ha-card {
--tile-color: red !important;
}
- features:
- type: light-brightness
type: tile
name: Eaves
state_content: brightness
entity: light.g093_roof_eaves_lights_master_bedroom
tap_action:
action: toggle
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.container {
#--control-slider-border-radius: 12px !important;
--control-slider-border-radius: 50px !important;
height: 100% !important;
width: 50% !important;
#--handle-size: 0px;
--control-slider-color: red !important;
--control-slider-background: red !important;
margin-top: -50px;
margin-left: 50%;
opacity: 0.3; /* Add this line for 30% transparency */
}
.: |
ha-card {
--tile-color: red !important;
}
Thanks - very neat solution so basically stick to a simple tile card with card_mod but put two next to each other in a horizontal stack. thanks for that!
I suppose over time the tile card in the grid view will develop further to allow for more modifications / compact cards.
