Well you can use user. And you can use now. You can also still do stuff based on tabs.
So now we have Custom Header in 0.117.x
Any idea how to change the header to use an image?
I tried this:
ios-dark-mode-blue-red-mod:
card-mod-root-yaml: |
.: |
.edit-mode, app-header, app-toolbar {
background: url('/hacsfiles/themes/ios-themes-mod/homekit-bg-blue-red.jpg') !important;
}
header-height: 48px
but seems to be ignored
Can you access that URL in your browser? Try setting both background and background-image.
no difference.
The same URL is the background for the card and is working
What happens if you use the inspector? Does it show anything being overrided?
Can you use the top right part to select app-header and see what it shows? You might need to remove another part that sets the background.
I don’t understand what you mean. I did right click and inspect on the header to get the above…
In this part:
Scroll up/down until you can see app-header, and select it. Then send a screenshot. Alternatively, you can post your full theme YAML.
#
# iOS Dark Mode Theme - blue-red-mod
#
ios-dark-mode-blue-red-mod:
card-mod-root-yaml: |
.: |
.edit-mode, app-header, app-toolbar {
background: url('/hacsfiles/themes/ios-themes-mod/homekit-bg-blue-red.jpg') !important;
background-image: url('/hacsfiles/themes/ios-themes-mod/homekit-bg-blue-red.jpg') !important;
}
header-height: 48px
# Global
background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes-mod/homekit-bg-blue-red.jpg')"
lovelace-background: var(--background-image)
primary-color: "#ff9f09" # from Apple systemOrange dark mode
light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
primary-background-color: "#2c2c2e" # systemGray5 dark mode
secondary-background-color: rgba(25, 25, 25, 0.9)
divider-color: "#98989d" # from Apple systemGray dark mode
accent-color: rgba(255, 159, 9, 1)
# Text
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" # (light: systemGray5 from iOS light mode, dark: XXX)
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) # or make light icons yellow when active: rgba(255, 214, 10, 1)
state-icon-unavailable-color: var(--disabled-text-color)
paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
# 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: 10px
ha-card-background: rgba(10, 10, 10, 0.4)
paper-card-background-color: var(--ha-card-background)
# 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(63, 36, 75, 0.8)
markdown-code-background-color: "#464646"
code-editor-background-color: var(--disabled-text-color)
# Custom
mcg-title-letter-spacing: .15em
mini-media-player-base-color: white
mini-media-player-icon-color: white
Full theme easier lol…
If it helps anyone else, I figured out how to get some of this working under 0.117.0b1 (which has a form of CH built-in)
ios-dark-mode-blue-red:
card-mod-theme: ios-dark-mode-blue-red
card-mod-root-yaml: |
ha-app-layout$: |
paper-tabs$: |
.: |
/* 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: 112px !important;
}
/* This corrects the sizing of the view. */
#view {
min-height: calc(100vh - 48px) !important;
}
/* Color selected tabs */
paper-tab[aria-selected="true"] > ha-icon {
color: var(--state-icon-active-color) !important;
}
# Global
---- rest of theme ----
Basically I had to strip out a lot or the icons wouldn’t appear at the top at all. If I removed any more the colored selected page icon wouldn’t appear yellow.
Just asking, should I bother upgrading to 0.117 beta, just to make a new custom header config?
- Yeah, do it! I like my UI compact in edit mode, and my tabs
var(--primary-color)when selected. - Nah, the built-in one’s just fine with me.
0 voters
well I’d like to get my header image working again…
Mind voting again, just updated some settings?
You’re sure you set card-mod-theme?
1 Like
oh shit! No. damnit!
Something has changed in the alarm panel card in the 0.117 beta. This:
style:
mwc-button:
$: |
button {
--mdc-theme-primary: var(--primary-text-color) !important;
}
Used to set the text and border colour of the buttons. Now it only changes the text.
I’ve been fiddling with the inspector and trying different options for about an hour now, without success. Anyone got a hint on how to change the button border colour?
EDIT: fixed by adding this to my theme (no card mod required):
mdc-button-outline-color: 'var(--secondary-text-color)'
1 Like
I’m deciding to start the compact header config from scratch, so that it works for 0.117. If you want to help me out, you can join my Atom teletype here:
atom://teletype/portal/95b5cf30-755f-4ca2-8050-bb3bb97e6829
This link might work:
https://tinyurl.com/y3cjwvw7
You can download Atom here:
Are you running HA 0.117? Test this config out, and help send feedback.
# This is MIT license because why not
# Hey there! Thanks for helping out in my Teletype!
# Things to do:
# Let's add a bottom padding to the edit mode header. ✅
# Let's hide the main title. ✅
# Let's make the plus color the same as the background. ✅
# Let's hide the help button. ✅
# Let's change the color of selected tabs. ✅
# Let's set the app-toolbar height to 0 in edit mode. ✅
# Let's move the buttons down in edit mode. ✅
compact-header:
card-mod-theme: compact-header
header-height: 48px
card-mod-root-yaml: |
.: |
/* Let's get going! */
/* We still need this, because we need to compact edit mode. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: var(--primary-background-color) !important;
color: var(--primary-text-color) !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: var(--primary-color) !important;
}
paper-tab[aria-selected=true] {
color: var(--primary-color) !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;
}
I previously used custom header but I have removed that resource from Home Assistant, but I can still not make the header compact.
This is my dashboard:
views:
- panel: true
theme: noctis_slider_c
title: Home
background: '#272E38'
badges: []
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_slider_c
badges: []
cards: []
And this is my theme:
noctis_slider_c:
# 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: '#FFFFFF'
accent-medium-color: 'var(--accent-color)'
# Background
background-color: '#272E38'
primary-background-color: 'var(--background-color)'
background-color-2: '#ffffff'
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: 'rgba(38,55,73,0)' #'linear-gradient(145deg, #273246, #2e3b53)'
ha-card-box-shadow: "none"
ha-card-border-radius: "5px"
border-color: 'none'
# Icons
paper-item-icon-color: '#808080'
paper-item-icon-active-color: '#FF4081'
# 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: '#808080'
switch-checked-button-color: 'var(--accent-color)'
switch-unchecked-track-color: '#808080'
switch-checked-track-color: '#ffffff'
# 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)'
card-mod-theme: noctis_slider_c
# 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(--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;
bottom: 0 !important;
transform: unset !important;
}
hui-masonry-view {
padding-bottom: 60px !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;
}
# Badges and columns
card-mod-view-yaml: |
hui-masonry-view$: |
/*Uncomment this if you want the header on the bottom
mwc-fab[title="Add Card"] {
bottom: 96px !important;
}
*/
The theme is stored in a file called themes.yaml and I reference it in configuration.yaml. I am able to choose the theme noctis_slider_c but while it changes all colors etc. the header remains the same.
