This worked well for me
type: horizontal-stack
cards:
- features:
- type: light-brightness
type: tile
name: Eaves
state_content: brightness
entity: light.g089_uplights_master_bedroom
color: red
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%;
}
1 Like
@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!
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
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.
drcjb
December 15, 2024, 3:41pm
72
Dear All,
I was really pleased to find this thread which explains a great deal, but as a noob I still having problems.
I have this:
and I am trying to reduce the height of the slider bar to save some vertial space to give this:
I edited the height of the .slider in the browser developer and reduced it to 40%, which gives the screen shot above.
I used the YAML shown on this thread but nothing changes on my Tile card:
type: tile
entity: cover.ne_balcony
hide_state: true
features:
- type: cover-position
card-mod:
style:
ha-control-slider$: |
.slider {
--control-slider-border-radius: 4px !important;
height: 50% !important;
--control-slider-color: orange !important;
--control-slider-background: red !important;
.: |
ha-card {
--tile-color: green !important;
}
What did I get wrong? Any help greatly appreciated.
Many thanks - Colin
A couple of things missing here.
You need to start your navigation through the shadow-roots much higher in the tree. The elements of this tree are quite frequently changed through HA updates, so old code may no longer work. Be prepared for my solution to break at any moment.
And the height of the slider is actually set relative to the height of its container. This, along with the container padding are set as variables right at the top of the feature DOM tree. So changing just the height of the slider won’t actually reduce the height of the card overall.
I’ve got this code to work, reducing key values by 40% as in your screenshot (although your code says 50%), but it may not be the most efficient way to do it, especially as it may break easily. Maybe some CSS guru will chip in with a better solution with just using the theme variables:
card_type: tile
card_mod:
style:
hui-card-features $ div.container hui-card-feature $ hui-cover-position-card-feature $ ha-control-slider $ div.container:
div#slider.slider: |
div.slider-track-bar {
border-radius: calc(8px * 0.4) !important;
}
.: |
div#slider.slider {
--control-slider-border-radius: calc(12px * 0.4) !important;
--control-slider-color: orange !important;
--control-slider-background: red !important;
}
.: |
ha-card {
--tile-color: green !important;
}
hui-card-features {
--feature-padding: calc(12px * 0.4) 12px 12px 12px !important;
--feature-height: calc(42px * 0.4) !important;
}
--feature-height is originally hard-coded at 42px.--feature-padding is originally hard-coded at 12px, to match the padding around the icon tile and state in the top half of the card. If you just change this as a single value for the feature area of the card, the slider will be closer to the edge of the card than the icon, so I’ve just changed the top-padding - I believe CSS padding goes top-right-bottom-left when entering sequential values.
I notice that the radius of the slider handle (div.slider-track-bar) will also need to be reduced to match your new settings. This is hard-coded at 8px in proportion to the 12px which the --control-slider-border-radius was originally set at.
You can play around with all this anyway.
drcjb
December 15, 2024, 6:00pm
74
Thanks Chris,
Your code solves the slider height problem, many thanks.
But how can I get the card to shrink vertically? Or should I try to shrink the card height and the slider will shrink to match?
I thought my code addressed the height issue? Did you include the new padding values for the hui-card-features div?
If it’s not working for you, I don’t really know what to suggest, sorry.
EDIT: or is the card just expanding to fill the section? I don’t use these yet, so that seems like whole other world of CSS complication…
drcjb
December 15, 2024, 6:21pm
76
Yes the code is included and it may be a Section problem, I’ll investigate tomorrow.
if this helps, the is the structure I use for all tile card features , and neatly identifies the individual elements:
style:
hui-card-features $:
hui-card-feature $:
hui-fan-speed-card-feature $:
ha-control-slider$: |
.container {
--control-slider-border-radius: var(--ha-card-border-radius);
}
.slider .slider-track-bar {
border-radius: var(--ha-card-border-radius) !important;
opacity: 0.8
}
.slider .slider-track-bar::after {
border-radius: var(--ha-card-border-radius) !important;
}
.slider {
height: 10px !important;
--control-slider-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{%- endif %}
{%- else %} var(--state-inactive-color)
{%- endif %};
--control-slider-background:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{%- endif %}
{%- else %} var(--state-inactive-color)
{%- endif %};
}
Doesn’t this value change depending on the specific feature and entity on the card?
I don’t suppose you have a full list of the ones you use currently? (I guess I can just look them up in the browser inspector)
drcjb
December 16, 2024, 6:34pm
79
Thanks Marius, I will try to understand all of that!
Chris, I tried your code in a dashboard view based on masonry and the Tile card height reduces, the card is wider as less constrained, see below:
So you are correct in suggesting that the Sections structure stops the card from shrinking, even with the reduced slider.
I have just had a look in the Inspector and found if I change some parameters, the card shrinks, then 2 seconds later goes back to being 2 rows (its default size). I then (talk about trail and error) tried to find a variable to change and found var(–ha-section-grid-row-height, 56px) and when change to 36px the Tile height is reduced and remains stable. Below is the screenshot.
Now is there any way in card-mod to change that variable? I will have to test the effect of adding other Tile cards at some point!
Many thanks - Colin
I guess you didn’t check the link I posted there….
1 Like
Sorry, my bad. Really helpful link - many thanks.
1 Like
It is silly though indeed, +1 to that, the way these features are coded.
