Hello, I am using your code, but it seems different from yours and the color palette does not pop up a color selector. I am confused, how can I solve it?
No, I haven’t updated it because the latest version of the physical status won’t be translated
hey i am following your theme and i have some problem with icon animation:
on the bottom left I have a menu button whose code looks like this:
# MENU PARTER
- type: conditional
conditions:
- entity: input_boolean.pietro
state: "off"
elements:
- entity: input_boolean.menu_parter
template:
- podstawowy
- ikona_pietro
style:
top: 84.5%
left: 9%
type: custom:hui-element
row_type: custom:button-card
the animation of the button itself works without a problem:
podstawowy:
template:
- ustawienia
- tilt
- extra_styles
variables:
state_on: >
[[[ return ['on', 'home', 'cool', 'fan_only', 'playing', 'unlocked', 'cleaning'].indexOf(!entity || entity.state) !== -1; ]]]
state_off: >
[[[ return ['off', 'paused', 'docked'].indexOf(!entity || entity.state) !== -1; ]]]
show_state: true
show_icon: false
tap_action:
ui_sound_tablet: |
[[[
if (variables.state_off) {
hass.callService('media_player', 'play_media', {
entity_id: variables.entity_browser_mod,
media_content_id: '/local/sound/on.m4a',
media_content_type: 'music'
});
}
if (variables.state_on) {
hass.callService('media_player', 'play_media', {
entity_id: variables.entity_browser_mod,
media_content_id: '/local/sound/off.m4a',
media_content_type: 'music'
});
}
]]]
card_bounce: |
[[[
// add animation
if (this.getElementsByTagName("style").length === 0) {
// phone condition
let mq = window.matchMedia('(max-width: 800px)').matches;
let style = document.createElement('style');
style.innerHTML = `
@keyframes card_bounce {
0% { transform: scale(1); }
10% { transform: scale(${ mq ? '0.92' : '0.94' }); }
25% { transform: scale(1); }
30% { transform: scale(${ mq ? '0.96' : '0.98' }); }
100% { transform: scale(1); }
}
`;
this.appendChild(style);
}
// duration
let duration = 800;
// animate
this.style.animation = `card_bounce ${duration}ms cubic-bezier(0.22, 1, 0.36, 1)`;
// reset
window.setTimeout(() => { this.style.animation = "none"; }, duration + 100)
]]]
action: toggle
styles:
grid:
- grid-template-areas: |
"icon circle"
"n n"
"s s"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: auto repeat(2, min-content)
- gap: 1.3%
- align-items: start
- will-change: transform
name:
- justify-self: start
- line-height: 121%
state:
- justify-self: start
- line-height: 115%
card:
- height: 165px
- width: 150px
- border-radius: var(--button-card-border-radius)
- border-width: 0
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- --mdc-ripple-color: >
[[[
return variables.state_on
? 'rgb(0, 0, 0)'
: '#97989c';
]]]
- color: >
[[[
return variables.state_on
? '#4b5254'
: '#97989c';
]]]
- background-color: >
[[[
return variables.state_on
? 'rgba(255, 255, 255, 0.85)'
: 'rgba(0, 0, 0, 0.4)';
]]]
However, the animation of the icon does not want to work for me. Do you know why?
ikona_pietro:
styles:
custom_fields:
icon:
- width: 100%
- margin-left: -14%
- margin-top: 1%
custom_fields:
icon: >
[[[
let state = variables.state_on && variables.timeout < 2000 ? 'on' : null;
return `
<svg viewBox="0 0 128 128" width="64px" height="64px">
<style>
@keyframes on {
0% {
transform: scale(0.85);
}
20% {
transform: scale(1.1);
}
40% {
transform: scale(300);
}
60% {
transform: scale(1.03);
}
80% {
transform: scale(0.97);
}
100% {
transform: scale(1);
}
}
.on {
animation: on 0.8s;
transform-origin: center;
}
</style>
<rect x="26.2" y="47.7" class="${state} light-color" width="42.8" height="52.3"/>
<path fill="#9da0a2" d="M36.2,102.7h-10c-1.7,0-3-1.3-3-3v-72c0-1.7,1.3-3,3-3h43c1.7,0,3,1.3,3,3s-1.3,3-3,3h-40v66h7c1.7,0,3,1.3,3,3S37.9,102.7,36.2,102.7z"/>
<path fill="#9da0a2" d="M103.2,102.7h-47c-1.7,0-3-1.3-3-3s1.3-3,3-3h44v-46h-31c-1.7,0-3-1.3-3-3s1.3-3,3-3h34c1.7,0,3,1.3,3,3v52C106.2,101.4,104.9,102.7,103.2,102.7z"/>
<path fill="#9da0a2" d="M49.2,50.7h-23c-1.7,0-3-1.3-3-3s1.3-3,3-3h23c1.7,0,3,1.3,3,3S50.9,50.7,49.2,50.7z"/>
<path fill="#9da0a2" d="M69.2,101.3c-1.7,0-3-1.3-3-3V64.8c0-1.7,1.3-3,3-3s3,1.3,3,3v33.5C72.2,99.9,70.9,101.3,69.2,101.3z"/>
</svg>
`;
]]]
transform: scale(300); - I use this value for the test to see the animation better, unfortunately nothing is animated
2 Likes
Hi Guys,
Does anybody know how i can achieve sound on button clicks like mattias has in the config?
I like your interface style. Can you share the complete code?
1 Like
Have you solved the translation problem? What should I do if I still haven’t been translated after adding language? Please help me, thank you
@Laffer @Mattias_Persson After upgrading to the new version, the physical state of the card will become English and cannot be translated into my native language. Do you know how to solve this problem? I have been stuck in the old version for this I’m confused
There’s an issue open for it on github: Entity State displays „raw“ Informations · Issue #685 · custom-cards/button-card · GitHub. It’s an issue with the button-card. Also see the latest comment on: 2023.1.0 broke entity state display in local language · Issue #646 · custom-cards/button-card · GitHub. Hopefully it will be fixed soon 
I put a remote finder button in the footer. The code for the button is
- type: custom:button-card
entity: script.shield_remote_finder
name: >
<ha-icon icon="mdi:remote-tv"></ha-icon> Find Remote
template:
- footer
tap_action:
action: toggle
lock:
enabled: true
duration: 10
unlock: hold
But the lock is not covered on the whole button. It only covers the top half of the button. See the mouse icon in the two pictures below
Any idea how to solve this?
Thank you. I will continue to monitor the card updates until the issue is resolved and I am upgrading the system version.
1 Like
thanks, when I finish the whole project, I will share the whole code here on the forum
3 Likes
Hi, guys.
I dont use yalm mode, so !include doesnt works at raw editor.
How can I integrate the button_card_templates with my dashboard?
Sorry for the stupid noob question.
found it for you, see this link GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant
This will centre aline the lock icon, but the lock will over lap the text if you button is small so watch out
- type: custom:button-card
entity: script.shield_remote_finder
name: >
<ha-icon icon="mdi:remote-tv"></ha-icon> Find Remote
template:
- footer
tap_action:
action: toggle
lock:
enabled: true
duration: 10
unlock: hold
styles:
lock:
- align-items: align-items
1 Like
Hi. Im trying to use a code from @fifty889 (only the TV part to show youtube, netflix, etc) implemented in my code (which is exactly like the original here). However, when I paste “state_display” line, the TV icon desappears from dashboard. Can you help me?
- type: custom:button-card
entity: media_player.samsung_tv
name: TV
state_display: >
[[[
if (states['media_player.samsung_tv'].state === 'playing') {
return '
<div style='display: flex;
padding: 0px 5px 0px 5px;
align-items: center;
background: transparent;
marquee-speed: slow
animation: marquee 20s linear infinite;'>
<marquee>
<span>
${states['media_player.samsung_tv'].attributes.app_name} 
</span>
</marquee>
</div>
';
}
if (states['media_player.samsung_tv'].state === 'idle') {
return '
<div style='display: flex;
padding: 0px 5px 0px 5px;
align-items: center;
background: transparent;
marquee-speed: slow;'>
<marquee>
<span>
${states['media_player.samsung_tv'].attributes.media_title} 
</span>
</marquee>
</div>
';
}
]]]
custom_fields:
c1: |
[[[
if (states['media_player.samsung_tv'].attributes.app_name === 'YouTube') {
return "<ha-icon icon='mdi:youtube'></ha-icon>";
}
if (states['media_player.samsung_tv'].attributes.app_name === 'Netflix') {
return "<ha-icon icon='mdi:netflix'></ha-icon>";
}
if (states['media_player.samsung_tv'].attributes.app_name === 'Disney+') {
return '
<svg fill="#000000" viewBox="0 0 24 24">
<path d="M10.896 13.837c.013.002.016.002.029.004.216.029.429.068.591.141.151.067.239.151.32.301.123.228.131.546.02.788-.083.18-.264.33-.43.41-.172.084-.342.123-.537.146-.34.037-.708-.033-1.015-.181-.181-.089-.403-.241-.514-.437-.082-.144-.079-.331.02-.468.159-.218.5-.266.757-.257.196.008.548.068.734.134.052.019.242.093.275.127.023.024.038.058.028.09-.042.13-.358.198-.449.212-.244.037-.371-.055-.648-.165-.069-.027-.161-.057-.231-.063-.126-.012-.278.023-.302.161-.012.071.071.137.135.165.149.064.27.087.416.089.433.007.919-.064 1.273-.315.048-.035.096-.085.097-.149.002-.129-.224-.208-.224-.208-.238-.099-.679-.148-.906-.166-.238-.021-.613-.051-.703-.065-.093-.013-.193-.032-.274-.068-.081-.036-.159-.118-.183-.208-.041-.163.011-.362.102-.492.237-.34.791-.469 1.204-.52.401-.05 1.048-.049 1.442.16.061.033.092.063.079.128-.026.122-.117.2-.228.235-.117.037-.358.052-.463.058-.474.027-1.048.013-1.499.136-.035.01-.097.027-.116.049-.071.077.131.099.175.107.013.003.015.004.029.005L10.896 13.837M8.074 11.722c0 0 .077-.116.142-.204.118-.16.331-.382.491-.519.049-.042.107-.089.107-.089s-.091.009-.142.02c-.122.024-.3.142-.389.219-.147.126-.309.331-.236.513C8.057 11.688 8.074 11.722 8.074 11.722M8.892 11.941c.232-.016.45-.083.653-.195.199-.111.491-.328.461-.583-.009-.083-.063-.145-.131-.174-.089-.038-.135-.032-.248.001-.082.024-.119.039-.197.083-.228.133-.551.416-.727.642-.041.053-.082.113-.114.154-.02.025-.036.048-.034.055C8.561 11.95 8.801 11.947 8.892 11.941M8.3 12.376c-.024.025-.049.087-.076.131-.014.024-.04.054-.057.066-.061.044-.112.047-.17-.005-.082-.072-.129-.185-.133-.294-.002-.048.006-.1-.003-.14-.015-.068-.083-.137-.119-.202-.043-.076-.078-.209-.082-.295-.015-.268.126-.514.31-.709.185-.197.426-.36.689-.471.248-.105.612-.176.885-.081.089.03.212.106.275.185.013.016.024.034.037.043.012.008.044.011.069.015.087.015.212.081.263.125.103.089.159.173.185.296.052.247-.09.519-.253.684-.278.284-.552.484-.908.623-.156.061-.399.118-.576.102-.055-.005-.112-.019-.165-.023-.027-.002-.127-.028-.138-.035C8.32 12.381 8.303 12.372 8.3 12.376M8.617 12.924c.011.002.028.007.042.012.125.047.176.163.207.289.071.294.101.945.113 1.2C8.988 14.617 8.992 14.805 9 14.994c.007.16.02.373-.014.523-.012.054-.048.117-.1.149-.059.038-.194.041-.268.025-.182-.038-.242-.155-.268-.335-.062-.431-.032-1.276.004-1.632.012-.118.056-.495.118-.653C8.495 13.017 8.539 12.909 8.617 12.924M3.067 13.641c0 0-.272.019-.458.04-.238.026-.685.103-.942.195-.077.028-.234.093-.248.173-.014.082.037.147.094.214.033.039.219.218.271.261.219.183.663.465.99.601.112.046.298.113.298.113s-.014-.529-.011-1.05C3.061 13.913 3.067 13.641 3.067 13.641M8.046 13.851c.016.142-.021.411-.027.446-.012.082-.073.27-.083.293-.05.115-.099.208-.151.302-.089.16-.301.414-.426.523-.467.404-1.191.634-1.812.71-.421.051-.905.043-1.351-.039-.154-.028-.382-.081-.382-.081s.001.091-.007.156c-.004.029-.026.107-.038.132-.032.067-.086.102-.163.116-.094.017-.193.023-.279-.014-.142-.06-.193-.192-.218-.345-.02-.122-.041-.335-.041-.335s-.106-.05-.195-.094c-.272-.134-.53-.296-.756-.463-.063-.047-.331-.272-.391-.328-.166-.158-.316-.315-.43-.517-.089-.158-.114-.297-.047-.464.093-.233.426-.408.655-.508.168-.074.689-.244.905-.276.102-.015.261-.043.271-.049.004-.003.007-.006.01-.009C3.094 13 3.103 12.77 3.101 12.686c-.002-.083.061-.627.082-.742.011-.062.058-.302.106-.365.031-.042.087-.039.132-.011.248.154.324.69.342.962.011.166.017.416.017.416s.285-.008.46-.003c.17.004.358.031.534.059.226.036.667.132.92.261.208.106.403.283.466.472.059.173.05.292-.039.448-.1.176-.29.307-.483.317-.057.003-.273-.025-.34-.077-.026-.02-.025-.057-.006-.083C5.299 14.33 5.4 14.277 5.46 14.245c.03-.016.055-.034.078-.055.049-.044.094-.092.089-.148-.007-.073-.084-.118-.158-.147-.345-.137-1.035-.251-1.368-.271-.13-.008-.316-.014-.316-.014l.039 1.839c0 0 .153.029.274.049.069.011.363.037.441.039.594.016 1.258-.038 1.803-.295C6.583 15.13 6.802 14.99 6.969 14.8c.219-.251.334-.595.304-.955-.033-.392-.309-.858-.53-1.142-.583-.749-1.582-1.366-2.46-1.727-.897-.369-1.784-.581-2.736-.616-.245-.009-.781.003-1.051.078-.039.011-.078.024-.113.032-.028.007-.073.026-.085.036-.007.005-.014.013-.014.013s.017.009.033.016c.029.013.149.02.212.031.056.011.114.04.137.081.022.039.025.07-.002.102-.061.075-.292.062-.394.046-.106-.017-.237-.049-.261-.141-.028-.108.023-.214.079-.313.112-.196.272-.298.506-.362.333-.092.752-.155 1.067-.167.711-.027 1.384.097 2.072.307.394.119.91.319 1.288.501.271.131.698.371.938.528.076.05.518.375.587.433.143.117.331.286.467.421.263.261.59.66.749.977.038.076.068.151.117.239.017.03.09.21.102.263.012.052.029.127.032.13C8.015 13.637 8.048 13.791 8.046 13.851M16.982 13.444c-.333.077-1.208.119-1.208.119l-.11.346c0 0 .437-.037.756-.004 0 0 .103-.012.115.117.004.12-.01.249-.01.249s-.007.078-.117.098c-.12.02-.943.052-.943.052l-.133.451c0 0-.05.104.061.074.103-.028.965-.189 1.078-.166.12.03.254.19.215.337-.046.181-.906.73-1.43.692 0 0-.275.018-.508-.354-.217-.354.082-1.025.082-1.025s-.137-.313-.038-.419c0 0 .059-.054.231-.066l.211-.436c0 0-.24.017-.383-.16-.133-.168-.144-.245-.042-.291.109-.054 1.11-.236 1.798-.213 0 0 .239-.023.447.392C17.052 13.236 17.152 13.404 16.982 13.444M14.392 15.122c-.088.208-.321.429-.611.291-.286-.138-.741-1.07-.741-1.07s-.173-.347-.206-.338c0 0-.037-.068-.06.312-.024.378.005 1.115-.146 1.231-.143.116-.316.07-.406-.066-.082-.134-.115-.452-.071-1.011.052-.56.182-1.156.349-1.341.166-.184.299-.05.351-.002 0 0 .222.201.588.792l.065.109c0 0 .333.558.367.557 0 0 .027.026.051.007.035-.01.021-.189.021-.189s-.069-.608-.373-1.638c0 0-.046-.128-.015-.249.031-.122.153-.065.153-.065s.47.237.699 1.002C14.634 14.222 14.482 14.913 14.392 15.122M19.455 14.664c-.214.374-.819 1.156-1.622.971-.265.643-.488 1.294-.616 2.268 0 0-.028.189-.185.124-.156-.055-.413-.314-.465-.672-.056-.471.154-1.267.582-2.18-.125-.203-.21-.493-.137-.907 0 0 .108-.767.878-1.459 0 0 .092-.08.146-.055.059.025.032.274-.015.396-.049.121-.392.715-.392.715s-.214.401-.154.718c.404-.622 1.323-1.875 1.893-1.48.191.137.28.435.28.756C19.648 14.139 19.581 14.439 19.455 14.664M19.289 13.679c0 0-.032-.247-.273.025-.208.23-.583.66-.884 1.245.317-.036.622-.207.714-.295C18.995 14.521 19.345 14.16 19.289 13.679M23.88 13.623h-1.472c-.029-.5-.09-.988-.185-1.49-.01-.052-.055-.09-.108-.09h-.339c-.03 0-.058.013-.077.036-.019.024-.027.053-.021.083.096.486.158.964.188 1.461H20.45c-.066 0-.12.053-.12.119v.306c0 .066.054.12.12.12h1.437c.001.076.002.143.002.207 0 .441-.019.805-.064 1.215-.004.032.007.063.028.087.021.023.051.037.082.037h.315c.061 0 .112-.046.119-.107.043-.413.061-.781.061-1.231 0-.063-.001-.131-.002-.207h1.452c.066 0 .12-.054.12-.12v-.306C24 13.677 23.946 13.623 23.88 13.623M4.193 9.521C4.172 9.552 4.167 9.59 4.179 9.625 4.192 9.661 4.219 9.688 4.254 9.7l.264.089C4.534 9.794 4.55 9.797 4.565 9.797c.049 0 .095-.024.122-.065.865-1.27 2.035-2.328 3.384-3.058 1.393-.754 2.971-1.153 4.565-1.153 1.925 0 3.781.568 5.37 1.642 1.55 1.048 2.754 2.509 3.481 4.226.022.051.072.085.128.085h.315c.036 0 .07-.018.091-.049.021-.03.025-.069.011-.103-.75-1.847-2.019-3.421-3.669-4.552C16.674 5.612 14.693 5 12.636 5 9.234 5 6.078 6.69 4.193 9.521"/>
</svg>
';
}
]]]
styles:
custom_fields:
c1:
- top: '-5%'
- left: 55%
- width: 50%
- position: absolute
Bra83,
That type of behavior indicates some sort of syntax problem. Looking at the code, I wonder if you are using the wrong type of single-quote after each ‘return’ and before the ; try changing those to the back quote symbol that is usually in the far upper left corner of the keyboard.
Good luck!
Thanks for answering me. I tried the other ways too. It seems to me that this code does not go all in ui-lovelace. But I don’t know where it goes either. 
@bra83
Try of this work for you
type: custom:button-card
entity: media_player.samsung_tv
name: TV
state_display: |
[[[
if (states['media_player.samsung_tv'].state === 'on') {
return `
<div style='display: flex;
padding: 0px 5px 0px 5px;
align-items: center;
background: transparent;
marquee-speed: slow
animation: marquee 20s linear infinite;'>
<marquee>
<span>
${states['media_player.samsung_tv'].attributes.media_title} 
</span>
</marquee>
</div>
`;
}
if (states['media_player.samsung_tv'].state === 'off') {
return `
<div style='display: flex;
padding: 0px 5px 0px 5px;
align-items: center;
background: transparent;
marquee-speed: slow;'>
<marquee>
<span>
${states['media_player.samsung_tv'].attributes.media_title} 
</span>
</marquee>
</div>
`;
}
]]]
custom_fields:
c1: |
[[[
if (states['media_player.samsung_tv'].attributes.media_title === 'YouTube') {
return "<ha-icon icon='mdi:youtube'></ha-icon>";
}
if (states['media_player.samsung_tv'].attributes.media_title === 'Netflix') {
return "<ha-icon icon='mdi:netflix'></ha-icon>";
}
if (states['media_player.samsung_tv'].attributes.media_title === 'Disney+') {
return `
<svg fill="#000000" viewBox="0 0 24 24">
<path d="M10.896 13.837c.013.002.016.002.029.004.216.029.429.068.591.141.151.067.239.151.32.301.123.228.131.546.02.788-.083.18-.264.33-.43.41-.172.084-.342.123-.537.146-.34.037-.708-.033-1.015-.181-.181-.089-.403-.241-.514-.437-.082-.144-.079-.331.02-.468.159-.218.5-.266.757-.257.196.008.548.068.734.134.052.019.242.093.275.127.023.024.038.058.028.09-.042.13-.358.198-.449.212-.244.037-.371-.055-.648-.165-.069-.027-.161-.057-.231-.063-.126-.012-.278.023-.302.161-.012.071.071.137.135.165.149.064.27.087.416.089.433.007.919-.064 1.273-.315.048-.035.096-.085.097-.149.002-.129-.224-.208-.224-.208-.238-.099-.679-.148-.906-.166-.238-.021-.613-.051-.703-.065-.093-.013-.193-.032-.274-.068-.081-.036-.159-.118-.183-.208-.041-.163.011-.362.102-.492.237-.34.791-.469 1.204-.52.401-.05 1.048-.049 1.442.16.061.033.092.063.079.128-.026.122-.117.2-.228.235-.117.037-.358.052-.463.058-.474.027-1.048.013-1.499.136-.035.01-.097.027-.116.049-.071.077.131.099.175.107.013.003.015.004.029.005L10.896 13.837M8.074 11.722c0 0 .077-.116.142-.204.118-.16.331-.382.491-.519.049-.042.107-.089.107-.089s-.091.009-.142.02c-.122.024-.3.142-.389.219-.147.126-.309.331-.236.513C8.057 11.688 8.074 11.722 8.074 11.722M8.892 11.941c.232-.016.45-.083.653-.195.199-.111.491-.328.461-.583-.009-.083-.063-.145-.131-.174-.089-.038-.135-.032-.248.001-.082.024-.119.039-.197.083-.228.133-.551.416-.727.642-.041.053-.082.113-.114.154-.02.025-.036.048-.034.055C8.561 11.95 8.801 11.947 8.892 11.941M8.3 12.376c-.024.025-.049.087-.076.131-.014.024-.04.054-.057.066-.061.044-.112.047-.17-.005-.082-.072-.129-.185-.133-.294-.002-.048.006-.1-.003-.14-.015-.068-.083-.137-.119-.202-.043-.076-.078-.209-.082-.295-.015-.268.126-.514.31-.709.185-.197.426-.36.689-.471.248-.105.612-.176.885-.081.089.03.212.106.275.185.013.016.024.034.037.043.012.008.044.011.069.015.087.015.212.081.263.125.103.089.159.173.185.296.052.247-.09.519-.253.684-.278.284-.552.484-.908.623-.156.061-.399.118-.576.102-.055-.005-.112-.019-.165-.023-.027-.002-.127-.028-.138-.035C8.32 12.381 8.303 12.372 8.3 12.376M8.617 12.924c.011.002.028.007.042.012.125.047.176.163.207.289.071.294.101.945.113 1.2C8.988 14.617 8.992 14.805 9 14.994c.007.16.02.373-.014.523-.012.054-.048.117-.1.149-.059.038-.194.041-.268.025-.182-.038-.242-.155-.268-.335-.062-.431-.032-1.276.004-1.632.012-.118.056-.495.118-.653C8.495 13.017 8.539 12.909 8.617 12.924M3.067 13.641c0 0-.272.019-.458.04-.238.026-.685.103-.942.195-.077.028-.234.093-.248.173-.014.082.037.147.094.214.033.039.219.218.271.261.219.183.663.465.99.601.112.046.298.113.298.113s-.014-.529-.011-1.05C3.061 13.913 3.067 13.641 3.067 13.641M8.046 13.851c.016.142-.021.411-.027.446-.012.082-.073.27-.083.293-.05.115-.099.208-.151.302-.089.16-.301.414-.426.523-.467.404-1.191.634-1.812.71-.421.051-.905.043-1.351-.039-.154-.028-.382-.081-.382-.081s.001.091-.007.156c-.004.029-.026.107-.038.132-.032.067-.086.102-.163.116-.094.017-.193.023-.279-.014-.142-.06-.193-.192-.218-.345-.02-.122-.041-.335-.041-.335s-.106-.05-.195-.094c-.272-.134-.53-.296-.756-.463-.063-.047-.331-.272-.391-.328-.166-.158-.316-.315-.43-.517-.089-.158-.114-.297-.047-.464.093-.233.426-.408.655-.508.168-.074.689-.244.905-.276.102-.015.261-.043.271-.049.004-.003.007-.006.01-.009C3.094 13 3.103 12.77 3.101 12.686c-.002-.083.061-.627.082-.742.011-.062.058-.302.106-.365.031-.042.087-.039.132-.011.248.154.324.69.342.962.011.166.017.416.017.416s.285-.008.46-.003c.17.004.358.031.534.059.226.036.667.132.92.261.208.106.403.283.466.472.059.173.05.292-.039.448-.1.176-.29.307-.483.317-.057.003-.273-.025-.34-.077-.026-.02-.025-.057-.006-.083C5.299 14.33 5.4 14.277 5.46 14.245c.03-.016.055-.034.078-.055.049-.044.094-.092.089-.148-.007-.073-.084-.118-.158-.147-.345-.137-1.035-.251-1.368-.271-.13-.008-.316-.014-.316-.014l.039 1.839c0 0 .153.029.274.049.069.011.363.037.441.039.594.016 1.258-.038 1.803-.295C6.583 15.13 6.802 14.99 6.969 14.8c.219-.251.334-.595.304-.955-.033-.392-.309-.858-.53-1.142-.583-.749-1.582-1.366-2.46-1.727-.897-.369-1.784-.581-2.736-.616-.245-.009-.781.003-1.051.078-.039.011-.078.024-.113.032-.028.007-.073.026-.085.036-.007.005-.014.013-.014.013s.017.009.033.016c.029.013.149.02.212.031.056.011.114.04.137.081.022.039.025.07-.002.102-.061.075-.292.062-.394.046-.106-.017-.237-.049-.261-.141-.028-.108.023-.214.079-.313.112-.196.272-.298.506-.362.333-.092.752-.155 1.067-.167.711-.027 1.384.097 2.072.307.394.119.91.319 1.288.501.271.131.698.371.938.528.076.05.518.375.587.433.143.117.331.286.467.421.263.261.59.66.749.977.038.076.068.151.117.239.017.03.09.21.102.263.012.052.029.127.032.13C8.015 13.637 8.048 13.791 8.046 13.851M16.982 13.444c-.333.077-1.208.119-1.208.119l-.11.346c0 0 .437-.037.756-.004 0 0 .103-.012.115.117.004.12-.01.249-.01.249s-.007.078-.117.098c-.12.02-.943.052-.943.052l-.133.451c0 0-.05.104.061.074.103-.028.965-.189 1.078-.166.12.03.254.19.215.337-.046.181-.906.73-1.43.692 0 0-.275.018-.508-.354-.217-.354.082-1.025.082-1.025s-.137-.313-.038-.419c0 0 .059-.054.231-.066l.211-.436c0 0-.24.017-.383-.16-.133-.168-.144-.245-.042-.291.109-.054 1.11-.236 1.798-.213 0 0 .239-.023.447.392C17.052 13.236 17.152 13.404 16.982 13.444M14.392 15.122c-.088.208-.321.429-.611.291-.286-.138-.741-1.07-.741-1.07s-.173-.347-.206-.338c0 0-.037-.068-.06.312-.024.378.005 1.115-.146 1.231-.143.116-.316.07-.406-.066-.082-.134-.115-.452-.071-1.011.052-.56.182-1.156.349-1.341.166-.184.299-.05.351-.002 0 0 .222.201.588.792l.065.109c0 0 .333.558.367.557 0 0 .027.026.051.007.035-.01.021-.189.021-.189s-.069-.608-.373-1.638c0 0-.046-.128-.015-.249.031-.122.153-.065.153-.065s.47.237.699 1.002C14.634 14.222 14.482 14.913 14.392 15.122M19.455 14.664c-.214.374-.819 1.156-1.622.971-.265.643-.488 1.294-.616 2.268 0 0-.028.189-.185.124-.156-.055-.413-.314-.465-.672-.056-.471.154-1.267.582-2.18-.125-.203-.21-.493-.137-.907 0 0 .108-.767.878-1.459 0 0 .092-.08.146-.055.059.025.032.274-.015.396-.049.121-.392.715-.392.715s-.214.401-.154.718c.404-.622 1.323-1.875 1.893-1.48.191.137.28.435.28.756C19.648 14.139 19.581 14.439 19.455 14.664M19.289 13.679c0 0-.032-.247-.273.025-.208.23-.583.66-.884 1.245.317-.036.622-.207.714-.295C18.995 14.521 19.345 14.16 19.289 13.679M23.88 13.623h-1.472c-.029-.5-.09-.988-.185-1.49-.01-.052-.055-.09-.108-.09h-.339c-.03 0-.058.013-.077.036-.019.024-.027.053-.021.083.096.486.158.964.188 1.461H20.45c-.066 0-.12.053-.12.119v.306c0 .066.054.12.12.12h1.437c.001.076.002.143.002.207 0 .441-.019.805-.064 1.215-.004.032.007.063.028.087.021.023.051.037.082.037h.315c.061 0 .112-.046.119-.107.043-.413.061-.781.061-1.231 0-.063-.001-.131-.002-.207h1.452c.066 0 .12-.054.12-.12v-.306C24 13.677 23.946 13.623 23.88 13.623M4.193 9.521C4.172 9.552 4.167 9.59 4.179 9.625 4.192 9.661 4.219 9.688 4.254 9.7l.264.089C4.534 9.794 4.55 9.797 4.565 9.797c.049 0 .095-.024.122-.065.865-1.27 2.035-2.328 3.384-3.058 1.393-.754 2.971-1.153 4.565-1.153 1.925 0 3.781.568 5.37 1.642 1.55 1.048 2.754 2.509 3.481 4.226.022.051.072.085.128.085h.315c.036 0 .07-.018.091-.049.021-.03.025-.069.011-.103-.75-1.847-2.019-3.421-3.669-4.552C16.674 5.612 14.693 5 12.636 5 9.234 5 6.078 6.69 4.193 9.521"/>
</svg>
`;
}
]]]
styles:
custom_fields:
c1:
- top: '-5%'
- left: 55%
- width: 50%
- position: absolute
template:
- base
- icon_tv
- loader
1 Like
Hi. Your card looks beautiful.
I was wondering if I could ask you how you managed to make the font size of the name and the font size of the state look different?
button_card_templates/extra_styles.yaml
I thought I could modify the base in extra_styles.yaml, so I did, but it doesn’t work in my environment.
…
/* * * * * * * * * * * * * * * * * *
* *
* BASE *
* *
* * * * * * * * * * * * * * * * * */
#container {
text-align: left !important;
z-index: 1;
}
#card {
padding: 10.9% 9.9% 8.9% 10.9%;
}
#state::first-letter {
text-transform: uppercase;
}
#name{
font-size: var(--button-card-font-size);
font-weight: var(--button-card-font-weight);
letter-spacing: var(--button-card-letter-spacing);
}
#state, #label{
font-size: calc(var(--button-card-font-size) * 0.6);
font-weight: var(--button-card-font-weight);
letter-spacing: calc(var(--button-card-letter-spacing) * 0.6);
}
/* portrait */
@media screen and (max-width: 1280px) {
#name, #state, #label, #watt{
font-size: calc(var(--button-card-font-size) * var(--card-portrait));
}
}
/* phone */
@media screen and (max-width: 800px) {
#name, #state, #label, #watt{
font-size: calc(var(--button-card-font-size) * var(--card-phone));
}
}
${variables.tilt_enable === true ? `
…
it did not work. But I found out that in theme if I change flex-wrap: nowrap to wrap, then it get fixed.
Thank you so much! It works.
Btw, Do you know how I can return an entity picture inside a circle instead of a mdi icon? My TV provides a picture address for each app.