Thank you very much ! Could you share how did you get the other person cards enlaced and overlapping each others?
of course, but have a problem, because the number of characters is very high and i dont manage to share in a single post. its possible to overlap only using all cards… if you want i can send you all cards
Hi,
I am looking for a way to use ‘transform: translate’ animation, but I need it with a twist…
In perfect scenario I want to be able to pause it at specific points or move it from current position to new position using sensor value (for example input_select).
Is this doable?
TIA
How can I create an input_datetime (time) in mushroom style?
Is there already a possibility for this
Simple answer. no there isnt.
you could create one that is a combination of a mushroom template card and a input datetime entity in the standard entities card.
i am using this by @MrGrey (with small changes):
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
primary: Sunday Alarm
secondary: null
icon: >-
{{ iif (is_state('input_boolean.sunday_alarm_skip', 'off'), 'mdi:alarm',
'mdi:alarm-off') }}
icon_color: >-
{{ iif (is_state('input_boolean.sunday_alarm_skip', 'off'), 'green',
'grey') }}
entity: input_boolean.sunday_alarm_skip
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host {
--primary-text-color:
{% if is_state('input_boolean.sunday_alarm_skip', 'off') %}
var(--primary-text-color)
{% else -%}
var(--secondary-text-color)
{% endif %}
}
- type: entities
entities:
- entity: input_datetime.alarm_sunday
secondary_info: none
card_mod:
style:
hui-generic-entity-row $: |
state-badge { display: none; }
div.info.pointer { display: none; }
ha-time-input:
$ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
:host {
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
{% if is_state('input_boolean.sunday_alarm_skip','on') %}
--mdc-text-field-ink-color: var(--disabled-text-color);
color: var(--disabled-text-color);
--mdc-select-ink-color: var(--disabled-text-color);
--mdc-text-field-idle-line-color: var(--disabled-text-color);
--mdc-select-idle-line-color: var(--disabled-text-color);
--mdc-select-dropdown-icon-color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
pointer-events: none;
{% endif %}
}
card_mod:
style: |
#states {
padding-top: 12px;
padding-bottom: 12px;
padding-left: 0px;
align-self: end;
}
#states > div{
border: 1px solid rgba(127,127,127,0.5);
border-radius: 12px !important;
box-shadow: none;
}
how to line up objects in one line and distribute them evenly horizontally?
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(3, 1fr)
margin: 2px 2px 2px 2px;
grid-template-rows: auto
grid-template-areas: |
"one two three"
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: template
icon: mdi:cog
icon_color: cyan
card_mod:
style: |
ha-card {
animation: rotation 3s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
- type: template
icon: mdi:restart
icon_color: green
tap_action:
confirmation:
text: Перезагрузить сервер?
action: call-service
service: homeassistant.restart
service_data:
transition: 5
target:
entity_id: scene.idle
card_mod:
style: |
ha-card {
animation: reset 1.5s infinite;
}
@keyframes reset {
100% {
transform: rotate(360deg);
}
}
- type: template
icon: mdi:power-standby
icon_color: red
hold_action:
action: none
tap_action:
confirmation:
text: Выключить сервер?
action: call-service
service: homeassistant.stop
service_data: {}
target: {}
card_mod:
style: |
ha-card {
animation: power 1.5s infinite;
}
.shape {
--shape-color: none;
}
@keyframes power {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
}
- type: custom:apexcharts-card
view_layout:
grid-area: one
chart_type: radialBar
series:
- entity: sensor.processor_use
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 85%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
legend:
show: false
chart:
height: 90
card_mod:
style: |
ha-card {
margin-top: -8px;
background: none;
box-shadow: none;
border-width: 0;
padding: 0px !important;
}
- type: custom:mushroom-template-card
entity: sensor.processor_use
primary: '{{ states(''sensor.processor_use'') }}%'
secondary: CPU
layout: vertical
card_mod:
style: |
ha-card {
--card-primary-font-size: .8rem;
--card-secondary-font-size: .7rem;
margin-top: -38px;
background: none;
box-shadow: none;
border-width: 0;
padding: 0px !important;
}
- type: custom:apexcharts-card
view_layout:
grid-area: two
chart_type: radialBar
series:
- entity: sensor.memory_use_percent
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 85%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
legend:
show: false
chart:
height: 90
card_mod:
style: |
ha-card {
margin-top: -8px;
background: none;
box-shadow: none;
border-width: 0;
padding: 0px !important;
}
- type: custom:mushroom-template-card
entity: sensor.memory_use_percent
primary: '{{ states(''sensor.memory_use_percent'') }}%'
secondary: RAM
layout: vertical
card_mod:
style: |
ha-card {
--card-primary-font-size: .8rem;
--card-secondary-font-size: .7rem;
margin-top: -38px;
background: none;
box-shadow: none;
border-width: 0;
padding: 0px !important;
}
- type: custom:apexcharts-card
view_layout:
grid-area: three
chart_type: radialBar
series:
- entity: sensor.disk_use_percent
max: 64
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 85%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
legend:
show: false
chart:
height: 90
card_mod:
style: |
ha-card {
margin-top: -8px;
background: none;
box-shadow: none;
border-width: 0;
padding: 0px !important;
}
- type: custom:mushroom-template-card
entity: sensor.disk_use_percent
primary: '{{ states(''sensor.disk_use_percent'') }}%'
secondary: HDD
layout: vertical
card_mod:
style: |
ha-card {
--card-primary-font-size: .8rem;
--card-secondary-font-size: .7rem;
margin-top: -38px;
background: none;
box-shadow: none;
border-width: 0;
padding: 0px !important;
}
card_mod:
style: |
ha-card {
width: 100%;
margin-right: 5px;
}
Since the automation takes a few seconds to run can I blink the “mushroom template card” or can I change the value to “Opening” something that will indicate I clicked on the card
- type: custom:mushroom-template-card
entity: binary_sensor.esp_garage_01_garage_rolling_door
primary: ' '
secondary: |-
{% set state=states(entity) %}
{% if state=='on' %}
Closed
{% elif state=='off' %}
Open
{% else %}
Error
{% endif %}
icon: |-
{% set state=states(entity) %}
{% if state=='on' %}
mdi:garage
{% elif state=='off' %}
mdi:garage-open
{% else %}
mdi:garage
{% endif %}
layout: vertical
tap_action:
action: call-service
service: script.script_close_garage
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
blue
{% elif state=='off' %}
orange
{% else %}
grey
{% endif %}
Hi, I’m trying to merge 3 cards with the last being scrolling text, is it possible to reduce the size and move left the first two cards so I can make more use of the available space for the scrolling.The top picture is what I have and the second is what I would like.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
--ha-card-border-width: 0;
}
cards:
- type: custom:digital-clock
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
--ha-card-border-width: 0;
}
cards:
- type: custom:mushroom-template-card
primary: Alerts & Weather
icon: mdi:weather-partly-snowy-rainy
tap_action:
action: navigate
navigation_path: '#livingroom'
icon_color: blue
multiline_secondary: true
card_mod:
style: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
z-index: 1;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
--ha-card-border-width: 0;
}
cards:
- type: custom:button-card
name: |
[[[return `<div style='display: flex;display: -webkit-flex;'>
<div> </div>
<marquee>
<span style='color: red;'>
There are '${states['sensor.lights_on_test'].state}' lights on
and '${states['sensor.count_windows_open'].state}' doors or windows open, 
the inside average house temperature is ${states['sensor.everything_presence_one_temperature'].state}°c, 
and the outside temperature is ${states['sensor.gw2000a_v2_2_0_outdoor_temperature'].state}°c. 
</span>
<span style='color: var(--primary-color);'>
<span style='color: green;'>
Today's weather summary is ${states['sensor.openweathermap_weather'].state} 
and ${states['sensor.openweathermap_forecast_condition'].state} 
with a possible ${states['sensor.openweathermap_forecast_precipitation'].state}mm of rain in the next hour
</span>
</marquee>`]]]
Very Nice - thanks thanks
Unfortunately the screenshot upload is not working at the moment.
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
primary: DUFT
secondary: null
icon: >-
{{ iif (is_state('input_boolean.duft', 'off'), 'mdi:alarm',
'mdi:alarm-off') }}
icon_color: '{{ iif (is_state(''input_boolean.duft'', ''off''), ''purple'', ''grey'') }}'
entity: input_boolean.duft
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host {
--primary-text-color:
{% if is_state('input_boolean.duft', 'off') %}
var(--primary-text-color)
{% else -%}
var(--secondary-text-color)
{% endif %}
}
- type: entities
entities:
- entity: input_datetime.duft
secondary_info: none
card_mod:
style:
hui-generic-entity-row $: |
state-badge { display: none; }
div.info.pointer { display: none; }
ha-time-input:
$ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
:host {
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
{% if is_state('input_boolean.duft','on') %}
--mdc-text-field-ink-color: var(--disabled-text-color);
color: var(--disabled-text-color);
--mdc-select-ink-color: var(--disabled-text-color);
--mdc-text-field-idle-line-color: var(--disabled-text-color);
--mdc-select-idle-line-color: var(--disabled-text-color);
--mdc-select-dropdown-icon-color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
pointer-events: none;
{% endif %}
}
- type: custom:timer-bar-card
entities:
- timer.duft
layout: full_row
text_width: 40px
bar_background: '#222'
bar_foreground: purple
card_mod:
style: |
:host {
--primary-text-color:
{% if is_state('input_boolean.duft', 'off') %}
var(--primary-text-color)
{% else -%}
var(--secondary-text-color)
{% endif %}
}
ha-card {
{% if is_state('input_boolean.duft', 'on') %}
border: 2.5px outset rgb(128,0,128, 0.6) !important;
{% else %}
border: none;
{% endif %}
}
Could you perhaps share the code you used?
Hi, I also got this problem. I can´t resolve it.
I have re-downloaded all Mushroom cards etc. in HACS. But nothing seems to change. It works on pc but not on ios. Is anybody able to assist in solving issue? Regards, Jacob
Its fixed now after reload of cards.
Continuing the discussion from 
Card-mod - Add css styles to any lovelace card:
Hi there,
I created and modified a mushroom cover card and when changing the icon color by using a template the spacing gets lost. However, changing the icon color without templating does not affect the spacing.
Any idea to use my template to change the icon color without destroying the original spacing?
type: custom:mushroom-cover-card
entity: cover.rollladen_schlafen_kinder
card_mod:
style: |
ha-state-icon {
color: gray;
}
ha-card {
--card-primary-font-size: 18px;
} :host {
--mush-spacing:5px;
--mush-card-primary-font-weight: normal
} mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: transparent !important;
--icon-symbol-size: 100px;
margin: 1px !important;
}
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
icon_type: icon
fill_container: true
secondary_info: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
results in:
This is regardless whether using color name (e.g. grey, red…) or color code (e.g. #ffffff…).
type: custom:mushroom-cover-card
entity: cover.rollladen_schlafen_kinder
card_mod:
style: |
ha-state-icon {
{% set entity = 'cover.rollladen_schlafen_kinder' %}
{% if state_attr(entity, 'current_position') |int == 100 %}
{% set icon_col = '#%02x%02x%02x' % (255,255,255) %}
{% elif state_attr(entity, 'current_position') |int > 75 %}
{% set icon_col = '#%02x%02x%02x' % (224,224,224) %}
{% elif state_attr(entity, 'current_position') |int > 50 %}
{% set icon_col = '#%02x%02x%02x' % (193,193,193) %}
{% elif state_attr(entity, 'current_position') |int > 25 %}
{% set icon_col = '#%02x%02x%02x' % (162,162,162) %}
{% elif state_attr(entity, 'current_position') |int > 0 %}
{% set icon_col = '#%02x%02x%02x' % (131,131,131) %}
{% else %} {{ '#%02x%02x%02x' % (100,100,100) }}
{% set icon_col = '#%02x%02x%02x' % (100,100,100) %}
{% endif %}
color: {{ icon_col }};
}
ha-card {
--card-primary-font-size: 18px;
} :host {
--mush-spacing:5px;
--mush-card-primary-font-weight: normal
} mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: transparent !important;
--icon-symbol-size: 100px;
margin: 1px !important;
}
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
icon_type: icon
fill_container: true
secondary_info: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
Results in:
This happens regardless the type of template. Even inserting {{ whatever }} as value for color did not change the behaviour.
Also tried using --card-mod-icon-color: but using template for the value showed the same outcome.
Any idea to change the icon color state attribute dependend without crashing the spacing of my modification?
Thank you for your help and kind regards,
Benedikt
use this:
style: |
ha-state-icon {
color: orange;
}
See here:
try something like this:
type: custom:mushroom-cover-card
entity: cover.livingroom_window_front
card_mod:
style: |
ha-state-icon {
{% if state_attr('cover.livingroom_window_front', 'current_position') == 100 %}
color: purple;
{% elif state_attr('cover.livingroom_window_front', 'current_position') > 75 %}
color: green;
{% elif state_attr('cover.livingroom_window_front', 'current_position') > 50 %}
color: pink;
{% elif state_attr('cover.livingroom_window_front', 'current_position') > 25 %}
color: yellow;
{% elif state_attr('cover.livingroom_window_front', 'current_position') > 0 %}
color: red;
{% endif %}
}
ha-card {
--card-primary-font-size: 18px;
} :host {
--mush-spacing:5px;
--mush-card-primary-font-weight: normal
} mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: transparent !important;
--icon-symbol-size: 100px;
margin: 1px !important;
}
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
icon_type: icon
fill_container: true
secondary_info: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
this works you can implement it on your code, tested with the cover card.
This is what I already did. It works. But I want to use a template aa mentioned above and then it doesn’t…
Thanks, what about individual font sizes for a single line?
Ex: ‘Good Morning’ is size 60px, and {{user}}) is size 10px for title only.
Simple answer you cant.
You can use css pseudo elements to do something like it. but its not actually on the same line. it is technically a different element entirely.
type: custom:mushroom-title-card
title: Hello,
subtitle: Test
card_mod:
style: |
.title:before {
content: '😊';
font-size: 80px;
}
.title:after {
content: '{{user}} !';
font-size: 20px;
}
:host {
--title-font-size: 60px !important;
}
1 Like
Tested and this works perfectly fine for me. no issue for me.
type: custom:mushroom-cover-card
entity: cover.office_blinds
card_mod:
style: |
ha-state-icon {
{% set entity = 'cover.office_blinds' %}
{% if state_attr(entity, 'current_position') | int == 100 %}
{% set icon_col = '#%02x%02x%02x' % (255,255,255) %}
{% elif state_attr(entity, 'current_position') |int > 75 %}
{% set icon_col = '#%02x%02x%02x' % (224,224,224) %}
{% elif state_attr(entity, 'current_position') |int >= 50 %}
{% set icon_col = '#%02x%02x%02x' % (193,193,193) %}
{% elif state_attr(entity, 'current_position') |int >= 25 %}
{% set icon_col = '#%02x%02x%02x' % (162,162,162) %}
{% elif state_attr(entity, 'current_position') |int > 0 %}
{% set icon_col = '#%02x%02x%02x' % (131,131,131) %}
{% else %} {{ '#%02x%02x%02x' % (100,100,100) }}
{% set icon_col = '#%02x%02x%02x' % (100,100,100) %}
{% endif %}
color: {{ icon_col }};
}
ha-card {
--card-primary-font-size: 18px;
}
:host {
--mush-spacing: 5px;
--mush-card-primary-font-weight: normal;
}
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: transparent !important;
--icon-symbol-size: 100px;
margin: 1px !important;
}
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
icon_type: icon
fill_container: true
secondary_info: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
but is there any reason why you dont just do what was suggested here?
seems a much easier way if you are going to set each state anyway…
Works great, thank you!
1 Like
Did you try to refresh/reload your browser site? After leaving the editing its fine with me as well. After reloading it crashes (lost spacing). With both suggested versions. Regardless the browser (Chrome, Mozilla, Fully Kiosk), regardless the device (Android Tablet ans Smartphone, two different Windows PCs)…