you are an angel!
and how to have the height reduced as left card?
just add height to your stack card. then play with the amount of px 
card_mod:
style: |
ha-card {
{% if is_state('lock.serratura_ingresso','unlocked') %}
background: rgba(101,170,91,0.2);
{% else %}
background: rgba(226,84,66,0.2);
{% endif %}
height: 80px;
}
sorry it did not work for me… the solution was:
card_mod:
style: |
ha-card {
border: none;
margin-bottom: -6px;
}
and
card_mod:
style: |
ha-card {
border: none;
margin-top: -6px;
}
Oh.
i think you didnt put it under the stack card then. you tried to put it under each of the mushroom cards themselves instead?
but if it works it works
What a great Job It is, beautiful. I copied your code and adopt it with my entities. But the stacking for the progress and temperature did not work. Which is the corresponding code part for the stacking?
My result looks like the following:
Following my code block:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px'
cards:
- type: custom:mushroom-template-card
primary: 3D Printer
entity: switch.3d_printer
secondary: '{{ states(entity) | title }}'
icon: mdi:printer-3d
icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
tap_action:
action: toggle
hold_action:
action: none
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.3d_printer_dropdown
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-down' if is_state(entity, 'off') else 'mdi:chevron-up'
}}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.3d_printer_dropdown
state: 'on'
card:
type: custom:stack-in-card
cards:
- type: custom:layout-card
cards:
- type: picture-entity
show_state: false
show_name: false
camera_view: auto
entity: camera.prusa_mini
- type: custom:stack-in-card
mode: horizontal
keep:
background: true
border_radius: true
margin: true
cards:
- type: custom:mushroom-template-card
entity: button.ca2fb5dd_prusa_mini_pause
icon: mdi:pause
icon_color: orange
layout: vertical
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-orange), 0.1);
width: 66px;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-template-card
entity: button.ca2fb5dd_prusa_mini_continue
icon: mdi:play
icon_color: green
layout: vertical
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-green), 0.1);
width: 66px;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-template-card
entity: button.ca2fb5dd_prusa_mini_stop
icon: mdi:stop
icon_color: red
layout: vertical
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-red), 0.1);
width: 66px;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
}
card_mod:
style: |
ha-card {
#background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 197px auto
margin: '-4px -4px -8px -4px'
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: binary_sensor.ca2fb5dd_prusa_mini_printing
icon_color: green
tap_action:
action: url
url_path: >-
https://3dprint.int.schlaschmi.ch/#!/printer/Prusa_mini/print
icon: mdi:printer-3d
card_mod:
style: |
ha-card {
--badge-size: 0px !important;
}
primary_info: name
secondary_info: state
name: Printer Status
- type: custom:mushroom-entity-card
entity: sensor.ca2fb5dd_prusa_mini_eta
icon_color: light-blue
tap_action:
action: none
primary_info: name
secondary_info: state
name: Est. Finish Time
- type: custom:mushroom-template-card
entity: sensor.3d_printer_power
icon_color: '{{ ''amber'' if states(entity) | int > 0 else ''disabled'' }}'
tap_action:
action: none
primary: Power Use
secondary: '{{ states(entity) }} W'
icon: mdi:flash
card_mod:
style: |
ha-card {
margin-top: 6px;
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
header:
show: false
series:
- entity: sensor.ca2fb5dd_prusa_mini_progress
name: Job Progress
color: rgb(3, 169, 244)
show:
legend_value: false
chart_type: radialBar
apex_config:
legend:
show: false
chart:
height: 230px
plotOptions:
radialBar:
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
- type: custom:mushroom-entity-card
entity: sensor.ca2fb5dd_prusa_mini_progress
primary_info: state
secondary_info: name
name: Job Progress
icon_color: light-blue
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -165px;
width: 140px;
margin-left: auto;
margin-right: auto;
}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.ca2fb5dd_prusa_mini_bed_temp_1
color: rgb(103, 58, 183)
max: 110
show:
legend_value: false
- entity: sensor.ca2fb5dd_prusa_mini_bed_temp_set_1
color: rgb(103, 58, 183)
max: 110
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -15
startAngle: -105
endAngle: 105
hollow:
size: 60%
dataLabels:
name:
show: false
value:
show: false
legend:
show: false
chart:
height: 220px
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
- type: custom:mushroom-template-card
primary: Bed Temp
secondary: >-
{{ states(entity) | round(1) }} °C / {{
states('sensor.ca2fb5dd_prusa_mini_bed_temp_set_1') |
round (1) }} °C
icon: mdi:thermometer-lines
entity: sensor.ca2fb5dd_prusa_mini_bed_temp_1
icon_color: deep-purple
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -80px;
width: 175px;
margin-left: auto;
margin-right: auto;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.ca2fb5dd_prusa_mini_ext_temp_1
color: rgb(233, 30, 99)
max: 240
show:
legend_value: false
- entity: sensor.ca2fb5dd_prusa_mini_ext_temp_set_1
color: rgb(233, 30, 99)
max: 240
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -15
startAngle: -105
endAngle: 105
hollow:
size: 60%
dataLabels:
name:
show: false
value:
show: false
legend:
show: false
chart:
height: 220px
stack: true
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
- type: custom:mushroom-template-card
primary: Tool Temp
secondary: >-
{{ states(entity) | round(1) }} °C / {{
states('sensor.ca2fb5dd_prusa_mini_ext_temp_set_1') |
round (1) }} °C
icon: mdi:printer-3d-nozzle
entity: sensor.ca2fb5dd_prusa_mini_ext_temp_1
icon_color: pink
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -80px;
width: 175px;
margin-left: auto;
margin-right: auto;
}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
Post your yaml code. We cant help you unless we know what your yaml structure looks like.
Look at point 11 of the below in particular on how to post your yaml
https://community.home-assistant.io/t/how-to-help-us-help-you-or-how-to-ask-a-good-question/114371
Works great for me.
Do you have stack in card installed through hacs?
Of course i just replaced the entities in the card with random entities i had that matched the type. So ignore my car in the drive 
3 Likes
Yes both installed. Stack In Card and Vertical Stack in Card
Hmm, one more to check. Do you have the layout card? Otherwise i honestly dont know what the issue would be.
Works just fine for me.
Hello everyone, is there a way to change text dimension and color in Title Cards?? I’m not able to find a way to do this…
Thank you
Look in the text styling section
*whistle If there would only be a thread with a good overview over things… 
Something like a tutorial or guide… 
See, I told you, you need to get that into a seperate thread, so people can find it. I have a bookmark for your posts, but others… 
Honestly, if I can help you with a new thread, let me know!
1 Like
appreciate it. it is coming together! sitting in my drafts.
i am just working on Chips guide right now, once done with that the rest of the cards should be much easier as they are a lot more similar to each other and i have already done a full guide for one of those “simple” cards
4 Likes
Now everithing works well. I didn‘t have installed the card-mod from HACS.
Thanks for the support
I love this card. Here’s my version with a dropdown button in the chips area. Icon color is set with a room status helper. Tapping in the main area triggers an automation to turn on the default lights or turn everything off.
Room is off
Default state with ceiling fan lights on
Dropdown chip expanded for full room controls
Ceiling fan lights and ceiling fan are on
Scenes/automations go above the entities
Code
type: custom:stack-in-card
mode: vertical
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.family_room
secondary_info: none
tap_action:
action: call-service
service: automation.trigger
target:
entity_id: automation.family_room_automation_main
data:
skip_condition: true
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
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
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
chips:
- type: conditional
conditions:
- entity: automation.family_room_automation_main
state: ''
- type: entity
icon: blank
content_info: none
- type: template
double_tap_action:
action: none
entity: light.family_room_fan_lights
icon: mdi:ceiling-fan-light
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
tap_action:
action: none
hold_action:
action: none
- type: template
double_tap_action:
action: none
entity: fan.family_room_fan
icon: mdi:ceiling-fan
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
tap_action:
action: none
hold_action:
action: none
- type: template
entity: light.family_room_chimney_lights
icon: mdi:spotlight-beam
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
- type: template
entity: input_boolean.mushroom_toggle_family_room
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else
'mdi:chevron-down'
}}
icon_color: disabled
- type: conditional
conditions:
- entity: input_boolean.mushroom_toggle_family_room
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:horizontal-layout
layout: {}
cards:
- type: custom:gap-card
height: 2
- type: custom:mushroom-chips-card
alignment: center
card_mod:
style: |
ha-card {
--chip-height: 60px;
}
chips:
- type: entity
entity: automation.family_room_automation_main
content_info: none
tap_action:
action: call-service
service: automation.trigger
target:
entity_id: automation.family_room_automation_main
data:
skip_condition: true
hold_action:
action: none
double_tap_action:
action: none
icon_color: blue
- type: custom:mushroom-light-card
entity: light.family_room_fan_lights
primary_info: none
secondary_info: none
layout: horizontal
show_brightness_control: true
fill_container: true
collapsible_controls: false
- type: custom:mushroom-fan-card
entity: fan.family_room_fan
fill_container: false
show_percentage_control: true
icon_animation: false
layout: horizontal
primary_info: none
secondary_info: none
- type: custom:mushroom-light-card
entity: light.family_room_chimney_lights
primary_info: none
secondary_info: none
layout: horizontal
show_brightness_control: true
fill_container: true
collapsible_controls: false
show_color_temp_control: true
show_color_control: true
8 Likes
can you kindly post a whole code please for a room as this one isnt showing up like your image. thanks in advance
I’ve move to page anchors and decluttering so it’s all split up now.
Post your code and we can work out where the problem is.
Can you please help me with this, it’s the chips card that I’m having issues with.
With reference to @rhysb excellent person card, how would I change the colors?
This is the relevant code from the post above, as you can see, it’s blue, when I’ve defined it to be green
And this is the pertinent section
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
Struggling to identify the new format for colors.
what result do you get out of ?
{{is_state('YOUR PERSON ID', ['home', 'not_home', 'unknown'])}}
when you put in the template editor?
Seems to work for me as my state is home.
Do animations work with Chip Cards in the newest update? I have a Template Card animation working but it won’t work as a Chip Card.