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

Try removing this

In the end, reading the documentation of this custom module, I found this;

NOTE: card-mod only works on cards that contain a ha-card element. 
This includes almost every card which can be seen, but not e.g. conditional, 
entity_filter, vertical-stack, horizontal-stack, grid.

Note, though that those cards often include other cards, which card-mod 
can work on.
See the manual for each card to see how to specify parameters for the 
included card(s).

Which I guess explained my problem. I thought about working around the issue by using vertical-stack-in-card and then a conditional card with an entities card inside, but in the end I opted to use a custom button-card with a bunch of templates in it to customize icon color, label, and actions, to achieve roughly the same result with less code (it doesn’t look as nice though as native buttons, for this use case)

use custom:template-entity-row for that. Simply set the state to any template you desire

no need for card_mod at all in that case

1 Like

What text do you want to display?
If it is just some sensor’s state - why not using this sensor as the main for row?
If it is some combination of some sensors’ states + some text → then try following the advice of Marius about template-entity-row.

1 Like

Scrollable markdown

Shows scrollbar when needed:

изображение

изображение

code
  - type: markdown
    content: |
      first
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      last
    card_mod:
      style: |
        ha-markdown {
          max-height: 200px;
          overflow-y: auto;
        }

Thanks to “modern design” huge round corners we see a glitch for the scrollbar in corners.
Another example fixes this:
image

code
  - type: markdown
    content: |
      first
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      last
    card_mod:
      style:
        ha-markdown $: |
          ha-markdown-element p {
            max-height: 210px;
            overflow-y: auto;
            background-color: rgba(0,255,0,0.2);
          }
        .: |
          ha-markdown {
            padding-right: 4px !important;
          }
4 Likes

i solved!! thx you :innocent:

1 Like

@ASNNetworks

Which element do you wish to hide?
A particular tab?

yes, a nice mod indeed. using this on embedded markdowns my self, adding a nice line for the content to scroll under:

type: custom:hui-element
card_type: markdown
card_mod:
  style: |
    ha-card.type-markdown {
      box-shadow: none;
      border-top: 1px groove var(--divider-color);
      overflow-y: scroll;
      height: 300px;
    }
content: >

believe we had to tie in to the markdown card specifically, because otherwise the mod would be applied to other cards in the stack as well

btw, Ive Neve been able to discover the difference between ‘scroll’ and ‘auto’ in these configs, nor on the example pages on W3…
https://www.w3schools.com/cssref/playdemo.php?filename=playcss_overflow-y&preval=auto

Hi, thanks for reaching out! So I’m not trying hide any tab, but I want to make the tab-bar element sticky. I want to add the following code to this line:

Change this:

:host {
    display: block;
}

To this:

            :host {
                display: block;
                z-index: 999;
                position: sticky;
                top: 0px;
                background: var(--primary-color);
            } 

So I want to add the four extra lines under display. Using inspect element this above code works, however I don’t know how to use it with card_mod. This doesn’t work:

        card_mod:
          style: |
            :host {
                display: block;
                z-index: 999;
                position: sticky;
                top: 0px;
                background: var(--primary-color);
            } 

So I think I need to traverse the DOM, which I need help with.

Styling custom:tabbed-card

The card is documented here.
Some basic styling may be done by the card’s options, some - by card-mod.


