I did the card-mod update but how to i clear the cach of the android app? In the phone settings?
Ok i managed to clear the cach and it works again… Thanks:)
1 Like
Happy to help. Always first recourse if suddenly something in the front end looks dramatically different. And almost always required after a card mod update. Just FYI 
Good to know 
Please see
Install versus HACS ?
Interesting! Is the repo created by @LE0N (the inventor of rounded) or does he know about it?
If yes, the initial post in this thread should possibly be revised 
Hello, i’m not sure how to get the temperature slider.
I get the brightness ok. But what do I have to change to the code to get the color_temp ?
Just replace colorMode: brightness with colorMode: temperature - that did it for me.
Hi,
I want to spin fan icon when “Ventoinha” is on, any idea ?
Code :
type: custom:button-card
entity: switch.ventoinha
name: Ventoinha
show_icon: false
styles:
card:
- border-radius: 25px
- border-style: none
- box-shadow: 0px 0px 10px -9px black
grid:
- grid-template-areas: '"icon_cells" "n" "button"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
icon_cells:
- justify-self: start
- margin-top: 12px
- margin-left: 15px
name:
- font-size: 90%
- font-weight: bold
- justify-self: start
- margin-top: 6px
- margin-left: 15px
custom_fields:
icon_cells: |
[[[
return `<ha-icon
icon="mdi:fan"
style="width: 25px; height: 25px; color: auto;">
</ha-icon>
`
]]]
button:
card:
type: custom:button-card
entity: switch.volante_switch
show_icon: false
show_name: false
styles:
card:
- border-style: none
- margin-top: '-4%'
- margin-bottom: '-5%'
- background-color: transparent
grid:
- grid-template-areas: '"state icon_cells"'
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content
custom_fields:
state:
- justify-self: start
- align-self: middle
- font-size: 12px
- filter: opacity(50%)
- margin-left: 15px
- margin-top: 1.6px
icon_cells:
- justify-self: end
- align-self: start
- margin-right: 15px
- width: 45px
custom_fields:
icon_cells: |
[[[
var state = states['switch.ventoinha'].state;
if(state == "on")
return `<ha-icon
icon="mdi:toggle-switch"
style="color: #59CE8F;">
</ha-icon>
`;
else
return `<ha-icon
icon="mdi:toggle-switch-off"
style="color: auto;">
</ha-icon>
`;
]]]
state: |
[[[
var state = states['switch.ventoinha'].state
var power = states['sensor.ventoinha_power'].state
if(state == "on")
return `<span>${power}W</span>
`;
else
return `<span>Desligado</span>
`;
]]]
Thanks !
Hi @Diggs, it seems that your code was not formatted properly and some elements and indentations are missing. Can you try again to post the code in the correct yaml format?
Hi, code is now formated.
Nooo answere Nobody … nsa files
Someone added with Rounded theme, the bubble card?
how you change the color of the background if this card? that will not be like Brightness
Hi everyone!
I would really appreciate it if someone could help me with a problem that I can’t solve or understand. FYI I the noob of the noobs so…don’t laugh xD
As you can see in the image below, I have a problem with those cards when viewing them on a iPhone 11. One thing I learned is if I remove all the icons I don’t have any problem.
The code below is fot the second group of cards. I’m using the Rounded theme.
Thank you all in advance!
type: custom:button-card
name: Home
custom_fields:
badge:
card:
type: custom:button-card
name: '[[[return states["weather.praia_de_miramar"].state]]]'
label: |
[[[
const temperature = states["weather.praia_de_miramar"].attributes.temperature;
const humidity = states["weather.praia_de_miramar"].attributes.humidity;
return `<ha-icon icon="mdi:thermometer" style="height:17px;"></ha-icon>${temperature} °C <ha-icon icon="mdi:water-percent" style="height:17px;"></ha-icon>${humidity} %`;
]]]
show_label: true
show_icon: true
show_name: false
entity: weather.praia_de_miramar
tap_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-areas: '"i l"'
- grid-template-columns: 1fr fr;
- grid-template-rows: min-content;
- justify-content: center;
icon:
- grid-area: i;
- height: 40px;
- margin-right: 1px
- margin-left: 9px
- color: var(--contrast6)
card:
- font-family: In case of a custom font, otherwise you can remove this line
- padding: 0.2px 0.2px
- font-size: 12px
- line-height: 18px
- font-weight: 500
- background: var(--contrast20)
- text-align: left;
name:
- color: var(--contrast1)
label:
- color: var(--contrast10)
- margin-right: 18px
styles:
grid:
- grid-template-areas: '"n" "badge"'
card:
- font-family: In case of a custom font, otherwise you can remove this line
- background: none
- padding: 16px 0
- '--mdc-ripple-press-opacity': 0
name:
- font-size: 32px
- color: var(--contrast20)
custom_fields:
badge:
- margin: 16px auto 0 auto
- '--mdc-ripple-press-opacity': 0.5
For your state, when it’s on, you just need to add a simple line;
- animation: rotating 1s linear infinite
This will then make it spin only when it’s on. So my card is set up as below;
type: custom:button-card
label: Bedroom Fan
show_icon: true
show_label: true
show_name: false
show_state: true
entity: fan.jakes_bedroom_fan
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-areas: '"l" "s" "button"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--contrast2)
- font-family: Montserrat
- padding: 13px
- '--mdc-ripple-press-opacity': 0
- max-width: 100%
img_cell:
- justify-self: start
- width: 64px
label:
- justify-self: start
- font-size: 14px
- margin: 4px 0 8px 0
- color: var(--contrast20)
- font-weight: 600
state:
- justify-self: start
- font-size: 10px
- margin: 4px 0 2px 0
- color: var(--black)
- text-transform: uppercase
- font-weight: 200
state:
- value: 'off'
styles:
card:
- background: var(--blue)
icon:
- color: var(--black)
label:
- color: var(--black)
name:
- color: var(--black)
- value: 'on'
styles:
card:
- background: var(--green)
icon:
- color: var(--black)
- animation: rotating 1s linear infinite
name:
- color: var(--black)
label:
- color: var(--black)
Hello Guys,
I have an issue with big gaps between rows in a grid. The gap is way bigger then the card which is inside of the column:
All cards are wrapped in a grid layout, this is my code:
#Detailed Lighes
- columns: 2
type: grid
cards:
#Livingroom AmbientLights
- type: custom:button-card
name: Ambientebeleuchtung
icon: mdi:sofa-single
entity: light.wohnzimmer
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: light.wohnzimmer
colorMode: brightness
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 16px
- padding: 0 8px
- background: |
[[[
if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
else return "var(--contrast4)";
]]]
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: |
[[[
if (entity.state == "on") return "var(--black)";
if (entity.state == "off") return "var(--contrast20)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: "-6px"
- height: 12px
- width: 12px
- border-radius: 100px
styles:
grid:
- grid-template-areas: '"i" "n" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--contrast2)
- padding: 16px
- margin: 0px
- "--mdc-ripple-press-opacity": 0
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 14px
- margin: 4px 0 12px 0
- color: var(--contrast8)
state:
- value: "on"
styles:
card:
- background: var(--yellow)
icon:
- color: var(--black)
name:
- color: var(--black)
- value: "off"
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
#Livingroom Ambient Lights
- type: custom:button-card
name: Deckenlampe
icon: mdi:sofa-single
entity: light.wohnzimmer_deckenlampe
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: light.wohnzimmer_deckenlampe
colorMode: brightness
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 16px
- padding: 0 8px
- background: |
[[[
if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
else return "var(--contrast4)";
]]]
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: |
[[[
if (entity.state == "on") return "var(--black)";
if (entity.state == "off") return "var(--contrast20)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: "-6px"
- height: 12px
- width: 12px
- border-radius: 100px
styles:
grid:
- grid-template-areas: '"i" "n" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--contrast2)
- padding: 16px
- margin: 0px
- "--mdc-ripple-press-opacity": 0
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 14px
- margin: 4px 0 12px 0
- color: var(--contrast8)
state:
- value: "on"
styles:
card:
- background: var(--yellow)
icon:
- color: var(--black)
name:
- color: var(--black)
- value: "off"
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
#Livingroom Ambient Lights
- type: custom:button-card
name: Deckenlampe
icon: mdi:sofa-single
entity: light.wohnzimmer_deckenlampe
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: light.wohnzimmer_deckenlampe
colorMode: brightness
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 16px
- padding: 0 8px
- background: |
[[[
if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
else return "var(--contrast4)";
]]]
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: |
[[[
if (entity.state == "on") return "var(--black)";
if (entity.state == "off") return "var(--contrast20)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: "-6px"
- height: 12px
- width: 12px
- border-radius: 100px
styles:
grid:
- grid-template-areas: '"i" "n" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--contrast2)
- padding: 16px
- margin: 0px
- "--mdc-ripple-press-opacity": 0
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 14px
- margin: 4px 0 12px 0
- color: var(--contrast8)
state:
- value: "on"
styles:
card:
- background: var(--yellow)
icon:
- color: var(--black)
name:
- color: var(--black)
- value: "off"
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
Do you have any clue what the reason for those big gaps could be?
Best
Max
Try a grid configuration with square: false:
- type: "grid"
columns: 2
square: false
cards:
- ...
That did the trick for me, thanks a lot Simon!