🔹 Card-mod - Add css styles to any lovelace card

Mariusthvdb · June 18, 2021, 2:51pm

this might be a long shot, but since the custom-card with the ‘issue’ I have with it seems abandoned, please let me ask here:

can we style the position of the title of these shutter cards, which now all seem randomly aligned above the shutter image. Card option is set to 'top. but other than that, the card doesnt offer styling options:

If at all possible, Id like to either outline all cards Left, or, if not possible center them all. Right now, I dont understand what is’s doing…

thanks for having a look

maskazz · June 18, 2021, 3:20pm

Hi. I’m working on a theme in a “Neuromorphic style”
I’m able to customize elements but only in a cards, now i wanna move config to theme file and i’m searching for a help, because every try ends as a failure. Below images as it look in cards configs, and link to github with a working code.

https://github.com/maskaz/HA-Neuromorphic

Thanks and regards

Final-Hawk · June 20, 2021, 2:36am

Awesome! Is it possible change the icon for the badges at the top of dashboards using this? I cannot find anything.

arganto · June 20, 2021, 8:14am

Added some further investigations:

Why is

type: button
card_mod:
  style: |
    :host {
      --card-mod-icon: mdi:bed
    }

or

type: horizontal-stack
cards:
  - type: button
    card_mod:
        style: |
          :host {
            --card-mod-icon: mdi:bed;
          }

only working sometimes, after roundtrips, reload of whatever and only within edit-more/edit popup?

Only a change in the editor (e.g. add remove indent, close/open editor …) takes the changes into account and changes the icon. Is this only possible this way or a known bug/limitation?

parautenbach · June 20, 2021, 2:26pm

I can’t tell you that but you can change the icon’s colour. You might be able to iterate on that but I think you’ll be better off applying your icons using a template (binary) sensor instead. That way, the icon will change anywhere you use the sensor and you don’t need to duplicate the work.

Ildar_Gabdullin · June 20, 2021, 10:07pm

Hi Marius, have a look, played with CSS a little:

type: custom:shutter-card
card_mod:
  style: |
    ha-card {
      --ha-card-background: rgb(168,240,255);
      --ha-card-header-color: black;
      --ha-card-header-font-size: 16px;
      --ha-card-border-radius: 8px;
    }
    .card-header {
      background-color: rgb(190,212,216);
      border-radius: 8px 8px 0px 0px;
      text-align: right;
    }
    .sc-shutter .sc-shutter-top {
      display: flex;
      flex-direction: row;
    }
    .sc-shutter .sc-shutter-top .sc-shutter-label {
      flex: 1 1 75%;
      text-align: left;
    }
    .sc-shutter .sc-shutter-top .sc-shutter-position {
      text-align: center;
    }
title: My shutters
entities:
  - entity: cover.left_living_shutter
    name: Left shutter
    buttons_position: left
    title_position: top
  - entity: cover.bedroom_shutter
    name: Right shutter
    buttons_position: left
    title_position: top

Another example:

type: custom:stack-in-card
mode: horizontal
keep:
  background: false
  box_shadow: false
  margin: false
  outer_padding: false
  border_radius: false
cards:
  - type: custom:shutter-card
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
        }
        .card-header {
          text-align: center;
        }
        .sc-shutter .sc-shutter-top {
          display: flex;
          flex-direction: row;
        }
        .sc-shutter .sc-shutter-top .sc-shutter-label {
          flex: 1 1 75%;
          text-align: center;
          font-size: var(--mdc-typography-body1-font-size);
        }
        .sc-shutter .sc-shutter-top .sc-shutter-position {
          text-align: center;
        }
    title: Bedroom
    entities:
      - entity: cover.left_living_shutter
        name: Left
        buttons_position: left
        title_position: top
      - entity: cover.bedroom_shutter
        name: Right
        buttons_position: left
        title_position: top
  - type: custom:shutter-card
    title: Kitchen
    entities:
      - entity: cover.left_living_shutter
        name: Left
        buttons_position: left
        title_position: top
      - entity: cover.bedroom_shutter
        name: Right
        buttons_position: left
        title_position: top

It is strange , but styling the 1st card affects on the 2nd card too…

Mariusthvdb · June 21, 2021, 9:19am

thank you Ildar.
though some positioning is possible like that, it seem impossible to have the name of the individual screen align horizontally with the icons of the up/down…

