-
Notifications
You must be signed in to change notification settings - Fork 169
Theme cookbook
Note: If you mix a non--yaml
chunk with a -yaml
chunk, substitute like this:
card-mod-root: |
app-toolbar {
display: none;
}
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
.: |
app-toolbar {
display: none;
}
no-top-header:
card-mod-theme: no-top-header
card-mod-root: |
app-toolbar {
display: none;
}
With only one view
With multiple views
no-header:
card-mod-theme: no-header
card-mod-root: |
app-header {
display: none;
}
transparent-header:
card-mod-theme: transparent-header
card-mod-root: |
ha-app-layout {
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTR-Hllcy5CR5U90nMlW8bZA_VM7w4VlP2lZg&usqp=CAU");
}
app-header {
background: rgba(0,0,0,0.5) !important;
}
app-toolbar {
background: none !important;
}
Note: app-header
and app-toolbar
overlap, so if you make both of them transparent, things will look weird. Better to make one have no background.
Note2: the --lovelace-background
variable applies a background to the view, but the header is outside of the view, so you can't use that to get a background behind it - unless you also move it 🤔
tabs-to-edge:
card-mod-theme: tabs-to-edge
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
battery-rows:
card-mod-theme: battery-rows
card-mod-row: |
:host {
display: block;
{% set battery = state_attr(config.entity, 'battery') or state_attr(config.entity, 'battery_level') %}
{% if battery %}
background: linear-gradient(to right, rgba(0,255,0,0.5), {{battery}}%, white {{battery}}%);
{% endif %}
}
custom-secondary:
card-mod-theme: custom-secondary
card-mod-row-yaml: |
hui-generic-entity-row$: |
{% set battery = state_attr(config.entity, 'battery') or state_attr(config.entity, 'battery_level') %}
{% if battery %}
.info.text-content::after {
content: "{{battery}}%";
display: block;
color: var(--secondary-text-color);
}
{% endif %}
.info.text-content
will select only rows that don't already have a secondary-info row.
fan-spinning:
card-mod-theme: fan-spinning
card-mod-card: |
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
ha-icon[data-domain="fan"][data-state="on"] {
animation: spin 4s infinite linear;
}
card-mod-row-yaml: |
"*:first-child$": |
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
state-badge {
{% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
animation: spin 4s infinite linear;
{% endif %}
}
one-column:
card-mod-theme: one-column
card-mod-view: |
"hui-masonry-view$#columns" {
flex-direction: column !important;
margin: 0 auto;
max-width: 500px;
}
Card-mod themes can be used to replace much of the functionality that was previously available in the now defunct custom-header. Here are a few examples. Others are possible if you find the right CSS properties to tamper with. Hopefully these examples serve as a starting point..
This example gets rid of the menu button on the left when viewing on mobile (you can still swipe from the left to open the sidebar), and the title text.
card-mod-theme: "NAME_OF_YOUR_THEME_HERE"
card-mod-root-yaml: |
.: |
ha-menu-button {
display: none !important;
}
in Custom Header, you would have done this like (compact mode being default behavior built in now in v.117 of Home Assistant)
custom_header:
compact_mode: true
config:
menu_hide: true
This example changes the overflow menu with a clock while keeping the menu functional. You must have the time and date integration enabled and a sensor called sensor.time
enabled for this to work. This is analagous to the feature from custom header
card-mod-theme: "NAME_OF_YOUR_THEME_HERE"
card-mod-root-yaml: |
.: |
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;
}
In custom header, doing the same thing would have looked like this
button_text:
menu: 'menu'
options: '{{ dayNameShort }}, {{ dayNum }} {{ monthNameShort }} {{ hours24LZ }}:{{ minutesLZ }}'
If we want, we can also make the clock conditional to a specific user. In this example we will replace the overflow menu with a clock only for the 'kiosk' user. The template conditional statement {% if user == 'USERNAME' %}
can be used to make conditional formatting for different elements of your theme specific to the logged in user.
card-mod-theme: "NAME_OF_YOUR_THEME_HERE"
card-mod-root-yaml: |
.: |
{% 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 %}
This conditional styling by user is similar to the custom header config
- conditions:
user: kiosk
This example does some changes that are applied specifically to a mobile device that's in portrait orientation. It removes the overflow menu and makes the chevrons only appear when needed.
card-mod-theme: "NAME_OF_YOUR_THEME_HERE"
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 would have been similar to (but not exactly the same as) a custom header config of:
- conditions:
template: "{{ 'iPhone' in userAgent or 'iOS' in userAgent }}"
config:
menu_hide: true
options_hide: true
chevrons: false
Below is an example of using many different of the custom header type features to create a header that is on the bottom of the screen with changes in colors and removing items like the title and some buttons. and this chunk might not be regularly updated For some reason now it's more frequently updated? Maybe more people scream at me in the card-mod thread than in the other thread.
This supports uncommenting various items to do stuff like moving it to the bottom. Scream at @KTibow over there if you want more functionality.
that was sarcastic
compact-header:
card-mod-theme: compact-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: 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;
}
/* 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;
}
*/
With only one view:
With multiple views:
In edit mode:
Other components that can replace some of custom header's functionality
Here are a few other things that can help recreate functionality from custom header.
First, Version .117 of Home Assistant makes the compact header without a title that made custom header famous the standard default behavior. So if you haven't already, you should upgrade.
The hide_tabs
functionality of Custom Header is now also standard in homeassistant with the visible:
option found in the dashboard configuration of your lovelace dashboards.
If you want to hide the header or sidebar completely, the creator of Custom Header is still supporting his Kiosk Mode addon.