White line has appeared below custom header

Since the latest update of Home Assistant I get a white line under all views except ‘Home’, see below pictures:

Here is the code I have in my .yaml:

  background: '#272E38'
  compact_mode: true
  disable_sidebar: true
  restrict_users: true
  hide_help: true
  options_hide: true
  - panel: true
    theme: noctis_utan
    title: Home
    badges: []
    background: '#272E38'
      - type: vertical-stack
          - type: vertical-stack
              - type: vertical-stack
                  - type: glance
                      - entity: sensor.nextsunrise
                      - entity: sensor.nextsunset
                    show_name: false
                    show_state: true
                    state_color: false                          

  - title: Scenes
    path: scenes
    theme: noctis_utan
    badges: []
    background: '#272E38'
      - type: entities
          - entity: group.light
        title: Turn off  

I am using the same theme in both views:


  # Fonts
  primary-font-family: 'Raleway,sans-serif'
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  ha-card-header-font-family: "var(--primary-font-family)"

  # Text
  text-color: '#ffffff' 
  primary-text-color: 'var(--text-color)'
  text-primary-color: 'var(--text-color)'
  secondary-text-color: "#BAC0C6"
  text-medium-light-color: '#A0A2A8'
  text-medium-color: '#80828A'
  disabled-text-color: '#626569'
  primary-color: 'var(--accent-color)'
  # Main Colors
  app-header-background-color: 'var(--background-color)'
  accent-color: '#1A89F5'
  accent-medium-color: 'var(--accent-color)'

  # Background
  background-color: 'rgba(28, 33, 53, 0)'
  primary-background-color: 'var(--background-color)'
  background-color-2: '#323B44' 
  secondary-background-color: 'none'
  markdown-code-background-color: 'var(--sidebar-background-color)'
  # Card
  card-background-color: 'var(--paper-card-background-color)'
  paper-card-background-color: '#272E38'
  ha-card-box-shadow: "3px 3px 13px -6px rgba(17,35,52,0)"
  ha-card-border-radius: "0px"
  border-color: 'none'

  # Icons
  paper-item-icon-color: '#EBEBEB'
  paper-item-icon-active-color: 'var(--accent-color)'
  # Sidebar
  sidebar-background-color: 'var(--background-color)'
  sidebar-icon-color: '#98a7b9'
  sidebar-selected-icon-color: 'var(--accent-color)'
  sidebar-selected-text-color: 'var(--text-color)'
  paper-listbox-background-color: 'var(--sidebar-background-color)'
  divider-color: 'var(--background-color)'
  light-primary-color: 'var(--paper-card-background-color)'

  # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--background-color-2)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'var(--background-color-2)'

  # Toggle:
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  mdc-theme-primary: 'var(--accent-color)'

  # Switch
  switch-unchecked-color: '#70889e'
  switch-checked-button-color: 'var(--accent-color)'
  switch-unchecked-track-color: 'var(--background-color-2)'
  switch-checked-track-color: 'var(--background-color-2)'

  # Radio Button
  paper-radio-button-checked-color: 'var(--accent-color)'

  # Popups
  more-info-header-background: 'var(--secondary-background-color)'
  paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'

  # Tables
  table-row-background-color: 'var(--background-color)'
  table-row-alternative-background-color: 'var(--paper-card-background-color)'

  # Badges
  label-badge-background-color: 'var(--background-color)'
  label-badge-text-color: 'var(--text-primary-color)'
  label-badge-red: 'rgba(73,85,108,1)'
  label-badge-blue: 'rgba(26,137,245,1)'
  label-badge-green: 'rgba(0,202,139,1)'
  label-badge-yellow: 'rgba(222,176,107,1)'

  paper-input-container-focus-color: 'var(--accent-color)'
  # Custom Header
  ch-background: 'var(--background-color)'
  ch-active-tab-color: 'var(--accent-color)'
  ch-notification-dot-color: 'var(--accent-color)'
  ch-all-tabs-color: 'var(--sidebar-icon-color)'
  ch-tab-indicator-color: 'var(--accent-color)'

  # Mini Mediaplayer
  mini-media-player-base-color: 'var(--text-color)'
  mini-media-player-accent-color: 'var(--accent-color)'

Custom header is archived. It will stop working all together sometimes soon with new HA updates.

Thanks for your reply. I’ve read before I updated HA that Custom Header is archived, maybe I shouldnt have updated HA, but do I want to run on an old version… Just wondering if there was some work around. It works fine in the first view.

You can use card-mod to get a similar effect if you just want to remove the header or have a footer but other than rolling back to 0.115 there is no solution at the moment.

Thank you! I started reading about using card-mod, trying to understand it.

There is a pretty good example in the github wiki cookbook down the bottom I used and it looks great.

Do you mind sharing the link to the cookbook?

I figured out what caused the white line, first view was set as panel and the second view not as panel.

