LiQuid_cOOled, thank you, but somehting is not working on my side.
Is not a larger card, it’s just a horizontal stack. But even alone is still not displayed rotated.
Card mod is installed, mushroom as well… do you have any other sugestions, what to check?
If its a horizontal stack post the full code please. Its likely due to the fact that horizontal and vertical stack dont have a ha-card element.
Is there a better way for me to utilize the current color of an RGB bulb to declare the color in the ping animation?
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: black !important;
{% set light_state = states(config.entity) %}
{% if light_state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba({{state_attr(config.entity,'rgb_color') | join(', ')}}, 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
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.
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: All Lights
card_mod:
style: |
ha-card {
border: white 1px dashed !important;
{% if is_state('input_number.tabs_lights') == '1.0' %}
background: #00ff00;
{% else %}
background: #ff00ff;
{% endif %}
}
title_tap_action:
action: call-service
service: input_number.set_value
target:
entity_id: input_number.tabs_lights
data:
value: 1
Hello, how can I make the entity card not in the “off” state
the color is displayed white, but another rgb(x,x,x) color?
So that when they are off, they are only visible in the background.
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
align-self: flex-start !important;
}
.: |
mwc-tab-bar {
position: sticky;
position: -webkit-sticky;
bottom: 4px;
display: block;
/* /* z-index: 999; */ */
}
mwc-tab {
background: var(--ha-card-background, var(--card-background-color, white) );
border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
border-width: 1px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-style: solid;
overflow: hidden;
}
section article > * {
--ha-card-border-radius: 12px 12px 0px 0px;
}
.: |
tabbed-card {
display: flex;
flex-direction: column-reverse;
card:
type: custom:tabbed-card
styles:
'--mdc-theme-primary': rgb(255,152,0)
'--mdc-theme-secondary': grey
'--mdc-tab-text-label-color-default': white
'--mdc-typography-button-font-size': 16px
'--mdc-tab-stacked-height': 30px
'--mdc-tab-height': 48px
'--mdc-tab-horizontal-padding': 0px
'--mdc-tab-color-default': grey
'--mdc-icon-size': 14px
tabs:
- attributes:
icon: mdi:sofa
isFadingIndicator: true
minWidth: false
isMinWidthIndicator: false
stacked: false
card:
type: grid
square: false
columns: 1
cards:
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em;
--chip-border-radius: 10%;
--chip-border-color: transparent;
}
alignment: center
chips:
- type: template
double_tap_action:
action: more-info
content: '{{ states(entity) }}% '
entity: sensor.wand_wz_temperature
icon: mdi:thermometer-lines
icon_color: orange
tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-state-icon {
--icon-symbol-size: 140px;
}
- type: template
double_tap_action:
action: more-info
content: '{{ states(entity) }}% '
entity: sensor.wand_wz_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: more-info
hold_action:
action: more-info
- type: template
double_tap_action:
action: more-info
content: '{{ states(entity) }}°C '
entity: input_number.heizung_wz_eco
icon: mdi:sprout
icon_color: green
tap_action:
action: more-info
hold_action:
action: more-info
- type: template
double_tap_action:
action: more-info
content: '{{ states(entity) }}°C '
entity: input_number.heizung_wz_comfort
icon: mdi:home-account
icon_color: yellow
tap_action:
action: more-info
hold_action:
action: more-info
- type: template
double_tap_action:
action: more-info
content: '{{ states(entity) }}°C '
entity: input_number.heizung_wz_nacht
icon: mdi:weather-night
icon_color: blue
tap_action:
action: more-info
hold_action:
action: more-info
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em;
--chip-border-radius: 10%;
--chip-border-color: transparent;
}
alignment: center
chips:
- type: entity
entity: person.tom
icon_color: light-green
icon: mdi:home-automation
content_info: none
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
card_mod:
style: |
ha-card {
{% if not is_state('person.tom', 'home') %}
display: none !important;
{% endif %}
}
- type: entity
entity: person.sandra
icon_color: light-green
icon: mdi:home-automation
content_info: none
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
card_mod:
style: |
ha-card {
{% if not is_state('person.sandra', 'home') %}
display: none !important;
{% endif %}
}
- type: entity
entity: switch.heizung_wz1_switch
icon_color: orange
content_info: none
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
- type: entity
entity: switch.heizung_wz1_switch_2
icon_color: orange
content_info: none
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
- type: entity
entity: switch.heizung_wz2_switch
icon_color: orange
content_info: none
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
- type: entity
entity: switch.heizung_wz2_switch_2
icon_color: orange
content_info: none
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
- type: entity
entity: input_boolean.heizung_wz_eco
content_info: none
icon_color: green
tap_action:
action: more-info
hold_action:
action: more-info
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
card_mod:
style: |
ha-card {
{% if not is_state('input_boolean.heizung_wz_eco', 'on') %}
display: none !important;
{% endif %}
}
- type: entity
entity: input_boolean.heizung_wz_comfort
content_info: none
icon_color: yellow
use_entity_picture: false
style: |
ha-card {
border: none !important;
--chip-box-shadow: none;
--chip-background: none;
card_mod:
style: |
ha-card {
{% if not is_state('input_boolean.heizung_wz_comfort', 'on') %}
display: none !important;
{% endif %}
}
- type: template
entity: sensor.heizung_wz_night
icon: mdi:weather-night
icon_color: |-
{% if is_state('sensor.heizung_wz_night', 'True') %}
blue
{% else %}
grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
{% if not is_state('sensor.heizung_wz_night', 'on') %}
display: none !important;
{% endif %}
}
- type: entity
entity: binary_sensor.fenster_wz
content_info: none
icon_color: red
use_entity_picture: false
card_mod:
style: |
ha-card {
{% if not is_state('binary_sensor.fenster_wz', 'on') %}
display: none !important;
{% endif %}
}
Dont think so. if you need it to be the exact color of the light this is the best way.
but yes this is an unfortunate thing about card mod, it doesnt always update the card nicely on entity state update.
The bit that is wrong is not your css. its your template. is_state assumes that you declare what the state should be with the entity it is checking. like this:
{% if is_state('input_number.bedroom_fan_speed', '26.00') %}
background: #00ff00 !important;
{% else %}
background: #ff00ff !important;
{% endif %}
Any reason why you arent just using a template chip?
doesnt this also answer your question already…?
Hello Dimitri,
even I post only the title card alone on a dashboard, nothing else … I still don’t get the text oriented at 90 degres.
Can it be, that the .js files are not corectlly “instaled”?
I did not install them now, they are installed since a few months, for other projects, which were working or still working well, did not notice any malfunctions back then.
type: custom:mushroom-title-card
title: Rollo Küche
subtitle: ''
alignment: center
card_mod:
style: |
ha-card {
rotate: 90deg !important;
margin: 40px;
--title-color: red !important;
--title-font-size: 20px;
}
Try the redownload option for Mushroom and Card Mod
If Mushroom wasn’t installed correctly you would even be able to see the Mushroom card.
You won’t lose anything by updating the JS via the redownload. Just make a full system backup to be safe.
Try moving your
{% else %}
{% endif %}
to the bottom
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: black !important;
{% set light_state = states(config.entity) %}
{% if light_state == 'on' %}
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba({{state_attr(config.entity,'rgb_color') | join(', ')}}, 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
{% else %}
{% endif %}
I have realoaded Mushroom and Cardmod, indeed they were one year old. Incredible how time flies. But the issue is still not solved.
For some reason the styles are not applied to the mushroom title card. Not even the color setting. Is there any other .js file which I need to update?
If I apply the same Style to the default Markdown card, it gets rotated.
type: markdown
content: kueche
card_mod:
style: |
ha-card {
rotate: 90deg !important;
margin: 20px;
--title-color: red !important;
--title-font-size: 10px;
}
Please uninstall Mushroom and reinstall it.
Thanks for trying to help me,
I did remove the mushroom.js file and the resource from the dashboard menu, restarted home assistant, readded the .js file and the resource, restarted again.
I’ts crazy, the code is rotaring everything else except the Mushroom Title Card
That’s so odd. Do you have any themes installed, like Mushroom Themes?
No, only this things are in Themes, and have to do with Pop-ups.
my-theme:
# blurring-background-behind-popup
dialog-backdrop-filter: blur(5px)
dialog-border-radius: 1em;
dialog-box-shadow: 0em 0em 0.5em;
iron-overlay-backdrop-opacity: 1
iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)
mdc-dialog-box-shadow: 0em 0em 0.5em
mdc-shape-medium: 1em
card-mod-theme: my-theme #change with theme name
card-mod-more-info-yaml: |
.: |
ha-dialog {
--vertical-align-dialog: center !important;
}
ha-dialog > div:focus {
outline: none;
}
modes:
light:
warning-highlight-colour: rgb(255, 165, 0)
dark:
warning-highlight-colour: rgb(255, 165, 0)
can you post the test card your using? Tested the theme, seems to not affect it.
Thanks you so much, that worked.
Please find attached the whole Dashboard with the all the test Cards:
- title: Test10
path: test10
badges: []
cards:
- type: custom:mushroom-title-card
title: Rollo Küche
subtitle: ''
alignment: center
card_mod:
style: |
ha-card {
rotate: 90deg !important;
margin: 40px;
--title-color: red !important;
--title-font-size: 20px;
}
- type: custom:mushroom-title-card
title: Küche
alignment: center
card_mod:
style: |
ha-card {
rotate: 90deg !important;
margin: 40px;
--title-color: red !important;
--title-font-size: 20px;
}
- type: custom:mushroom-template-card
primary: Hello, {{user}}
icon: ''
card_mod:
style: |
ha-card {
rotate: 90deg !important;
margin: 40px;
--title-color: red !important;
--title-font-size: 20px;
}
- type: custom:mushroom-climate-card
entity: climate.wohnzimmer
card_mod:
style: |
ha-card {
rotate: 90deg !important;
margin: 40px;
--title-color: red !important;
--title-font-size: 20px;
}
- type: custom:mushroom-light-card
entity: light.flurlichter
card_mod:
style: |
ha-card {
rotate: 90deg !important;
margin: 40px;
--title-color: red !important;
--title-font-size: 20px;
}
If you add this to a new dashboard with no other cards, is the rotation visible?
type: custom:mushroom-title-card
title: Hello, {{ user }} !
card_mod:
style: |
ha-card {
rotate: 10deg !important;
margin-top: 40px;
--title-color: red !important;
--title-font-size: 20px;
}
