Hi, complete noobie to designing a dashboard but i am using mushroom cards, and i have two different stylings i want via card mod, one to have the text warp and one to change the colour of the icon based on the state, but the places i found the two pieces of code laid out the style differently and no matter what i try i cant get both working at the same time if anyone can lend a hand thxx
#Combining two css elements
1 messages · Page 1 of 1 (latest)
style:
mushroom-state-info:
$: |
.primary {
white-space: normal !important;
}```
ha-state-icon {
color: {% if is_state_attr('sensor.p1s_01p00c472301156_ams_1_tray_2', 'color', '#00000000') %} rgb(255, 255, 255); {% else %} {{state_attr('sensor.p1s_01p00c472301156_ams_1_tray_2', 'color') }}; {% endif %}
}```
Hopefully this helps you out. I took one of the cards that I had set up for learning how to work with the two syntaxes and added your bits to it. This is what I came up with.
type: custom:mushroom-light-card
entity: light.bathroom_lights
icon: mdi:lightbulb
layout: vertical
use_light_color: true
show_brightness_control: false
tap_action:
action: toggle
icon_color: primary
card_mod:
style:
.: |
ha-card {
background-color: #fffff;
font-family: REM, sans-serif;
font-weight: 100;
color: #686D76;
font-size: 25px
}
ha-state-icon {
--icon-color: {% if is_state('input_boolean.tester', 'on') %}
blue; {% else %} red; {% endif %};
--icon-color-disabled: purple;
}
mushroom-state-info$: |
.primary {
white-space: normal !important;
}
.container {
--card-primary-font-size: 22px;
--card-secondary-font-size: 12px;
} ```
There's extra stuff in here that you might not need but I left it in place for reference. Also, note the use of --icon-color and --icon-color-disabled. Disabled is the color when off; the other while on. Using only color will make the icon stay that color regardless if on or off. (Just FYI.)