How would I go about switching the button control position on the cover card? I want up on the left, but it is currently on the right.
Iâm looking for a way to have the cover card vertical (like lovelace-vertical-slider-cover-card, any hints on that?
Try this (not tested, but Iâve had to use similar in other cards)âŚ
template:
- sensor:
- name: "woonkamer_total_covers_closed"
state: >
‍{{ expand('cover.woonkamer_covers') | selectattr('attributes.current_position', 'eq', 0) | list | count | int }}
It forces a non-printable character to prepend the 0 meaning that itâs not seen as a âfalselyâ value. In this case the character used is the âzero width joinerâ.
I recommend everyone to not use stack-in-card as itâs not maintained as of a few years ago(2020)⌠use âvertical-stack-in-cardâ instead, that even has a UI editor so itâs easier to do changes etc
5 Likes
Try this.
ha-card {
--control-height: 16px;
--control-top: 16px;
--control-border-radius: 5px;
}
I have tried it but it shows the zero but also the non-printable character.
Also in the developer tools I get the same wrong text:
OK. Iâve tested now with a template chip. It appears that it doesnât process the html entities.
However, you can paster the character in.
Use the following link: â Zero Width Joiner (ZWJ) Emoji and it will allow to copy the character.
I would put this character in the output of the card rather than the template sensor itself. That way youâre only controlling the output, allowing automations to still use the 0 if needed.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:home
content: '{{ ''â0'' }}'
That was the test I did. Whilst it looks like itâs just a 0, I pasted the character I copied from that link just before the 0.
Thanks that works. But isnât it a bug? So I think I have to create it? (Because in other controls there are no problems).
It seems to be that there is another bug:
icon_color: >
{% if states('sensor.woonkamer_total_covers_closed') == 0 %}
disabled
{% else %}
blue
{% endif %}
This doesnât work. My sensor gives zero as value and in the UI the icon_color is blue.
When I change the code to:
icon_color: >
{% if states('sensor.woonkamer_total_covers_closed') | int == 0 %}
disabled
{% else %}
blue
{% endif %}
So I have added the â| intâ part and then it works. But that is already in the template sensor.
You could try and raise again but this was already raised and closed here: [Bug]: Template chips card cannot return 0 when Jinja templating ¡ Issue #515 ¡ piitaya/lovelace-mushroom ¡ GitHub
RE: your colour. Iâm pretty sure states are strings so you would need to cast to int as you did in your working example or compare against '0' in your first example.
Okay I didnât know that it already was reported. For now I will do the hidden character. Everything works now.
Thanks!
Hey,
could you please share how you did House, Lights, Raptor,⌠cards?
Thanks
Good day;
could anyone point me into a way to center the card in the space.
I am using Mushroom template card and want to put multiple cards side-by-side in horizontal stack. But this way each card is aligned to the left.
I use following Card mod adjustments:
card_mod:
style: |
ha-card {
border-radius: 30px;
width: 70px;
--card-primary-font-size: 10px;
}
Hello,
as itâs my first post in this topic I wouuld like to thank you all for creating this amazing project and sharing your ideas. @rhysb Iâm really grateful for what you posted - thanks to your work my dashboard looks very modern. Unfortunetly I occured some problem. I hope that someone will manage to help me dealing with them.
-
In the mobile app every card after being touched is being surrounded by a huge rectangle for a while (recording attached below). How could I prevent this? What am I doing wrong? There is no shuch problem in the desktop browser (but it occurs in the mobile one).
-
I would like to edit rhysâ room card, so that I could switch specific light entities by pressing an icon displayed at the bottom of the card. I am able to add an interactive icon to that card, but it is being displayed at its right side and I would like it to be positioned on the left. When I add âtoogle chipâ after alignment: end it interferes with those conditional ones, made by the author. @rhysb could you please tell me how could I add such icon? Iâm sending an example in the attachment. I would like the toogle icon to be placed in the place of red dot.
Best regards,
Jakub
PS. In the first GIF the mouse is visible only because it was easier for me to stream my phoneâs screen to computer than record it locally - but still: it is a smartphone app.
1 Like
Hello everyone!
Iâm trying to remove this outline in this card but havent succeed. Anyone that can help me?
Thanks!! 
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.opensprinkler_last_run
secondary_info: last-changed
name: Ăltima activaciĂłn riego
icon: mdi:sprinkler-variant
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-entity-card
entity: script.activar_riego_10min
icon: mdi:sprinkler-variant
name: Activar
layout: vertical
secondary_info: none
- type: custom:mushroom-entity-card
entity: script.parar_riego
name: Parar
icon: mdi:stop-circle-outline
layout: vertical
secondary_info: none
- type: custom:timer-bar-card
entities:
- timer.riego
EDIT: Found the solution. Added this to the end of the custom vertical stack in card:
card_mod:
style: |
ha-card {
border: solid 0px ;
}
1 Like
Hello,
Iâm not sure, but it seems like youâre using the wrong theme. You should use minimalist-desktop or minimalist-mobile.
This is mine climate card:
My problem was:
In studio i`m having 2 climates, radiator and AC. I wanted join both into one card and i did it.
The big issue is:
-
i
m having problem with changing colours of status from AC. When im starting radiator status is changing to red, but when im srtarting AC its not changing to blue:( - Any ideas? -
I want give names for chips (for example âHumidityâ i want to change for other name and i don`t know how i can do this:/ Same thing woth other chips (fire chip and snowflake chip)
-
This is the biggest problem and i don
t know if its possible, at right top corner im having values of my climate radiator. I wish to create that thing, when im starting AC then it should appear values of AC, when i`m starting radiator, then should appear radiators valuesâŚ
Do You have any ideas Guys?
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 1px !important;
}
primary: Studio
secondary: |
Status: {{ state_attr('climate.studio_kaloryfer', 'hvac_action') }}
icon: |-
{% set mode = states('climate.studio_kaloryfer') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'heat' %}
mdi:fire
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: >-
{% set status = state_attr('climate.studio_kaloryfer','hvac_action')
%}
{% if status == 'off' %}
grey
{% elif status == 'heating' %}
red
{% endif %}
tap_action: none
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 12px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #9e9e9e;
}
entity: climate.studio_kaloryfer
header:
name: false
icon: false
decimals: '1'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '0.5'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
auto: false
chips: null
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, ''temperature'')}} °C'
entity: climate.studio_kaloryfer
icon: mdi:fire
tap_action:
action: more-info
icon_color: >-
{% set status = state_attr('climate.studio_kaloryfer','hvac_action')
%}
{% if status == 'off' %}
grey
{% elif status == 'heating' %}
red
{% endif %}
- type: template
content: '{{state_attr(entity, ''temperature'')}} °C'
entity: climate.midea_ac
icon: mdi:snowflake
tap_action:
action: more-info
icon_color: |-
{% set status = state_attr('climate.midea_ac','hvac_modes')
%}
{% if status == 'off' %}
grey
{% elif status == 'cool' %}
blue
{% endif %}
- type: template
double_tap_action:
action: none
content: '{{ states(entity) }}% Humidity'
entity: sensor.studio_czujnik_temperatury_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: #262626;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active.heat_cool {
background: #493516;
color: #ff9800;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.studio_kaloryfer
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
auto: false
- type: grid
square: false
columns: 3
cards:
- type: custom:mushroom-entity-card
entity: sensor.studio_czujnik_temperatury_temperature
primary_info: state
secondary_info: name
name: W studiu
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.temperatura_na_zewnatrz_temperature
primary_info: state
secondary_info: name
name: Na zewnÄ
trz
icon_color: blue
icon: mdi:home-thermometer
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.3px;
--st-mode-background: #262626;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.midea_ac
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off': true
heat: false
cool: true
heat_cool: false
fan_only: false
dry: false
1 Like
Hi team,
at first, amazing what you are doing in this thread - I love how everybody helps out 
Now I need your help - I want to create a responsive 3 column dashboard, where:
- Full width is used
- iPad landscape all 3 columns beside each other are used
- iPhone view the columns got stacked - c1, c2, c3 - all below each other
What is the best way to do that? Thanks team
Id say:
New dashboard â âPanel typeâ (this way it expands for the whole page) â horizontal stack with 3 vertical stacks ( c1, 2, 3) inside?
Edit: didnât see your 3rd point, so this wouldnât work âŚ
I know my else statement is wrong, but how do I make it right? I want the color to change based on if the state is reading over 200.0 or under 200.0
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Watts
secondary: '{{ states(''sensor.outlet_garage_heater_watts'') }}'
icon: mdi:electron-framework
entity: sensor.outlet_garage_heater_watts
picture: ''
icon_color: |-
{% if is_state("sensor.outlet_garage_heater_watts", < 200.0) %}
red
{% elif is_state("sensor.outlet_garage_heater_watts", > 200.0) %}
green
{% endif %}
try the following please
{% set watts = states("sensor.outlet_garage_heater_watts") | float %}
{% if watts > 200 %} green
{% else %} red
{% endif %}
2 Likes