#Combining two css elements

1 messages · Page 1 of 1 (latest)

visual owl
#

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

#
          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 %}
            }```
thick cove
#

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.)