In your theme. Everything is explained here: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes
You can make your own new theme or add this to an theme you are allready using.
2 Likes
Thanks, i just found it out by struggeling a bit :), but that page you linked is clear.
I just started 2 months ago with HA, the last couple of weeks i was trying to make a nice UI. I used CH to hide my header, had placed an Picture Elements Card in panelmode with the custom sidebar and my floorplan. I liked the look but CH wasnāt supported anymore and also the sidebar took up some space on my 10āā tablet.
I took the Compact Header from the The Cookbook and made some changes. This forum is helping me a lot so maybe someone else also can use this. I just started so maybe some thing donāt make sense at all but itās working for me.
I changed
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;
To
padding-top: 0px !important;
It didnāt made my header go to the bottom, but it did move up my background behind my transparant header.
I added width and height to ha-button-menu as below. The overflow menu is now just outside my screen, but i can still click it. So itās still work but it canāt be seen.
/* Bring edit UI overflow menu back in */
ha-button-menu {
top: 0;
right: 0;
z-index: 2;
width: var(--mdc-icon-size, 15px);
height: var(--mdc-icon-size, 15px);
position: absolute;
/*Uncomment this out to hide the overflow menu
display: none;
*/
}
Same for the hamburger menu in the left top corner. Placed this one a bit higher, just out of the screen.
/* Bring sidebar button back in */
ha-menu-button {
z-index: 2;
top: -10px;
Result:
1 Like
Thereās multiple things you need to uncomment and change to make the header go to the bottom. Try undoing all of your previous changes, copy and pasting the whole thing, and trying again.
I understand but thatās not what i want. For me this is perfect cause my card/background is placed under the header.
Sorry I didnāt read the whole post. Thatās a really interesting way of doing that!
is there a possibility in adding header_text like in custom_header? If yes how can I do that using this mod?
Something like
paper-tabs::before {
content: "insert text here";
}
Indent as needed and add to theme
can we add jinja into the text? {{ }} ?
Yeah, keep it quoted though.
great now thanksā¦ btw the code need to be embeded inside the default.yaml on themes right? Thanks again for the asssist
Just add it to the custom header code
Heem Iām kind of lost? Since the custom header is gone. Where should I add it? Try on default.yaml and it doesnt workā¦
Because it gets added to the custom header. Post your theme file and Iāll help you troubleshoot.
compact-header:
card-mod-theme: compact-header
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 menu button back down. */
app-toolbar:not([class="edit-mode"]) ha-button-menu {
margin-top: 110px
}
/* 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 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;
}
paper-tabs::before {
content: "insert text here";
}
Try to insert this into default.yaml but it doesnā t seems to work.
1 Like
You are right the text appearā¦ However I used to have the text appear below the title. Is this possible? Again thank you for all the assist
What do you mean? Can you provide a MS Paint mockup?
Also quick question on your themes there are microphone icons on the header right side. What mode is that?
I enabled Almond, check out the docs for Home Assistant.