Been trying to get my old headers (top + bottom) back, but without succes
Iām trying to accomplish a top header containing my messages (i used vertical marguee with CH for that in the old days)
another header at the bottomā¦
see
Tried with this code, although i dont understand it completely
The bottom bar is at the bottom, but when using phone, it floats in the middle of the screen, and my top bar is gone too
Any help would be appreciated a lot !
That made the bar transparent, now i removed Custom Header and used the yaml from the wiki. The bar is now not transparent anymore. What line can I modify to get it back?
Not sure if someone else mentioned this, but you can sorta get it to work this way. If you look at the example below, all you have to add to your original theme is card-mod-theme to your ānewā theme that just handles the compact header. This way, you can quickly add it to all your existing themes and reuse the code without re-typing it.
compact-header_1:
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 shifts the unused portion of the header up. */
app-toolbar:not([class="edit-mode"]) {
margin-top: -64px;
z-index: 1;
}
/* 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 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;
}
That does not seem to work. I use a customized āclearā theme:
clear_custom:
# Background image
#lovelace-background: 'center / cover no-repeat
# Colors
text-color: '#636B75' # Grey text
text-medium-color: '#8c96a5' # Medium grey text
text-light-color: '#BAC0C6' # Light grey text
accent-color: '#00a1ff' # Blue
background-color: '#F7F8F9' # Light grey background
background-color-2: '#F4F5F6' # Light grey background
background-card-color: 'rgba(255,255,255,0.90)' # White background
border-color: '#E8E8E8' # Light grey border
# Header
primary-color: 'var(--text-color)' # Background
text-primary-color: '#FFF' # Text
# Left Menu
paper-listbox-background-color: 'var(--background-color)' # Background
# UI
paper-card-header-color: 'var(--text-color)' # Title in settings
primary-background-color: 'var(--background-color)' # Background color (also title background in left menu)
# Card
paper-card-background-color: 'var(--background-card-color)' # Background
dark-primary-color: 'var(--text-color)'
primary-text-color: 'var(--text-color)'
paper-listbox-color: 'var(--text-color)'
light-primary-color: 'var(--text-light-color)'
secondary-text-color: 'var(--text-medium-color)'
disabled-text-color: 'var(--text-light-color)'
paper-dialog-button-color: 'var(--text-color)'
secondary-background-color: 'var(--background-color-2)' # Background more info title
ha-card-border-radius: "15px"
#ha-card-background: 'var(--background-card-color)'
# Icons
paper-item-icon-color: 'var(--text-light-color)' # Off
paper-item-icon-active-color: 'var(--accent-color)' # On
# Switches
switch-checked-button-color: '#FFF' # Knob On
switch-unchecked-button-color: '#FFF' # Knob Off
switch-checked-track-color: '#0077FF' # Background On
switch-unchecked-track-color: 'var(--disabled-text-color)' # Background Off
# Slider
paper-slider-active-color: 'var(--accent-color)' # Line On
paper-slider-container-color: '#e5e7ea' # Line Off
paper-slider-knob-color: 'var(--text-light-color)' # Knob On
paper-slider-knob-start-color: 'var(--text-light-color)' # Knob Off
# Shadows
ha-card-box-shadow: 'inset 0px 0px 0px 1px var(--border-color)'
# HACS
hacs-badge-color: 'var(--accent-color)' # New Badge
hacs-status-installed: 'var(--text-color)' # Installed Icon
hacs-status-pending-restart: 'var(--text-light-color)' # Restart Icon
hacs-status-pending-update: 'var(--accent-color)' # Update Icon
#CUSTOM SP
lovelace-background: 'center / cover no-repeat url("/local/images/achtergrond/huis_dag.jpg") fixed'
tuin-background: 'center / cover no-repeat url("/local/images/achtergrond/tuin_dag.jpg") fixed'
huis-background: 'center / cover no-repeat url("/local/images/achtergrond/huis_dag.jpg") fixed'
card-mod-theme: clear_custom
# Header
#primary-color: 'rgba(10, 10, 10, 0.5)'
app-header-background-color: 'rgba(0, 0, 0, 0.0)'
app-header-text-color: 'rgba(255, 255, 255, 1)'
# Header
card-mod-theme: compact-header
In compact_header_theme.yaml:
compact-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 spraak"] {
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;
}
Thanks for that. I was actually wondering that.
If I define a variable in the card_mod theme will that override the main theme?
I was hoping that card-mod theme styling would have this functionality but itās certainly not documented to enable that. So if I get it working I might do a PR for the wikiā¦
No, it only works for card-mod stuff, you canāt set anything else like primary-color. You can set a variable using card-mod-card though. Also wikis donāt use PRs, check the wiki, thereās a new page for how to do it.
I am having a hard time trying to work out how to convert my old popup-card styles using card-mod v2 and themes. They all worked fine using older versions but moving to 2.0 has removed all the styles.
I am calling the pop-ups using the basic more-info replacement action, but no stylings seem to be applied to the pop-up cards, which I am wondering is because they are in a vertical stack.
How I am calling the pop-ups, where the template action for the button is āmore-infoā:
A snippet of code for the popup is below. I have tried using a class in some cards and embedding inline in others to test them out, but nothing seems to work! Can someone please advise the best way to get full transparently for the more-info pop-up card with a round border, and make all the cards inside transparent except the buttons? I have this style throughout my full theme so ideally embedding it in the theme would be perfect
Ok Im a complete idiot. Turns out I had the wrong resource url for an older version of card mod! Can now see styles working again so Iāll play around with it
