it is not possible to increase the size of the image container and not just the image inside, I don’t know if I was clear
Sure just use icon-size:
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--icon-size: 60px !important;
}
Ah didn’t realize you were putting a image. We may need a few more changes.
Can’t get animations to work.
Just started to implement this.
Mushroom and card_mod is installed.
I fan only get the color change to work on this:
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?
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:
perfect thank you
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
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?
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
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.
So now I want to give it a shot to see if some experts in here can see something in my yaml, that needs to be changed.
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
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.