Lovelace Card Mod w Conditional Color Formatting

Configuration Frontend
8

You are not separating the box divisions

image

for example…

card_mod:
  style:
    .box div:nth-child(3):
      div:nth-child(1):
        ha-icon-button ha-state-icon:
          $:
            ha-icon:
              $: |
                ha-svg-icon {
                  color: green;
                }
      div:nth-child(2):
        ha-icon-button ha-state-icon:
          $:
            ha-icon:
              $: |
                ha-svg-icon {
                  color: red;
                }
      div:nth-child(3):
        ha-icon-button ha-state-icon:
          $:
            ha-icon:
              $: |
                ha-svg-icon {
                  color: yellow;
                }      
      
      div:nth-child(4):
        ha-icon-button ha-state-icon:
          $:
            ha-icon:
              $: |
                ha-svg-icon {
                  color: blue;
                }

Check out this specific post in @Ildar_Gabdullin guide…

2 Likes