Ahhh, thanks for the info. Anyhow it is then not working 
Can you show me what you get when trying please?
Ohh my good… it works when adding it as manual card. I was expecting to be able to select a card from the menu, called something with “stack”.
Now it is working. How can I add also the unit, maybe also as additional text?
Nope, it seems, that card_mod isn’t used…
I also checked my configuration, but it looks good.
# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:
frontend:
themes:
No Borders:
#ha-card-border-radius: 1px ## or whatever radius you want
#ha-card-border-color: rgba(0,0,0,0) ## transparent
ha-card-border-width: 0px
modes:
light: {}
dark: {}
# Text to speech
tts:
- platform: google_translate
group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
knx: !include knx.yaml
sensor: !include sensors.yaml #lagacy format for tempates. use templates.yaml for new sensors
template: !include templates.yaml #manuel sensors etc
1 Like
hello dimitri, it’s me again lol I have a small aesthetic problem with the icon, when I set the temperature of my bulbs to the maximum cold white (6535 k) I have a border which is displays when I go back a little (5750 k) the border disappears, I don’t understand why
type: custom:mushroom-light-card
entity: light.la_chambre_d_amis
collapsible_controls: false
show_color_temp_control: true
use_light_color: true
show_brightness_control: true
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: transparent !important;
}
mushroom-state-info$: |
.container {
filter: drop-shadow(#ffffff 0rem 0rem 6px);
--secondary-text-color: #999999 !important;
}
.: |
@keyframes blink {
0% {opacity: 1}
50% {opacity: 0.2}
100% {opacity: 1}
}
ha-card {
--ha-card-background: transparent !important;
border-color: transparent !important;
}
mushroom-button{
--bg-color: transparent !important;
}
ha-state-icon {
{% if is_state('light.la_chambre_d_amis', 'on') %}
animation: blink 1s linear infinite;
filter: drop-shadow(#ffffff 0rem 0rem 6px);
color: #ffffff !important;
}
{% else %}
filter: drop-shadow(#ffffff 0rem 0rem 6px);
color: #ffffff !important;
opacity: 25% !important;
{% endif %}
}
i would check that you have card_mod properly installed from HACS.
Hmm, strange. i have this problem when using linear gradients on the edge of my card itself sometimes too. what tends to help is just removing border entirely, just in case.
mushroom-shape-icon$: |
.shape {
background: none !important;
border: none !importantp;
}
see if this helps.
simple. just add it after the template:
{{state_attr('climate.office_heating','current_temperature')}}°C
you mean a second line? cant be done by default, but can be done with card mod, it is a little tricky however:
type: custom:vertical-stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-climate-card
entity: climate.office_heating
show_temperature_control: true
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
icon_color: deep-orange
content: >-
{{state_attr('climate.office_heating','current_temperature')}}
alignment: end
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
span:after {
content: 'Test';
display: flex;
padding-top: 0.3em;
color: var(--secondary-text-color);
}
.: |
ha-card {
position: absolute;
top: 12px;
right: 12px;
}
just put whatever you want in the section that says ‘Test’: content: 'Test';
FYI nth-child(1) refers to the first chip in your code, so if you have more than 1 just ensure you update the number to refer to the actual chip you are targeting.
1 Like
At the top for the responsiveness but I solved the problem, by changing the theme of HA by setting it back by default
oh my god… I did not know, that card mod is an extra repo. Sorry for that, but thank you very much for the help. Also thank you very much for the time and the great guide!
1 Like
@dimitri.landerloos im really curious about your dashboard 
You got a github / pics of your dashboard?
Its honestly nothing much to write home about. I dont have a github or anything. I also only have a mobile dashboard atm. Havent found a reason to make a tablet one yet. But here are some screenshots:
Main Page:
Some room pages:
11 Likes
Looks really clean tbh:) if you ever decide to make a GitHub I could get some inspiration from it 
Nice. Can you share the office thermostat graph config?
Sure, its a bit sensitive to screen size i think.
Needs some scripts and input booleans to work too.
type: custom:stack-in-card
cards:
- type: grid
square: false
cards:
- type: custom:mushroom-climate-card
entity: climate.office_heating
name: Thermostat
secondary_info: none
show_temperature_control: true
collapsible_controls: true
layout: horizontal
tap_action:
action: call-service
service: script.temp_toggle_office
target: {}
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
position: relative;
width: 135%;
right: 35%;
z-index: 1 !important;
}
#container .button:nth-child(1) {
height: 25px !important;
width: 50px !important;
border-radius: 10px;
background: rgba(var(--rgb-red),0.3);
}
.minus {
padding-right: 5px !important;
}
#container .button:nth-child(3) {
height: 25px !important;
width: 50px !important;
border-radius: 10px;
background: rgba(var(--rgb-green),0.3);
}
.plus {
padding-left: 5px !important;
}
.: |
ha-card {
width: 182%;
}
mushroom-state-item {
background: transparent !important;
{% if states(config.entity) == 'heat' %}
flex: none;
{% else %}
{% endif %}
}
mushroom-state-info {
background: transparent !important;
}
mushroom-state-info:after {
content: "{{state_attr(config.entity, 'hvac_action') | capitalize}} - {{state_attr(config.entity,'current_temperature')}}°C";
font-size: 12px;
font-weight: bold;
color: var(--secondary-text-color);
background: transparent !important;
}
mushroom-shape-icon {
--icon-symbol-size: 0.6em;
{% if state_attr(config.entity, 'hvac_action') == 'idle' %}
--card-mod-icon: mdi:leaf;
--card-mod-icon-color: rgba(var(--rgb-green), 1);
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{% else %}
--card-mod-icon: mdi:fire;
--card-mod-icon-color: rgba(var(--rgb-deep-orange), 1);
--shape-color: rgba(var(--rgb-deep-orange), 0.2) !important;
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_boolean.office_thermostat_dropdown
icon: |-
{% if states(config.entity) == 'on' %}
mdi:chevron-up
{% else %}
mdi:chevron-down
{% endif %}
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
box-shadow: none !important;
top: 15px;
--chip-icon-size: 23px;
}
alignment: end
card_mod:
style: |
ha-card {
top: 0px;
right: 11px;
height: 20px;
}
columns: 2
- type: conditional
conditions:
- entity: input_boolean.office_thermostat_dropdown
state: 'on'
card:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
card_mod:
style: |
ha-card {
background: transparent !important;
height: 122px;
}
cards:
- type: grid
square: false
columns: 2
cards:
- type: grid
square: false
columns: 1
cards:
- type: custom:mushroom-template-card
entity: sensor.office_temperature_humidity_temperature
primary: >-
{{ states(entity) }} {{ state_attr(entity,
"unit_of_measurement") }}
secondary: null
icon_color: |-
{% set temp = states(entity) %}
{% if temp >= '22' %}
red
{% elif temp >= '20' and temp < '22' %}
orange
{% elif temp == 'unknown' %}
grey
{% else %}
#ffcd05
{% endif %}
icon: mdi:home-thermometer-outline
tap_action:
action: more-info
card_mod:
style: |
:host {
position: absolute;
--mush-icon-size: 30px;
--mush-icon-symbol-size: 20px;
background: transparent !important;
z-index: 2;
width: 150px;
top: -10px;
}
- type: custom:mushroom-template-card
entity: sensor.office_temperature_humidity_humidity
primary: >-
{{ states(entity) | round}} {{ state_attr(entity,
"unit_of_measurement") }}
icon_color: |-
{% set temp = states(entity) %}
{% if temp >= '60' %}
#0d6aff
{% elif temp >= '50' and temp < '60' %}
#63b9ff
{% elif temp >= '40' and temp < '50' %}
#63b9ff
{% elif temp == 'unknown' %}
grey
{% else %}
#defeff
{% endif %}
icon: mdi:water
tap_action:
action: more-info
card_mod:
style: |
:host {
position: absolute;
--mush-icon-size: 30px;
--mush-icon-symbol-size: 20px;
background: transparent !important;
z-index: 2;
width: 150px;
top: 30px;
}
- type: custom:mushroom-template-card
entity: climate.office_heating
primary: '{{ state_attr(entity, ''temperature'') | round}} °C'
icon_color: |-
{% set temp = state_attr(entity, 'temperature') %}
{% if temp >= 22 %}
red
{% elif temp >= 20 and temp < 22 %}
orange
{% elif temp == 'unknown' %}
grey
{% else %}
#ffcd05
{% endif %}
icon: mdi:thermostat
tap_action:
action: more-info
card_mod:
style: |
:host {
position: absolute;
--mush-icon-size: 30px;
--mush-icon-symbol-size: 20px;
background: transparent !important;
z-index: 2;
width: 150px;
top: 70px;
}
- type: custom:mini-graph-card
entities:
- entity: climate.office_heating
attribute: temperature
name: Target
color: fuchsia
show_fill: false
- entity: sensor.office_temperature_humidity_humidity
name: Humidity
y_axis: secondary
- entity: sensor.office_temperature_humidity_temperature
name: Temperature
hours_to_show: 24
line_width: 3
font_size: 50
points_per_hour: 2
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
color_thresholds:
- value: 17
color: '#ffcd05'
- value: 19
color: '#f39c12'
- value: 21
color: '#d35400'
- value: 22.5
color: '#c0392b'
- value: 40
color: '#91f4ff'
- value: 50
color: '#2ae0f5'
- value: 58
color: '#18b3f5'
- value: 65
color: '#005bd1'
- value: 70
color: '#000399'
card_mod:
style: |
ha-card {
position: absolute !important;
top: -30px;
width: 100% !important;
height: 122% !important;
left: 0px;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
3 Likes
i really love these guide! A bit offtopic is there also a similar guide for the Tile Card?
Not as of yet. I was working on one and i have saved my progress. But at the moment the tile cards are changing a bit too much for me to post it and then keep on top of changes. I would rather wait a bit for the changes to settle and then finish and post.
2 Likes
Hi to you Dimitri little question is what would be why I have a kind of flash when I change pages or I see the original cards before the config card-mod is supported?
Ill link you to this post that should hopefully explain it.
Dimitri do you know the manipulation to externalise the styles in a style.yaml file and call them?