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:
custom_header:
background: '#272E38'
compact_mode: true
disable_sidebar: true
restrict_users: true
hide_help: true
options_hide: true
views:
- panel: true
theme: noctis_utan
title: Home
badges: []
background: '#272E38'
cards:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: glance
entities:
- 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'
cards:
- type: entities
entities:
- entity: group.light
title: Turn off
I am using the same theme in both views:
noctis:
# 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:
compact-header:
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
