Syntax question regarding Card-mod

Configuration Frontend
1

I have a probably pretty basic syntax question regarding the usage of Card-mod to add CSS style to your cards. (I am a layman in programming)

How do I combine these two?

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --icon-symbol-size: 25px;
        --icon-size: 30px;
      }

card_mod:
  style: |
    ha-card {
      border: none
    }

If I directly add the multieline “ha-card border: none” code into the first one it won’t work because that needs a pipe symbol after style. I guess one solution is to write “ha-card border: none” in a single line but I don’t know the syntax for it.

Would greatly appreciate help with this matter.

2

I figured out a solution now. It turns out you can achieve the same result simply by writing it like this:

card_mod:
  style: |
    ha-card {
      border: none;
      --icon-symbol-size: 25px;
      --icon-size: 30px;
    }
3

The method you were seeking would look like this:

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --icon-symbol-size: 25px;
        --icon-size: 30px;
          }
    .: |
      ha-card {
        border: none;
       }

The code for the solution is missing a ;

image
image514×280 10.9 KB

like this :arrow_down:

card_mod:
  style: |
    ha-card {
      border: none;
      --icon-symbol-size: 25px;
      --icon-size: 30px;
        }
4

Yes, thanks for pointing it out. I have edited the solution now. I had other lines of style that I had erased and must have accidentally erased the semicolon.