Sure. Can you help list out all of the features? Hereās a starting one:
- Update header on the bottom code, so it actually works
All the features of custom header are listed here in the tabs āmain config, buttons, tabs, exceptions configā.
Do you want me to put them into the cookbook or just list the ones Iāve found solutions for here in the thread?
All of the ones with the code should be added to the card-mod wiki.
Okay, itās 2am here so I will try to add some PRās in the wikiās cookbok starting tomorrow. Thanks again for all the help!
Thank you @KTibow for your patience and your advices!
At the end I obtained the menu in the bottom!
1 Like
What happens with the content if you scroll down on pages with content that exceeds the view? Does the bottom part stay behind the header, making it partly invisible/inaccessible?
Or does it sit above the header, regardless of how long page is?
That is great. I tried to re-create this (with the help of KTibow) but that kept coming back as an issue. Also, can you make the header higher/taller but keep the paddings? Perhaps this caused the issue I was having. The header was raised, but below it became empty and the cards were staying behind it.
Looked liked this whatever we tried back then:
Can you share your theme.yaml? Iām interested to try this again. I have my own solution now with an own bottom header by using sticky button cards, but itās nice to have different alternatives to test!
Sure, here it isā¦
card-mod-theme: slate
header-height: 0px
card-mod-root-yaml: |
ha-app-layout$: |
#contentContainer {
padding-top: 0 !important;
}
ha-tabs$: |
#selectionBar {
border-bottom: 0 !important;
height: 53px !important;
border-block-start: 2px solid var(--paper-tabs-selection-bar-color, var(--paper-yellow-a100)) !important;
}
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);
--header-height: 65px !important;
}
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);
}
app-toolbar.edit-mode {
height: 0;
}
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;
}
app-header.edit-mode > div {
padding-left: 5px;
}
ha-tabs {
height: var(--header-height);
--paper-tabs-selection-bar-color: var(--button-card-background-color-on) !important;
color: var(--app-header-text-color) !important;
}
paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
color: var(--button-card-background-color-on) !important;
}
/* This hides the help button, menu button and title */
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
ha-menu-button {
display: none !important;
}
paper-tab {
padding-right: 10px !important;
padding-left: 10px !important;
}
app-header {
top: calc(100vh - 65px) !important;
bottom: 0 !important;
transform: unset !important;
}
1 Like
Thanks! Did you perhaps also find a way to hide certain tabs? I have 7 tabs, but only want to show 5 of them on the header. I couldnāt find a way to achieve that.
I have only those tabs to show, the others are in a separate folder.
how would that work? Ive tried it like this:
but I am not seen 
or are you referring to Markdown card - Home Assistant ?
If this is a Markdown variable, can we then also use it in themes (and maybe elsewhere)?
Hi there,
Is it possible to increase the size of the header bar icons ?
thanks
Is it possible to do that?
Iāll bookmark your post. In the meantime, could you not bump your own post?
1 Like
How big do you want them?
Whouhaa thatās a good questionā¦ I donāt know, I need to test.
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.
This is one of a few edits that I have just made over at the theme cookbook to help other custom-header refugees with the examples that KTibow helped me with for my config. Check it out, maybe some of the other stuff I added there can be useful to you.
(@KTibow, please sanity check, I may have been too verbose or not accurate in some of my descriptions or examples because I worked backwards from what functionality I got rather than actually understanding everything in the way you do)
1 Like
Iāve also provided the example of how to do that from my config in the theme cookbook
Is the visible option a new feature of HA 117? Iām still running HA 116.4.
Canāt update to HA117 till they have a revert/fix/solution of this markdown card issue.
