Your overall idea of you Views and linking sounds great, thou if you want a Panel-View, make a Panel-view, and see if you can fit that in other âViewsâ just saying, and your âexpectationsâ sounds a-bit way of reality, and nothing to compare with a windows-program in full-screen vs window-mode, i suggest above make a Panel-View, link to that, save alot time, and and donât think so much of whatâs not possible, because most are, with the right approach, cards/views etc. but not just like magic, and 1 click
Do you have any idea how to make an animation of switching two icons so that they display alternately and make a heating animation ?
Not quit sure what you mean, but there are few ways to âalterâ Icons depending on state
- is with a template
- with custom:paper-buttons-row
- other ways
⌠that i have not tried
paper-button-row example 2x4 entities, grey are off here ( using: state_icons: âoffâ VS âonâ )
Unfortunately, not possible by standard CSS animation:
card_mod:
style:
ha-state-icon $: |
ha-svg-icon {
animation-name: iconchange;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
@keyframes iconchange {
0% {
color: red;
--card-mod-icon: mdi:car !important;
}
49% {
color: red;
--card-mod-icon: mdi:car !important;
}
50% {
color: cyan;
--card-mod-icon: mdi:account !important;
}
100% {
color: cyan;
--card-mod-icon: mdi:account !important;
}
}
or:
card_mod:
style:
ha-state-icon $ ha-svg-icon $: |
path {
animation-name: iconchange;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
@keyframes iconchange {
0% {
color: red;
d: path("M7.95,3L6.53,5.19L7.95,7.4H7.94L5.95,10.5L4.22,9.6L5.64,7.39L4.22,5.19L6.22,2.09L7.95,3M13.95,2.89L12.53,5.1L13.95,7.3L13.94,7.31L11.95,10.4L10.22,9.5L11.64,7.3L10.22,5.1L12.22,2L13.95,2.89M20,2.89L18.56,5.1L20,7.3V7.31L18,10.4L16.25,9.5L17.67,7.3L16.25,5.1L18.25,2L20,2.89M2,22V14A2,2 0 0,1 4,12H20A2,2 0 0,1 22,14V22H20V20H4V22H2M6,14A1,1 0 0,0 5,15V17A1,1 0 0,0 6,18A1,1 0 0,0 7,17V15A1,1 0 0,0 6,14M10,14A1,1 0 0,0 9,15V17A1,1 0 0,0 10,18A1,1 0 0,0 11,17V15A1,1 0 0,0 10,14M14,14A1,1 0 0,0 13,15V17A1,1 0 0,0 14,18A1,1 0 0,0 15,17V15A1,1 0 0,0 14,14M18,14A1,1 0 0,0 17,15V17A1,1 0 0,0 18,18A1,1 0 0,0 19,17V15A1,1 0 0,0 18,14Z") !important;
}
49% {
color: red;
d: path("M7.95,3L6.53,5.19L7.95,7.4H7.94L5.95,10.5L4.22,9.6L5.64,7.39L4.22,5.19L6.22,2.09L7.95,3M13.95,2.89L12.53,5.1L13.95,7.3L13.94,7.31L11.95,10.4L10.22,9.5L11.64,7.3L10.22,5.1L12.22,2L13.95,2.89M20,2.89L18.56,5.1L20,7.3V7.31L18,10.4L16.25,9.5L17.67,7.3L16.25,5.1L18.25,2L20,2.89M2,22V14A2,2 0 0,1 4,12H20A2,2 0 0,1 22,14V22H20V20H4V22H2M6,14A1,1 0 0,0 5,15V17A1,1 0 0,0 6,18A1,1 0 0,0 7,17V15A1,1 0 0,0 6,14M10,14A1,1 0 0,0 9,15V17A1,1 0 0,0 10,18A1,1 0 0,0 11,17V15A1,1 0 0,0 10,14M14,14A1,1 0 0,0 13,15V17A1,1 0 0,0 14,18A1,1 0 0,0 15,17V15A1,1 0 0,0 14,14M18,14A1,1 0 0,0 17,15V17A1,1 0 0,0 18,18A1,1 0 0,0 19,17V15A1,1 0 0,0 18,14Z") !important;
}
50% {
color: cyan;
d: path("M20,12H4A2,2 0 0,0 2,14V22H4V20H20V22H22V14A2,2 0 0,0 20,12M7,17A1,1 0 0,1 6,18A1,1 0 0,1 5,17V15A1,1 0 0,1 6,14A1,1 0 0,1 7,15V17M11,17A1,1 0 0,1 10,18A1,1 0 0,1 9,17V15A1,1 0 0,1 10,14A1,1 0 0,1 11,15V17M15,17A1,1 0 0,1 14,18A1,1 0 0,1 13,17V15A1,1 0 0,1 14,14A1,1 0 0,1 15,15V17M19,17A1,1 0 0,1 18,18A1,1 0 0,1 17,17V15A1,1 0 0,1 18,14A1,1 0 0,1 19,15V17Z") !important;
}
100% {
color: cyan;
d: path("M20,12H4A2,2 0 0,0 2,14V22H4V20H20V22H22V14A2,2 0 0,0 20,12M7,17A1,1 0 0,1 6,18A1,1 0 0,1 5,17V15A1,1 0 0,1 6,14A1,1 0 0,1 7,15V17M11,17A1,1 0 0,1 10,18A1,1 0 0,1 9,17V15A1,1 0 0,1 10,14A1,1 0 0,1 11,15V17M15,17A1,1 0 0,1 14,18A1,1 0 0,1 13,17V15A1,1 0 0,1 14,14A1,1 0 0,1 15,15V17M19,17A1,1 0 0,1 18,18A1,1 0 0,1 17,17V15A1,1 0 0,1 18,14A1,1 0 0,1 19,15V17Z") !important;
}
}
Color is changing, the icon is not.
Hello @Ildar_Gabdullin
I am trying to set a background image for a horizontal stack but, of course, the background is being re-sized to match the card size.
Is it possible to have the background image define the card size? I would like the card to be the size of the image and of course keep the aspect ratio intact.
EDIT:
I have managed to at least get the aspect ratio right. Unfortunately it is now a small picture as it does not resize the card to match the image. It should ideally behave like the picture-elements card which stretches the card to match the image while keep the aspect ratio. If the card grows, the picture then grows (whilst keeping aspect ratio intact) with the card.
style: |
ha-card {
background-image: url('/local/images/living_room_16_9.jpg');
--ha-card-background: rgba(50,50,50,0);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
1 Like
So only blinking one icon left ;(((⌠Thank you for response.
Something like this works, you only need to style the custom fields and maybe add some state filters. Just overlay them
type: custom:button-card
custom_fields:
off:
card:
icon: mdi:radiator-disabled
type: custom:button-card
on:
card:
icon: mdi:radiator
type: custom:button-card
styles:
icon:
- animation: blink 2s ease infinite
I also have a template in my collection. there you can flash the entire map (incl. text).
aspect_ratio: 3/1
color_type: card
entity: light.kuechensockel
layout: vertical
name: CsengĹ
show_last_changed: true
state:
- color: red
icon: mdi:bell
name: Csengettek!
styles:
card:
- animation: blink 2s ease infinite
value: 'on'
- color: '#d4d4d4'
icon: mdi:bell
operator: default
styles:
grid:
- grid-template-areas: '"n i" "s i" "l i"'
- grid-template-columns: 1fr 30%
icon:
- width: 70%
label:
- color: gray
- font-size: 10px
- justify-self: start
- padding-left: 10px
- padding-top: 10px
name:
- justify-self: start
- padding-top: 5px
- font-weight: bold
- padding-left: 10px
type: custom:button-card
Does anybody know how to change the font (size etc.) of the state of a button card? I found it for an entities card but not a button card.
that should actually also works with âstylesâ.
if you show me your code, then i could try it out exactly.
here I have another one from my repertoire:
type: custom:button-card
entity: light.sockel_kuche
custom_fields:
ring: |
[[[ if (entity.state == 'on' && entity.attributes.brightness) {
const brightness = Math.round(entity.attributes.brightness/2.55);
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
stroke="var(--button-card-light-color)" stroke-width="2" fill="none"
style="transform: rotate(-90deg); transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
<text x="50%" y="54%" fill="var(--button-card-light-color)" font-size="16" font-weight= "bold"
text-anchor="middle" alignment-baseline="middle">
${brightness}<tspan font-size="10">%</tspan></text></svg>`;}
]]]
aspect_ratio: 1/1
color-type: icon
color: auto
styles:
card:
- border: none
- border-radius: 5px
- '--mdc-ripple-color': lightyellow
- '--mdc-ripple-press-opacity': 0.5
name:
- font-size: 1.8rem
- font-weight: 700
state:
- font-size: 17px
label:
- font-size: 16px
custom_fields:
ring:
- position: absolute
- right: 5%
- top: 10%
- width: 30%
tap_action:
action: toggle
haptic: success
hold_action:
action: more-info
haptic: selection
show_last_changed: false
show_state: false
state:
- value: 'on'
styles:
card:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
- box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
- transition: 2s ease
icon:
- filter: drop-shadow(0 0 0.75rem var(--button-card-light-color))
- transition: 2s ease
- position: relative
- left: '-1.5rem'
name:
- color: var(--button-card-light-color)
id: glow
show_label: true
label: |
[[[
if (entity.state == 'on' && entity.attributes.brightness)
return 'Helligkeit: ' + (Math.round(entity.attributes.brightness / 2.55)) + '%';
]]]
``Right now I am trying:
- type: button
show_name: false
show_icon: false
tap_action:
action: none
hold_action:
action: none
entity: sensor.eq_3_battery_living_room
show_state: true
card_mod:
style:
host:
$: |
host {
--ha-chip-text-color: red;
}
.: |
ha-card {
background-color: transparent;
box-shadow: none;
text-transform: lowercase;
}
The âhostâ was only a test of mine which is obviously not working.
I was using the normal button-card instead of custom:button-card because I was able to convert to lowercase in the button card and did not figure it out for the custom:button-card right away 
card_mod:
style:
host:
$: |
host {
--ha-chip-text-color: red;
}
.: |
ha-card {
background-color: transparent;
box-shadow: none;
text-transform: lowercase;
}
span.state {
font-size: 20px;
}
1 Like
span.state, I would have never thought of this. Thank you!
Sorry to ask this question, but where can I find this kind of information? I looked at the mozilla css guides and googled but are these HA specific? Or are they per-card specific?
So where should I check for this kind of information?
for the custom-button-card you can also use the lowercase-command .
type: custom:button-card
show_name: false
show_icon: false
tap_action:
action: none
hold_action:
action: none
entity: sensor.eq_3_battery_living_room
show_state: true
styles:
card:
- text-transform: lowercase
Iâve been looking for ages too =)
Iâve also looked at many posts on how others do it.
What is of great help to me is the developer environment.
1 Like
Thatâs a great idea. I will try that!
Sorry, I just remembered that it was not the lowercase I could not find, it was the alignment that went weird when I chose custom:button-card instead of button.
All button/button-cards and the slider a placed in a horizontal stack.
custom:button-card:
button:
EDIT: Thanks to the developer tools idea I now see that this is because the button-card is vertically aligned at the top and not the center
This has to be some kind of âvertical-align: centerâ. But it does not work for style: card
I think it is coming from here
/* Vertical No Icon No Label */
#container.vertical.no-icon.no-label {
grid-template-areas: 'n' 's';
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
But I have no idea how to fix this yet. Probably somehow change the grid to only 1 area.
EDIT 2:
I would have thought it is one of these, but no changes to anything move anything 
grid:
- grid-column-start: 1
- grid-column-end: 1
- grid-row-start: 1
- grid-row-end: 1
- grid-template-areas: 's'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
- align-self: center
- place-self: center
I wonder how most of the last button-card, etc. discussions are related to the topic of this thread: card-mod?
Sorry, yes, in a way it is not.
But , the good thing is, that both have the same solution and the same styling options. The only difference is in the way you are writing it.
And the solution for the custom:button-card will be directly applicable to the button card with card-mod
So I kind of stayed here because of the way it all began.
But I think I may have found an approach:
- margin: 0
- position: relative
- top: 50%
- left: 50%
- transform: translate(-50%, -50%)
or for mod-card:
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: none;
margin: 0;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Just started implementing popup cards using card mod and there are two areas Iâd like to adjust the following but Iâm not sure which elements in the example code in this thread will do what I want?
The border of the popup card, at the moment its only the size of the cards on it.
Reduce the height of the popup card header, its probably double the size of what it needs to be.
Thanks!
Could you please post a snip of the screen and maybe the code you have already? I am an absolute noob, so if I see the code and can help, I will try.
Maybe the experts can help you in the meantime already 