EF0
January 14, 2024, 12:10pm
9561
Can’t get animations to work.
type: custom:mushroom-template-card
primary: Serenity
icon: mdi:scent
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: wave 6s ease infinite;
}
@keyframes wave {
50% { transform: rotatey(180deg); --icon-color: rgb(var(--rgb-cyan)); }
}
.shape {
--shape-animation: color 6s ease infinite;
}
@keyframes color {
50% { --shape-color: rgba(var(--rgb-cyan), 0.2); }
}
Look at the updated animations i have linked to in this thread many times.
Hello guys, is it possible to have a touch-on-icon action different from the single touch action on the whole entity-card?
Halover99
January 14, 2024, 2:51pm
9564
Dear Community
someone to know it’s possible limit text display to 5 lines, and after 2 second start to scroll text in automatic?
- type: custom:mushroom-template-card
picture: /local/channel/la7d.png
primary: '{{ state_attr(''sensor.la7d'',''name'') }}'
secondary: '{{ state_attr(''sensor.la7d'', ''description'') }}'
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.panasonic_1
card_mod:
style:
mushroom-state-info$: |
.secondary {
white-space: normal !important;
overflow: visible !important;
}
.: |
ha-card {
--icon-border-radius: 0;
height: !important;
font: 1px !important;
}
now the result is:
simple answer unfortunately.
no, not possible. not with card mod, not as an option in the card itself.
you would need to make your own card or start fidling with combining cards, like for example a button card and a mushroom template card.
take a look at this post:
You could set a min and max width to the same on all your chip types like this. But content will overflow.
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.dimitri_landerloos
- type: template
icon: mdi:test-tube
icon_color: green
- type: weather
entity: weather.openweathermap
- type: conditional
conditions:
- condition: state
entity: light.lounge_main_light
state: 'on'
chip:
type: alarm-control-panel
entity: …
card_mod:
style: |
mushroom-template-chip,
mushroom-conditional-chip,
mushroom-entity-chip,
mushroom-weather-chip,
mushroom-light-chip,
mushroom-menu-chip,
mushroom-spacer-chip {
max-width: 80px;
min-width: 80px;
}
josdegroot
January 14, 2024, 6:23pm
9568
Aergh… can you please help me why this is not working…I would like to have to icons (badge is working)… both for another status indicator (in the code below it’s the same, but that’s for testing).
type: custom:mushroom-template-card
primary: Badkamer
secondary: '{{ states(''sensor.temperatuur_ruimte_taster_badkamer_1_5'') }} °C'
icon: mdi:shower-head
entity: light.lampen_badkamer_1_5
badge_color: |-
{% if is_state('switch.radiator_badkamer_1_5', 'on') %}
red
{% endif %}
icon_color: |-
{% if is_state('light.lampen_badkamer_1_5', 'on') %}
orange
{% endif %}
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /badkamer-kim-en-jos
layout: vertical
badge_icon: |-
{% if is_state('switch.radiator_badkamer_1_5', 'on') %}
mdi:fire
{% endif %}
card_mod:
style: |
{% if states( ‘switch.radiator_badkamer_1_5’, 'on') %}
ha-state-icon::after {
content: "";
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
background-repeat: no-repeat;
background-image: url("/local/animated/fire.svg") !important;
background-position: top;
background-size: cover;
{%else%}
{%endif%}
}
havent tested - but 1st thing i would do is change where your if statements are. right now you have it mixed in between the element and outside. generally i dont recommend placing it outside of the element, but for pseudo elements (what the :after creates) it is probably fine. but either do this:
ha-state-icon::after {
{% if states( ‘switch.radiator_badkamer_1_5’, 'on') %}
content: "";
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
background-repeat: no-repeat;
background-image: url("/local/animated/fire.svg") !important;
background-position: top;
background-size: cover;
{%else%}
{%endif%}
}
or this:
{% if states( ‘switch.radiator_badkamer_1_5’, 'on') %}
ha-state-icon::after {
content: "";
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
background-repeat: no-repeat;
background-image: url("/local/animated/fire.svg") !important;
background-position: top;
background-size: cover;
}
{%else%}
{%endif%}
1 Like
That did it! Thank you lowone673. I made a few more adjustments but I think this is my final card.
Code
type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 130px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
primary: |-
{% from 'weather.jinja' import temperature_current %}
{{- temperature_current( entity) -}}
secondary: '{{- states( entity) | capitalize -}}'
icon: |-
{% from 'weather.jinja' import icon %}
{{ icon(entity, 'now') }}
entity: weather.home_2
tap_action:
action: call-service
service: automation.trigger
target:
entity_id: automation.family_room_default_on
data: {}
hold_action:
action: call-service
service: automation.trigger
target:
entity_id: automation.family_room_default_off
data: {}
icon_color: |-
{% from 'weather.jinja' import icon_color %}
{{ icon_color(entity, 'now') }}
fill_container: true
layout: horizontal
multiline_secondary: false
double_tap_action:
action: none
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.025);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
margin-right: -146px !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: weather.home_2
icon: |-
{% from 'weather.jinja' import icon %}
{{- icon( entity, 0) -}}
content: |-
{% from 'weather.jinja' import temperature_hilow %}
Today: {{- temperature_hilow( entity, 0) -}}
card_mod:
style: |
ha-card {
box-shadow: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: weather.home_2
icon: |-
{% from 'weather.jinja' import icon %}
{{- icon( entity, 1) -}}
content: |-
{% from 'weather.jinja' import temperature_hilow %}
Tomorrow: {{- temperature_hilow( entity, 1) -}}
card_mod:
style: |
ha-card {
box-shadow: none !important;
margin-top: -15px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: >-
{{ as_timestamp(states('sensor.sun_next_setting')) |
timestamp_custom('%I:%M %p') }}
icon: mdi:weather-sunset-down
- type: template
content: >-
{{ as_timestamp(states('sensor.sun_next_rising')) |
timestamp_custom('%I:%M %p') }}
icon: mdi:weather-sunset-up
- type: spacer
- type: entity
entity: sensor.moon_phase
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
:host([dark-mode]) {
# background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
}
4 Likes
FilipeOS
January 14, 2024, 11:19pm
9571
I’m having a strange issue with the select-card. If I add inside a stack the options don’t show, they are cropped. If I place alone, they show perfect. Any way of fixing this please?
Halover99
January 15, 2024, 12:31am
9572
I’m tried to create animation but i have a problem, when text scrolling from down to up make overlap with primary text
it’s possible block scrolling under secondary field?
- type: custom:mushroom-template-card
picture: /local/channel/rai3.png
primary: '{{ state_attr(''sensor.rai3'',''name'') }}'
secondary: '{{ state_attr(''sensor.rai3'', ''description'') }}'
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.panasonic_3
card_mod:
style:
mushroom-state-info$: |
.secondary {
{{ 'animation: scroll-text 10s linear infinite;' }}
white-space: normal !important;
overflow: visible !important;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
@keyframes scroll-text {
from {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
to {
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
.: |
ha-card {
overflow: hidden;
}
Thanks in advanced
Happy to assist! Looks great!!
@FilipeOS Please post the code.
This is most likely fixable by defining the width of the columns.
1 Like
@josdegroot If you are using the following settings in the after: your badge and after: image are in the same location and on top of each another.
top: -11%;
right: -11%;
This switches the image to the left side.
card_mod:
style: |
{% if is_state(‘switch.radiator_badkamer_1_5’, 'on') %}
ha-state-icon::after {
content: "";
position: absolute;
top: -6%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 17px;
height: 17px;
border-radius: 50%;
position: absolute;
background-repeat: no-repeat;
background-image: url("/local/animated/fire.png") !important;
background-position: top;
background-size: cover;
}
{%else%}
{%endif%}
I changed the badge icon for effect.
3 Likes
tokaz
January 15, 2024, 2:27am
9576
I have a problem what used to look nice is no more. I fetched this nice looking dashboard from @makeitworktech on youtube and its been working great for several months. I guess it changed after the updates of card-mod and HA but i can’t say for sure. I’m still pretty new to HA and been reading a lot in this thread and on the net to find a solution to once again remove the borders and boxes but can’t get it to work.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: sensor.motion_livingroom_temperature
name: Stue
icon_type: none
tap_action:
action: navigate
navigation_path: Stue
style: |
ha-card {
background-color: rgba(0,0,0,0);
box-shadow: none;
border-style: hidden;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.livingroom_all
icon: mdi:lightbulb-group
use_light_color: false
alignment: end
style: |
ha-card {
background-color: rgba(0,0,0,0);
box-shadow: none;
border-style: hidden;
}
- type: custom:mini-graph-card
entities:
- sensor.motion_livingroom_temperature
show:
state: false
name: false
icon: false
points_per_hour: 1
hours_to_show: 48
color_thresholds:
- value: -18
color: '#800080'
- value: 10
color: '#0000FF'
- value: 21
color: '#008000'
- value: 23
color: '#FFFF00'
- value: 24
color: '#FF6600'
- value: 25
color: '#FF0000'
- value: 26
color: '#FF69B4'
style: |
ha-card {
background-color: rgba(0,0,0,0);
box-shadow: none;
border-style: hidden;
}
Does anyone knows if the code in configuration.yaml changed? A lot of my integrations where move directly to the UI and therefore i’m not sure if it understand this anymore. Developer options says “ready” and the documentation for the card-mod didn’t change either. Since it have been working I wonder if it just not read the card-mod correctly and that it the error.
frontend:
extra_module_url:
- /local/community/lovelace-card-mod/card-mod.js
Card Mod had a breaking change in version 3.40
style: | no longer works without card_mod:
This is the correct method.
card_mod:
style: |
1 Like
MrGrey
January 15, 2024, 3:14am
9578
It’s hard to know without seeing your code, but I believe you need…
card_mod:
style: |
ha-card{
overflow: visible !important;
}
… within the card_mod for the stack-in-card.
MrGrey.
tokaz
January 15, 2024, 3:30am
9579
Looked so much and it was right in front of me
Hi everyone
I have a Hoval homevent house ventallation system which I can control via MQTT (integration is MQTT template sensors in the yaml)
This is what I have at the moment:
Secondary info on both cards is on the default, which should be state.
Dev tools for the entites:
I understand that the state is literally ‘on’ and the ‘50%’ target humidity is only in the attributes, but the same is true for the fan control too, and that picks up the 50% percentage.
If I interpret the source code correctly, it should pick up the humidity?https://github.com/piitaya/lovelace-mushroom/blob/dc54101a9b787b55794eee38620886306deba318/src/cards/humidifier-card/humidifier-card.ts#L119
If anyone has any hints if I’m doing someething wrong please let me know
Thanks
