I’m sure this is another simple fix, but I’m trying to get Chips to align closer together. They look ok if you have several with a bunch of text, but I’m trying to have a Menu Chip, Back Chip, and a Navigation Chip all together in a Horizontal Stack. How can I move them closer together to the left side of the Stack?
Add a “spacer” as the last “chip”
That worked, I had to add a bunch to get them moved over where I wanted them, but it solved the issue. Thanks!!!
Can something help please
Is there any way to change entity card height?
That’s not the best practice, you’ll get more control using this, you can put them in a cell and specify how far across they go.
Good afternoon
How to remove this color transition strip? Transition between colors black and gray?
type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.aloe_soil_moisture
primary_info: state
secondary_info: name
name: Humidity
icon_color: blue
card_mod:
style: |
ha-card {
z-index: 1;
--ha-card-border-width: 0;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.aloe_soil_moisture
name: Humidity
color: var(--blue-color)
height: 60
hours_to_show: 24
line_width: 3
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
thank you in advance!
The layout card works also, but the chips in the layout card are not aligned to the left side the same as the others. You can see in the screenshot, the Title and Layout Cards are aligned (card 1 and 3) but the two horizontal stack cards aren’t (card 2 and 4). How do I get the Layout card aligned with cards 2 and 4?
Disregard, I looked deeper into the GitHub instructions and found the margin setting. Setting that to -3px, seems to do the trick.
Does it go if you take this out?
Yes. but so the overlay on the icon
Then you need to apply the gradient to the icon and not the ha-card
I apologize for the noob question, but is Mushroom UI totally separate from the default Lovelace UI? Like if I have built dashboards with the standard Lovelace, and then install Mushroom, will those get upgraded / translated, or will I have to start over? Thanks!
It’s a way of applying a different style to your lovelace dashboard. I understand you can do it through the WYSIWYG but I just use YAML.
I started from scratch, I’d advise creating a new dashboard alongside your existing one until you get at least all of your devices into the dashboard. Once you’re happy, switch over and then spend forever tweaking it as you discover new tricks.
It’s well worth reading through this thread, the answer to most of my questions have been answered here, and it’s a great source of ideas.
type: custom:stack-in-card
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.pogoda_ulitsa_pressure
name: Давление
color: var(--blue-color)
height: 60
hours_to_show: 24
line_width: 1
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 0%, transparent);
}
- type: custom:mushroom-template-card
primary: '{{ states(''sensor.time'') }}'
secondary: '{{ states(''sensor.date'') }}'
card_mod:
style: |
mushroom-card {
text-align: center;
--primary-text-color: orange;
--secondary-text-color: orange;
--card-primary-font-size: 20px;
--card-secondary-font-size: 15px;
}
- type: custom:simple-weather-card
custom:
- temp: sensor.pogoda_ulitsa_temperature
entity: weather.prognoz
name: []
card_mod:
style: |
.weather__icon {
{% set condition = states(config.entity) %}
{% if condition == 'partlycloudy' and is_state('sun.sun', 'below_horizon') %}
{% set condition = condition + '-night' %}
{% endif %}
background-image: url("/local/weather_icons/anim/{{ condition }}.svg") !important;
}
.weather__icon--small {
background-image: url("/local/weather_icons/anim/rainy.svg") !important;
}
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
This is what I use thanks to @rhysb
This is what I use thanks to @rhysb
type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.ups_load
primary_info: name
secondary_info: state
name: Load
icon_color: cyan
card_mod:
style: |
ha-card {
z-index: 1;
--ha-card-border-width: 0;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.ups_load
name: Temperature
color: var(--cyan-color)
height: 50
hours_to_show: 24
line_width: 3
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 80%;
right: 0px;
bottom: 0px;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color), transparent);
}
Hello, can I have more than one badge on a person card? Thank you
I’m throwing this in here, as it seems useful and can reduce the waiting time for an answer drastically:
Eg if you look for “person”:
I find that very useful, especially in a thread like this, where chances are high, that someone has asked a similar question before. And with, at the time of writing, over 6800 posts…
I constantly stumble upon nice new-for-me ideas with such searches and can only recommend to use it. 
Just to be clear, this is in no way meant to stop you from writing/asking in this thread, but as I said, sometimes one wants to have a quick answer or is just looking for some ideas. Feel free to try it!
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: group.master_bedroom
icon: mdi:bed
icon_color: |
{% if is_state(entity, 'on') %}
#03A9F4
{% else %}
grey
{% endif %}
primary: Master Bedroom
secondary: >-
{{ states('sensor.0x00158d00049fddee_device_temperature') | round(0) }}°C
| {{ states('sensor.0x00158d00049fddee_device_temperature') | round(0) }}%
layout: horizontal
tap_action:
action: navigate
navigation_path: /mobile-dashboard/master-bedroom
double_tap_action:
action: navigate
navigation_path: /dashboard-masrom/master-bedroom
hold_action:
action: toggle
badge_icon: |
{% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
mdi:radiator
{% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
mdi:snowflake
{% else %} {% endif %}
badge_color: |
{% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
red
{% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
#03A9F4
{% else %} {% endif %}
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -52px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
--secondary-text-color:
{% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
red
{% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
#03A9F4
{% else %}
#6c6c75
{% endif %}
}
style: |
mushroom-badge-icon {
left: 69px;
top: 25px;
}
- type: custom:mushroom-template-card
primary: none
icon_color: disabled
icon: mdi:lightbulb
secondary: none
entity: light.fan_parents_room
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Lights
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.fan_parents_room
name: Master Bedroom Light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-light-card
entity: light.fan_parents_room
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
hold_action:
action: toggle
double_tap_action:
action: more-info
badge_color: ''
badge_icon: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
{% if state_attr(config.entity, 'rgb_color') == none %}
--icon-color: rgb(255,190,137) !important;
--shape-color: rgb(255,190,137, 0.2 ) !important;
{% else %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
{% endif %}
}
.: |
ha-card {
width: 66px;
margin-left: 68%;
top: -178px;
background: none;
}
:host {
--mush-icon-size: 38px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.parents_sleep_mode
state: 'on'
chip:
type: entity
entity: input_boolean.in_bed
icon: mdi:bed
icon_color: blue
content_info: none
- type: conditional
conditions:
- entity: input_boolean.parents_room_occupancy
state: 'on'
chip:
type: entity
entity: input_boolean.parents_room_occupancy
icon: mdi:motion-sensor
icon_color: blue
content_info: none
- type: conditional
conditions:
- entity: fan.fan_parents_room
state: 'on'
chip:
type: entity
entity: fan.fan_parents_room
icon: mdi:fan
icon_color: blue
content_info: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Fan
content:
type: custom:mushroom-fan-card
entity: fan.fan_parents_room
name: Master Bedroom Fan
icon_animation: true
fill_container: false
show_percentage_control: true
show_oscillate_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 76%;
top: -186px;
background: none;
--chip-border-width: 0;
}
:host {
--mush-icon-size: 20px;
--mush-chip-spacing: -2.9px
}
card_mod:
style: |
ha-card {
height: 178px !important;
width: 178px !important;
}
Help, how can I make the icon of the fan rotate if the power of the fan is for example a green icon if the number is 3.