How can I make the font on the button bigger on my phone but not affect them on my tablet/computer?
Thank you. I have used ChatGPT to modify the code so that it can display different gif animations during the day and night. I have also modified the font sizes of mobile and tablet devices, and now the layout is normal. Also, I would like to ask if the author’s overall theme layout can be customized for each device like you do. What should I do?
- background: >
[[[
let weather = states[variables.current_weather].state.toLowerCase();
let now = new Date();
let isDaytime = now.getHours() >= 6 && now.getHours() < 18;
if (!isDaytime) {
return `linear-gradient(to top, rgba(255, 192, 203, 0.5) 0%, rgba(90,113,157,0.4) 100%) 100% / cover, url(/local/svg/weather/gif/${weather}-night.gif)`;
} else {
return `linear-gradient(to top, rgba(255, 192, 203, 0.5) 0%, rgba(90,113,157,0.4) 100%) 100% / cover, url(/local/svg/weather/gif/${weather}-day.gif)`;
}
]]]
1 Like
When I stretch the resolution to the tablet, the font on the card will become very large and thick, which is also the case on my iPad. I have tried to modify the text size of “name, state” under “styles” in base.yaml. Although this can be effective, it will affect the font display effect on mobile phones and web pages. I just want it to maintain a smaller font display in tablet mode. What should I do?
2 Likes
in button_card_templates/extra_styles.yaml look for
/* magnification */
:host {
--card-portrait: 1.4;
--card-phone: 2.271;
}
the font size is multiplied by the values, so setting them along with the font size should give you what you are after
2 Likes
Thank you. After setting it up, it’s working fine. Thank you
Hello, I tried to add a lock to a certain card, but the lock icon will not appear on the card. I have added the - lock template attribute, but it has no effect. I have created an entity for the lock, which can lock the card. However, when closing the lock, I need to go to the entity information and close it on the card
Help me find! Where is the apexcharts chart code? I can’t find how to translate “Söndag” into my language!
1 Like
Thank you!
I want to display the light status on a custom button-card using state vs. icon to show different activities. Within custom button-card, can I use two distinct entities: one for showing the light state and another for highlighting the icon? Any suggestions from experts?
Holy, many thanks!! Where did you manage to get the SVG’s from?
Hello everybody!
I need you to give me a tip on how to change the sidebar. I’m a perfect beginner and would like to know how to change this layout by adding animated weather card, agenda, etc.
Congratulations on the project, it’s magnificent.
I have created an additional light template in the button_card_templates folder named light_colored. Can anyone tell me how to get the circle slider dimmer to work on that template? I think I need to add light_colored in the circle.yaml but I am not sure I am doing it correctly.
/* * * * * * * * * * * * * * * * * *
* *
* CIRCLE *
* *
* * * * * * * * * * * * * * * * * */
let circle = (state, input, unit) => {
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${c};
stroke-dashoffset: ${typeof input === 'number' && c - input / 100 * c};
stroke-width: var(--c-stroke-width);
stroke: ${state ? 'var(--c-stroke-color-on)' : 'var(--c-stroke-color-off)'};
fill: ${state ? 'var(--c-fill-color-on)' : 'var(--c-fill-color-off)'};
}
text {
font-size: var(--c-font-size);
font-weight: var(--c-font-weight);
letter-spacing: var(--c-letter-spacing);
fill: var(--c-font-color);
}
tspan {
font-size: var(--c-unit-font-size);
}
#circle_value, tspan {
text-anchor: middle;
dominant-baseline: central;
}
</style>
<circle id="circle_stroke" cx="25" cy="25" r="${r}"/>
<text id="circle_value" x="50%" y="52%">${input}${tspan}${unit}</tspan></text>
</svg>
${domain === 'light', 'light_colored' && `
<input id="circle_slider" type="range" min="0" max="100" value="${input}">
`}
`;
}
/* * * * * * * * * * * * * * * * * *
* *
* LIGHT *
* *
* * * * * * * * * * * * * * * * * */
if (domain === 'light_colored', 'light' && state) {Alright I’m back with more questions. I am trying to take on animating an icon, and am failing miserably. I have the icon created as an svg. I’m wanting an animated fireplace icon that flickers when the device is turned on. Anyone care to walk me through this process, or have one that I can use?
Also,
I used a picture element card of a remote in a pop card. How can I resize the entire remote to make it smaller. The code is below. Thanks!
1 Like
share fireplace svg
I am trying to get the color wheel to pop-up without any luck. The custom-light-card works fine and the actions at the bottom change the color of the light but the color wheel will not pop-up. If I move the light-enitity-card to open on double tap of the button it works fine. Any insight? I have copied @Laffer 's light template from here with the same result.
This is what my light.yaml currently looks like.
light:
template:
- base
- circle
- loader
variables:
circle_input: >
[[[ return entity === undefined || Math.round(entity.attributes.brightness / 2.54); ]]]
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: >
[[[
return !entity || entity.attributes.friendly_name;
]]]
style: >
--popup-background-color: transparent;
content:
type: custom:mod-card
card_mod:
style: |
#states {
padding-top: 0.5em;
}
card:
type: custom:light-popup-card
entity: >
[[[ return entity.entity_id ]]]
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: "#c7c7c7"
sliderTrackColor: rgba(25, 25, 25, 0.9)
displayType: slider
actionSize: 4.5em
actionsInARow: 2
actions:
- action: call-service
service: light.turn_on
color: "#d8d9e1"
service_data:
entity_id: >
[[[ return entity.entity_id ]]]
color_temp: 153
- action: call-service
service: light.turn_on
color: "#d5b08d"
service_data:
entity_id: >
[[[ return entity.entity_id ]]]
color_temp: 326
- action: call-service
service: light.turn_on
color: "#ce944b"
service_data:
entity_id: >
[[[ return entity.entity_id ]]]
color_temp: 500
- action: fire-dom-event
image: >-
data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
50 50"%3E%3Cstyle%3Esvg%7Bbackground:radial-gradient(circle,rgba(255,255,
255,1) 0%25,rgba(255,255,255,0) 80%25),conic-gradient(%237827e6,%23e622e7,
%23e40588,%23e41919,%23e5691e,%23e8e22e,%237de629,%2334e828,%2333e75c,
%2334e8e0,%23207de5,%231227e5,%237827e6)%7D%3C/style%3E%3C/svg%3E
browser_mod:
command: popup
title: >
[[[ return entity.attributes.friendly_name ]]]
card:
type: custom:light-entity-card
entity: >
[[[ return entity.entity_id ]]]
brightness: true
color_temp: true
full_width_sliders: false
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
persist_features: true
consolidate_entities: false
2 Likes
I made a fireplace icon a while back, but got sidetracked. This is what I’m currently using.
And this is what it looks like while it’s off
icon_fireplace:
styles:
custom_fields:
icon:
- width: 110%
- margin-top: -10%
- margin-left: -5%
custom_fields:
icon: >
[[[
let
frame = ` <g class="frame"> <polygon points="3.5,5.8 3.5,8.1 6.1,10.8 43.9,10.8 46.5,8.1 46.5,5.8 "/> <path d="M42.2,11.9H7.8v28h-2l-2.3,2.3v2h43v-2l-2.3-2.3h-2V11.9z M14.2,39.9V20.5c0,0,5.4-2.2,10.8-2.2s10.8,2.2,10.8,2.2v19.4 H14.2z"/> </g> `,
back = ` <path class="back" d="M35.8,39.9V20.5c0,0-5.4-2.2-10.8-2.2s-10.8,2.2-10.8,2.2v19.4H35.8z"/>`,
flame1 = ` <path class="flame1" d="M15.9,34.7c0,0-0.3,0.4-0.4,0.6l-0.1,0.1c-0.5,1.1-0.1,2.4,0.7,3.2c0.8,0.7,1.9,0.9,2.9,0.8 c1-0.1,1.9-0.7,2.4-1.5c0.1-0.3,0.3-0.5,0.3-0.8c0.1-0.2,0.1-0.5,0.1-0.7c0.1-1-0.4-2.1-1.2-2.8c0.4,0.8,0.3,1.8-0.3,2.5 c0,0,0,0.1-0.1,0.1c-0.1,0.1-0.2,0.1-0.3,0.1C20,36,20,35.9,20,35.8c0-0.1,0-0.1,0-0.2c0.6-1.5,0.1-3.3-1.1-4.3 c-0.3-0.3-0.7-0.5-1.2-0.6c0.5,0.9,0.3,2-0.4,2.7c-0.3,0.3-0.7,0.5-1,0.8C16.1,34.4,16,34.5,15.9,34.7"/>`,
flame2 = ` <path class="flame2" d="M29.4,31.8c-0.2-0.2-0.4-0.4-0.6-0.6c-0.5-0.5-1.1-0.8-1.6-1.3c-1.2-1.1-1.4-3-0.7-4.4c-0.7,0.2-1.4,0.6-1.9,1 c-2,1.6-2.8,4.4-1.8,6.9c0,0.1,0.1,0.2,0.1,0.3c0,0.2-0.1,0.3-0.3,0.4c-0.2,0.1-0.4,0-0.5-0.1c0,0-0.1-0.1-0.1-0.1 c-0.9-1.1-1-2.7-0.4-4c-1.3,1.1-2,2.8-1.9,4.5c0,0.4,0.1,0.8,0.2,1.2c0.1,0.5,0.3,0.9,0.5,1.3c0.8,1.3,2.3,2.3,3.8,2.5 c1.7,0.2,3.4-0.1,4.7-1.2c1.4-1.3,1.9-3.3,1.2-5.1L30,32.8C29.8,32.4,29.4,31.8,29.4,31.8 M26.9,36.7c-0.2,0.2-0.6,0.4-0.8,0.5 c-0.9,0.3-1.7-0.1-2.2-0.6c0.9-0.2,1.5-0.9,1.6-1.6c0.1-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.1-1.1,0.1-1.6c0.1,0.3,0.3,0.6,0.5,0.8 c0.6,0.8,1.5,1.1,1.7,2.2c0,0.1,0,0.2,0,0.3C27.7,35.5,27.4,36.2,26.9,36.7L26.9,36.7z"/>`,
flame3 = ` <path class="flame3" d="M34.1,34.5c-0.1-0.2-0.3-0.3-0.4-0.4c-0.3-0.3-0.7-0.5-1-0.8c-0.7-0.7-0.9-1.9-0.4-2.9 c-0.5,0.1-0.9,0.4-1.2,0.7c-1.3,1-1.8,2.9-1.2,4.5c0,0.1,0,0.1,0,0.2c0,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0-0.3-0.1 c0,0-0.1-0.1-0.1-0.1C28.7,35,28.6,34,29,33.2c-0.8,0.7-1.3,1.8-1.2,2.9c0,0.3,0.1,0.5,0.1,0.8c0.1,0.3,0.2,0.6,0.4,0.9 c0.5,0.9,1.5,1.5,2.5,1.6c1.1,0.1,2.2-0.1,3-0.8c0.9-0.8,1.2-2.2,0.8-3.3l-0.1-0.1C34.4,34.9,34.1,34.5,34.1,34.5"/>`;
if (variables.state === 'off') {
return `
<svg viewBox="0 0 50 50">
<style>
.frame { fill: #9da0a2; }
</style>
${frame}</svg>
`;
}
if (variables.state_on) {
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes flames {
0% { transform: scale(1, 0.95) rotateY(0deg) skew(0deg); }
25% { transform: scale(0.9, 1.1) rotateY(30deg) skew(3deg); }
50% { transform: scale(1, 0.95) rotateY(0deg) skew(0deg); }
75% { transform: scale(0.9, 1.1) rotateY(-30deg) skew(-3deg); }
100% { transform: scale(1, 0.95) rotateY(0deg) skew(0deg); }
}
@keyframes back {
0% { fill: #ffd61f; }
50% { fill: #ffc31f; }
100% { fill: #ffd61f; }
}
.frame {
fill: #616161;
}
.back {
animation: back 0.2s linear infinite;
}
.flame1 {
fill: orangered;
animation: flames 1.3s linear infinite;
transform-origin: 37% 79%;
}
.flame2 {
fill: red;
animation: flames 1.4s linear infinite;
transform-origin: 50% 79%;
}
.flame3 {
fill: orangered;
animation: flames 1.2s linear infinite;
transform-origin: 63% 79%;
}
</style>
${back} ${frame} ${flame2} ${flame1} ${flame3} </svg>
`;
}
]]]
5 Likes
This is great! So you have separate SVG files for each component of the fireplace? I’ll use this until I can figure out how to get mine automated. Thanks a ton!