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

[Ildar_Gabdullin]

No no no, only when used for some element inside some cards and only when used alone (w/o additional selectors). In other cases it may be omitted and actually should not be used.

[e-raser]

Great examples for using restriction-card in row mode. I need to use it with buttons, where the look gets very strange. I guess this is caused by restriction-card in combination with button-card.

The main issue is: it does not maintain / use the height like the other “normal” button cards do when being used in a grid.

• For testing purposes: the used height: 300px; is not respected at all.
• And even if it would: I can’t absolutely define the height in px, it must be something fluent/automatical like “maximum” or something like that.

Problem screenshot:
left one is restriction-card with button-card, right one is normal button card (mind the gap below the left one):

Full code (as minimal as possible)

type: custom:mod-card
card:
  type: grid
  columns: 1
  square: false
  title: ''
  cards:
    - type: markdown
      title: ''
      content: Infrastruktur
      style:
        .: |
          ha-card {
            background: none;
            border: 0px;
            box-shadow: none;
            #padding: 0 !important;
          }
          ha-markdown {
            font-size: 24px;
            #font-weight: 500;
            #letter-spacing: 3px;
            width: max-content;
            margin: 0 auto;
            margin-top: 0px;
          }
    - type: grid
      columns: 3
      square: true
      title: ''
      cards:
        - type: custom:restriction-card
          row: false
          card:
            type: button
            tap_action:
              action: navigate
              navigation_path: network
            hold_action:
              action: none
            double_tap_action:
              action: none
            name: Netzwerk
            icon: mdi:lan
            show_name: true
            show_state: false
            show_icon: true
            card_mod:
              style:
                .: |
                  ha-card {
                    height: 300px;
                    #border: 1px solid;
                  }
          restrictions:
            confirm: null
            pin:
              code: 9999
              text: 'Gesperrter Bereich. PIN nötig:'
              retry_delay: 0
              max_retries: unlimited
              max_retries_delay: 0
            block:
              text: Zugriff nicht erlaubt.
              exemptions:
                - user: abc
          exemptions:
            - user: xyz
          style: |
            :host {
              --restriction-lock-icon-size: 18px;
              --restriction-regular-lock-color: var(--accent-color);
              --restriction-success-lock-color: green;
              --restriction-lock-margin-left: 28px;
              --restriction-lock-row-margin-top: 30px;
            }
            div#overlay {
              align-items: center;
            }
        - type: button
          tap_action:
            action: navigate
            navigation_path: network
          icon: mdi:lan
          hold_action:
            action: none
          name: Netzwerk
          show_name: true
          show_state: false
          show_icon: true
card_mod:
  style:
    hui-grid-card:
      $: |
        .card-header {
          #text-align: center;
          #margin-top: -10px;
        }
    .: |
      ha-card {
        border: 1px solid grey;
        padding: 5px;
        background: none;
      }

Please note the view is configured to use the grid (layout card), in case that is important (tested also with default/standard, which also gives different look):

Question (@Ildar_Gabdullin): Is there any possibility to get a button-card inside a restriction-card to use the maximum/same height as other elements (normal button cards) in that grid

This really is a mission-critical thing as this should be used all over my lovelace dashboards. Hope there’s a solution to have the restriction-card features while at the same time keeping a nice and “natural”/original design.

[Ildar_Gabdullin]

@e-raser

For testing purposes: the used height: 300px; is not respected at all.

Try using “!important”.

---

                  ha-card {
                    height: 300px;
                    #border: 1px solid;
                  }

Do not use “#” to comment smth inside a string.

[e-raser]

@Ildar_Gabdullin

Try using “!important”.

That worked, thanks. But now to the original question: How…

@e-raser

to use the maximum/same height as other elements (normal button cards) in that grid

Because absolute values (px) don’t work. It will make all look different on different devices/screens. So that is the main problem…

@e-raser

And even if it would: I can’t absolutely define the height in px, it must be something fluent/automatical like “maximum” or something like that.

[Ildar_Gabdullin]

@e-raser

