i see it on edge. but not firefox.
the issue is related to your margin i think rather than anything else. even if i remove the entire if section it still has the same issue. so looks like you cant use a margin on the mushroom-shape-icon element.
try like this instead:
type: custom:mushroom-cover-card
entity: cover.office_blinds
card_mod:
style: |
ha-state-icon {
{% if state_attr(config.entity, 'current_position') == 100 %}
color: rgba(255,255,255);
{% elif state_attr(config.entity, 'current_position') > 75 %}
color: rgba(224,224,224);
{% elif state_attr(config.entity, 'current_position') > 50 %}
color: rgba(193,193,193);
{% elif state_attr(config.entity, 'current_position') > 25 %}
color: rgba(162,162,162);
{% elif state_attr(config.entity, 'current_position') > 0 %}
color: rgba(131,131,131);
{% else %}
color: rgba(100,100,100);
{% endif %}
}
ha-card {
--card-primary-font-size: 18px;
--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;
}
mushroom-state-item {
padding-top: 20px;
--spacing: 30px;
margin-bottom: 10px;
}
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
matata
November 10, 2023, 11:22pm
8740
Hi, animation not working for me… is static. Any idea please?
check the updated animations. how they are applied changed earlier in the year.
Hi @rhysb ,
i have made a general mushroom - card-mod styling guide that i have posted here . i have linked to your resource on animations from it because it is great. however since it was made a few things have changed with the way that animations are applied and we get a bunch of questions regarding it right now because people want to use your animations. so i hope you dont mind that i have gone through and updated each of your animations below and will be posting them as a reply here.
i will …
Does the template card support using the HA color variables?
Can I, for example use the following code?
It doesn’t seem to work for me, but instead just shows the icon as black, but if I replace the variable with just a simple color like: “red” it works.
icon_color: >-
{% if is_state('switch.media_room_switch','on') %}
var(--state-light-active-color)
{% else %}
var(--state-light-inactive-color)
{% endif%}
No. You cant use CSS in templates unless you use card mod.
You could achieve the same thing in card mod like this:
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
icon_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('switch.media_room_switch','on') %}
background: rgba(var(--state-light-active-color),0.2) !important;
{% else %}
background: rgba(var(--state-light-inactive-color),0.2) !important;
{% endif %}
}
.: |
ha-state-icon {
{% if is_state('switch.media_room_switch','on') %}
color: var(--state-light-active-color) !important;
{% else %}
color: var(--state-light-inactive-color) !important;
{% endif %}
}
1 Like
malosaa
November 11, 2023, 11:11am
8744
First of all my intention was to provide assistance and share knowledge, making it more accessible for others, not getting criticized!
Everyone’s got their own way of doing things, and that’s what makes coding cool. I’m just here to help out and share what I know. Let’s keep it positive and learn from each other. Cheers to coding together!"
No criticism from me whatsoever. In fact i was saying that he should employ what you suggested as its just an easier way to accomplish what he wanted to accomplish.
I think you may have misunderstood my tone. I am always positive and just trying to help (see the guide in my profile for evidence of this
3 Likes
Created a dashboard on the config of @ArenaCloser . Thanks
5 Likes
Looks good! Now I have to change mine again to incorporate some of your ideas
Energy Cards - Home Assistant these are the card I used for the graphs
1 Like
Tomadoggy
November 11, 2023, 4:57pm
8749
Help applying drop shadow and border to template chip
Loving the project and all the great ideas in this thread! I have been trying to get my template chips cards to match the look of other elements, but so far am unable to get the drop shadow and border to apply. I can successfully apply a background but that is it. Example below of current state that is not working:
type: custom:mushroom-chips-card
chips:
- type: template
content: >-
{% if
is_state('binary_sensor.john_office_door_sensor_window_door_is_open',
'off') %}
John Office Door is Closed
{% else %}
John Office Door is OPEN!
{% endif %}
icon: >-
{% if
is_state('binary_sensor.john_office_door_sensor_window_door_is_open',
'off') %}
mdi:door-closed
{% else %}
mdi:door-open
{% endif %}
icon_color: >-
{% if
is_state('binary_sensor.john_office_door_sensor_window_door_is_open',
'off') %}
green
{% else %}
red
{% endif %}
entity: binary_sensor.john_office_door_sensor_window_door_is_open
tap_action:
action: more-info
card_mod: null
style: |
ha-card {
--chip-background: #002f7a;
--chip-border: 2.5px outset LightSlateGrey;
--chip-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.66) !important;
}
Thanks in advance
Mngsps
November 11, 2023, 7:01pm
8750
dimitri.landerloos:
try like this instead:
Works! Thanks! Also didn’t know the config.entity
1 Like
Mngsps
November 11, 2023, 7:27pm
8751
dimitri.landerloos:
try like this instead:
One more question: Is it possible to have multi-line / line break for primary information?
Like this?
type: custom:mushroom-template-card
primary: >-
Really Really Really Really Really Really Really Really Really Long text
example.
secondary: How are you?
icon: mdi:home
multiline_secondary: true
card_mod:
style:
mushroom-state-info$: |
.primary {
white-space: normal !important;
}
You can imitate it with css pseudo elements too.
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
multiline_secondary: true
card_mod:
style:
mushroom-state-info$: |
.primary {
display: flex;
flex-direction: column !important;
}
.primary:after {
content: 'Test';
}
it is great dashboard, but your explanations on GitHub must be on grid view because we can’t depend on Raw entities only because shows us many faults and mistakes unfortunately.
You’ll have to be more specific on which errors you get. But maybe it’s best if you open an issue on the github, so we can solve it there.
Hey guys,
maybe even change the location of the light? maybe no words just icons? help
cards:
- type: custom:mushroom-template-card
primary: Ceiling Fan
secondary: ''
icon: mdi:ceiling-fan
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111100100000'
repeat_times: 3
wait_time: 0
icon: mdi:fan
icon_color: white
content: 'Off'
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111111000000'
repeat_times: 3
wait_time: 0
icon: mdi:fan
icon_color: white
content: Level 1
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111110011000'
repeat_times: 3
wait_time: 0
icon: mdi:fan
icon_color: white
content: Level 2
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111101000000'
repeat_times: 3
wait_time: 0
icon: mdi:fan
icon_color: white
content: Level 3
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111101010000'
repeat_times: 3
wait_time: 0
icon: mdi:fan
icon_color: white
content: Level 4
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111110010100'
repeat_times: 3
wait_time: 0
icon: mdi:fan
icon_color: white
content: Level 5
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111110000000'
repeat_times: 3
wait_time: 0
icon: mdi:fan
icon_color: white
content: Level 6
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111110100000'
repeat_times: 3
wait_time: 0
icon: mdi:lightbulb-on
icon_color: white
content: Toggle Light
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
alignment: justify
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(2)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(3)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(4)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(5)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(6)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(7)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
.: |
ha-card {
padding: 0px 10px 10px 10px
}
Mngsps
November 12, 2023, 7:48am
8756
dimitri.landerloos:
Like this?
Yes, but in mushroom cover card
You could take some inspiration from this maybe?
Code
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
}
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
icon: mdi:fan
tap_action:
action: call-service
service: script.fan_bedroom_on_off
target: {}
secondary_info: none
entity: input_number.bedroom_fan_speed
primary: Fan
picture: ''
secondary: |-
{% if states('timer.bedroom_fan_timer') == 'idle' %}
Off
{% else %}
Timer:
{% set timer = state_attr('timer.bedroom_fan_timer', 'finishes_at') | as_datetime %}
{% set full = (timer - now()).total_seconds() | timestamp_custom('%-Hh %-Mm %-Ss', false) %}
{% set h = full.split('h')[0] | int %}
{% set m = full.split('h')[1].split('m')[0] | int %}
{%- if h == 0 -%}
{%- if m == 0 -%}
{{ full.split('m')[1] }}
{%- else -%}
{{ full.split('h')[1] }}
{%- endif -%}
{%- else -%}
{{full.split('m')[0]}}m
{%- endif -%}
{% endif %}
card_mod:
style: |
ha-card {
width: 180px !important;
--icon-symbol-size: 0.65em;
background: transparent !important;
}
ha-state-icon {
--fan-speed: {{ state_attr(config.entity,'max') | int / states(config.entity) | int * 0.5}}s;
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
animation: spin var(--fan-speed) linear infinite;
{% else %}
{% endif %}
}
@keyframes spin {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
mushroom-shape-icon {
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
{%- if states('input_boolean.bedroom_fan_comfort_toggle') == 'on' -%}
--icon-color: rgb(var(--rgb-green)) !important;
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{%- else -%}
--icon-color: rgb(var(--rgb-blue)) !important;
--shape-color: rgba(var(--rgb-blue), 0.2) !important;
{%- endif -%}
{% else %}
--icon-color: rgb(var(--rgb-disabled)) !important;
--shape-color: rgba(var(--rgb-disabled), 0.2) !important;
{% endif %}
}
{% if states('input_select.bedroom_fan_direction') == 'None'
%}
{% else %}
mushroom-shape-icon:after {
content: "{% if states('input_select.bedroom_fan_direction') == 'Horizontal' %} swap_horiz {% elif states('input_select.bedroom_fan_direction') == 'Vertical' %} swap_vert {% elif states('input_select.bedroom_fan_direction') == 'Horizontal + Vertical' %} open_with {% elif states('input_select.bedroom_fan_direction') == 'None' %} {% else %} bug_report {% endif %} ";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
{% if states('input_select.bedroom_fan_direction') == 'Horizontal' %}
background: rgb(var(--rgb-blue)) !important;
{% elif states('input_select.bedroom_fan_direction') == 'Vertical' %}
background: rgb(var(--rgb-amber)) !important;
{% elif states('input_select.bedroom_fan_direction') == 'Horizontal + Vertical' %}
background: rgb(var(--rgb-green)) !important;
{% else %}
background: rgb(var(--rgb-disabled)) !important;
{% endif %}
color: var(--card-primary-text-color);
font-weight: bolder;
font-family: 'Material Icons';
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 12px;
}
{% endif %}
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:minus
tap_action:
action: call-service
service: script.fan_bedroom_speed_down
target: {}
hold_action:
action: none
card_mod:
style: |
ha-card {
position: absolute;
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
background: rgba(var(--rgb-red), 0.3) !important;
{% else %}
background: transparent !important;
pointer-events: none;
{% endif %}
border: none !important;
box-shadow: none !important;
border-radius: 10px !important;
width: 50px !important;
top: 22px;
height: 25px !important;
right: 172px;
z-index: 1 !important;
--chip-icon-size: 21px;
}
- type: template
content: >-
{% if states('input_boolean.bedroom_fan_toggle') == 'on'
%}
{{states('input_number.bedroom_fan_speed')}}
{% else %}
0
{% endif %}
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
position: absolute;
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
background: rgba(var(--rgb-primary-text-color), 0.05) !important;
{% else %}
background: transparent !important;
--primary-text-color: transparent !important;
pointer-events: none;
{% endif %}
border: none !important;
border-radius: 12px !important;
width: 187px !important;
height: 44px !important;
box-shadow: none !important ;
right: 41px;
top: 12px;
z-index: 0;
}
- type: action
double_tap_action:
action: none
icon: mdi:plus
tap_action:
action: call-service
service: script.fan_bedroom_speed_up
target: {}
hold_action:
action: none
card_mod:
style: |
ha-card {
position: absolute;
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
background: rgba(var(--rgb-green), 0.3) !important;
{% else %}
background: transparent !important;
pointer-events: none;
{% endif %}
border: none !important;
box-shadow: none !important;
border-radius: 10px !important;
width: 50px !important;
top: 22px;
height: 25px !important;
right: 48px;
--chip-icon-size: 21px;
z-index: 1 !important;
}
- type: template
entity: input_boolean.bedroom_fan_dropdown
icon: >-
{% if states('input_boolean.bedroom_fan_dropdown') == 'on'
%}
mdi:chevron-up
{% else %}
mdi:chevron-down
{% endif %}
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
box-shadow: none !important;
top: 16px;
--chip-icon-size: 23px;
}
alignment: justify
card_mod:
style:
mushroom-action-chip:nth-child(1)$: |
ha-state-icon {
position: absolute;
left: 14px !important;
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
{% else %}
--color: transparent;
{% endif %}
}
mushroom-template-chip:nth-child(2)$: |
span {
position: absolute;
left: 83px !important;
--chip-font-size: 14px;
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
{% else %}
--text-color: transparent;
{% endif %}
}
mushroom-action-chip:nth-child(3)$: |
ha-state-icon {
position: absolute;
left: 14px !important;
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
{% else %}
--color: transparent;
{% endif %}
}
.: |
ha-card {
top: 0px;
right: 11px;
height: 20px;
background: transparent !important;
}
- type: conditional
conditions:
- entity: input_boolean.bedroom_fan_dropdown
state: 'on'
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: transparent;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:swap-horizontal
content: Horizontal
entity: script.fan_bedroom_horizontal
icon_color: |-
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
blue
{% else %}
{% endif %}
card_mod:
style: |
ha-card {
justify-content: center;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 0.5s;
border-radius: 10px !important;
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
{%- if states('input_boolean.bedroom_fan_horizontal_toggle') == 'on' -%}
background: rgba(var(--rgb-blue), 0.12) !important;
{%- else -%}
background: rgba(var(--rgb-disabled), 0.12) !important;
{%- endif -%}
{% else %}
background: rgba(var(--rgb-disabled), 0.12) !important;
{% endif %}
}
ha-card:hover {
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
background: rgba(var(--rgb-blue), 0.2) !important;
{% else %}
{% endif %}
}
.content {
flex-direction: column !important;
}
- type: template
icon: mdi:swap-vertical
content: Vertical
entity: script.fan_bedroom_vertical
icon_color: |-
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
amber
{% else %}
{% endif %}
card_mod:
style: |
ha-card {
justify-content: center;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 0.5s;
border-radius: 10px !important;
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
{%- if states('input_boolean.bedroom_fan_vertical_toggle') == 'on' -%}
background: rgba(var(--rgb-amber), 0.12) !important;
{%- else -%}
background: rgba(var(--rgb-disabled), 0.12) !important;
{%- endif -%}
{% else %}
background: rgba(var(--rgb-disabled), 0.12) !important;
{% endif %}
}
ha-card:hover {
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
background: rgba(var(--rgb-amber), 0.2) !important;
{% else %}
{% endif %}
}
.content {
flex-direction: column !important;
}
- type: template
icon: mdi:forest
content: Nature Mode
entity: script.fan_bedroom_comfort
icon_color: |-
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
green
{% else %}
{% endif %}
card_mod:
style: |
ha-card {
justify-content: center;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 0.5s;
border-radius: 10px !important;
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
{%- if states('input_boolean.bedroom_fan_comfort_toggle') == 'on' -%}
background: rgba(var(--rgb-green), 0.12) !important;
{%- else -%}
background: rgba(var(--rgb-disabled), 0.12) !important;
{%- endif -%}
{% else %}
background: rgba(var(--rgb-disabled), 0.12) !important;
{% endif %}
}
ha-card:hover {
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
background: rgba(var(--rgb-green), 0.2) !important;
{% else %}
{% endif %}
}
.content {
flex-direction: column !important;
}
span {
padding-top: 10px !important;
- type: template
icon: mdi:fan-clock
content: Timer +1h
entity: script.fan_bedroom_timer_add_hour
icon_color: |-
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
purple
{% else %}
{% endif %}
card_mod:
style: |
ha-card {
justify-content: center;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 0.5s;
border-radius: 10px !important;
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
background: rgba(var(--rgb-purple), 0.12) !important;
{% else %}
background: rgba(var(--rgb-disabled), 0.12) !important;
{% endif %}
}
ha-card:hover {
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
background: rgba(var(--rgb-purple), 0.2) !important;
{% else %}
{% endif %}
}
.content {
flex-direction: column !important;
gap: 2px;
}
alignment: justify
card_mod:
style:
.: |
mushroom-template-chip {
width: 100%;
{% if states('input_boolean.bedroom_fan_toggle') == 'on' %}
{% else %}
pointer-events: none !important;
{% endif %}
}
div.chip-container {
justify-content: space-evenly;
flex-wrap: nowrap;
}
ha-card {
margin: 0px 12px 12px;
--chip-spacing: 12px !important;
}
You could also use an input number card with buttons instead and control the fan based on the state of the input number:
Code
type: custom:mushroom-number-card
entity: input_number.bedroom_fan_speed
display_mode: buttons
layout: horizontal
name: Fan
Then just add a spot for the light
8 Likes
Same way as i showed with the template card. But if your name is shorter and you wan to force the line break adjust the width number until it breaks for you.
type: custom:mushroom-cover-card
entity: cover.office_blinds
name: really really really really really really really really long name.
show_buttons_control: true
show_position_control: false
card_mod:
style:
mushroom-state-info$: |
.primary {
white-space: normal !important;
width: 50px;
}
Keep in mind that the width needs to be long enough for the first word to still fit within the box.
You can add overflow: visible !important;to fix this, but just be careful because now the words are escaping their box.
type: custom:mushroom-cover-card
entity: cover.office_blinds
name: Longword really really really really really really really long name.
show_buttons_control: true
show_position_control: false
card_mod:
style:
mushroom-state-info$: |
.primary {
white-space: normal !important;
width: 50px;
overflow: visible !important;
outline: red 1px solid;
}
)
What cards do you use for the solar/energy usage graphs? I can’t seem to find them.
