Yes a styling question

Configuration Frontend
1

I know there’s multiple questions on styling but none seem to solve my problem.

I have card-mod, card-tools, custom-ui installed and cannot get anything that has styling in it to work…
Here’s typically what I’m getting… so what am not seeing here?

Thank you!

- type: vertical-stack
        cards:
          - <<: *cb_spacer_10px
          - type: entities
            style: |
              ha-card {
                background-color: transparent; border: none; box-shadow: none;; color: #639cf9;
              }
            #<<: *card_mod_transparent
            entities:
              - person.john
              - entity: sensor.john_status
              - entity: alarm_control_panel.blink_johns_house
                state_color: true
              - entity: sensor.12hourtime
                name: Time
                icon: mdi:clock
              - entity: sensor.date_format
                name: Date
                icon: mdi:calendar
              - entity: sensor.sonosinfo
                name: Music
              - entity: sensor.sun_left
                name: Sun

style
style738×352 15.9 KB

2

well, your style isn’t working because you have 2 ; in a row in the style.

As for the error you see on screen, that’s whatever addon you’re using. It’s not built to understand custom stuff, so it’ll always show that red squiggly.

1 Like
3

probably not going to solve it, but correct syntax is:

          - type: entities
            card_mod: ## <-- add this
              style: |
                ha-card {
                  background-color: transparent; 
                  border: none; 
                  box-shadow: none;
                  color: #639cf9;
                }

writing it like a above will help you spot typos like Petro said.

4

Your style SHOULD work.
And it DOES work in my setup:

  type: vertical-stack
  cards:
    - type: entities
      style: |
        ha-card {
          background-color: red; border: 3px solid black; box-shadow: none; ; color: cyan;
        }
      entities:
        - entity: sun.sun

image

I only replaced a color for “background” & specified a “border” with line thickness & style (to make it visible that styles are applied).

Regarding a message in your Editor - you may not worry about it as long as it lets you to save the file.
Starting from card-mod 3.0, using the “card_mod” keyword is advised; moreover, in some cases (styling elements inside Picture elements card) you MUST use this keyword.
Also, the native HA Editor does not allow to save a file if “card_mod” keyword is missing; if using YAML-mode - there is no such a problem.
So, it is recommended to use the “card_mod” keyword as a “good practice”.

I strongly suggest you to ask any card-mod questions in the already existing dedicated card-mod thread.

I do not think that it matters since the whole stuff is a string.

1 Like
5

if anything, we should advise our fellow users to use the correct syntax, and not leave obvious mistakes, even if they dont explicitly break things.

in this case:

  • always use the card_mod: keyword
  • never use incorrect ghost (left over) delimiters ;
  • always delimit statements/templates, and delimit with a single ;

correct syntax matters.

2 Likes
6

Yes I found that after I posted this…LOL

Thank you!

7

The take-away from the convo is: Don’t always trust the red squigglies, especially with custom cards.

1 Like
8

That’s what I was told earlier… not indicitive of an issue…

9

Ok finally got something to work :slight_smile: Thank you!

card_mod:
    style: |
       ha-card {
           background-color: gray; border: none; box-shadow: none; color: #000;
         }