haha i dont know why it quoted that. I meant the entire original post with the guide
That makes more sense 
haha or i have incredibly low thresholds for being impressed 
honestly that was my first thought. 
Hi. Please excuse the late response on my part.
Unfortunately, the thing has been settled for me. I had tried around a bit last night. Unfortunately, the one I intended will not work, because (Mushroom) templates do not update every second and thus cannot display the continuous expiration of the timer. You can’t access any direct attribute, but would have to calculate this via template. As a result, it only updates every minute or when you edit the card.
For the time being, I have taken a native HA card (Tile Card), which at least shows the elapsing time directly. Unfortunately, I have no chance to tap into this process directly, so that a “circular progress bar” is not feasible for me here.
Have a nice weekend.
Hi guys,
I am trying to optimize the styling of my number card - I figured out most of the stuff on my own, but I am not sure how to change the size of the “name container” / allow the slider to have more room in the card in horizontal mode. I seems that it shares the space between name and slider 50/50 - I would want to have something like a 30/70 ratio. Thanks for your help!
I’m using mushroom-template-card i can’t understand how i can change the size of a given icon ? for example icon: mdi:toggle-switch
there is an option for color, but how the size is changed ? i tried many options via
card_mod:
style:
but none of them worked
never used a template card before, but did you try "mushroom-shape-icon$: .shape{–icon-symbol-size} just like in my screenshot above your post? At least this did work for the number card
1 Like
Like this…
card_mod:
style: |
ha-state-icon {
--icon-symbol-size: 50px;
}
1 Like
I use mushroom-chips-card and mushroom-template-card how can I reduce the height and width of the space used by these cards, I use a transparent background and I want to reduce the distance between the cards and not to increase the outer border
I think I need to put some property here, but which one ?
card_mod:
style: |
ha-card {
Please provide your card code…
type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 100px auto 120px
margin: "-15px -0px -20px -12px;"
grid-row-gap: 0px
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: sensor1
- type: custom:mushroom-chips-card
chips:
- type: template
content: sensor2
- type: custom:mushroom-chips-card
chips:
- type: template
content: sensor3
card_mod:
style: |
ha-card {
position: relative;
background: transparent;
border-width: 0px;
- type: custom:vertical-stack-in-card
cards: []
card_mod:
style: |
ha-card {
position: relative;
background: transparent;
border-width: 0px;
- type: custom:vertical-stack-in-card
cards: []
card_mod:
style: |
ha-card {
position: relative;
background: transparent;
border-width: 0px;
}
card_mod:
style:
.: |
ha-card {
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(5px) !important; /* Для Safari */
border: 1px solid var(--ha-card-border-color, rgba(var(--rgb-primary-text-color),0.1)) !important;
background-color: rgba(var(--rgb-card-background-color), 0.5) !important;
--primary-text-color: rgba(150,150,150,0.8);
}
ha-card:hover {
border: 1px solid var(--ha-card-border-color, rgba(var(--rgb-primary-text-color),0.2)) !important;
}
card_mod:
style:
.: |
ha-card {
background:
linear-gradient(90deg, rgba(3, 150, 255, 0.5) 95px, rgba(3, 150, 255, 0.1) 0.1%);
background-clip: padding-box;
}
I need to remove the spaces between sensor1, sensor2, sensor3.
You have some mod settings that may or may not be neceesary, but this will handle your inquiry
type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 100px auto 120px
margin: 0 0 0 0
grid-row-gap: 0px
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: sensor1
card_mod:
style: |
ha-card{
border: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: sensor2
card_mod:
style: |
ha-card{
margin-top: -1px;
border: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: sensor3
card_mod:
style: |
ha-card{
margin-top: -1px;
border: none !important;
}
card_mod:
style: |
ha-card {
background: transparent;
border: none;}
card_mod:
style:
.: |
ha-card {
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(5px) !important; /* Для Safari */
border: 1px solid var(--ha-card-border-color, rgba(var(--rgb-primary-text-color),0.1)) !important;
background-color: rgba(var(--rgb-card-background-color), 0.5) !important;
--primary-text-color: rgba(150,150,150,0.8);
}
ha-card:hover {
border: 1px solid var(--ha-card-border-color, rgba(var(--rgb-primary-text-color),0.2)) !important;
}
card_mod:
style:
.: |
ha-card {
background:
linear-gradient(90deg, rgba(3, 150, 255, 0.5) 95px, rgba(3, 150, 255, 0.1) 0.1%);
background-clip: padding-box;
}
I’m sorry, but the gaps haven’t gone anywhere, just widened at the top and bottom.
Well the screenshot I shared isn’t photoshopped…lol
What card mod version are you using? If it is v3.5.0 please install v3.4.4
I see the same thing as on your screenshot, the gaps have only increased at the top and bottom, but between the inscriptions remain the same. here on my screenshot I show it with arrows.
I use v3.4.4 card mod
The gaps between the sensors HAS changed. I’d suggest changing margin-top: -1px; and see the difference before stating nothing changed.
This will remove the gaps at the top and bottom
type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 100px auto 120px
margin: 0 0 0 0
grid-row-gap: 0px
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: sensor1
card_mod:
style: |
ha-card{
border: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: sensor2
card_mod:
style: |
ha-card{
margin-top: -1px;
border: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: sensor3
card_mod:
style: |
ha-card{
margin-top: -1px;
border: none !important;
}
card_mod:
style: |
ha-card {
margin-top: -5px;
margin-bottom: -10px;
background: transparent;
border: none;}
card_mod:
style:
.: |
ha-card {
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(5px) !important; /* Для Safari */
border: 1px solid var(--ha-card-border-color, rgba(var(--rgb-primary-text-color),0.1)) !important;
background-color: rgba(var(--rgb-card-background-color), 0.5) !important;
--primary-text-color: rgba(150,150,150,0.8);
}
ha-card:hover {
border: 1px solid var(--ha-card-border-color, rgba(var(--rgb-primary-text-color),0.2)) !important;
}
card_mod:
style:
.: |
ha-card {
background:
linear-gradient(90deg, rgba(3, 150, 255, 0.5) 95px, rgba(3, 150, 255, 0.1) 0.1%);
background-clip: padding-box;
}
My alignment
Your alignment
1 Like
Hi,
I have custom card with confirmation before service is executed.
Is it possible to use a kind of double click instead of a popup confirmation? I know such a confirmation from Button card. In default the card is locked which is shown by a little lock icon. To execute the service I simply need to double click, what I prefer.
tap_action:
action: call-service
confirmation:
text: Wirklich ausführen?
Restriction card
is it possible to minimize the clickable area of these icons mdi:toggle-switch so that it is on the borders of the icons at the top and bottom. I tried different values for margin: and padding: but I managed to reduce the clickable area only on the sides, on the top and bottom it goes beyond the borders of the icons. Can you tell me what other parameters to experiment with?
type: vertical-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:toggle-switch
secondary: ""
primary: ""
card_mod:
style: |
ha-card {
background: blue;
--icon-symbol-size: 90px;
right: -40px;
margin: 0px 0px -10px 406px;
}
- type: custom:mushroom-template-card
icon: mdi:toggle-switch
primary: ""
secondary: ""
card_mod:
style: |
ha-card {
background: red;
--icon-symbol-size: 90px;
margin: 0px 0px 100px 406px;
padding: -10px -15px 100px 1000px;
top: 0px;
right: -40px;
}