Hi,
Version 3.4.1 fixes this problem.
Hi,
Version 3.4.1 fixes this problem.
Is that in response to me? Do you know when 3.4.1 may be getting released to HA?
Thanks I did a manual pull and got 3.4.1. It is still chopped off after a restart and clearing cache.
try to add some padding to the primary field like this:
type: custom:mushroom-template-card
entity: alarm_control_panel.alarmo
primary: |
{% if is_state(entity, 'armed_home') %}
ARMED HOME
{% elif is_state(entity, 'armed_away') %}
ARMED AWAY
{% elif is_state(entity, 'armed_night') %}
ARMED NIGHT
{% elif is_state(entity, 'disarmed') %}
DISARMED
{% else %}
OFFLINE
{% endif %}
fill_container: true
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
badge_color: ''
layout: vertical
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-font-size: 50px;
}
.primary {
padding: 10px 0px 10px 0px;
}
.: |
ha-card {
border-radius: 0px;
{% if is_state(config.entity, 'armed_home') %}
background-color: rgba(255, 0, 0, 100);
{% elif is_state(config.entity, 'armed_away') %}
background-color: rgba(255, 0, 0, 100);
{% elif is_state(config.entity, 'armed_night') %}
background-color: rgba(255, 0, 0, 100);
{% elif is_state(config.entity, 'disarmed') %}
background-color: rgba(0, 100, 0, 100);
{% else %}
background-color: rgba(175, 90, 0, .4);
{% endif %}
}
yes. --primary-text-color
and --secondary-text-color
have changed in version 3.4.1 to
--card-primary-color
and --card-secondary-color
. this is to keep mushroom in line with the standard tile cards.
i havent updated this guide to 3.4.1 just yet as i have seen a few more open bugs still that i am waiting a bit to see if they will get squashed. but it will be updated to reflect this change soon
Youâre awesome dude!
@dimitri.landerloos Hi! Could you help me out? If you look at my picture the 2nd weather card is âgoodâ but this is one using an other entity which doesnt work with tap_action. So i wanted to add a other weather card but the scaling is bad ( the one above ) it should be like the 2ndâŚ
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto auto
margin: 8px 4px 4px 4px;
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.laurens
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.adna
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: template
entity: input_boolean.jax_home_not_home
picture: local/images/jax.jpg
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
{% if is_state(config.entity, 'on') %}
--chip-background: rgb(var(--rgb-state-person-home));
{% else %}
--chip-background: red; /* Set to red when the status is 'off' */
{% 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: template
entity: input_boolean.gasten_modus
icon: mdi:account-plus
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
{% if is_state(config.entity, 'on') %}
--chip-background: rgb(var(--rgb-state-person-home));
{% else %}
--chip-background: red; /* Set to red when the status is 'off' */
{% 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: weather-forecast
show_current: true
show_forecast: false
entity: weather.buienradar
forecast_type: daily
theme: Mushroom Shadow
name: ' '
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Weersverwachting
content:
type: entities
entities:
- type: custom:weather-card
entity: weather.forecast_home
forecast: true
details: false
card_mod:
style:
.: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
padding: 5px !important;
}
.current{
font-size: 6px;
}
This is not related to this topicâŚ
Please look here
Hello gentlemen,
could you please help me out, Iâm trying to rotate 90 degrees a custom:mushroom-title-card. Thanks for your time.
type: custom:mushroom-title-card
title: Rollo KĂźche
alignment: center
card_mod:
style: |
ha-card {
rotate: 90deg;
}
It rotated for me. Is it part of a larger card?
I added a few more mods you can play with
type: custom:mushroom-title-card
title: Rollo KĂźche
alignment: center
card_mod:
style: |
ha-card {
rotate: 90deg !important;
margin: 40px;
--title-color: red !important;
--title-font-size: 20px;
}
Hi,
I am totally confused and maybe a stupid question. I know that the color naming has changed but I canât get my title card working. even a damn short one doesnât work as expected. What am I doing wrong here ? Itâs not blue itâs not green.
Thx for any help.
type: custom:mushroom-title-card
title: Hello, {{ user }} !
subtitle: hello
card_mod:
style: |
ha-card {
--card-primary-color: blue !important;
--card-secondary-color: green !important;
}
Different fields for Mushroomâs Title card
type: custom:mushroom-title-card
title: Hello, {{ user }} !
subtitle: hello
card_mod:
style: |
ha-card {
--title-color: red !important;
--subtitle-color: blue !important;
}
You just saved my life. Many Thx. Where do I find these kind of infos. Was looking around but I guess I found only wrong places.
Yes I know that. My question goes more into the direction where to find infos when something is changing as for example under the title card the old staff is still present. Donât get me wrong I am not telling @dimitri.landerloos to update this asap. No No I am actually very very glad about this post. But there must be somewhere a release note or something else. Was on the GitLab side but unfortuately I didnât find anything.
OK Thx. That is actually a quite good approach. I will use that in the future. Thx for pointing that out.
The post will be updated soon, i tend to keep quite up to date. it is just that there are some open bug reports in 3.4.X at the moment that i am waiting to see if they will get resolved before updating