Note (11.04.23): some stylings stopped working after 2023.4. Try this workaround to fix:
instead of:

        card_mod:
          style:
            tabbed-card $: |
              ...... {

use this:

        card_mod:
          style:
            tabbed-card:
              $: |
                ...... {

Colored labels & icons (w/o conditions):

изображение

code
  - type: custom:tabbed-card
    attributes:
      icon: mdi:circle
    tabs:
      - card:
          <<: &ref_card
            type: entities
            entities:
              - sun.sun
        attributes:
          label: label 1
        styles:
          '--mdc-theme-primary': red
          '--mdc-tab-text-label-color-default': red
          '--mdc-tab-color-default': red
      - card:
          <<: *ref_card
        attributes:
          label: label 2
        styles:
          '--mdc-theme-primary': orange
          '--mdc-tab-text-label-color-default': orange
          '--mdc-tab-color-default': orange
      - card:
          <<: *ref_card
        attributes:
          label: label 2
        styles:
          '--mdc-theme-primary': green
          '--mdc-tab-text-label-color-default': green
          '--mdc-tab-color-default': green

Colored labels & icons (conditions may be added):

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(2) ha-icon $: |
        ha-svg-icon {
          color: orange;
        }
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label {
          color: red !important;
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Using standard theme variables for labels & icons:
изображение

code
type: custom:tabbed-card
styles:
  '--mdc-theme-primary': unset
  '--mdc-tab-text-label-color-default': var(--secondary-text-color)
  '--mdc-tab-color-default': var(--paper-item-icon-color)
attributes:
  icon: mdi:circle
tabs:
  - card:
      <<: &ref_card
        type: entities
        entities:
          - sun.sun
    attributes:
      label: label 1
  - card:
      <<: *ref_card
    attributes:
      label: label 2
  - card:
      <<: *ref_card
    attributes:
      label: label 3

Hilight icons on hover:

Untitled

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab:hover {
        --mdc-theme-primary: red;
        --mdc-tab-color-default: red;
      }  
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-1-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-2-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-3-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-4-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-5-circle

Change an underline’s color:

изображение

code
  - type: custom:mod-card
    card_mod:
      style:
        tabbed-card $:
          mwc-tab:
            $:
              mwc-tab-indicator $: |
                .mdc-tab-indicator__content--underline {
                  border-color: red !important;
                }
    card:
      type: custom:tabbed-card
      attributes:
        icon: mdi:circle
      tabs:
        - card:
            <<: &ref_card
              type: entities
              entities:
                - sun.sun
          attributes:
            label: label 1
        - card:
            <<: *ref_card
          attributes:
            label: label 2
        - card:
            <<: *ref_card
          attributes:
            label: label 3

Colored tab’s background:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(1) $: |
        .mdc-tab {
          background: red !important;
        }
      mwc-tab:nth-child(2) $: |
        .mdc-tab {
          background: yellow !important;
        }
      mwc-tab:nth-child(3) $: |
        .mdc-tab {
          background: lightgreen !important;
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <:: *ref_card
      attributes:
        label: label 3

Hilight an active tab’s background:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            background: yellow !important;
          }
          .mdc-tab--active {
            background: lightgreen !important;
          }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Tabs with background images:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab {
        background-size: 100% 100%;
      }
      mwc-tab:nth-child(1) {
        background-image: url("/local/images/test/9colors.jpg");
      }
      mwc-tab:nth-child(2) {
        background-image: url("/local/images/test/blue_low_2.jpg");
      }
      mwc-tab:nth-child(3) {
        background-image: url("/local/images/test/6colors.jpg");
      }
card:
  type: custom:tabbed-card
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
    - card: *ref_card
    - card: *ref_card

With inner padding:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            background-size: 100% 100% !important;
          }
      mwc-tab:nth-child(1) $: |
        .mdc-tab {
          background-image: url("/local/images/test/9colors.jpg") !important;
        }
      mwc-tab:nth-child(2) $: |
        .mdc-tab {
          background-image: url("/local/images/test/blue_low_2.jpg") !important;
        }
      mwc-tab:nth-child(3) $: |
        .mdc-tab {
          background-image: url("/local/images/test/6colors.jpg") !important;
        }
      .: |
        mwc-tab {
          padding: 4px;
        }
card:
  type: custom:tabbed-card
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
    - card: *ref_card
    - card: *ref_card

Align icons vertically with labels:

Not needed since v.0.4

Currently (v0.3.1) icons are misaligned; hopefully this will be fixed in the next revision (issue 1, issue 2).
The example contains 2 cards - styled (aligned) & default (misaligned).

изображение

code
type: vertical-stack
cards:
  - type: custom:mod-card
    card_mod:
      style:
        tabbed-card $:
          mwc-tab: |
            ha-icon {
              display: inline-flex;
            }
    card:
      type: custom:tabbed-card
      attributes:
        icon: mdi:circle
      tabs:
        - card:
            <<: &ref_card
              type: entities
              entities:
                - sun.sun
          attributes:
            label: label 1
        - card:
            <<: *ref_card
          attributes:
            label: label 2
  - type: custom:tabbed-card
    attributes:
      icon: mdi:circle
    tabs:
      - card:
          <<: *ref_card
        attributes:
          label: label 1
      - card:
          <<: *ref_card
        attributes:
          label: label 2

Narrow tabs w/o labels:

image

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            min-width: var(--mdc-icon-size) !important;
          }
    .: |
      tabbed-card {
        --mdc-tab-horizontal-padding: 0px;
      } 
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-1-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-2-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-3-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-4-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-5-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-6-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-7-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-8-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-9-circle

Labels “caps lock off”:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab__text-label {
            text-transform: none;
          }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: Label 1
    - card:
        <<: *ref_card
      attributes:
        label: Label 2
    - card:
        <<: *ref_card
      attributes:
        label: Label 3

Labels: font-size, text wrapping:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label {
          font-size: 10px;
          white-space: pre;
        }
      mwc-tab:
        $: |
          .mdc-tab__text-label {
            text-transform: none;
          }
        .: |
          mwc-tab ha-icon {
            display: inline-flex;
          }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: Label 1
    - card:
        <<: *ref_card
      attributes:
        label: |-
          Some
          long long label
          !!!
    - card:
        <<: *ref_card
      attributes:
        label: Label 3

Hidden tab:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab:nth-of-type(2) {
        display: none;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Disabled tab:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab:nth-of-type(2) {
        pointer-events: none;
        --mdc-tab-text-label-color-default: var(--disabled-color);
        --mdc-tab-color-default: var(--disabled-color);
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

“Vivid” tabs:
These changes are also discussed here & here.
Below a variant for the HA 2023.2.3 default theme (border-radius: 12px, borders, no shadows); this may be also rewritten to the “old pre 2022.11 style” (shadows, no borders).

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab {
        background: var(--ha-card-background, var(--card-background-color, white) );
        border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
        border-width: 1px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-style: solid;
        overflow: hidden;
      }
      section article > * {
        --ha-card-border-radius: 0px 0px 12px 12px;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Tabs on the bottom:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
            .mdc-tab-indicator__content--underline {
               align-self: flex-start !important;
            }
    .: |
      tabbed-card {
        display: flex;
        flex-direction: column-reverse;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Same + “vivid” tabs:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
            .mdc-tab-indicator__content--underline {
               align-self: flex-start !important;
            }
        .: |
          mwc-tab {
            background: var(--ha-card-background, var(--card-background-color, white) );
            border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
            border-width: 1px;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            border-style: solid;
            overflow: hidden;
          }
          section article > * {
            --ha-card-border-radius: 12px 12px 0px 0px;
          }
    .: |
      tabbed-card {
        display: flex;
        flex-direction: column-reverse;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Sticky “vivid” tabs:

tab

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab-bar {
        position: sticky;
        position: -webkit-sticky;
        top: 0; /*var(--header-height); */
        display: block;
        z-index: 999;
      }
      mwc-tab {
        background: var(--ha-card-background, var(--card-background-color, white) );
        border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
        border-width: 1px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-style: solid;
        overflow: hidden;
      }
      section article > * {
        --ha-card-border-radius: 0px 0px 12px 12px;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        type: entities
        entities:
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
      attributes:
        label: label 1
    - card:
        type: entity
        entity: sun.sun
      attributes:
        label: label 2
    - card:
        type: entity
        entity: sun.sun
      attributes:
        label: label 3

Sticky “vivid” bottom tabs:

Untitled Project111111111111

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
            .mdc-tab-indicator__content--underline {
               align-self: flex-start !important;
             }
        .: |
          mwc-tab-bar {
            position: sticky;
            position: -webkit-sticky;
            bottom: 4px;
            display: block;
            z-index: 999;
          }
          mwc-tab {
            background: var(--ha-card-background, var(--card-background-color, white) );
            border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
            border-width: 1px;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            border-style: solid;
            overflow: hidden;
          }
          section article > * {
            --ha-card-border-radius: 12px 12px 0px 0px;
          }          
    .: |
      tabbed-card {
        display: flex;
        flex-direction: column-reverse;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        type: entities
        entities:
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
      attributes:
        label: label 1
    - card:
        type: entity
        entity: sun.sun
      attributes:
        label: label 2
    - card:
        type: entity
        entity: sun.sun
      attributes:
        label: label 3

Additional info in tabs:

How to replace a tab’s name with some text:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label {
          font-size: 0px;
        }
        .mdc-tab__text-label:after {
          content: "New info";
          font-size: initial;
          text-transform: none;
          display: block;
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
      attributes:
        label: Label 1
    - card: *ref_card
      attributes:
        label: dummy
    - card: *ref_card
      attributes:
        label: Label 3

How to add a templated text for 2 or more tabs:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(n+2):
        $: |
          .mdc-tab__text-label {
            font-size: 0px;
          }
          .mdc-tab__text-label:after {
            font-size: 10px;
            text-transform: none;
            display: block;
          }
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label:after {
          content: "Zone: {{states('zone.home')}}";
        }
      mwc-tab:nth-child(3) $: |
        .mdc-tab__text-label:after {
          content: "{{states('sun.sun')}}";
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
      attributes:
        label: Label 1
    - &ref_tab
      card:
        <<: *ref_card
      attributes:
        label: dummy
    - *ref_tab

How to add a multiline text:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label {
          font-size: 0px;
        }
        .mdc-tab__text-label:after {
          content: "New info\A New info";
          font-size: 8px;
          text-transform: none;
          white-space: pre;
          display: block;
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
      attributes:
        label: Label 1
    - card: *ref_card
      attributes:
        label: dummy
    - card: *ref_card
      attributes:
        label: Label 3

Adding images instead of icons:
image

Removing “on hover” effect:
image


Tested in HA 2023.2.2, Chrome + Win10, iOS Companion app (iOS 15.7.3).


more examples

7 Likes

Thank you so much! I managed to mix and match to create a sticky bar at the bottom! One final question, would it be possible to force the bar to fit all content? When using on mobile, I noticed the tabs are spread out and I need to scroll. I want the bar to force fit all tabs in the view, so I see all tabs without needing to scroll.

Do you mean this?
изображение
Probably your options are:
– set a scale to 50% (or any <100%) on the Company App;
– decrease font-size, remove icons - only for a mobile client.

I am trying to remove borders from chips but not sure what’s going wrong

    card_mod:
      style: |
        ha-card {
          --chip-border-width: 0;
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        }

thanks - that worked a charm!

This is what I mean: if the window is wider, all tabs fit in the view:

msedge_6zbj7T4Qzr

But at a certain width, the tabs don’t fit anymore. I need to scroll to be able to see the last tab.
msedge_ZL6aSxQXgY

So I’m looking for a way to fit all tabs in the view, there is plenty of space around the icons anyway, so I don’t see a reason why it wouldn’t fit.

Do not have access to PC.
Try yourself to change margins/paddings by code Inspector.
Now you know how to access elements, probably will manage to style it.
Post here your results, I will check them and probably will add them to my post about this card.

are those tabs on the tabbed-card? the look very much like the icon tabs in the regular HA header bar.

So I managed to do this with inspect element, by changing min-width to 40px, which works great!
msedge_GEVhsV15Vf

I tried using this with card_mod with different variations, but couldn’t make it work. I think I’m missing something there.