🔹 Card-mod - Super-charge your themes!

Share your Projects! Themes
1084

The easiest way to create a separator between tabs in the header:

  1. Add a style:
  card-mod-root-yaml: |

    .: |

      paper-tab[aria-label='separator'] {
        /* separator */
        padding-left: 0px;
        padding-right: 0px;
        pointer-events: none;
      }
  1. Create a file for a dummy tab - “separator.yaml”:
title: separator
path: separator
panel: false
badges: []
icon: mdi:blank
cards: []
  1. Add this tab where you want to have a separator:
views:
  - !include ....
  ##############################################################
  - !include views/separator.yaml
  ##############################################################
  - !include ....
  1. Play with padding-left & padding-right values if you want to have the separator shorter or wider:
    image
    image

Also you may use different sets for different widths:

      paper-tab[aria-label='separator_short'] {
        /* separator */
        padding-left: 0px;
        padding-right: 0px;
        pointer-events: none;
      }

      paper-tab[aria-label='separator_wide'] {
        /* separator */
        padding-left: 32px;
        padding-right: 32px;
        pointer-events: none;
      }

and create two files - “separator_short.yaml” & “separator_wide.yaml”.