Ive also tried a little hack, by using name: 'Name ' so the spaces would cause some horizontal shift, but apparently the spaces are trimmed ;-(

and about the first mod being applied to all cards, I hadn’t noticed in y card setup, because I have a header anchor like on the first:

    <<: &header
      card_mod:
        style: |
            .card-header {
              background-color: var(--background-color-off);
              color: var(--text-color-off);
              font-weight: bold;
              margin: 0px 0px 8px 0px;
            }

and use it on all others with:

  - type: custom:shutter-card
    title: Screens
    <<: *header

so it applied already I now notice the effect though too, and I believe it is what Thomas wrote before, but which is no longer in the documentation somehow…

the stacks are nice! didnt think of that, very clever indeed

Ildar_Gabdullin · June 21, 2021, 9:25am

Imho, left & right shutters are better to place horizontally… More intuitive.

Mariusthvdb · June 21, 2021, 9:32am

quite. This:

  - type: custom:stack-in-card
    mode: horizontal
    title: Screens
    <<: *header
#    keep:
#      background: false
#      box_shadow: false
#      margin: false
#      outer_padding: false
#      border_radius: false
    cards:
      - type: custom:shutter-card
        card_mod:
        style: |
          ha-card {
            box-shadow: none;
          }
        entities:
          - entity: cover.screen_keuken
            name: Keuken
      - type: custom:shutter-card
        entities:
          - entity: cover.raamverduistering_stookhok
            name: Stookhok

does it also, no need for the keep object in the stack-in-card?

on mobile this is a really cut-off experienced though,

and when tilting to landscape mode, things get even worse…

Ildar_Gabdullin · June 21, 2021, 9:45am

Default values are false.

iPhone 5S:

portrait - cut right side
landscape - OK

Try using state-switch dependingly on screen size.

DavidFW1960 · June 21, 2021, 9:55am

+1 to that suggestion. Works a treat.

Mariusthvdb · June 21, 2021, 9:59am

ha, glad you like the state-switch card, so new to it and already suggesting it to me

not really sure what you suggest here? if in portrait mode, use the stack-in-card horizontal mode, if in landscape, use single card config? (I have regular 2 columns in landscape)

or

if desktop, use stack-in-card, if mobile, use not stacked cards maybe even better, given the fact the cards are cut-off right sided on mobile no matter the view

trying this:

  - type: custom:state-switch
    entity: deviceID
    states:
      'bredacted devices Safari9':
        <<: &desktop-view
          type: custom:stack-in-card
          mode: horizontal
          title: Screens
          <<: *header
          keep:
            background: false
            box_shadow: false
            margin: false
            outer_padding: false
            border_radius: false
          cards:
            - type: custom:shutter-card
              card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                }
              entities:
                - entity: cover.screen_keuken
                  name: Keuken
            - type: custom:shutter-card
              entities:
                - entity: cover.raamverduistering_stookhok
                  name: Stookhok
      '6redacted devices chrome0a':
        <<: *desktop-view
      default: # for all other device-id's including mobile
        type: custom:shutter-card
        title: Screens
        <<: *header
        entities:
          - entity: cover.screen_keuken
            name: Keuken
          - entity: cover.raamverduistering_stookhok
            name: Stookhok

I cant get it to work, mobile still shows the horizontal stack… (will move this to state-card if the issue remains)

DavidFW1960 · June 21, 2021, 11:54am

You can set it for screen pixels rather than user agent. I can show an example tomorrow if you like… lidar helped me with a couple of cards a while ago ane I ended up using both… one for iPad in Landscape mode and one for my PC… works really well.

Ildar_Gabdullin · June 21, 2021, 12:40pm

Marius, David - managed to display the shutters on iPhone 5S for portrait & landscape orientations - check here: 🔹 state-switch - conditional card on steroids - #92 by Ildar_Gabdullin

arganto · June 22, 2021, 4:50pm

Here is my setup

style: |
  .sc-shutter-label {
    font-size: 14px;
    padding-left: 20px;
  }
  .card-header {
    padding-bottom: 0px;
  }
  .sc-shutter-middle {
    margin-left:auto !important;
    margin-right:auto !important;
    padding-bottom: 10px;
    padding-top: 20px
  }
  .sc-shutter:first-child .sc-shutter-middle {
    padding-top: 0px
  }

Ildar_Gabdullin · June 22, 2021, 8:46pm

There is something weird with this shutter card - it causes glitches.

Create 1 new view.
Add a shutter-card with some styles for "ha-card".
Add one more shutter-card w/o style.
The 2nd card will have same style - which is WRONG.

image431×863 22.3 KB

  - title: test 2
    path: test-2
    badges: []
    cards:
      - type: custom:shutter-card
        title: no style
        entities:
          - entity: cover.left_living_shutter
            name: Left shutter
            buttons_position: left
            title_position: top
          - entity: cover.bedroom_shutter
            name: Right shutter
            buttons_position: left
            title_position: top
      - type: custom:shutter-card
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgb(168,240,255);
              --ha-card-header-color: black;
              --ha-card-header-font-size: 16px;
              --ha-card-border-radius: 8px;
            }
        title: My shutters (+style)
        entities:
          - entity: cover.left_living_shutter
            name: Left shutter
            buttons_position: left
            title_position: top
          - entity: cover.bedroom_shutter
            name: Right shutter
            buttons_position: left
            title_position: top

Move the 2nd card to another view.
The 2nd card will be displayed without style - which is RIGHT.

The same glitch was mentioned earlier - it was about 2 cards inside "vertical-stack":

VPC · June 23, 2021, 3:01pm

I’m looking for help with sizing and placement of icons. I have a panel in the garage with this

I’m looking to get the garage door icon centered vertically and the up/down buttons as well. Ideally the up/down buttons could come further in from the right hand edge as well. Any advice?

Bonus question… I have another card just the same for “open” which is red. Is there any way to have just one card that changes colour based on the state?

Here is the code

type: custom:auto-entities
card:
  type: entities
  state_color: true
  card_mod:
    style: |
      ha-card {
        --ha-card-background: green;
        color: white;
        font-family: DB Sans Cond;
        line-height: 2.2;
        --card-mod-icon-color: white;
      }
      :host {
        --mdc-icon-size: 4vw;
        font-size: 4vw;   
          }
filter:
  include:
    - entity_id: cover.garage_car_door_state
      state: closed
  exclude: []
sort:
  method: friendly_name
show_empty: false

arganto · June 24, 2021, 12:28pm

Jinja2 is possible within card-mod.

joseecm · June 24, 2021, 2:29pm

Hi!.

I am just starting to learn how to add CSS to Lovelace cards and I am sure my question is very silly but when I see a code I like to understand all of it.
I have seen in the codes that are used some special characters, for example:

| 
<<:
.:
[[  ]]
$:

Please could someone explain to me what they mean?

Thanks.

Ildar_Gabdullin · June 24, 2021, 2:48pm

|
yaml multiline (google it)

<<:
yaml anchors (google it)

.:, $:
used in card-mod for navigating

[[ ]]
used to define templates in cards like custom:button-card