card_mod:
ha-card {
{% if is_state(config.entity, 'on') %}
box-shadow: 0px 0px 10px green;
{% else %}
box-shadow: 0px 0px 10px red;
{% endif %}
--card-primary-font-size: 16px;
--card-primary-font-weight: bold;
--card-primary-margin-bottom: 50px;
Could anyone explain, why the font size&weight is working and the position doesn’t move?
Just use margin-bottom: not
card-primary-margin-bottom:
thanks again, but with margin-bottom: the complete card moves. I only want to move the position of primary information
type: custom:mushroom-template-card
primary: Test
secondary: How are you?
icon: mdi:home
card_mod:
style:
mushroom-state-info$: |
.primary {
margin-bottom: 10px;
font-size:16px !important;
font-weight: bold;
}
.: |
ha-card {
{% if is_state(config.entity, 'on') %}
box-shadow: 0px 0px 10px green;
{% else %}
box-shadow: 0px 0px 10px red;
{% endif %}
}
Like this…
Damn, you you are a f***ing god.
Thanks a lot. 
I add padding: 0px 0px 2px 0px !important; in ha-card section and play a little with this and the margin to adjust everything to its final position.
Here you!, I have shared my code and setup instruction in this post
can I get some help/point in the right direction regarding a card I have.
the problem I have is I have alot of information I am trying to squeeze in and without just adding more entity’s which just over complicates it all.
I’ve tried changing margins and padding but never looked right.
maybe time to look into button-card.
this is what I have so far
type: custom:stack-in-card
title: Kettle
keep:
background: true
box_shadow: true
mode: horizontal
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-top: -30px;
width: 200px;
}
primary: Cost / W
secondary: >-
£{{ '%.2f' | format(states('sensor.kettle_daily_energy_cost')| float) }} /
{{ '%.2f' | format((states('sensor.kettle_power')|float / 0.05) | round()
* 0.05) }}W
icon: mdi:kettle
multiline_secondary: true
icon_color: |-
{% set state = states('sensor.kettle_power')|float(-1) %}
{% if state >= 50 %} green
{% else %} grey
{% endif %}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-top: -30px;
margin-left: 10px;
}
secondary: >-
{{ states('sensor.kettle_count_day') }}/{{
state_attr('sensor.kettle_count_day', 'prev_period')}}
primary: Count/yesterday
icon: mdi:counter
icon_color: blue
entity: sensor.kettle_count_day
tap_action:
action: more-info
- type: custom:mushroom-entity-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-top: -30px;
}
layout: horizontal
secondary_info: state
tap_action:
action: toggle
entity: switch.localbytes_plug_pm_8c9d3a_kettle
name: Plug
icon: mdi:power-socket-uk
icon_color: green
card_mod:
style:
$: |
h1.card-header {
font-size: 16px;
padding-top: 1px;
padding-bottom: 18px;
color:var(--secondary-text-color);
}
step 1. identify what info is actually important to display.
Do you need to display that the plug is on with words? is the color not sufficient?
Do you need labels to tell you what each number is?
Something like this might work for you.
type: custom:mushroom-chips-card
chips:
- type: template
content: £0.12
icon: mdi:kettle
icon_color: |-
{% set state = states('sensor.kettle_power')|float(-1) %}
{% if state >= 50 %}
green
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
- type: template
primary: Count/yesterday
icon: mdi:counter
icon_color: blue
entity: counter.washing_machine_state_count
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
ha-card:after {
content: "3";
position: absolute;
top: -10%;
right: -10%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height: 14px;
font-size: 9px;
font-weight: 700;
border-radius: 50%;
{% if states(config.entity) | int == 1 %}
background: rgba(var(--rgb-green), 0.2) !important;
{% elif states(config.entity) | int == 2 %}
background: rgba(var(--rgb-amber), 0.2) !important;
{% elif states(config.entity) | int > 3 %}
background: rgba(var(--rgb-red), 0.2) !important;
{% else %}
background: rgba(var(--rgb-deep-purple), 0.2) !important;
{% endif %}
}
- type: template
tap_action:
action: toggle
entity: switch.localbytes_plug_pm_8c9d3a_kettle
icon_color: |-
{% set state = states(entity) %}
{% if state == 'on' %}
green
{% else %}
red
{% endif %}
name: Plug
icon: mdi:power-socket-uk
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
ha-card:after {
content: "";
position: absolute;
top: -10%;
right: -10%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height: 14px;
font-size: 9px;
font-weight: 700;
border-radius: 50%;
{% if states(config.entity) == 'on' %}
background: rgba(var(--rgb-green), 0.2) !important;
{% else %}
background: rgba(var(--rgb-red), 0.2) !important;
{% endif %}
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
span:after {
content: "0.00W";
display: flex;
padding-top: 0.3em;
color:var(--secondary-text-color);
}
Of course you will need to add things back, like your templates to get the actual states.
Thankyou Dimitri! that’s brilliant. you make some very valid points I do have a habit of over complicating things.
definitely gonna have a play with the code you provided.
welcome back BTW.
OK so I’ve played around abit with your code and mine and combined the two with some tweaks.
to end up with this
Thanks again.
“I’ve finally completed my last page. I designed the TV and Shield control page , complete with a live view for Shield. Designing for tablets has been quite challenging, as it’s quite different from designing mobile pages. However, I have very little time left to finish, and I hope to release all the codes I’ve written as soon as this project is complete. 
”
How can I get the input_number section to be under the sprinkler card, so I can access the sprinkler switch and the running time from the same card?
this should work for you.
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-entity-card
card_mod:
style: |
ha-card {
border: 0px;
box-shadow: none;
}
entity: light.diner
name: Sprinkler
icon: mdi:sprinkler
- type: custom:mushroom-number-card
card_mod:
style: |
ha-card {
border: 0px;
box-shadow: none;
}
entity: input_number.daily_energy_cost
display_mode: buttons
primary_info: none
secondary_info: none
icon_type: none
How do I go abouts removing the icon background for all mushroom cards (system-wide)? Thanks
I am not 100% sure.
but until someone corrects me with the right answer I would look at these two in your themes yaml file.
# Home Assistant override
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-width: 1px
This doesn’t affect Mushroom cards unfortunately.
Edit: Here’s the fix, if anyone is interested. 
card-mod-card: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none;
}
sorry I completely missed the little black line. I thought you were pointing to the card border.
This was exactly what i was looking for. Thank you!
no problem if you wanted them closer together you can add some margin. like this.
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-entity-card
card_mod:
style: |
ha-card {
border: 0px;
box-shadow: none;
}
entity: light.diner
name: Sprinkler
icon: mdi:sprinkler
- type: custom:mushroom-number-card
card_mod:
style: |
ha-card {
border: 0px;
box-shadow: none;
margin-top: -20px
}
entity: input_number.daily_energy_cost
display_mode: buttons
primary_info: none
secondary_info: none
icon_type: none
Hi there!
Guys, in chip’s ha-card:after is possible to set color of border line?
- type: template
entity: sensor.electricity_input_wh_to_kwh_bimonthly
content: "{{ states('sensor.electricity_input_wh_to_kwh_bimonthly') }} kWh"
icon: mdi:calendar-weekend
icon_color: "#44739e"
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: more-info
card_mod:
style: |
ha-card:after {
content: "{{ states('sensor.money_total_bimonthly') }} грн";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-white));
color: black;
font-weight: bolder;
border-radius: 15px 15px 15px 15px;
top: -5px;
right: -5px;
width: 50px;
height: 11px;
font-size: 10px;
}