I was using custom header to just hide the top bar. And I am using theme “ios-dark-mode”. Now I have installed card-mode. Where am I suppose to put those config to hide top bar? Thanks.
In the theme file, maybe you should RTD*:
1 Like
I’m afraid I’m having no success. Tried applying your code to ha-card, :host both on the mini-media-player and the state-switch cards, didn’t change anything 
Anyway wrong thread. Mind posting in the non-theme one instead?
Sorry about that, didn’t even realize it… Moving to the correct thread.
Hey guys!
Been trying for 2 hours to simply get the header to disappear on an HA lovelace page, but I am unable to find how to do this.
Could someone guide me in the right direction?
I see that I need to enter code in a theme, but unsure as to were in the theme
Can you read the all of the pages in the wiki? It has a guide on how to do this. You can also just post your already existing code, and I’ll mod it for you.
Hi,
This is my final code. I’ve added the code bit at the end with no success
You forgot card-mod-theme. Read the docs.
no_header:
header-height: 0
# Main colors
primary-color: '#2980b9'
accent-color: '#b58e31'
dark-primary-color: '#2980b9'
light-primary-color: '#2980b9'
# Text colors
primary-text-color: '#FFFFFF'
text-primary-color: 'var(--primary-text-color)'
secondary-text-color: '#b58e31'
disabled-text-color: '#777777'
label-badge-border-color: 'green'
# Sidebar
sidebar-icon-color: '#777777'
# Background colors
primary-background-color: '#222222'
secondary-background-color: '#222222'
divider-color: 'rgba(0, 0, 0, .12)'
table-row-background-color: '#292929'
table-row-alternative-background-color: '#292929'
# Nav Menu
paper-listbox-color: '#777777'
paper-listbox-background-color: '#141414'
paper-grey-50: 'var(--primary-text-color)'
paper-grey-200: '#222222'
# Paper card
paper-card-header-color: '#2980b9'
paper-card-background-color: '#292929'
paper-dialog-background-color: '#292929'
paper-item-icon-color: 'var(--primary-text-color)'
paper-item-icon-active-color: '#b58e31'
paper-item-icon_-_color: 'green'
paper-item-selected_-_background-color: '#292929'
paper-tabs-selection-bar-color: 'green'
# Labels
label-badge-red: 'var(--primary-color)'
label-badge-text-color: 'var(--primary-text-color)'
label-badge-background-color: '#222222'
# Switches
paper-toggle-button-checked-button-color: '#2980b9'
paper-toggle-button-checked-bar-color: '#2980b9'
paper-toggle-button-checked-ink-color: '#2980b9'
paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
switch-checked-color: 'var(--paper-toggle-button-checked-button-color)'
switch-unchecked-color: 'var(--disabled-text-color)'
switch-unchecked-button-color: 'var(--disabled-text-color)'
switch-unchecked-track-color: 'var(--disabled-text-color)'
# Sliders
paper-slider-knob-color: '#2980b9'
paper-slider-knob-start-color: '#2980b9'
paper-slider-pin-color: '#2980b9'
paper-slider-active-color: '#2980b9'
paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
paper-slider-secondary-color: 'var(--secondary-background-color)'
paper-slider-disabled-active-color: 'var(--disabled-text-color)'
paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
# Google colors
google-red-500: '#b93829'
google-green-500: '#2980b9'
# Changes to fix history/logbook menus
lumo-primary-text-color: '#2980b9'
lumo-secondary-text-color: '#2980b9'
lumo-primary-color: '#2980b9'
# Calendar day numbers
lumo-body-text-color: '#b58e31'
# Calendar/Date-Picker Background
lumo-base-color: '#222222'
# Month/Year header
lumo-header-text-color: 'var(--lumo-body-text-color)'
# DayOfWeek Header
lumo-tertiary-text-color: 'var(--lumo-body-text-color)'
lumo-shade: '#222222'
lumo-shade-90pct: 'rgba(34, 34, 34, .9)'
lumo-shade-80pct: 'rgba(34, 34, 34, .8)'
lumo-shade-70pct: 'rgba(34, 34, 34, .7)'
lumo-shade-60pct: 'rgba(34, 34, 34, .6)'
lumo-shade-50pct: 'rgba(34, 34, 34, .5)'
lumo-shade-40pct: 'rgba(34, 34, 34, .4)'
lumo-shade-30pct: 'rgba(34, 34, 34, .3)'
lumo-shade-20pct: 'rgba(34, 34, 34, .2)'
lumo-shade-10pct: 'rgba(34, 34, 34, .1)'
lumo-shade-5pct: 'rgba(34, 34, 34, .05)'
lumo-tint-5pct: '#222222'
# fix for device configuration screen
card-background-color: "var(--paper-card-background-color)"
# Fix for Person Device Chooser - thanks to vajonam!
material-background-color: "var(--paper-listbox-background-color)"
material-secondary-background-color: '#222222'
material-body-text-color: '#FFFFFF'
# simple-thermostat buttons
st-mode-background: 'var(--primary-background-color)'
# fix white on white markdown code sections (eg. the addons infos)
markdown-code-background-color: 'var(--secondary-background-color)'
card-mod-theme: no-top-header
card-mod-root: |
app-header {
display: none;
}
Doesn’t seem to work either
The theme name is no_header, but you set it to no-top-header.
Did it work?
Yep! Thanks a lot!
Thanks Kendell, that works for me in 0.117.x. 
Would it be also possible to hide these chevrons?
They are totally useless for me on mobile.
Should be able to style paper-icon-button[icon="paper-tabs:chevron-right"] and paper-icon-button[icon="paper-tabs:chevron-left"] with display: none;
HI, I need a bit of help - I’m out of my edge in the coding.
Was able to install and run the “compact-header” theme as referenced in several places in this trail.
Works well, in Kiosk mode, exaclty what I wanted but… I can’t figure out where to code the color code for the top nav and background. I try many many examples I could find but nothing happens. For example, this:
app-header-background-color: 'rgba(0, 0, 0, 0)'
app-header-text-color: 'rgba(255, 255, 255, 1)'
I assume changes the header text and bg to white text over black. Cool. But where in the the code (which indent, or inside which parent) do I need to place it?
Without recopying the entire code, it starts with 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));
}
.: |
(etc etc etc)
Thanks a lot.
Change this part:
/* 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;
}
Hi, I did - nothing happens (I called the reload theme service to refresh. I also tested and add crash-data to see if it was being triggered and it was).
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 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 (0,255,0) !important;
color: var (255,0,255) !important;
}
/* Uncomment this if you want the header on the bottom
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
hui-masonry-view {
padding-bottom: 60px !important;
}
? Thanks.
