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.
Are you sure card-mod is installed? What version of HA are you using? Try reloading themes and the browser?
I am using card mod from here:
I have it working for changing the layout of text in various cards.
I am running HA version 0.116.4
Thank you very much for trying to help!
Can you do this:
Do you still have the problem? You can also try rebooting HA.
I have reloaded the themes inside developer tools and also restarted Home Assistant. I have reloaded the page and also restarted the browser. I’ve tried this in google chrome and on a samsung phone. The header still looks “big” as in the screen shot above.
Odd. It’s applying just fine for me. Is card-mod loaded in the browser console?
Odd. Try reinstalling card-mod with HACS.
Maybe that could be the problem. I installed card mod “manually” by downloading it. Thanks for your patience!
Can i get some help?
I have my header like this one:
I use the theme airy, from the docs on card mod. I will attach my full confirguration at the bottom of the post.
I found on this 🔹 Card-mod - Super-charge your themes!
That I need to add the following code to my theme in order to reduce the header size
card-mod-root: |
app-toolbar {
display: none;
}
So in my theme I found this lines
app-toolbar {
background: none !important;
#display: none;#Hide top bar
}
If I remove the # I got the following result:
The result is good in regards the top bar have been reduced as i like, my issue is that I do not have the 3 dots so I can enter edit mode. The 3 dots I refere to are this ones:
What do i need to add to get those 3 dots?
This is my full theme configuration (is the airy theme just cahgned the background image).
airy:
card-mod-theme: airy
primary-color: darkgreen
ha-card-background: none
ha-card-box-shadow: none
background-image: url("/local/wood1.jpg")
disabled-text-color: gray
theme-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),# modify box shadow on the bottom and opacity
0px 5px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12)
theme-border-radius: 10px
background-1: rgba(250, 250, 250, 0.5) #last digit changes the opasity of the background everywhere
background-2: rgba(150, 150, 150, 0.6)
bg-filter: grayscale(0.5) blur(0px)
theme-red: firebrick
theme-green: forestgreen
theme-blue: deepskyblue
paper-item-icon-active-color: var(--theme-green)
ha-label-badge-title-font-size: 1em
card-mod-view-yaml: |
"*:first-child$": |
:host {
background: none !important;
display: flex !important;
}
#badges {
padding: 8px;
display: flex !important;
justify-content: start;
flex-direction: column;
}
#columns .column > * {
margin: 32px 16px;
}
card-mod-root: |
ha-app-layout {
background: var(--background-image) !important;
background-size: cover;
}
app-header {
background: var(--background-1) !important;
backdrop-filter: var(--bg-filter);
box-shadow: var(--theme-box-shadow);
}
app-toolbar {
background: none !important;
#display: none;#Hide top bar
}
card-mod-card: |
ha-card {
backdrop-filter: var(--bg-filter);
border-radius: var(--theme-border-radius);
background: var(--background-1);
box-shadow: var(--theme-box-shadow);
}
ha-card.type-entities,
ha-card.type-glance {
background: none;
backdrop-filter: none;
box-shadow: none;
}
.card-header {
text-align: center;
display: block !important;
padding: 8px;
margin-bottom: 12px;
font-variant: small-caps; #Change the font of the card header
}
.type-entities .card-header,
.type-glance .card-header {
background: var(--background-1);
backdrop-filter: var(--bg-filter);
border-radius: var(--theme-border-radius);
box-shadow: var(--theme-box-shadow);
margin-bottom: 24px;
}
.card-header hui-entities-toggle {
display: none;
}
card-mod-glance: |
:host {
display: block;
background: var(--background-1);
box-shadow: var(--theme-box-shadow);
border-radius: var(--theme-border-radius);
backdrop-filter: var(--bg-filter);
padding: 4px !important;
margin: 0 4px 12px;
width: calc(var(--glance-column-width, 20%) - 8px) !important;
/* Make icons red/green for on/off values and blue otherwise */
--paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue);
{% elif is_state(config.entity, 'on') %} var(--theme-green);
{% elif is_state(config.entity, 'open') %} var(--theme-green);
{% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
{% elif is_state(config.entity, 'off') %} var(--theme-red);
{% elif is_state(config.entity, 'closed') %} var(--theme-red);
{% elif is_state(config.entity, 'locked') %} var(--theme-red);
{% else %} var(--theme-blue); {% endif %}
}
:host(:hover) {
background: var(--background-2);
}
@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 5s infinite linear;
{% endif %}
}
card-mod-row-yaml: |
.: |
:host {
display: block;
background: var(--background-1);
box-shadow: var(--theme-box-shadow);
padding-right: 8px;
border-radius: var(--theme-border-radius);
backdrop-filter: var(--bg-filter);
margin: 0 -16px;
/* Make icons red/green for on/off values and blue otherwise */
--paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue);
{% elif is_state(config.entity, 'on') %} var(--theme-green);
{% elif is_state(config.entity, 'open') %} var(--theme-green);
{% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
{% elif is_state(config.entity, 'off') %} var(--theme-red);
{% elif is_state(config.entity, 'closed') %} var(--theme-red);
{% elif is_state(config.entity, 'locked') %} var(--theme-red);
{% else %} var(--theme-blue); {% endif %}
}
:host(:hover) {
background: var(--background-2);
}
"*:first-child$": |
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
@keyframes spin2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
state-badge {
{% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
animation: spin 5s infinite linear;
{% endif %}
}
card-mod-badge-yaml: |
.: |
:host {
display: inline-block;
background: var(--background-1);
border-radius: var(--theme-border-radius);
backdrop-filter: var(--bg-filter);
box-shadow: var(--theme-box-shadow);
padding: 8px;
/* Make badge borders red/green for binary sensors and blue otherwise */
--label-badge-blue: {% if not states(config.entity) %} var(--theme-blue);
{% elif is_state(config.entity, 'on') %} var(--theme-green);
{% elif is_state(config.entity, 'open') %} var(--theme-green);
{% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
{% elif is_state(config.entity, 'off') %} var(--theme-red);
{% elif is_state(config.entity, 'closed') %} var(--theme-red);
{% elif is_state(config.entity, 'locked') %} var(--theme-red);
{% else %} var(--theme-blue); {% endif %}
--label-badge-red: teal;
margin-bottom: 24px;
}
# Make badges have transparent background
ha-state-label-badge $ ha-label-badge $: |
.label-badge {
background: none !important;
}
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: var(--bg-filter);
background: {% if is_state(config.entityId, 'on') %}
rgba(0, 255, 0, 0.2);
{% elif is_state(config.entityId, 'off') %}
rgba(255,0,0,0.2);
{% else %}
rgba(0,0,255,0.2);
{% endif %}
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: rgba(250,250,250,0.7);
border-radius: var(--theme-border-radius);
}
ha-header-bar $: |
.mdc-top-app-bar {
background: none !important;
}
I have checked this post 🔹 Card-mod - Super-charge your themes!
But If i paste that code at the end of my actual theme I got the following result:
So I got correct the top bar with the 3 dots, but I lost my configuration on the header (transparency) and lost my background image (get a blank one)
Thanks for any help.
Hey, I’ll help you out with this. Just give me a sec, and I’ll copy the wiki stuff and edit it in to your theme.
Here’s the compact header code: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook#compact-header
airy:
card-mod-theme: airy
primary-color: darkgreen
ha-card-background: none
ha-card-box-shadow: none
background-image: url("/local/wood1.jpg")
disabled-text-color: gray
theme-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),# modify box shadow on the bottom and opacity
0px 5px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12)
theme-border-radius: 10px
background-1: rgba(250, 250, 250, 0.5) #last digit changes the opasity of the background everywhere
background-2: rgba(150, 150, 150, 0.6)
bg-filter: grayscale(0.5) blur(0px)
theme-red: firebrick
theme-green: forestgreen
theme-blue: deepskyblue
paper-item-icon-active-color: var(--theme-green)
ha-label-badge-title-font-size: 1em
card-mod-view-yaml: |
"*:first-child$": |
:host {
background: none !important;
display: flex !important;
}
#badges {
padding: 8px;
display: flex !important;
justify-content: start;
flex-direction: column;
}
#columns .column > * {
margin: 32px 16px;
}
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;
}
ha-app-layout {
background: var(--background-image) !important;
background-size: cover;
}
app-header {
background: var(--background-1) !important;
backdrop-filter: var(--bg-filter);
box-shadow: var(--theme-box-shadow);
}
app-toolbar {
background: none !important;
}
card-mod-card: |
ha-card {
backdrop-filter: var(--bg-filter);
border-radius: var(--theme-border-radius);
background: var(--background-1);
box-shadow: var(--theme-box-shadow);
}
ha-card.type-entities,
ha-card.type-glance {
background: none;
backdrop-filter: none;
box-shadow: none;
}
.card-header {
text-align: center;
display: block !important;
padding: 8px;
margin-bottom: 12px;
font-variant: small-caps; #Change the font of the card header
}
.type-entities .card-header,
.type-glance .card-header {
background: var(--background-1);
backdrop-filter: var(--bg-filter);
border-radius: var(--theme-border-radius);
box-shadow: var(--theme-box-shadow);
margin-bottom: 24px;
}
.card-header hui-entities-toggle {
display: none;
}
card-mod-glance: |
:host {
display: block;
background: var(--background-1);
box-shadow: var(--theme-box-shadow);
border-radius: var(--theme-border-radius);
backdrop-filter: var(--bg-filter);
padding: 4px !important;
margin: 0 4px 12px;
width: calc(var(--glance-column-width, 20%) - 8px) !important;
/* Make icons red/green for on/off values and blue otherwise */
--paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue);
{% elif is_state(config.entity, 'on') %} var(--theme-green);
{% elif is_state(config.entity, 'open') %} var(--theme-green);
{% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
{% elif is_state(config.entity, 'off') %} var(--theme-red);
{% elif is_state(config.entity, 'closed') %} var(--theme-red);
{% elif is_state(config.entity, 'locked') %} var(--theme-red);
{% else %} var(--theme-blue); {% endif %}
}
:host(:hover) {
background: var(--background-2);
}
@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 5s infinite linear;
{% endif %}
}
card-mod-row-yaml: |
.: |
:host {
display: block;
background: var(--background-1);
box-shadow: var(--theme-box-shadow);
padding-right: 8px;
border-radius: var(--theme-border-radius);
backdrop-filter: var(--bg-filter);
margin: 0 -16px;
/* Make icons red/green for on/off values and blue otherwise */
--paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue);
{% elif is_state(config.entity, 'on') %} var(--theme-green);
{% elif is_state(config.entity, 'open') %} var(--theme-green);
{% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
{% elif is_state(config.entity, 'off') %} var(--theme-red);
{% elif is_state(config.entity, 'closed') %} var(--theme-red);
{% elif is_state(config.entity, 'locked') %} var(--theme-red);
{% else %} var(--theme-blue); {% endif %}
}
:host(:hover) {
background: var(--background-2);
}
"*:first-child$": |
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
@keyframes spin2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
state-badge {
{% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
animation: spin 5s infinite linear;
{% endif %}
}
card-mod-badge-yaml: |
.: |
:host {
display: inline-block;
background: var(--background-1);
border-radius: var(--theme-border-radius);
backdrop-filter: var(--bg-filter);
box-shadow: var(--theme-box-shadow);
padding: 8px;
/* Make badge borders red/green for binary sensors and blue otherwise */
--label-badge-blue: {% if not states(config.entity) %} var(--theme-blue);
{% elif is_state(config.entity, 'on') %} var(--theme-green);
{% elif is_state(config.entity, 'open') %} var(--theme-green);
{% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
{% elif is_state(config.entity, 'off') %} var(--theme-red);
{% elif is_state(config.entity, 'closed') %} var(--theme-red);
{% elif is_state(config.entity, 'locked') %} var(--theme-red);
{% else %} var(--theme-blue); {% endif %}
--label-badge-red: teal;
margin-bottom: 24px;
}
# Make badges have transparent background
ha-state-label-badge $ ha-label-badge $: |
.label-badge {
background: none !important;
}
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: var(--bg-filter);
background: {% if is_state(config.entityId, 'on') %}
rgba(0, 255, 0, 0.2);
{% elif is_state(config.entityId, 'off') %}
rgba(255,0,0,0.2);
{% else %}
rgba(0,0,255,0.2);
{% endif %}
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: rgba(250,250,250,0.7);
border-radius: var(--theme-border-radius);
}
ha-header-bar $: |
.mdc-top-app-bar {
background: none !important;
}
THanks, thats a fast response.
Just if you can comment what you add, so if I need to modify another theme I know what to do?
I know it is more work, but please teach me how to fish.
Thanks again.
Edited it in.
Can anyone on HA 0.117 confirm that the code to completely disable the header still works?
card-mod-root: |
app-header {
display: none;
}
I’d like to know beforehand so I know what I can expect when 117 drops 