Thank you for your response! Where can i change the theme variables?
When i add your code to the cover card, i get an error. So i guess i have to place the code somewhere else?
Sticky card seems broken with latest HA version At least on firefox.
It covers person and weather wards and i needed to get the card down to be able to modify.
Edit i resolved like this :
replacing
/* Make card sticky at top of page */
:host {
position: sticky;
z-index: 9;
top: var(--header-height);
}
/* Pseudo element to hide card styling when at top */
ha-card:after {
content: "";
/* Make fixed so element scrolls up */
position: fixed;
top: var(--header-height);
here :
/* Make card sticky at top of page */
:host {
position: sticky;
z-index: 9;
top: 0px;
}
/* Pseudo element to hide card styling when at top */
ha-card:after {
content: "";
/* Make fixed so element scrolls up */
position: fixed;
top: 0px;
2 Likes
You could use custom:stack-in-card and play with margins to bring the slider closer to the mushroom card.
Vertical:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-climate-card
entity: climate.entity
name: Clima
hvac_modes:
- heat
- auto
- 'off'
layout: horizontal
- type: custom:mushroom-number-card
entity: input_number.entity
primary_info: none
secondary_info: none
icon_color: deep-orange
display_mode: slider
card_mod:
style: |
ha-card {
--icon-size: 0px;
margin-top: -20px;
margin-bottom: 0px;
margin-left: 0px;
}
card_mod:
style: |
ha-card {
border-radius: 25px;
box-shadow: none;
}
Horizontal:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-climate-card
entity: climate.entity
name: Clima
layout: horizontal
- type: custom:mushroom-number-card
entity: input_number.entity
primary_info: none
secondary_info: none
icon_color: deep-orange
display_mode: slider
card_mod:
style: |
ha-card {
--icon-size: 0px;
margin-top: -10px;
margin-bottom: 0px;
margin-left: -20px;
margin-right: 10px;
}
card_mod:
style: |
ha-card {
border-radius: 25px;
box-shadow: none;
}
Then you have to create a script that when the state of the input slider changes, gives it to the entity you want to control
4 Likes
Hi Everyone, maybe someone can help me. I am trying to get an icon to change colour when its between certain values. I cant seem to get it to work.
type: custom:mushroom-template-card
primary: '{{(states(entity))}} KM'
secondary: Range
icon: |
{% set state=states(entity) %}
{% if state<='150' %}
mdi:car-electric-outline
{% elif state>='320' %}
mdi:car-arrow-right
{% else %}
mdi:car
{% endif %}
entity: sensor.sawa_id
icon_color: |-
{% set state=states(entity) %}
{% if state<'150' %}
red
{% elif state<'200' %}
orange
{% elif state>'300' %}
green
{% else %}
grey
{% endif %}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
I am not sure of the sytnax for range? What i am trying to acheive is that if the sensor is above 300 its green. When it drops below 300 but greater that 200 then its orange. And it if it drops below 150 then red.
This is a lovely card, but just after updating to 2023.4.0 the People and Weather are not visible anymore. Is there something that needs to be changed?
1 Like
Try:
icon_color: |-
{% set state = states(entity) %}
{% if state >= '300' %}
green
{% elif state >= '200' %}
orange
{% elif state >= '150' %}
red
{% else %}
grey
{% endif %}
Just change top: var(--header-height); to top: 0px; should fix it for you.
2 Likes
An update should be available soon.
mushroom-climate-card
This is the default setting. I would like to make the following changes:
- start with the hvac_modes buttons instead of temperature_control
- arrange buttons: ‘off’, heat, auto
- primary line: current temperature / current humidity
Current code:
type: custom:mushroom-climate-card
entity: climate.heizung_detlef
primary_info: state
secondary_info: name
hvac_modes:
- 'off'
- heat
- auto
show_temperature_control: true
tap_action:
action: none
hold_action:
action: more-info
double_tap_action:
action: none
Can someone help me please?
Anyone know if the mushroom person card can be aligned so the person image is to the right side of the card? - I can only seem to get it to the left with ‘horiztonal’ layout or in the center with ‘vertical’ layout.
I have played around with card mod to try and move it and thought i’d cracked it with justify: flex-end but I can only get it working through the chrome dev tools so far…
Edit - worked it out, if anyone ever needs it;
ha-card {
flex-direction: row-reverse !important;
justify-content: end !important;
}
@rhysb is it possible to have some screenshots of your current setup? I am still working on my dashboard and I would like to have some inspiration from either your dashboard or other dashboards.
2 Likes
hi @rhysb wonder what you use to stack the cards in that order? a grid with two columns? a horizontal-stack? something else? Could you post your setup for the outer stack card?
If you’re using a mushroom theme from the themes/mushroom folder, you can change the values there. I believe I read somewhere that those themes get reset with mushroom updates, so what I did is create a separate folder, themes/mushroom-custom, and pasted my favourite theme code in a custom yaml file there, and then tweaked it. Like explained here: GitHub - piitaya/lovelace-mushroom-themes: Additional themes for Lovelace Mushroom Cards 🍄
Don’t forget to call the theme reload service when you’re done 
1 Like
did you find a solution to make the title font size smaller?
thanks
Can’t get this to stick to the bottom of the page after the 2023.4 update unfortunately.
Have you found a fix?
Yeah but is not clear to me how he is putting two cards horizontally. This is my current setup for just one card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Office
secondary: '{{ states(''sensor.bedroom_temperature'') | round(0) }} °C'
icon: mdi:chair-rolling
entity: light.office
tap_action:
action: navigate
navigation_path: office
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.office_window_sensors
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
/* Remove styling from card */
box-shadow: none;
border: none;
transition: all 0s;
height: 102px;
{% if is_state('light.office', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
As you can see there is a template and a chip card involved in the whole thing. If you know how to do it be my guess, use my same code as an example
Hi, is it possible to add a new line between my code in ? I have tried {\n} but I don’t get a new line after lampen aan.
{% set lights = [
states.light.slaapkamer_dimmer,
states.light.lightstrips_1,
] %}
{{ lights | selectattr('state','eq','on') | list | count }} lampen aan
{% if is_state('climate.kantoor_airco', 'off') %}
Airco uit
{% elif is_state('climate.kantoor_airco', 'heat') %}
Verwarming aan
{% elif is_state('climate.kantoor_airco', 'cool') %}
Koeling aan
{% elif is_state('climate.kantoor_airco', 'heat_cool') %}
Verwarming en koeling aan
{% elif is_state('climate.kantoor_airco', 'fan_only') %}
Alleen ventilator aan
{% endif %}
Can you share the code for the sticky media player? Love it!