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
@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;
}
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;
}
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.
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
In theory, this should work. It seems to cause a lot of weird performance issues, though (i.e. the icon background won’t stay black, the animation continues after the light turns off, etc). The color of the animation does change properly, though. That has me curious if my syntax is outta whack.
Can anyone help with this query? I am setting up a new dashboard and using an input number set linked to a mushroom title card. I can style the title card with a single background color, but when it comes to templating the code doesn’t appear to work. by itself the border will work, but when I add the if/else code, nothing works.
I am new to CSS, so any help would be appreciated.