to use the maximum/same height as other elements

In my test case the 1st card (which is inside “restriction”) got the same height as the 2ns card (with “!important”).

[e-raser]

And you used absolute value (like 150px)? That won’t work on other devices/screen sizes. Absolute values are wrong here

E. g.:

• device 1, edit mode: looks good
  
  
• device 1, normal mode: already fails
  
• device 2, normal mode: fails too (buttons too high, no 1/1 ratio anymore)
  
  

You now see what I mean?

[Ildar_Gabdullin]

1. Since you specified “square: true” for the grid - all elements inside the grid are square, including the “restriction-card”. But the button inside he restriction-card is not square. To force it - apply “aspect-ratio: 1/1” for the inserted button.

2. Btw, this whole part will not work:

          style: |
            :host {
              --restriction-lock-icon-size: 18px;

since the card does not have ha-card element. As well as grid-card. Use mod-card then.

[e-raser]

1. Oohhhhhh GREAT! that “aspect-ratio: 1/1” seems to make the trick. I was already aware of this as the custom:button-card implements/offers it as native configuration option. Didn’t know it’s a CSS thing Fabulous. This works, being applied to the button inside the restriction-card:

            card_mod:
              style:
                .: |
                  ha-card {
                    aspect-ratio: 1/1
                  }

Full example

        - type: custom:restriction-card
          row: false
          card:
            type: button
            tap_action:
              action: navigate
              navigation_path: network
            hold_action:
              action: none
            double_tap_action:
              action: none
            name: Netzwerk
            icon: mdi:lan
            show_name: true
            show_state: false
            show_icon: true
            card_mod:
              style:
                .: |
                  ha-card {
                    aspect-ratio: 1/1
                  }
          restrictions:
          ...
          ...
          ...

2. Thanks for that bonus information, I was already wondering. Will have a look at this too.
   Update: For now I just remove them cause the benefit of that styling is not that important and does not outperform the added complexity of using additional mod-card.

[e-raser]

Last one regarding the restriction-card:

Initially I had this one without restriction-card:

type: custom:mod-card
style: |
  ha-card {
    height: 220px;
  }
card:
  type: button
  name: Betriebsstatus
  icon: mdi:checkbox-marked-circle
  tap_action:
    action: navigate
    navigation_path: betriebsstatus
  double_tap_action:
    action: navigate
    navigation_path: /lovelace/default_view
  hold_action:
    action: none
  show_name: true
  show_state: false
  show_icon: true

This applied the CSS before the card was shown, which is really fast.

So while this one is working …

type: custom:restriction-card
row: false
card:
  type: button
  name: Betriebsstatus
  icon: mdi:checkbox-marked-circle
  tap_action:
    action: navigate
    navigation_path: betriebsstatus
  double_tap_action:
    action: navigate
    navigation_path: /lovelace/default_view
  hold_action:
    action: none
  show_name: true
  show_state: false
  show_icon: true
  card_mod:
    style:
      .: |
        ha-card {
          height: 220px !important;
        }
restrictions:
  confirm: null
  pin:
    code: 9999
    text: 'Gesperrter Bereich. PIN nötig:'
    retry_delay: 0
    max_retries: unlimited
    max_retries_delay: 0
  block: null
exemptions: null

…here the CSS (height setting) is applied after the card is shown, which gives an ugly card for a second or two (depending on browser/device speed) until the card is resized.

So here’s the question: how can I access the button card inside the restriction-card with the mod-card right from the beginning (to apply the height setting to the button card)? I was thinking of this, but it is not applied as it does not get down to the button-card. So a simple navigation thing is missing I guess :

type: custom:mod-card
style: |
  ha-card {
    height: 220px !important;
  }
card:
  type: custom:restriction-card
  row: false
  card:
    type: button
    name: Betriebsstatus
    icon: mdi:checkbox-marked-circle
    tap_action:
      action: navigate
      navigation_path: betriebsstatus
    double_tap_action:
      action: navigate
      navigation_path: /lovelace/default_view
    hold_action:
      action: none
    show_name: true
    show_state: false
    show_icon: true
  restrictions:
    confirm: null
    pin:
      code: 9999
      text: 'Gesperrter Bereich. PIN nötig:'
      retry_delay: 0
      max_retries: unlimited
      max_retries_delay: 0
    block: null
  exemptions: null

In other words: how to get from mod-card down to button-card?

[Ildar_Gabdullin]

@e-raser

how can I access the button card inside the restriction-card with the mod-card right from the beginning

[e-raser]

Thank you very much Ildar. I learned a bit again, quite complicated to understand how to navigate down to embeeded elements/cards.

Unfortunately, the end result applying the height this way is the same (small lag when loading the view, takes one second to resize the button), probably because it’s just another syntax/way (location) to apply the CSS, but the way it is applied is the same:

1. Load the view :
   

   

2. Wait a second until CSS is applied :
   

   

This was working very well without that glitch before using the restriction-card.
Not sure if that can be “fixed” or worked around somehow?
Can it applied “before” the card is shown at all maybe?

[Ildar_Gabdullin]

Post your simplified code with the latest changes.
Check this:

type: grid
square: false
columns: 1
cards:
  - type: markdown
    content: xxxxxxxxxx
  - type: grid
    columns: 2
    cards:
      - type: custom:restriction-card
        card:
          <<: &ref_button
            type: button
            name: Betriebsstatus
            icon: mdi:checkbox-marked-circle
            show_name: true
            show_state: false
            show_icon: true
          card_mod:
            style: |
              ha-card {
                aspect-ratio: 1/1;
              }
      - *ref_button

Zero glitches.

[e-raser]

Sorry for late response. My glitch example is based on another view. This issue is not based on the initial/former height setting itself but the way it is applied in combination with restriction card (which now gives a delay when card-mod styles are applied). Here’s the code:

views:
  - theme: Backend-selected
    title: ABC
    path: overview-domains
    icon: mdi:vector-triangle
    visible:
      - user: abc
      - user: xyz
    layout:
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
      grid-template-rows: auto
      mediaquery:
        '(max-width: 650px)':
          grid-template-columns: 1fr 1fr
        '(max-width: 1200px)':
          grid-template-columns: 1fr 1fr 1fr
        '(max-width: 1600px)':
          grid-template-columns: 1fr 1fr 1fr 1fr
    type: custom:grid-layout
    badges: []
    cards:
      - type: custom:mod-card
        style:
          restriction-card $ div#card hui-button-card $: |
            .type-button {
              height: 220px !important;
            }
        card:
          type: custom:restriction-card
          row: false
          card:
            type: button
            name: Betriebsstatus
            icon: mdi:checkbox-marked-circle
            tap_action:
              action: navigate
              navigation_path: betriebsstatus
            double_tap_action:
              action: navigate
              navigation_path: /lovelace/default_view
            hold_action:
              action: none
            show_name: true
            show_state: false
            show_icon: true
          restrictions:
            confirm: null
            pin:
              code: 9999
              text: 'Gesperrter Bereich. PIN nötig:'
              retry_delay: 0
              max_retries: unlimited
              max_retries_delay: 0
            block: null
          exemptions:
            - user: abc
            - user: xyz

And with this exactly that happens:

Card-mod - Add css styles to any lovelace card

Thank you very much Ildar. I learned a bit again, quite complicated to understand how to navigate down to embeeded elements/cards. Unfortunately, the end result applying the height this way is the same (small lag when loading the view, takes one second to resize the button), probably because it’s just another syntax/way (location) to apply the CSS, but the way it is applied is the same: Load the view : [grafik] Wait a second until CSS is applied : [grafik] This…

[Ildar_Gabdullin]

Try to simplify the code - get rid of layout etc, see if the glitch happens with a single restriction card.
And why are you using “height: xxx” style? Earlier you said that the only reason to test with a height is a difference in heights between 2 buttons.

[e-raser]

@Ildar_Gabdullin

Try to simplify the code - get rid of layout etc, see if the glitch happens with a single restriction card.

I did with a new view.

  - theme: Backend-selected
    title: Test
    path: test
    visible:
      - user: abc
    badges: []
    cards:
      - type: custom:mod-card
        style:
          restriction-card $ div#card hui-button-card $: |
            .type-button {
              height: 220px !important;
            }
        card:
          type: custom:restriction-card
          row: false
          card:
            type: button
            name: Betriebsstatus
            icon: mdi:checkbox-marked-circle
            tap_action:
              action: navigate
              navigation_path: betriebsstatus
            double_tap_action:
              action: navigate
              navigation_path: /lovelace/default_view
            hold_action:
              action: none
            show_name: true
            show_state: false
            show_icon: true
          restrictions:
            confirm: null
            pin:
              code: 9999
              text: 'Gesperrter Bereich. PIN nötig:'
              retry_delay: 0
              max_retries: unlimited
              max_retries_delay: 0
            block: null
          exemptions:
            - user: abc
            - user: xyz

Same result, first the card is shown…

…and after/within a second it gets updated (resized) to the final view (the look itself doesn’t matter here, it’s just to show the difference and I can’t provide a video of the animation/glitch itself):

@Ildar_Gabdullin

And why are you using “height: xxx” style? Earlier you said that the only reason to test with a height is a difference in heights between 2 buttons.

That’s simple: It’s another view, a slightly other use-case (still trying to merge the existing card-mod / mod-card base with restriction-card).

[filikun]

Is it possible to remove the header on a certain dashboard with the same theme or even change the theme for a specific dashboard?

[Photelegy]

Hi AhmadK

Have you found a way to use this (Icon-Hiding) for all entities in an entities-card without the need to write it for every entity?

type: entities
entities:
  - entity: sensor.thermalcomfort_badgast_absolutehumidity
  - entity: sensor.thermalcomfort_badgast_dewpoint
  - entity: sensor.thermalcomfort_badgast_heatindex
  - entity: sensor.thermalcomfort_badgast_simmerindex
  - entity: sensor.thermalcomfort_badgast_simmerzone
  - entity: sensor.thermalcomfort_badgast_perception
  - entity: sensor.thermalcomfort_badbaga_absolutehumidity
  - entity: sensor.thermalcomfort_badbaga_dewpoint
  - entity: sensor.thermalcomfort_badbaga_heatindex
  - entity: sensor.thermalcomfort_badbaga_simmerindex
  - entity: sensor.thermalcomfort_badbaga_simmerzone
  - entity: sensor.thermalcomfort_badbaga_perception
style:
  hui-generic-entity-row:
    $: |
      state-badge {
        display: none;
      }

[Ildar_Gabdullin]

@Photelegy
1st post → link at the bottom → styles for Entities card → any style for all rows

[image969 (James Scialdone)]

Can someone please tell me how to remove or change the plus icons of a grocery list? I don’t know what to call it, I’ve tried right clicking and inspecting. I have card mod. Im using the OurGroceries Card, and trying to make i look as close to mushroom theme as possible.

[itsboo]

hi can somone help me how to control the size of this grid card…its soo big and even panel mode is false. i want it to look small . any way around with cardmod is it possible?

code:

square: false
columns: 1
type: grid
cards:
  - square: true
    columns: 3
    type: grid
    cards:
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: script.remote_sleep
        icon: mdi:television
        show_state: false
        hold_action:
          action: call-service
          service: script.remote_wakeup
          data: {}
          target: {}
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: script.remote_arrow_up
        icon: mdi:arrow-up
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: switch.pressure_pump
        icon: mdi:lightbulb-group-outline
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: script.remote_arrow_left
        icon: mdi:arrow-left
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: script.remote_select
        icon: mdi:checkbox-blank
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: script.remote_arrow_right
        icon: mdi:arrow-right
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: script.remote_top_menu
        icon: mdi:backburger
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: script.remote_arrow_down
        icon: mdi:arrow-down
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: script.remote_home
        icon: mdi:home
card_mod: null