There is no need to have your main card a grid when you are using a layout card in grid-layout mode.
I placed your cards in a vertical stack and used two layout grid cards to square everything up. You can control the spacing in the second set of margin: -14px 4px 4px 4px;
I used a -14px to show how you can bring the cards as close as you want.
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
margin: 4px 4px 4px 4px;
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Family
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.jay673
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: entity
entity: person.jay673
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: entity
entity: person.3
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
alignment: end
card_mod:
style: |
ha-card {
/* Overlap avatar Chips */
--chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));
/* Set size of border around Chips */
--chip-avatar-padding: 2px;
/* Reduce width to fit Chips & allow max space for weather */
width: fit-content;
transition: all 0s;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
margin: -14px 4px 4px 0px;
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Rooms
- type: custom:mushroom-entity-card
entity: light.pc_spot
title: ''
subtitle: Rooms
card_mod:
style: |
ha-card {
background: none;
1 Like
I’d suggest using a conditional Mushroom Chips card with alignment: center for what you are looking for.
tomg1970
March 12, 2024, 4:50pm
536
Good idea. Would you have an example where switch and lights are displayed in the on status.lock in the closed status
iona
March 12, 2024, 6:49pm
537
Works great thank you! One more thing, I didn’t see it on the op, but how do I add a secondary line for the chip card? thanks
Like this ?
or do you mean text under the chip
iona
March 13, 2024, 1:27pm
539
Sorry, it was unrelated question. I wanted to know how to add a second line of text for the Mushroom Chip card, thanks.
Maku
March 13, 2024, 1:42pm
540
hi dimitri,
type: custom:mushroom-number-card
entity: input_number.dimmer_example
display_mode: ''
card_mod:
style: |
ha-card {
background-color: #002f7a;
}
secondary_info: nun
icon_color: amber
name: إنارة مخفية
tap_action: nun
Hello Community,
I’m new to HomeAssistant and I try to customize the “Mushroom-cover-card”. I was able to change the background color in one of the “cover-card” to “orange” but I’m still not able to change it in the cover-card “Büro”.
I want to have the background “transparent” and also the color from the control buttons in white color Actually, when the window is open the icon color change to red but also the color of the control buttons are changing to red. Any idea how to solve it?
My code is:
- type: horizontal-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.ankleide
layout: vertical
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.badezimmer
layout: vertical
show_buttons_control: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: orange !important;
}
- type: custom:mushroom-cover-card
entity: cover.buro
styles: null
layout: vertical
icon: mdi:window-closed
show_buttons_control: true
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.fenster_buro', 'off') %}
border-style: none;
--card-mod-icon-color: green;
--primary-text-color: white;
--icon-symbol-size: 40px !important;
--icon-size: 50px !important;
--ha-card-background: transparent }
{% else %}
--card-mod-icon-color: red;
--primary-text-color: white;
{% endif %}
}
It worked for me, but try adding !important after the color.
type: custom:mushroom-number-card
entity: input_number.dimmer_example
display_mode: ''
card_mod:
style: |
ha-card {
background-color: #002f7a !important;
}
secondary_info: nun
icon_color: amber
name: إنارة مخفية
tap_action: nun
You’ll have to add your if statements, but it would be like this…
type: horizontal-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.badezimmer
layout: vertical
show_buttons_control: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: blue !important;
}
.: |
ha-card {
background: transparent !important;
}
- type: custom:mushroom-cover-card
entity: cover.badezimmer
layout: vertical
show_buttons_control: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: red !important;
}
.: |
ha-card {
background: transparent !important;
}
- type: custom:mushroom-cover-card
entity: cover.buro
layout: vertical
icon: mdi:window-closed
show_buttons_control: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: orange !important;
}
.: |
ha-card {
background: transparent !important;
}
Mrdjg
March 13, 2024, 9:29pm
544
Hi guys,
Fairly sure that I am doing something obviously wrong but I just can’t see it. Trying to style the alarm control card and can’t get anything to work. Copying code straight from this page doesn’t even work. Can somebody see where I’m going wrong please!
Welcome to the community. Please post you code using this guide (#11 )
https://community.home-assistant.io/t/how-to-help-us-help-you-or-how-to-ask-a-good-question/114371/3
I’ll take a look at your issue.
Maku
March 14, 2024, 2:19am
546
I found the problem, card mod was not downloaded, I download it and it works
thank you so much
1 Like
This card needs reviewed for modding. In the meantime you can use the tile card, which Mushroom is based off.
Here is code for adjusting that card’s colors.
type: tile
entity: alarm_control_panel.homebase
features:
- type: alarm-modes
modes:
- armed_home
- armed_away
- armed_night
- armed_vacation
- armed_custom_bypass
card_mod:
style:
hui-card-features $:
hui-alarm-modes-card-feature $:
ha-control-select $: |
.option:nth-child(1)::before {
background-color: orange !important;
}
.option:nth-child(2)::before {
background-color: blue !important;
}
.option:nth-child(3)::before {
background-color: cyan !important;
}
.option:nth-child(4)::before {
background-color: yellow !important;
}
.option:nth-child(5)::before {
background-color: red !important;
}
.: |
:host {
--mdc-icon-size: 10px !important;
--card-mod-icon-color: grey;
}
ha-card {
background-color: black !important;
}
1 Like
HA_Newbie_2024:
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.fenster_buro', 'off') %}
border-style: none;
--card-mod-icon-color: green;
--primary-text-color: white;
--icon-symbol-size: 40px !important;
--icon-size: 50px !important;
--ha-card-background: transparent }
{% else %}
--card-mod-icon-color: red;
--primary-text-color: white;
{% endif %}
}
Hello everyone,
i can change the color in a non modified cover but I’m loking how to include the background color of the icon inside this “if-condition”:
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.fenster_buro', 'off') %}
border-style: none;
--card-mod-icon-color: green;
--primary-text-color: white;
--icon-symbol-size: 40px !important;
--icon-size: 50px !important;
--ha-card-background: transparent }
{% else %}
--card-mod-icon-color: red;
--primary-text-color: white;
{% endif %}
}
I'm not finding the way to change the background color if there is ancard-mod style already set. I would need to add the background color in this card-mod section.
It’s not clear what you mean by background color. The card background or the shape color?
Start with this and let me know what you want changed.
type: custom:mushroom-template-card
primary: Hello
secondary: How are you?
icon: mdi:home
icon_color: |
{{ 'red' if is_state('binary_sensor.fenster_buro', 'off') else 'green' }}
card_mod:
style: |
ha-card {
--icon-symbol-size: 40px !important;
--icon-size: 50px !important;
--primary-text-color: white !important;
border-style: none;
background: transparent;
}
Hassio
March 14, 2024, 11:49am
550
I saw this video , where someone made a sticky menu at the bottom of the screen.
Is this possible for a chipcard, to make en sticky menu at the bottom?
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: navigate
navigation_path: ''
icon: mdi:home
content: test1
- type: template
tap_action:
action: navigate
navigation_path: ''
icon: mdi:bed
content: test2
- type: template
icon: mdi:human-baby-changing-table
content: test3
iona
March 14, 2024, 4:06pm
551
@LiQuid_cOOled Sorry to nudge, any ideas? thanks
Is this what you are looking for?
Spacing will need adjusted.
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
margin: 4px 4px 4px 4px;
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Family
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.jay673
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
ha-card:after {
content: "name";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
color: grey;
font-weight: bolder;
border-radius: 15px 15px 15px 15px;
top: 40px;
left: 2px;
width: 30px;
height: 11px;
font-size: 8px;
}
- type: entity
entity: person.jay673
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
ha-card:after {
content: "name";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
color: grey;
font-weight: bolder;
border-radius: 15px 15px 15px 15px;
top: 40px;
left: 2px;
width: 30px;
height: 11px;
font-size: 8px;
}
- type: entity
entity: person.jay673
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
ha-card:after {
content: "name";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
color: grey;
font-weight: bolder;
border-radius: 15px 15px 15px 15px;
top: 40px;
left: 2px;
width: 30px;
height: 11px;
font-size: 8px;
}
alignment: end
card_mod:
style: |
ha-card {
/* Overlap avatar Chips */
--chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));
/* Set size of border around Chips */
--chip-avatar-padding: 2px;
/* Reduce width to fit Chips & allow max space for weather */
width: fit-content;
transition: all 0s;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
margin: -14px 4px 4px 0px;
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Rooms
- type: custom:mushroom-entity-card
entity: light.pc_spot
title: ''
subtitle: Rooms
card_mod:
style: |
ha-card {
background: none;
Mrdjg
March 15, 2024, 8:25am
553
Thanks, that works perfectly. One more question - how do I change the icon for each button?
