For some reason, even copying cards that are “ready” they still show the icon as small. This has been like this for over a year, I’ve tried fixing it, gave up, tried, gave up, tried, gave up, and now I’m gonna try again.
My Home Assistant can’t seem to reproduce the same way. What can I be doing wrong?!
The first screenshot is a recently “adapted” card and the icon still shows very small compared to the cards people been working on.
I’ve even tried reverting to the 3.4.4 version, still same results. Can’t even revert to the point they look like they were (with the big icon, I’m pretty sure you understand what I mean).
Guys, I’m sorry but I’m really lost lol. I’ve read this entire thread and no results. Tried over 10 cards, nothing. It has to be something so silly that I can’t even think off
Older card example:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_boolean.room_attic
primary: Sotão
secondary: |
{{ states('sensor.temp_attic') | round(0) }}°C | {{
states('sensor.humd_attic') | round(0) }}%
icon: mdi:home-roof
tap_action:
action: navigate
navigation_path: attic
hold_action:
action: call-service
service: light.turn_off
data:
transition: 3
target:
area_id: attic
double_tap_action:
action: toggle
icon_color: |-
{% if states('light.candeeiro_sotao') == 'on' %}
#FFB300
{% endif %}
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
ha-card([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.25);
}
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
--icon-size: 76px;
margin-top: -20px !important;
margin-left: -18px !important;
margin-bottom: -11px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.occupancy_attic
state: "on"
chip:
type: template
icon_color: disabled
icon: mdi:transition
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.window_attic_contact
state: "on"
chip:
type: template
icon_color: disabled
icon: mdi:window-open-variant
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.attic_door_contact
state: "on"
chip:
type: template
icon_color: disabled
icon: mdi:door-open
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-border-width: 0;
position: relative;
top: -20px;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.candeeiro_sotao', 'on') %}
background: rgba(255, 179, 0, 0.1);
{% endif %}
}
:host {
background: var(--card-background-color);
border-radius: var(--ha-card-border-radius);
}
Code that I tried from a post up here but looks similar (broken) - but that seems to work for everyone else: (I know this one is vertical but I’m really just trying to understand what’s going on).
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
icon: mdi:sofa
icon_color: |-
{% if states('light.night_stand') == 'on' or
states('switch.detached_garage_lights') == 'on' or
states('media_player.shield') == 'playing' or
states('light.pc_light') == 'on' %}
light-blue
{% else %}
light-grey
{% endif %}
primary: Wohnzimmer
secondary: "{{ states('sensor.living_room_temperature') | round(0)}}°C"
layout: horizontal
fill_container: false
multiline_secondary: false
entity: light.pc_lights
tap_action:
action: navigate
navigation_path: badezimmer
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -52px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
font-weight: 500 !important;
top: -50px;
left: -145px;
color: {{ 'red' if states('sensor.basement_sensor_humidity') | int(0) <= 20 else 'yellow'}} !important;
}
.secondary:after {
content: "{{states('sensor.basement_sensor_humidity')}}%";
position: absolute;
top: 0px;
left: 50px;
color: {{ 'blue' if states('sensor.basement_sensor_humidity') | int(0) <= 20 else 'red'}} !important;
}
mushroom-shape-icon$: |
.shape {
left: -35px;
top: 55px;
--icon-symbol-size: 80px;
--icon-size: 146px;
}
.: |
ha-card {
background: none !important;
border-style: none !important;}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.detached_garage_lights
tap_action:
action: toggle
icon: mdi:lightbulb
hold_action:
action: more-info
icon_color: |-
{% if is_state(entity, 'on') %}
amber
{% else %}
light-grey
{% endif %}
double_tap_action:
action: none
card_mod:
style: |
ha-card {
background: none !important;
}
- type: template
entity: light.corner_stand
icon: mdi:lightbulb-group
icon_color: |-
{% if is_state(entity, 'on') %}
amber
{% else %}
light-grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
background: none !important;
}
- type: template
entity: light.night_stand
icon: mdi:floor-lamp
icon_color: |-
{% if is_state(entity, 'on') %}
amber
{% else %}
light-grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
background: none !important;
}
- type: template
entity: media_player.shield
icon: mdi:television
icon_color: |-
{% if is_state(entity, 'playing') %}
blue
{% else %}
light-grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: none !important;
}
card_mod:
style: |
ha-card {
width: 66px;
margin-left: 60%;
background: none !important;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
background: none !important;
border: none;
}
I had asked for help here but was hopeful that in a year or so I’d eventually understand. I didn’t. It’s been a year and half. I barely use my HA at this point cus I can’t fix it and I don’t wanna start over either lol.
