I had a transparent header at the bottom and after update 117, everything broke. It can be fixed somehow. Thank you
I used Thomaslovenās code. He adjusted the colors and everything works fine, I just canāt figure out how to move the header down. I tried to uncomment, it will move the header down. The header is hidden below the bottom edge. If I change 48px to 0px, the header moves down, but the tabs donāt move up, so the header is at the bottom of the tabs
card-mod-theme: yourname
# Header
header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
paper-tabs$: |
/* Uncomment this for header on the bottom. You're 2/3 there.
#selectionBar {
bottom: unset !important;
}
*/
.: |
/* This moves the header up. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: transparent !important;
color: #A9A9A9 !important;
}
/* We're still going to need a way to see that we're in edit mode. */
app-header.edit-mode {
padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: #D2691E !important;
}
paper-tab[aria-selected=true] > ha-icon {
color: #FF8C00 !important;
}
paper-tab[aria-selected=true] {
color: #00FF00 !important;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
/* This hides the title. */
[main-title] {
display: none;
}
/* This hides the app-toolbar in edit mode. */
app-toolbar.edit-mode {
height: 0;
}
/* This moves the edit mode buttons back in. */
app-toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
app-toolbar.edit-mode > ha-button-menu {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* This adds a bit more padding, mainly for unused entities. */
app-header.edit-mode > div {
padding-left: 5px;
}
/* Uncomment this for header on the bottom. You're 3/3 there.
app-header {
top: calc(101vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
*/
I thought this was clear. You need to uncomment everywhere:
Can you show me a screenshot? It works fine for me.
I had a similar problem in 0.117, after changing paper-tabs to ha-tabs itās working better for me now. I also had to leave the header-height and match the size in the app-header.
card-mod-theme: slate-tablet
header-height: 48px
card-mod-root-yaml: |
ha-tabs$: |
#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: 0px !important;
}
.: |
app-header {
top: calc(100vh - 48px) !important;
bottom: 0 !important;
transform: unset !important;
}
The header still looks exactly the same to me after adding the latest Custom Header code to my theme file (and changing the card-mod-theme: xxxxx and rebooting HA). Below, is the link to my full theme file:
Below, is the screenshot of the header for this theme. Notice, the header is still 64px in height, instead of 48px.
Delete line 109
Thank you. That worked!
It was clear
The bottom of the screen. I changed the color to make it visible.
Upper part
Commented. Only the upper part
Odd. Iāll look in to this. Feel free to ping me in a day if I havenāt responded.
Clearly. Iāll just add that these are images of the monitor and you donāt see the underscores when the header is at the top. They are visible on the tablet.
Which version of HA are you running? 0.117?
Yes 0.117
Uncommenting also moves the developer tool page up so that some of the text is not visible.
Also the side panel
Hi
Iāve upgraded to 0.117 and trying to modify my theme to just add the time to the right of the top bar. Iāve got the following code but it doesnāt seem to be working. Any ideas?
midnight:
card-mod-theme: midnight
card-mod-root-yaml: |
paper-tabs::after {
margin-right: 50px !important;
font-size: 20px;
content: "TEST";
text-transform: capitalize;
white-space: pre;
}
Can you post your theme file?
Hi,
I have problem after update to 0.117 the header completly disappered what I setup before.
here is the theme code what I use. Where is the problem?
compact-header:
card-mod-theme: compact-header
card-mod-root-yaml: |
ha-app-layout$: |
/* This corrects top padding for the view. */
#contentContainer {
padding-top: 48px !important;
}
paper-tabs$: |
/* This hides tab scroll arrows, remove next 3 lines if you want them. */
paper-icon-button {
display: none;
}
/* This makes it so arrows are only displayed when needed. */
.not-visible {
display: none;
}
.: |
/* This adds the time */
paper-tabs::after {
font-size: 20px;
content: "{{ states('sensor.date') }} {{ states('sensor.date_hu') }}, {{ state_attr('calendar.magyar_nevnapok', 'message') }} nƩvnap, {{ states('sensor.time') }}";
color: var(--primary-color) !important;
}
/* 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;
background: url('/local/homekit-bg-4.jpeg') !important;
}
/* This shifts the unused portion of the header up. */
app-toolbar:not([class="edit-mode"]) {
margin-top: -64px;
z-index: 1;
}
/* This shifts the menu button back down. */
app-toolbar:not([class="edit-mode"]) ha-button-menu {
margin-top: 110px
}
/* This shifts the voice button back down. */
app-toolbar:not([class="edit-mode"]) mwc-icon-button[label] {
/* Uncomment line below to hide voice button. */
/* display: none; */
margin-top: 110px
}
/* This shifts the options button back down. */
app-toolbar:not([class="edit-mode"]) ha-menu-button {
/* Uncomment line below to hide options button. */
/* display: none; */
margin-top: 110px
}
/* This hides the menu button when sidebar is open. */
menu-button[style="visibility: hidden;"] {
display: none;
}
/* This adds room for the menu button when sidebar is open. */
:host-context(home-assistant-main[expanded]) paper-tabs {
margin-left: 60px !important;
}
/* This leaves space for the buttons on the right of the tabs bar.
Change 112px to 56px if you don't use voice icon. */
paper-tabs {
margin-right: 20px !important;
}
/* This corrects the sizing of the view. */
#view {
min-height: calc(100vh - 48px) !important;
}
ha-button-menu {
right: -25px !important;
color: rgb(74, 27, 43);
/*Uncomment this out to hide the overflow menu
display: none;
*/
}
/* 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;
}
/* 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;
}
# Global
background-image: 'center / cover no-repeat fixed url("/local/homekit-bg-4.jpeg")'
primary-color: "#FF9F09" # from Apple systemOrange dark mode
light-primary-color: "#B6B6C1" # light gray (icons on left menu)
primary-background-color: "#2c2c2e" # systemGray5 dark mode
secondary-background-color: rgba(25, 25, 25, 0.7)
divider-color: "#98989d" # from Apple systemGray dark mode
accent-color: rgba(255, 159, 9, 1)
app-header-background-color: rgba(0, 0, 0, 0.5)
app-header-text-color: rgba(255, 255, 255, 1)
# Text
primary-font-family: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', 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)"
primary-text-color: "#FFF"
secondary-text-color: "#d3d3d3"
text-primary-color: "#FFF"
disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
text-dark-color: "#FFF"
# Sidebar Menu
sidebar-background-color: var(--primary-background-color)
sidebar-icon-color: var(--light-primary-color)
sidebar-text-color: "#F1F1F1"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "#FFF"
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
# States and Badges
state-icon-color: "#FFF"
state-icon-active-color: rgba(255, 214, 10, 1)
paper-item-icon-active-color: rgba(255, 214, 10, 1)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: "#FFF"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode
paper-slider-secondary-color: var(--paper-slider-knob-color)
paper-slider-container-color: rgba(255, 255, 255, 0.5)
paper-slider-font-color: "#000"
ha-slider-background: none !important
# Labels
label-badge-background-color: "#23232E"
label-badge-text-color: "#F1F1F1"
label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode
# Cards
card-background-color: var(--secondary-background-color) # Unused entities table background
paper-listbox-background-color: var(--primary-background-color)
ha-card-border-radius: 20px
ha-card-background: rgba(10, 10, 10, 0.4)
paper-card-background-color: var(--ha-card-background)
code-editor-background-color: var(--disabled-text-color)
# Toggles
paper-toggle-button-checked-button-color: "#484848"
paper-toggle-button-checked-bar-color: "#484848"
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
# Table row
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
# Switches
switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode
switch-checked-button-color: "#FFF"
# Other
paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info
paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself)
more-info-header-background: rgba(25, 25, 25, 0.5)
lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
app-header-background-color: rgba(155, 155, 155, 0.8)
markdown-code-background-color: "#464646"
# Custom
mcg-title-letter-spacing: .15em
mini-media-player-base-color: white
mini-media-player-icon-color: white
# mini-media-player-artwork-opacity: 0.7 # causing some bug
yourname:
### Main Interface Colors ###
lovelace-background: 'center / cover no-repeat url("/local/backgrounds/yourname.jpg") fixed'
app-header-background-color: "#141A32"
card-background-color: var(--primary-background-color)
primary-color: "#007AFF"
light-primary-color: "#4DA3FF"
primary-background-color: var(--app-header-background-color)
secondary-background-color: "#000000"
divider-color: "#3B4C8B"
markdown-code-background-color: "#1E2747"
### Text ###
primary-text-color: "#FFE4B5"
secondary-text-color: var(--light-primary-color)
text-primary-color: var(--primary-text-color)
disabled-text-color: "#4F5F78"
### Sidebar Menu ###
sidebar-icon-color: "#4F6B95"
sidebar-text-color: "#CBD5E4"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: var(--light-primary-color)
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
### States and Badges ###
state-icon-color: var(--primary-color)
state-icon-active-color: "#FBCD41"
state-icon-unavailable-color: var(--disabled-text-color)
### Sliders ###
paper-slider-knob-color: var(--primary-color)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
### Labels ###
label-badge-background-color: var(--markdown-code-background-color)
label-badge-text-color: var(--primary-text-color)
label-badge-red: var(--divider-color)
label-badge-yellow: "#DCA304"
### Cards ###
ha-card-border-radius: '15px'
paper-card-header-color: var(--primary-text-color)
ha-card-background: "rgba(0, 0, 0, 0.6)"
paper-card-background-color: var(--ha-card-background)
paper-listbox-background-color: var(--primary-background-color)
### Toggles ###
paper-toggle-button-checked-button-color: "#FCFCFC"
paper-toggle-button-checked-bar-color: var(--light-primary-color)
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: "#303F79"
### Table row ###
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--primary-background-color)
data-table-background-color: var(--primary-background-color)
### Switches ###
switch-unchecked-button-color: var(--divider-color)
switch-unchecked-track-color: var(--divider-color)
### Nastaveni barev mini prehravac
mini-media-player-button-color: rgba(0, 255, 255, 0.25)
mini-media-player-media-cover-info-color: orange
mini-media-player-overlay-base-color: orange
mini-media-player-overlay-accent-color: red
mini-media-player-background-opacity: 1
mini-media-player-artwork-opacity: 1
mini-media-player-progress-height: 15px
mini-media-player-name-font-weight: 500
mini-media-player-icon-color: --mini-media-player-base-color, var(--paper-item-icon-color, #FF4500)
mini-media-player-overlay-color: rgba(0,0,0,0.3)
mini-media-player-overlay-color-stop: 25%
mini-media-player-scale: 1
card-mod-theme: yourname
# Header
header-height: 0px # Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
paper-tabs$: |
/* Uncomment this for header on the bottom. You're 2/3 there. */
#selectionBar {
bottom: unset !important;
}
.: |
/* This moves the header up. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: transparent !important;
color: #A9A9A9 !important;
}
/* We're still going to need a way to see that we're in edit mode. */
app-header.edit-mode {
padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: #D2691E !important;
}
paper-tab[aria-selected=true] > ha-icon {
color: #FF8C00 !important;
}
paper-tab[aria-selected=true] {
color: #D2691E !important;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
/* This hides the title. */
[main-title] {
display: none;
}
/* This hides the app-toolbar in edit mode. */
app-toolbar.edit-mode {
height: 0;
}
/* This moves the edit mode buttons back in. */
app-toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
app-toolbar.edit-mode > ha-button-menu {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* This adds a bit more padding, mainly for unused entities. */
app-header.edit-mode > div {
padding-left: 5px;
}
/* Uncomment this for header on the bottom. You're 3/3 there. */
app-header {
top: calc(101vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
fixed
yourname:
### Main Interface Colors ###
lovelace-background: 'center / cover no-repeat url("/local/backgrounds/yourname.jpg") fixed'
app-header-background-color: "#141A32"
card-background-color: var(--primary-background-color)
primary-color: "#007AFF"
light-primary-color: "#4DA3FF"
primary-background-color: var(--app-header-background-color)
secondary-background-color: "#000000"
divider-color: "#3B4C8B"
markdown-code-background-color: "#1E2747"
### Text ###
primary-text-color: "#FFE4B5"
secondary-text-color: var(--light-primary-color)
text-primary-color: var(--primary-text-color)
disabled-text-color: "#4F5F78"
### Sidebar Menu ###
sidebar-icon-color: "#4F6B95"
sidebar-text-color: "#CBD5E4"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: var(--light-primary-color)
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
### States and Badges ###
state-icon-color: var(--primary-color)
state-icon-active-color: "#FBCD41"
state-icon-unavailable-color: var(--disabled-text-color)
### Sliders ###
paper-slider-knob-color: var(--primary-color)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
### Labels ###
label-badge-background-color: var(--markdown-code-background-color)
label-badge-text-color: var(--primary-text-color)
label-badge-red: var(--divider-color)
label-badge-yellow: "#DCA304"
### Cards ###
ha-card-border-radius: '15px'
paper-card-header-color: var(--primary-text-color)
ha-card-background: "rgba(0, 0, 0, 0.6)"
paper-card-background-color: var(--ha-card-background)
paper-listbox-background-color: var(--primary-background-color)
### Toggles ###
paper-toggle-button-checked-button-color: "#FCFCFC"
paper-toggle-button-checked-bar-color: var(--light-primary-color)
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: "#303F79"
### Table row ###
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--primary-background-color)
data-table-background-color: var(--primary-background-color)
### Switches ###
switch-unchecked-button-color: var(--divider-color)
switch-unchecked-track-color: var(--divider-color)
### Nastaveni barev mini prehravac
mini-media-player-button-color: rgba(0, 255, 255, 0.25)
mini-media-player-media-cover-info-color: orange
mini-media-player-overlay-base-color: orange
mini-media-player-overlay-accent-color: red
mini-media-player-background-opacity: 1
mini-media-player-artwork-opacity: 1
mini-media-player-progress-height: 15px
mini-media-player-name-font-weight: 500
mini-media-player-icon-color: --mini-media-player-base-color, var(--paper-item-icon-color, #FF4500)
mini-media-player-overlay-color: rgba(0,0,0,0.3)
mini-media-player-overlay-color-stop: 25%
mini-media-player-scale: 1
card-mod-theme: yourname
# Header
header-height: 0px # Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
paper-tabs$: |
/* Uncomment this for header on the bottom. You're 2/3 there. */
#selectionBar {
bottom: unset !important;
}
ha-app-layout$: |
#contentContainer {
padding-top: 0px;
}
.: |
ha-tabs {
height: var(--header-height);
}
app-header {
--header-height: 48px;
}
/* This moves the header up. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: transparent !important;
color: #A9A9A9 !important;
}
/* We're still going to need a way to see that we're in edit mode. */
app-header.edit-mode {
padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: #D2691E !important;
}
paper-tab[aria-selected=true] > ha-icon {
color: #FF8C00 !important;
}
paper-tab[aria-selected=true] {
color: #D2691E !important;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
/* This hides the title. */
[main-title] {
display: none;
}
/* This hides the app-toolbar in edit mode. */
app-toolbar.edit-mode {
height: 0;
}
/* This moves the edit mode buttons back in. */
app-toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
app-toolbar.edit-mode > ha-button-menu {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* This adds a bit more padding, mainly for unused entities. */
app-header.edit-mode > div {
padding-left: 5px;
}
/* Uncomment this for header on the bottom. You're 3/3 there. */
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
Iām lazy and havenāt gotten around to updating the docs.
Thank you the header has moved well down. Another problem is scrolling down when switching tabs. Drag up on the touch screen or the mouse on the monitor to move the tabs up, but switch to another tab again to jump down.
After refreshing the page. Bottom
After refreshing the page. Upper part
After switching to another screen
Upper part
More screens. Example of a development tool
Answering my own post just in case anyone else wants to add the time in the new built in compact header
card-mod-root-yaml: |
ha-tabs$: |
.: |
/* Styles for not mobile */
@media (orientation: landscape) {
ha-tabs::after {
font-size: 20px;
content: "{{ states('sensor.time_formatted') }}";
text-transform: capitalize;
white-space: pre;
}
}
2 Likes