šŸ”¹ Card-mod - Add css styles to any lovelace card

I almost do not use markdown card in my setup.
Only as a kind of caption for test cards like this:


It is very sad that some stock functionality is buggy.

1 Like

Hi, Thomas, may be I did not express my thought clearly - now with HA 2021.6.5 errors are occurred when using "style" with the ":host":

type: entities
entities:
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
    style: |
      :host {
        color: red;
      }

The code works but the HA editor does not allow to save changes.
Could be a bug in HA, may be?

Found one more issue with "card-mod" - be careful.
Probably, it is a bug (or a feature) of HA frontend editor.

  1. Create an Entities card with card-mod:
type: entities
entities:
  - type: custom:multiple-entity-row
    card_mod:
      style: |
        :host {
          color: red;
        }
    entity: sun.sun
    entities:
      - entity: sun.sun
      - entity: sun.sun
  - type: custom:multiple-entity-row
    card_mod:
      style: |
        :host {
          color: red;
        }
    entity: sun.sun
    entities:
      - entity: sun.sun
      - entity: sun.sun

Looks fine in the HA frontend editor:

  1. Save the card.

  2. Open the card in the HA frontend editor.

  3. Remove some row using UI editor - see that red color style is not working:

  4. The saved card is w/o "card-mod" - the HA frontend editor removed the "card-mod" code:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sun.sun
    entities:
      - entity: sun.sun
      - entity: sun.sun

This happens not with "multiple-entity-row" only - it happens with simple entity rows too.
So, do not edit the card using UI editor.

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

1 Like

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

2 Likes

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

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?

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.

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:
image

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ā€¦

1 Like

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 :wink: 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

Imho, left & right shutters are better to place horizontallyā€¦ More intuitive.

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ā€¦

Default values are false.

iPhone 5S:

  • portrait - cut right side
  • landscape - OK

Try using state-switch dependingly on screen size.

+1 to that suggestion. Works a treat.

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

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)

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.

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

1 Like

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
  }

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

  1. Create 1 new view.
  2. Add a shutter-card with some styles for "ha-card".
  3. Add one more shutter-card w/o style.
  4. The 2nd card will have same style - which is WRONG.
  - 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
  1. Move the 2nd card to another view.
  2. The 2nd card will be displayed without style - which is RIGHT.
    image

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

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