{% if user == 'Kendell' %}
ha-tabs {
display: none;
}
{% endif %}
b) target ha-button-menu::before, but I havenāt tested this yet
Thanks. I have changed this as follows to avoid the icons moving down and 6px gives enough space between the icons for me.
paper-tab {
padding-left: 6px !important;
padding-right: 6px !important;
}
Have you setup the menu at the bottom?
Please share you code!
Can you check your grammar?
KTibow fixed an example a few posts up that moves the header to the bottom. I tried it and it worked for me on .117 (just not for what I wanted to do).
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;
}
Crap, thanks, Iām an idiot. Based on this, It looked like the key was almond: and since I didnāt expect it would be anything else, I didnāt bother to look further than that.
I tried the clock snippet without any conditionals both with ::before and ::after, and with both paper-tabs and ha-tabs, and moved it around in the config a bit but I actually couldnāt get it to display anythingā¦ Hereās one of the attempts, any idea?
card-mod-theme: "midnight"
card-mod-root-yaml: |
/* This adds the time */
ha-tabs::after {
display: inline-block;
font-size: 12px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }} - {{states.weather.dark_sky.attributes.temperature }}Ā°";
ha-app-layout$: |
.: |
/* This hides the help button, menu button and title */
ha-menu-button {
display: none !important;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-right"] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-left"] {
display: none;
}
}
Can you post your theme file? I know itās mean, but this is the way for me to quickly help you and everyone.
Not mean at all! I just wanted to save you some scrolling. Here it is in itās entirety, warts and all.
---
#
# Midnight Theme
#
midnight:
accent-color: "#E45E65"
card-background-color: "var(--primary-background-color)"
dark-primary-color: "var(--accent-color)"
disabled-text-color: "#7F848E"
divider-color: "rgba(0, 0, 0, .12)"
google-blue-500: "#4285f4"
google-green-500: "#39E949"
google-red-500: "#E45E65"
google-yellow-500: "#f4b400"
# ha-card-background: "#434954"
label-badge-background-color: "#2E333A"
label-badge-blue: "#039be5"
label-badge-border-color: "green"
label-badge-green: "#0DA035"
label-badge-grey: "var(--paper-grey-500)"
label-badge-red: "var(--accent-color)"
label-badge-text-color: "var(--primary-text-color)"
label-badge-yellow: "#f4b400"
light-primary-color: "var(--accent-color)"
markdown-code-background-color: "var(--paper-listbox-background-color)"
paper-card-header-color: "var(--accent-color)"
# paper-dialog-background-color: "#434954"
paper-grey-200: "#414A59"
paper-grey-50: "var(--primary-text-color)"
paper-grey-500: "#9e9e9e"
paper-item-icon_-_color: "green"
paper-item-icon-active-color: "#F9C536"
paper-item-icon-color: "var(--primary-text-color)"
paper-item-selected_-_background-color: "#434954"
# paper-listbox-background-color: "#2E333A"
paper-listbox-color: "var(--primary-color)"
paper-slider-active-color: "var(--accent-color)"
paper-slider-container-color: "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat"
paper-slider-disabled-active-color: "var(--disabled-text-color)"
paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
paper-slider-knob-color: "var(--accent-color)"
paper-slider-knob-start-color: "var(--accent-color)"
paper-slider-pin-color: "var(--accent-color)"
paper-slider-secondary-color: "var(--secondary-background-color)"
paper-tabs-selection-bar-color: "green"
paper-toggle-button-checked-bar-color: "var(--accent-color)"
paper-toggle-button-checked-button-color: "var(--accent-color)"
paper-toggle-button-checked-ink-color: "var(--accent-color)"
paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
# primary-background-color: "#383C45"
primary-color: "#5294E2"
# primary-text-color: "#FFFFFF"
secondary-background-color: "#383C45"
secondary-text-color: "#5294E2"
sidebar-background-color: "var(--paper-listbox-background-color)"
sidebar-icon-color: "rgba(255, 255, 255, 0.70)"
sidebar-selected-icon-color: "var(--primary-color)"
sidebar-selected-text-color: "var(--primary-text-color)"
sidebar-text-color: "var(--primary-text-color)"
slider-bar-color: "var(--disabled-text-color)"
slider-color: "var(--primary-color)"
slider-secondary-color: "var(--light-primary-color)"
st-mode-active-background: "var(--dark-primary-color)"
st-mode-background: "var(--primary-background-color)"
state-icon-active-color: "#FDD835"
state-icon-color: "#44739e"
state-icon-unavailable-color: "var(--disabled-text-color)"
switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
switch-unchecked-button-color: "var(--disabled-text-color)"
switch-unchecked-color: "var(--disabled-text-color)"
switch-unchecked-track-color: "var(--disabled-text-color)"
table-row-alternative-background-color: "#3E424B"
table-row-background-color: "#353840"
text-primary-color: "var(--primary-text-color)"
toggle-button-color: "var(--primary-color)"
# Sean's additions
ha-card-border-radius: "10px"
# ha-card-box-shadow: "4px 4px 4px #2E333A"
ha-card-box-shadow: "4px 4px 4px #1B1E1F"
# ha-card-header-color: "#FFFFFF"
primary-background-color: "#181A1B"
paper-dialog-background-color: "#1f2223"
ha-card-background: "#1f2223"
paper-listbox-background-color: "#1f2223"
primary-text-color: "#E8E8E8"
ha-card-header-color: "#FFFFFF"
header-height: 48px
app-header-background-color: "#181A1B"
card-mod-theme: "midnight"
card-mod-root-yaml: |
/* This adds the time */
ha-tabs::after {
display: inline-block;
font-size: 12px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }} ";
ha-app-layout$: |
.: |
/* This hides the help button, menu button and title */
ha-menu-button {
display: none !important;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-right"] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-left"] {
display: none;
}
}
#- {{states.weather.dark_sky.attributes.temperature }}Ā°
# @media (orientation: portrait) {
# ha-menu-button {
# display: none !important;
# }
# }
Check this out
---
#
# Midnight Theme
#
midnight:
accent-color: "#E45E65"
card-background-color: "var(--primary-background-color)"
dark-primary-color: "var(--accent-color)"
disabled-text-color: "#7F848E"
divider-color: "rgba(0, 0, 0, .12)"
google-blue-500: "#4285f4"
google-green-500: "#39E949"
google-red-500: "#E45E65"
google-yellow-500: "#f4b400"
# ha-card-background: "#434954"
label-badge-background-color: "#2E333A"
label-badge-blue: "#039be5"
label-badge-border-color: "green"
label-badge-green: "#0DA035"
label-badge-grey: "var(--paper-grey-500)"
label-badge-red: "var(--accent-color)"
label-badge-text-color: "var(--primary-text-color)"
label-badge-yellow: "#f4b400"
light-primary-color: "var(--accent-color)"
markdown-code-background-color: "var(--paper-listbox-background-color)"
paper-card-header-color: "var(--accent-color)"
# paper-dialog-background-color: "#434954"
paper-grey-200: "#414A59"
paper-grey-50: "var(--primary-text-color)"
paper-grey-500: "#9e9e9e"
paper-item-icon_-_color: "green"
paper-item-icon-active-color: "#F9C536"
paper-item-icon-color: "var(--primary-text-color)"
paper-item-selected_-_background-color: "#434954"
# paper-listbox-background-color: "#2E333A"
paper-listbox-color: "var(--primary-color)"
paper-slider-active-color: "var(--accent-color)"
paper-slider-container-color: "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat"
paper-slider-disabled-active-color: "var(--disabled-text-color)"
paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
paper-slider-knob-color: "var(--accent-color)"
paper-slider-knob-start-color: "var(--accent-color)"
paper-slider-pin-color: "var(--accent-color)"
paper-slider-secondary-color: "var(--secondary-background-color)"
paper-tabs-selection-bar-color: "green"
paper-toggle-button-checked-bar-color: "var(--accent-color)"
paper-toggle-button-checked-button-color: "var(--accent-color)"
paper-toggle-button-checked-ink-color: "var(--accent-color)"
paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
# primary-background-color: "#383C45"
primary-color: "#5294E2"
# primary-text-color: "#FFFFFF"
secondary-background-color: "#383C45"
secondary-text-color: "#5294E2"
sidebar-background-color: "var(--paper-listbox-background-color)"
sidebar-icon-color: "rgba(255, 255, 255, 0.70)"
sidebar-selected-icon-color: "var(--primary-color)"
sidebar-selected-text-color: "var(--primary-text-color)"
sidebar-text-color: "var(--primary-text-color)"
slider-bar-color: "var(--disabled-text-color)"
slider-color: "var(--primary-color)"
slider-secondary-color: "var(--light-primary-color)"
st-mode-active-background: "var(--dark-primary-color)"
st-mode-background: "var(--primary-background-color)"
state-icon-active-color: "#FDD835"
state-icon-color: "#44739e"
state-icon-unavailable-color: "var(--disabled-text-color)"
switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
switch-unchecked-button-color: "var(--disabled-text-color)"
switch-unchecked-color: "var(--disabled-text-color)"
switch-unchecked-track-color: "var(--disabled-text-color)"
table-row-alternative-background-color: "#3E424B"
table-row-background-color: "#353840"
text-primary-color: "var(--primary-text-color)"
toggle-button-color: "var(--primary-color)"
# Sean's additions
ha-card-border-radius: "10px"
# ha-card-box-shadow: "4px 4px 4px #2E333A"
ha-card-box-shadow: "4px 4px 4px #1B1E1F"
# ha-card-header-color: "#FFFFFF"
primary-background-color: "#181A1B"
paper-dialog-background-color: "#1f2223"
ha-card-background: "#1f2223"
paper-listbox-background-color: "#1f2223"
primary-text-color: "#E8E8E8"
ha-card-header-color: "#FFFFFF"
header-height: 48px
app-header-background-color: "#181A1B"
card-mod-theme: "midnight"
card-mod-root-yaml: |
.: |
/* This hides the help button, menu button and title */
ha-menu-button {
display: none !important;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-right"] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-left"] {
display: none;
}
}
/* This adds the time */
ha-button-menu::before {
font-size: 12px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }}";
position: absolute;
top: 16px;
right: 48px;
}
#- {{states.weather.dark_sky.attributes.temperature }}Ā°
# @media (orientation: portrait) {
# ha-menu-button {
# display: none !important;
# }
# }
Thanks so much. That did it. I wish I was as good as you at this. Iām taking a CSS class, but just looking at the way it works in hass, I donāt think it will be enough.
So, Iāve recreated all the functionality I had in custom-header except one thing. In custom-header, I could make the clock go in the location of the overflow menu, but still have the menu activate when I clicked on the clock. It would be the cherry on top if I could make the ā¦ for the overflow menu disappear but the clickable area for the menu remainā¦ Any idea if itās possible? This is what I have now when viewing as user kiosk:
and here is the latest of the themeā¦
Also do you have a buy a coffee link?
PS, nice clippy!
---
#
# Midnight Theme
#
midnight:
accent-color: "#E45E65"
card-background-color: "var(--primary-background-color)"
dark-primary-color: "var(--accent-color)"
disabled-text-color: "#7F848E"
divider-color: "rgba(0, 0, 0, .12)"
google-blue-500: "#4285f4"
google-green-500: "#39E949"
google-red-500: "#E45E65"
google-yellow-500: "#f4b400"
# ha-card-background: "#434954"
label-badge-background-color: "#2E333A"
label-badge-blue: "#039be5"
label-badge-border-color: "green"
label-badge-green: "#0DA035"
label-badge-grey: "var(--paper-grey-500)"
label-badge-red: "var(--accent-color)"
label-badge-text-color: "var(--primary-text-color)"
label-badge-yellow: "#f4b400"
light-primary-color: "var(--accent-color)"
markdown-code-background-color: "var(--paper-listbox-background-color)"
paper-card-header-color: "var(--accent-color)"
# paper-dialog-background-color: "#434954"
paper-grey-200: "#414A59"
paper-grey-50: "var(--primary-text-color)"
paper-grey-500: "#9e9e9e"
paper-item-icon_-_color: "green"
paper-item-icon-active-color: "#F9C536"
paper-item-icon-color: "var(--primary-text-color)"
paper-item-selected_-_background-color: "#434954"
# paper-listbox-background-color: "#2E333A"
paper-listbox-color: "var(--primary-color)"
paper-slider-active-color: "var(--accent-color)"
paper-slider-container-color: "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat"
paper-slider-disabled-active-color: "var(--disabled-text-color)"
paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
paper-slider-knob-color: "var(--accent-color)"
paper-slider-knob-start-color: "var(--accent-color)"
paper-slider-pin-color: "var(--accent-color)"
paper-slider-secondary-color: "var(--secondary-background-color)"
paper-tabs-selection-bar-color: "green"
paper-toggle-button-checked-bar-color: "var(--accent-color)"
paper-toggle-button-checked-button-color: "var(--accent-color)"
paper-toggle-button-checked-ink-color: "var(--accent-color)"
paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
# primary-background-color: "#383C45"
primary-color: "#5294E2"
# primary-text-color: "#FFFFFF"
secondary-background-color: "#383C45"
secondary-text-color: "#5294E2"
sidebar-background-color: "var(--paper-listbox-background-color)"
sidebar-icon-color: "rgba(255, 255, 255, 0.70)"
sidebar-selected-icon-color: "var(--primary-color)"
sidebar-selected-text-color: "var(--primary-text-color)"
sidebar-text-color: "var(--primary-text-color)"
slider-bar-color: "var(--disabled-text-color)"
slider-color: "var(--primary-color)"
slider-secondary-color: "var(--light-primary-color)"
st-mode-active-background: "var(--dark-primary-color)"
st-mode-background: "var(--primary-background-color)"
state-icon-active-color: "#FDD835"
state-icon-color: "#44739e"
state-icon-unavailable-color: "var(--disabled-text-color)"
switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
switch-unchecked-button-color: "var(--disabled-text-color)"
switch-unchecked-color: "var(--disabled-text-color)"
switch-unchecked-track-color: "var(--disabled-text-color)"
table-row-alternative-background-color: "#3E424B"
table-row-background-color: "#353840"
text-primary-color: "var(--primary-text-color)"
toggle-button-color: "var(--primary-color)"
# Sean's additions
ha-card-border-radius: "10px"
# ha-card-box-shadow: "4px 4px 4px #2E333A"
ha-card-box-shadow: "4px 4px 4px #1B1E1F"
# ha-card-header-color: "#FFFFFF"
primary-background-color: "#181A1B"
paper-dialog-background-color: "#1f2223"
ha-card-background: "#1f2223"
paper-listbox-background-color: "#1f2223"
primary-text-color: "#E8E8E8"
ha-card-header-color: "#FFFFFF"
header-height: 48px
app-header-background-color: "#181A1B"
card-mod-theme: "midnight"
card-mod-root-yaml: |
.: |
/* This hides the help button, menu button and title */
ha-menu-button {
display: none !important;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-right"] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-left"] {
display: none;
}
}
/* This adds the time */
{% if user == 'kiosk' %}
ha-button-menu::after {
font-size: 22px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }}";
position: absolute;
top: 14px;
right: 0px;
}
{% endif %}
#- {{states.weather.dark_sky.attributes.temperature }}Ā°
# @media (orientation: portrait) {
# ha-menu-button {
# display: none !important;
# }
# }
Check this out:
span to ha-button-menu.
Iām not a coffee guy, clippy.js.
Were you able to make it work? I can help compile a theme file if you want.
So far Iāve only tried like this. It did make the menu disappear, but itās no longer functional (menu items no longer appear when I tap around in that area. I was going to try the āhackyā way and switching between before and after (got distracted with a new wall tablet now), but would be grateful for any hints you may have.
---
#
# Midnight Theme
#
midnight:
accent-color: "#E45E65"
card-background-color: "var(--primary-background-color)"
dark-primary-color: "var(--accent-color)"
disabled-text-color: "#7F848E"
divider-color: "rgba(0, 0, 0, .12)"
google-blue-500: "#4285f4"
google-green-500: "#39E949"
google-red-500: "#E45E65"
google-yellow-500: "#f4b400"
# ha-card-background: "#434954"
label-badge-background-color: "#2E333A"
label-badge-blue: "#039be5"
label-badge-border-color: "green"
label-badge-green: "#0DA035"
label-badge-grey: "var(--paper-grey-500)"
label-badge-red: "var(--accent-color)"
label-badge-text-color: "var(--primary-text-color)"
label-badge-yellow: "#f4b400"
light-primary-color: "var(--accent-color)"
markdown-code-background-color: "var(--paper-listbox-background-color)"
paper-card-header-color: "var(--accent-color)"
# paper-dialog-background-color: "#434954"
paper-grey-200: "#414A59"
paper-grey-50: "var(--primary-text-color)"
paper-grey-500: "#9e9e9e"
paper-item-icon_-_color: "green"
paper-item-icon-active-color: "#F9C536"
paper-item-icon-color: "var(--primary-text-color)"
paper-item-selected_-_background-color: "#434954"
# paper-listbox-background-color: "#2E333A"
paper-listbox-color: "var(--primary-color)"
paper-slider-active-color: "var(--accent-color)"
paper-slider-container-color: "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat"
paper-slider-disabled-active-color: "var(--disabled-text-color)"
paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
paper-slider-knob-color: "var(--accent-color)"
paper-slider-knob-start-color: "var(--accent-color)"
paper-slider-pin-color: "var(--accent-color)"
paper-slider-secondary-color: "var(--secondary-background-color)"
paper-tabs-selection-bar-color: "green"
paper-toggle-button-checked-bar-color: "var(--accent-color)"
paper-toggle-button-checked-button-color: "var(--accent-color)"
paper-toggle-button-checked-ink-color: "var(--accent-color)"
paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
# primary-background-color: "#383C45"
primary-color: "#5294E2"
# primary-text-color: "#FFFFFF"
secondary-background-color: "#383C45"
secondary-text-color: "#5294E2"
sidebar-background-color: "var(--paper-listbox-background-color)"
sidebar-icon-color: "rgba(255, 255, 255, 0.70)"
sidebar-selected-icon-color: "var(--primary-color)"
sidebar-selected-text-color: "var(--primary-text-color)"
sidebar-text-color: "var(--primary-text-color)"
slider-bar-color: "var(--disabled-text-color)"
slider-color: "var(--primary-color)"
slider-secondary-color: "var(--light-primary-color)"
st-mode-active-background: "var(--dark-primary-color)"
st-mode-background: "var(--primary-background-color)"
state-icon-active-color: "#FDD835"
state-icon-color: "#44739e"
state-icon-unavailable-color: "var(--disabled-text-color)"
switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
switch-unchecked-button-color: "var(--disabled-text-color)"
switch-unchecked-color: "var(--disabled-text-color)"
switch-unchecked-track-color: "var(--disabled-text-color)"
table-row-alternative-background-color: "#3E424B"
table-row-background-color: "#353840"
text-primary-color: "var(--primary-text-color)"
toggle-button-color: "var(--primary-color)"
# Sean's additions
ha-card-border-radius: "10px"
# ha-card-box-shadow: "4px 4px 4px #2E333A"
ha-card-box-shadow: "4px 4px 4px #1B1E1F"
# ha-card-header-color: "#FFFFFF"
primary-background-color: "#181A1B"
paper-dialog-background-color: "#1f2223"
ha-card-background: "#1f2223"
paper-listbox-background-color: "#1f2223"
primary-text-color: "#E8E8E8"
ha-card-header-color: "#FFFFFF"
header-height: 48px
app-header-background-color: "#181A1B"
card-mod-theme: "midnight"
card-mod-root-yaml: |
.: |
/* This hides the help button, menu button and title */
ha-menu-button {
display: none !important;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-right"] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-left"] {
display: none;
}
}
/* This adds the time */
{% if user == 'kiosk' %}
ha-button-menu { visibility: hidden; }
ha-button-menu::after {
visibility: visible;
font-size: 22px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }}";
position: absolute;
top: 14px;
right: 0px;
}
{% endif %}
this makes me feel REALLY good to complete this 
---
#
# Midnight Theme
#
midnight:
accent-color: "#E45E65"
card-background-color: "var(--primary-background-color)"
dark-primary-color: "var(--accent-color)"
disabled-text-color: "#7F848E"
divider-color: "rgba(0, 0, 0, .12)"
google-blue-500: "#4285f4"
google-green-500: "#39E949"
google-red-500: "#E45E65"
google-yellow-500: "#f4b400"
# ha-card-background: "#434954"
label-badge-background-color: "#2E333A"
label-badge-blue: "#039be5"
label-badge-border-color: "green"
label-badge-green: "#0DA035"
label-badge-grey: "var(--paper-grey-500)"
label-badge-red: "var(--accent-color)"
label-badge-text-color: "var(--primary-text-color)"
label-badge-yellow: "#f4b400"
light-primary-color: "var(--accent-color)"
markdown-code-background-color: "var(--paper-listbox-background-color)"
paper-card-header-color: "var(--accent-color)"
# paper-dialog-background-color: "#434954"
paper-grey-200: "#414A59"
paper-grey-50: "var(--primary-text-color)"
paper-grey-500: "#9e9e9e"
paper-item-icon_-_color: "green"
paper-item-icon-active-color: "#F9C536"
paper-item-icon-color: "var(--primary-text-color)"
paper-item-selected_-_background-color: "#434954"
# paper-listbox-background-color: "#2E333A"
paper-listbox-color: "var(--primary-color)"
paper-slider-active-color: "var(--accent-color)"
paper-slider-container-color: "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat"
paper-slider-disabled-active-color: "var(--disabled-text-color)"
paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
paper-slider-knob-color: "var(--accent-color)"
paper-slider-knob-start-color: "var(--accent-color)"
paper-slider-pin-color: "var(--accent-color)"
paper-slider-secondary-color: "var(--secondary-background-color)"
paper-tabs-selection-bar-color: "green"
paper-toggle-button-checked-bar-color: "var(--accent-color)"
paper-toggle-button-checked-button-color: "var(--accent-color)"
paper-toggle-button-checked-ink-color: "var(--accent-color)"
paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
# primary-background-color: "#383C45"
primary-color: "#5294E2"
# primary-text-color: "#FFFFFF"
secondary-background-color: "#383C45"
secondary-text-color: "#5294E2"
sidebar-background-color: "var(--paper-listbox-background-color)"
sidebar-icon-color: "rgba(255, 255, 255, 0.70)"
sidebar-selected-icon-color: "var(--primary-color)"
sidebar-selected-text-color: "var(--primary-text-color)"
sidebar-text-color: "var(--primary-text-color)"
slider-bar-color: "var(--disabled-text-color)"
slider-color: "var(--primary-color)"
slider-secondary-color: "var(--light-primary-color)"
st-mode-active-background: "var(--dark-primary-color)"
st-mode-background: "var(--primary-background-color)"
state-icon-active-color: "#FDD835"
state-icon-color: "#44739e"
state-icon-unavailable-color: "var(--disabled-text-color)"
switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
switch-unchecked-button-color: "var(--disabled-text-color)"
switch-unchecked-color: "var(--disabled-text-color)"
switch-unchecked-track-color: "var(--disabled-text-color)"
table-row-alternative-background-color: "#3E424B"
table-row-background-color: "#353840"
text-primary-color: "var(--primary-text-color)"
toggle-button-color: "var(--primary-color)"
# Sean's additions
ha-card-border-radius: "10px"
# ha-card-box-shadow: "4px 4px 4px #2E333A"
ha-card-box-shadow: "4px 4px 4px #1B1E1F"
# ha-card-header-color: "#FFFFFF"
primary-background-color: "#181A1B"
paper-dialog-background-color: "#1f2223"
ha-card-background: "#1f2223"
paper-listbox-background-color: "#1f2223"
primary-text-color: "#E8E8E8"
ha-card-header-color: "#FFFFFF"
header-height: 48px
app-header-background-color: "#181A1B"
card-mod-theme: "midnight"
card-mod-root-yaml: |
.: |
/* This hides the help button, menu button and title */
ha-menu-button {
display: none !important;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-right"] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-left"] {
display: none;
}
}
/* This adds the time */
{% if user != 'kiosk' %}
mwc-icon-button[slot="trigger"] > ha-svg-icon {
display: none;
}
mwc-icon-button[slot="trigger"]::after {
font-size: 22px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }}";
position: absolute;
top: 14px;
right: 0px;
}
{% endif %}
Wow, Iām glad Iāve got you on the case because I donāt think I ever would have made it to there! Unfortunately I think we are pushing the limits of the browsers now. This one makes the overflow button popup, then get briefly replaced by the code for the jinja template for the time, and then the overflow button returnsā¦ This is similar to what the previous versions that successfully put the clocks would do. Iād see the template flash briefly before the clock appeared, but with this one the ā¦ button reappears instead of the clock.
What OS or browser are you using? Problems not experienced by me.
I tried chrome macos, fully kiosk on fireos, and firefox on macos, all latest versions. Weird, maybe something got lost in copy/paste? Iāve tried the reload theme service a lot and tried clearing cache. What browser are you running? Hereās what I have:
---
#
# Midnight Theme
#
midnight:
accent-color: "#E45E65"
card-background-color: "var(--primary-background-color)"
dark-primary-color: "var(--accent-color)"
disabled-text-color: "#7F848E"
divider-color: "rgba(0, 0, 0, .12)"
google-blue-500: "#4285f4"
google-green-500: "#39E949"
google-red-500: "#E45E65"
google-yellow-500: "#f4b400"
# ha-card-background: "#434954"
label-badge-background-color: "#2E333A"
label-badge-blue: "#039be5"
label-badge-border-color: "green"
label-badge-green: "#0DA035"
label-badge-grey: "var(--paper-grey-500)"
label-badge-red: "var(--accent-color)"
label-badge-text-color: "var(--primary-text-color)"
label-badge-yellow: "#f4b400"
light-primary-color: "var(--accent-color)"
markdown-code-background-color: "var(--paper-listbox-background-color)"
paper-card-header-color: "var(--accent-color)"
# paper-dialog-background-color: "#434954"
paper-grey-200: "#414A59"
paper-grey-50: "var(--primary-text-color)"
paper-grey-500: "#9e9e9e"
paper-item-icon_-_color: "green"
paper-item-icon-active-color: "#F9C536"
paper-item-icon-color: "var(--primary-text-color)"
paper-item-selected_-_background-color: "#434954"
# paper-listbox-background-color: "#2E333A"
paper-listbox-color: "var(--primary-color)"
paper-slider-active-color: "var(--accent-color)"
paper-slider-container-color: "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat"
paper-slider-disabled-active-color: "var(--disabled-text-color)"
paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
paper-slider-knob-color: "var(--accent-color)"
paper-slider-knob-start-color: "var(--accent-color)"
paper-slider-pin-color: "var(--accent-color)"
paper-slider-secondary-color: "var(--secondary-background-color)"
paper-tabs-selection-bar-color: "green"
paper-toggle-button-checked-bar-color: "var(--accent-color)"
paper-toggle-button-checked-button-color: "var(--accent-color)"
paper-toggle-button-checked-ink-color: "var(--accent-color)"
paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
# primary-background-color: "#383C45"
primary-color: "#5294E2"
# primary-text-color: "#FFFFFF"
secondary-background-color: "#383C45"
secondary-text-color: "#5294E2"
sidebar-background-color: "var(--paper-listbox-background-color)"
sidebar-icon-color: "rgba(255, 255, 255, 0.70)"
sidebar-selected-icon-color: "var(--primary-color)"
sidebar-selected-text-color: "var(--primary-text-color)"
sidebar-text-color: "var(--primary-text-color)"
slider-bar-color: "var(--disabled-text-color)"
slider-color: "var(--primary-color)"
slider-secondary-color: "var(--light-primary-color)"
st-mode-active-background: "var(--dark-primary-color)"
st-mode-background: "var(--primary-background-color)"
state-icon-active-color: "#FDD835"
state-icon-color: "#44739e"
state-icon-unavailable-color: "var(--disabled-text-color)"
switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
switch-unchecked-button-color: "var(--disabled-text-color)"
switch-unchecked-color: "var(--disabled-text-color)"
switch-unchecked-track-color: "var(--disabled-text-color)"
table-row-alternative-background-color: "#3E424B"
table-row-background-color: "#353840"
text-primary-color: "var(--primary-text-color)"
toggle-button-color: "var(--primary-color)"
# Sean's additions
ha-card-border-radius: "10px"
# ha-card-box-shadow: "4px 4px 4px #2E333A"
ha-card-box-shadow: "4px 4px 4px #1B1E1F"
# ha-card-header-color: "#FFFFFF"
primary-background-color: "#181A1B"
paper-dialog-background-color: "#1f2223"
ha-card-background: "#1f2223"
paper-listbox-background-color: "#1f2223"
primary-text-color: "#E8E8E8"
ha-card-header-color: "#FFFFFF"
header-height: 48px
app-header-background-color: "#181A1B"
card-mod-theme: "midnight"
card-mod-root-yaml: |
.: |
/* This hides the help button, menu button and title */
ha-menu-button {
display: none !important;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-right"] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-left"] {
display: none;
}
}
/* This adds the time */
{% if user != 'kiosk' %}
mwc-icon-button[slot="trigger"] > ha-svg-icon {
display: none;
}
mwc-icon-button[slot="trigger"]::before {
font-size: 22px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }}";
position: absolute;
top: 14px;
right: 0px;
}
{% endif %}
Oh yeah I tried before after after didnāt work.
Oh, I changed == 'kiosk' to != 'kiosk'. Change that. And switch back to after.
Ah yes, that would do it ;-), I should have caught that. Forest for the trees. It works now!
So, you have done it! You have proven that every feature of custom header can be reproduced with enough effort with card-mod and the builtin features! Well done, I think many custom-header users will be happy once they figure it out. Thank you for sticking with me on that!
Iām thinking it might be good to prepare feature by feature examples for the next folks to attempt this. Would you like me to make some drafts of that in the theme cookbook? Theyād probably need a sanity check but at least I could do some of the grunt work.