Thx, the icon is working now! i changed the code of circle input back to yourse, i toughd in this way it always show the current temp, now it shows the SET temp when heating.
wich line do i need to remove or edit that it always show the current temp?
Under state_display, does it know al the variabels ? Can I set them to auto, heat, off ?
circle_input: >
[[[
return Math.round(entity.attributes.current_temperature).toString();
]]]
CSS question. I have a pop-up for controlling my heat pump, and the functions are in place, but the headings are differently formated.
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Temperatur och Värmepumpen
card_mod:
style:
#popup header
.: |
div.content {
margin-top: -24px !important;
}
content:
type: vertical-stack
cards:
- type: entities
card_mod:
class: content
style:
.: |
#states {
padding-top: 1.2em;
padding-bottom: 0em;
}
hui-horizontal-stack-card$: |
h1 {
font-size: 15px !important;
font-weight: 600 !important;
padding: 5px 0 4px 9px !important;
letter-spacing: 0.01em !important;
}
:host {
--climate-margin: 6.5px;
}
#root {
padding: 2px 0px 10px 8px !important;
}
#root > *:nth-child(1) {
margin-right: var(--climate-margin) !important;
}
#root > *:nth-child(2),
#root > *:nth-child(3) {
margin: 0px var(--climate-margin) !important;
}
#root > *:nth-child(4) {
margin-left: var(--climate-margin) !important;
margin-right: -1px !important;
}
entities:
- type: custom:mushroom-climate-card
entity: climate.varmepumpen
name: Värmepumpen
icon: mdi:home-thermometer
hvac_modes:
- 'off'
- heat
- cool
- heat_cool
- dry
- fan_only
primary_info: name
secondary_info: state
show_temperature_control: false
card_mod:
style: |
mushroom-card {
margin: -5px -13px 0 -4px;
}
- type: custom:mushroom-climate-card
entity: climate.varmepumpen
icon_type: none
secondary_info: none
primary_info: none
show_temperature_control: true
card_mod:
style: |
mushroom-card {
margin: -18px -13px -8px -4px
}
- type: custom:hui-horizontal-stack-card
title: Fan mode
cards:
- type: custom:button-card
entity: climate.varmepumpen
name: Low
variables:
fan_mode: Low
template:
- climate_fan_mode
- type: custom:button-card
entity: climate.varmepumpen
name: LowMid
variables:
fan_mode: LowMid
template:
- climate_fan_mode
- type: custom:button-card
entity: climate.varmepumpen
name: Mid
variables:
fan_mode: Mid
template:
- climate_fan_mode
- type: custom:button-card
entity: climate.varmepumpen
name: HighMid
variables:
fan_mode: HighMid
template:
- climate_fan_mode
- type: custom:button-card
entity: climate.varmepumpen
name: High
variables:
fan_mode: High
template:
- climate_fan_mode
- type: custom:hui-horizontal-stack-card
title: Preset mode
cards:
- type: custom:button-card
entity: climate.varmepumpen
name: None
variables:
preset_mode: 'none'
template:
- climate_preset_mode
- type: custom:button-card
entity: climate.varmepumpen
name: Boost
variables:
preset_mode: 'boost'
template:
- climate_preset_mode
- type: custom:button-card
entity: climate.varmepumpen
name: Eco
variables:
preset_mode: eco
template:
- climate_preset_mode
- type: custom:hui-horizontal-stack-card
title: Swinging mode
cards:
- type: custom:button-card
entity: climate.varmepumpen
name: Auto
variables:
swing_mode: Auto
template:
- climate_swing_mode
- type: custom:button-card
entity: climate.varmepumpen
name: Up
variables:
swing_mode: Up
template:
- climate_swing_mode
- type: custom:button-card
entity: climate.varmepumpen
name: UpMid
variables:
swing_mode: UpMid
template:
- climate_swing_mode
- type: custom:button-card
entity: climate.varmepumpen
name: Mid
variables:
swing_mode: Mid
template:
- climate_swing_mode
- type: custom:button-card
entity: climate.varmepumpen
name: DownMid
variables:
swing_mode: DownMid
template:
- climate_swing_mode
- type: custom:button-card
entity: climate.varmepumpen
name: Down
variables:
swing_mode: Down
template:
- climate_swing_mode
- type: custom:button-card
entity: climate.varmepumpen
name: All
variables:
swing_mode: All
template:
- climate_swing_mode
# SPACER
- type: custom:button-card
color_type: blank-card
# SENSORS
- entity: sensor.snitt_temperatur
you have css styles for h1 horizontal stack.
Whenever I add - light template all the formatting goes off and it shows like a normal button card. any idea why this is happening?
Nice!
Have you tried to update the “tablet.yaml” file. Its under “Theme” folder.
The easiest way is to upload or copy the whole code from there. It worked for me
“A different take on designing a Lovelace UI - #5453 by VietNgoc”
oh thank you! but unfortunately I am using UI Lovelace minimalist so can’t move the theme to tablet 
one more question if you dont mind, whenever I use template light, all the styling and icon goes away. Any idea why?
I also changed the rounded by playing on the border function
Yes, but I stil don’t get it. Isn’t that supposed to be declared once for all the horizontal-stack cards? All the fan controll buttons are based on horizontal stacks aren’t they?
just delete…
h1 {
font-size: 15px !important;
font-weight: 600 !important;
padding: 5px 0 4px 9px !important;
letter-spacing: 0.01em !important;
}
But If I want to keep the H1 format from fan mode for Swing mode and Preset mode headings?
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Temperatur och Värmepumpen
card_mod:
style:
#popup header
.: |
#states {
padding-top: 1.2em;
padding-bottom: 0em;
}
hui-vertical-stack-card$hui-horizontal-stack-card:
$: |
h1 {
font-size: 16px !important;
font-weight: 600 !important;
padding: 5px 0 4px 9px !important;
letter-spacing: 0.01em !important;
}
:host {
--climate-margin: 6.5px;
}
#root {
padding: 2px 0px 10px 8px !important;
}
#root > *:nth-child(1) {
margin-right: var(--climate-margin) !important;
}
#root > *:nth-child(2),
#root > *:nth-child(3) {
margin: 0px var(--climate-margin) !important;
}
#root > *:nth-child(4) {
margin-left: var(--climate-margin) !important;
margin-right: -1px !important;
}
content:
type: vertical-stack
cards:
- type: entities
entities:
- type: custom:mushroom-climate-card
entity: climate.varmepumpen
name: Värmepumpen
icon: mdi:home-thermometer
hvac_modes:
- 'off'
- heat
- cool
- heat_cool
- dry
- fan_only
primary_info: name
secondary_info: state
show_temperature_control: false
card_mod:
style: |
mushroom-card {
margin: -5px -13px 0 -4px;
}
- type: custom:mushroom-climate-card
entity: climate.varmepumpen
icon_type: none
secondary_info: none
primary_info: none
show_temperature_control: true
card_mod:
style: |
mushroom-card {
margin: -18px -13px -8px -4px
}
- type: custom:hui-horizontal-stack-card
title: Fan mode
cards:
- type: custom:button-card
entity: climate.varmepumpen
name: Low
variables:
fan_mode: Low
template:
- climate_fan_mode
- type: custom:button-card
entity: climate.varmepumpen
name: LowMid
variables:
fan_mode: LowMid
template:
- climate_fan_mode
- type: custom:button-card
entity: climate.varmepumpen
name: Mid
variables:
fan_mode: Mid
template:
- climate_fan_mode
- type: custom:button-card
entity: climate.varmepumpen
name: HighMid
variables:
fan_mode: HighMid
template:
- climate_fan_mode
- type: custom:button-card
entity: climate.varmepumpen
name: High
variables:
fan_mode: High
template:
- climate_fan_mode
- type: custom:hui-horizontal-stack-card
title: Preset mode
cards:
- type: custom:button-card
entity: climate.varmepumpen
name: None
variables:
preset_mode: 'none'
template:
- climate_preset_mode
- type: custom:button-card
entity: climate.varmepumpen
name: Boost
variables:
preset_mode: 'boost'
template:
- climate_preset_mode
- type: custom:button-card
entity: climate.varmepumpen
name: Eco
variables:
preset_mode: eco
template:
- climate_preset_mode
- type: custom:hui-horizontal-stack-card
title: Swinging mode
cards:
- type: custom:button-card
entity: climate.varmepumpen
name: Auto
variables:
swing_mode: Auto
template:
- climate_swing_mode
- type: custom:button-card
entity: climate.varmepumpen
name: Up
variables:
swing_mode: Up
template:
- climate_swing_mode
- type: custom:button-card
entity: climate.varmepumpen
name: UpMid
variables:
swing_mode: UpMid
template:
- climate_swing_mode
- type: custom:button-card
entity: climate.varmepumpen
name: Mid
variables:
swing_mode: Mid
template:
- climate_swing_mode
- type: custom:button-card
entity: climate.varmepumpen
name: DownMid
variables:
swing_mode: DownMid
template:
- climate_swing_mode
- type: custom:button-card
entity: climate.varmepumpen
name: Down
variables:
swing_mode: Down
template:
- climate_swing_mode
- type: custom:button-card
entity: climate.varmepumpen
name: All
variables:
swing_mode: All
template:
- climate_swing_mode
Thanks for the assistance! I got it working ALMOST the way I want it now! I made a seperate template for my clima unit based on the circle template.
The challenge left is that when I move out of the specific lovelace view and come back it looks like this second image. I guess that is the base template that loads. In order to get the button to display as I want it, I need to chnge the state of it by turning it off - and then of course back on. Slightly inconvenient and not according to plan. Do you have any suggestions for workaround?
post here all your code, the problem is probably somewhere there
After aditional testing, it changes after approximately 30 seconds. The color change is set in the icon.yaml through my icon_ac and not in the circle_climate.yaml as I wrongfully said initially.
icon_ac:
styles:
card:
- --c-fill-color-on: >
[[[
let d = entity.entity_id.split('.')[0];
return (d == 'climate')
? '#64191e'
: 'none';
]]]
- --c-stroke-color-on: >
[[[
let d = entity.entity_id.split('.')[0];
return (d == 'climate')
? '#663313'
: 'none';
custom_fields:
icon:
- width: 90%
- margin-top: '-5%'
custom_fields:
icon: |
[[[
let style = `
<style>
@keyframes bottom-flap {
0% {
transform: rotateX(100deg);
}
100% {
transform: rotateX(0deg);
}
}
.bottom-flap{
animation: bottom-flap 4s ease-in-out;
transform-origin: top;
transform-box: fill-box;
}
@keyframes flow-control {
0% {
transform: rotateX(100deg);
}
50% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}
.flow-control{
animation: flow-control 5s ease-in-out;
transform-origin: top;
transform-box: fill-box;
}
</style>
`,
path = `
<path fill="url(#aircon_paint2_linear_1_2)" id="aircon-unit" d="M1.21287 15.9548C0.98527 15.9548 0.801849 16.1382 0.801849 16.3658V31.8749C0.801849 32.1025 0.98527 32.2859 1.21287 32.2859H42.9177V32.5189C42.9177 32.6006 43.0462 32.6648 43.2055 32.6648H46.0787C46.062 32.7554 46.0539 32.8473 46.0546 32.9393V33.6502C46.0546 33.8685 46.0907 34.0452 46.1362 34.0452H47.3961C47.4416 34.0452 47.4778 33.8685 47.4778 33.6502V32.9393C47.4784 32.8473 47.4703 32.7554 47.4537 32.6648H47.6491C47.8085 32.6648 47.937 32.6006 47.937 32.5189V32.2859H48.7872C49.0148 32.2859 49.1982 32.1025 49.1982 31.8749V16.3658C49.1982 16.1382 49.0148 15.9548 48.7872 15.9548H1.21287ZM2.72978 23.7576H47.3613C47.4001 23.7576 47.4322 23.7897 47.4322 23.8312V24.4404C47.4322 24.4819 47.4001 24.5167 47.3613 24.5167H2.72844C2.68961 24.5167 2.65748 24.4819 2.65748 24.4404V23.8312C2.65748 23.7897 2.68961 23.7576 2.72844 23.7576H2.72978Z"/>
`,
gradient = `
<linearGradient id="aircon_paint0_linear_1_2" x1="22.9118" y1="35.1798" x2="22.9118" y2="32.2111" gradientUnits="userSpaceOnUse">
<stop stop-color="#CCCCCC"/>
<stop offset="1" stop-color="#585858"/>
</linearGradient>
<linearGradient id="aircon_paint1_linear_1_2" x1="22.8125" y1="32.9688" x2="22.8125" y2="34.5938" gradientUnits="userSpaceOnUse">
<stop stop-color="#4D4D4D"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
<linearGradient id="aircon_paint2_linear_1_2" x1="25.375" y1="14.625" x2="25.9375" y2="60.75" gradientUnits="userSpaceOnUse">
<stop stop-color="#CCCCCC"/>
<stop offset="1" stop-color="#2C2C2C"/>
</linearGradient>
`;
if (variables.state !== 'off') {
return `
<svg viewBox="0 0 50 50"> ${gradient}
${path}
<path id="bottom-flap" d="M3.38065 31.8435H40.2322C40.2647 31.8435 40.2908 31.8697 40.2908 31.9022C40.3213 32.714 40.6142 33.7062 40.7243 34.4498L2.88846 34.4536C2.969 33.7186 3.32197 32.7133 3.32197 31.9022C3.32197 31.8697 3.34814 31.8435 3.38065 31.8435V31.8435Z" fill="url(#aircon_paint0_linear_1_2)"/>
<path id="flow-control" d="M4.01023 31.2383H39.6673C39.6988 31.2383 39.7241 31.265 39.7241 31.2982C39.7756 33.3753 40.037 33.1396 40.1436 33.8985L3.534 33.9025C3.61192 33.1523 3.88716 33.4851 3.95346 31.2982C3.95346 31.265 3.97878 31.2383 4.01023 31.2383L4.01023 31.2383Z" fill="url(#aircon_paint1_linear_1_2)"/>
${style}
</svg>
`;
}
if (variables.state === 'off') {
return `
<svg viewBox="0 0 50 50"> ${style}
<path fill="#9da0a2" id="aircon-unit" d="M1.21287 15.9548C0.98527 15.9548 0.801849 16.1382 0.801849 16.3658V31.8749C0.801849 32.1025 0.98527 32.2859 1.21287 32.2859H42.9177V32.5189C42.9177 32.6006 43.0462 32.6648 43.2055 32.6648H46.0787C46.062 32.7554 46.0539 32.8473 46.0546 32.9393V33.6502C46.0546 33.8685 46.0907 34.0452 46.1362 34.0452H47.3961C47.4416 34.0452 47.4778 33.8685 47.4778 33.6502V32.9393C47.4784 32.8473 47.4703 32.7554 47.4537 32.6648H47.6491C47.8085 32.6648 47.937 32.6006 47.937 32.5189V32.2859H48.7872C49.0148 32.2859 49.1982 32.1025 49.1982 31.8749V16.3658C49.1982 16.1382 49.0148 15.9548 48.7872 15.9548H1.21287ZM2.72978 23.7576H47.3613C47.4001 23.7576 47.4322 23.7897 47.4322 23.8312V24.4404C47.4322 24.4819 47.4001 24.5167 47.3613 24.5167H2.72844C2.68961 24.5167 2.65748 24.4819 2.65748 24.4404V23.8312C2.65748 23.7897 2.68961 23.7576 2.72844 23.7576H2.72978Z"/>
</svg>
`;
} else {
return `
<svg viewBox="0 0 50 50"> ${style}
<path fill="#9da0a2" id="aircon-unit" d="M1.21287 15.9548C0.98527 15.9548 0.801849 16.1382 0.801849 16.3658V31.8749C0.801849 32.1025 0.98527 32.2859 1.21287 32.2859H42.9177V32.5189C42.9177 32.6006 43.0462 32.6648 43.2055 32.6648H46.0787C46.062 32.7554 46.0539 32.8473 46.0546 32.9393V33.6502C46.0546 33.8685 46.0907 34.0452 46.1362 34.0452H47.3961C47.4416 34.0452 47.4778 33.8685 47.4778 33.6502V32.9393C47.4784 32.8473 47.4703 32.7554 47.4537 32.6648H47.6491C47.8085 32.6648 47.937 32.6006 47.937 32.5189V32.2859H48.7872C49.0148 32.2859 49.1982 32.1025 49.1982 31.8749V16.3658C49.1982 16.1382 49.0148 15.9548 48.7872 15.9548H1.21287ZM2.72978 23.7576H47.3613C47.4001 23.7576 47.4322 23.7897 47.4322 23.8312V24.4404C47.4322 24.4819 47.4001 24.5167 47.3613 24.5167H2.72844C2.68961 24.5167 2.65748 24.4819 2.65748 24.4404V23.8312C2.65748 23.7897 2.68961 23.7576 2.72844 23.7576H2.72978Z"/>
</svg>
`;
}
]]]```
Anyone have any idea why the card shows different when I used template “light” the first one is just base and icon and second is light and icon
Hello all,
since today I noticed an erro on my swipe card (based on Matthias template)
My code has a minor difference since I do not have a title for the card:
in media.yaml
state_display: >
[[[
let swipeCard = this.getRootNode().host,
gridTitle = swipeCard.getRootNode().querySelector("h1");
swipeCard.swiper.on("slideChange", () => {
if (swipeCard.swiper.realIndex === 0) {
gridTitle.textContent = "Media";
The error I see is:
any idea why this is happening? Has anyone else seen t?
Thanks
Davide