Are you talking about this:

  card-mod-theme: compact-header
  # Header
  card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      /*Uncomment this if you want the header on the bottom
      #selectionBar {
        bottom: unset !important;
    ha-app-layout$: |
      /* This corrects top padding for the view. */
      #contentContainer {
        /* Change this to 0px if you want the header on the bottom */
        padding-top: 48px !important;
    ha-button-menu$mwc-menu$mwc-menu-surface$: |
      .mdc-menu-surface {
        margin: 10px;
        box-shadow: var(--ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));
    .: |
      /* This adds the time */
      paper-tabs::after {
        font-size: 20px;
        content: "{{ states('sensor.time') }}";
      /* This hides the unused portion of the header. */
      app-toolbar {
        height: 0;
      /* This forces background-color and text-color. */
      .edit-mode, app-header, app-toolbar {
        background-color: var(--primary-background-color) !important;
        color: var(--primary-text-color) !important;
      /* Uncomment this if you want the header on the bottom
      app-header {
        top: calc(100vh - 60px) !important;
        transform: unset !important;
      /* This gives the header in edit mode a different look from the standard header. */
      app-header.edit-mode {
        border-bottom: 2px var(--primary-color) solid;
        padding-bottom: 10px;
      /* Make the color of the plus white instead of black. */
      #add-view ha-svg-icon {
        color: #EEE !important;
      /* Bring voice button back down */
      app-toolbar:not([class="edit-mode"]) mwc-icon-button[label] {
        top: 0;
        right: calc(48px * 1);
        z-index: 2;
        position: absolute;
      /* Bring help button back in */
      a[href="https://www.home-assistant.io/lovelace/"] > mwc-icon-button {
        right: calc(48px * 2);
        position: absolute;
        z-index: 2;
      /* Bring close button back in */
      mwc-icon-button[title="Close"] {
        top: 0;
        left: 0;
        position: absolute;
        z-index: 2;
      /* Bring add view button back in */
      mwc-icon-button#add-view {
        position: fixed;
        right: 48px;
      /* Bring edit UI overflow menu back in */
      ha-button-menu {
        top: 0;
        right: 0;
        z-index: 2;
        position: absolute;
        /*Uncomment this out to hide the overflow menu
        display: none;
      /* Hide the title */
      app-toolbar > [main-title] {
        display: none;
      /* Hide buttons that are taking up space, but invisible */
      menu-button[style="visibility: hidden;"] {
        display: none;
      /* Bring sidebar button back in */
      ha-menu-button {
        z-index: 2;
        top: 24px;
      /* Set margin on left to be smaller,
      and set the bar color to be the primary color
      instead of white */
      paper-tabs {
        --paper-tabs-selection-bar-color: var(--primary-color) !important;
        margin-left: 48px !important;
      /* When not in edit mode, shrink the left margin */
      app-toolbar:not(.edit-mode) > div > paper-tabs {
        margin-left: 6px !important;
      /* Color selected tabs */
      paper-tab[aria-selected="true"] > ha-icon {
        color: var(--primary-color) !important;
      paper-tab[aria-selected="true"] {
        color: var(--primary-color) !important;
      /* Styles for mobile */
      @media (orientation: portrait) {
        /* Hide sidebar button and keep room for the overflow menu button */
        paper-tabs {
          margin-left: 5px !important;
          margin-right: 48px !important;
        /* Hide voice button */
        mwc-icon-button[label="Start conversation"] {
          display: none !important;
        /* Hide sidebar button */
        ha-menu-button {
          display: none !important;
      /* Make help button have contrast */
      app-toolbar a {
        color: var(--primary-text-color) !important;

I’ve tried adding it as a theme in my themes.yaml (below my other themes) but choosing it does not make the header look any different (I’ve reloaded the themes). Just for testing I’ve been uncommenting in the beginning (#selectionBar) which does not make the header go to the bottom for me either. Obviously I’m doing something wrong.

It becomes part of another theme… it’s not a theme in itself. Change the card-mod-theme: to whatever theme you are using.

Thank you very much for taking time to help! I still dont get a change. I’ve tried copying the example from a wiki:

Google Light Theme:
  # Header:
  app-header-background-color: "#F8F8F8"
  app-header-text-color: "#424242"
  # Main Interface Colors
  primary-color: "#5F9BEA"
  light-primary-color: var(--primary-color)
  primary-background-color: "#F8F8F8"
  secondary-background-color: var(--primary-background-color)
  divider-color: var(--primary-background-color)
  # More stuff here that I cut out
  card-mod-theme: "Google Light Theme"
  # Header
  card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      /*Uncomment this if you want the header on the bottom
      #selectionBar {
        bottom: unset !important;
      /*More stuff I cut out*/

I have reloaded themes and choosen the Google light theme in the editor, still it doesnt change the layout. The header looks the same.

Perhaps you should move this question to the card-mod these thread… @KTibow can probably help you. I am just using the settings straight from the wiki )except I changed a couple of colours and an offset)

I should move the question there. Do you mind sharing your theme?

Thank you very much

See here