I dont belive it! How simple it was!
One more beer from me 
Now almost everything is like Custom header from Mayker!
If I dont bother you, can you look at this print screen:
#2:
paper-tab {
padding: 0 !important;
}
#1: 60 -> 48?
app-header {
top: calc(100vh - 48px) !important;
bottom: 0 !important;
transform: unset !important;
}
Thank you Hmmbob for your reply!
I tried with top:calc(100vh - 48px)!important but the menu is too much in the bottom, and I canāt scroll the page.
Ah too bad. I was suggesting that as that was the same behavior I saw before I scaled that one down. And your css looked very familiar to me 
That was the problem, but can you point me how to move the icons higher?
Can you clarify and repost your theme file?
Now the menu is okay, but only when I want to scroll the page, it goes down and I canāt see the whole page.
I will atach 2 images, first one is when I click the menu item and the second one when I scroll down.
card-mod-theme: slate
header-height: 48px
card-mod-root-yaml: |
ha-app-layout$: |
#contentContainer {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.: |
app-header {
transform: translate3d(0px, -65px, 0px);
}
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;
}
app-header {
top: calc(100vh - 65px) !important;
bottom: 0 !important;
transform: unset !important;
}
Has something changed with this mod card?
My center buttons with picture entity card in it, is now bigger than the rest, although the code is the sameā¦ (this used to work, but something changed and they arent equal size anymore
The code:
- card:
name: Alarm
type: button
show_label: false
icon: mdi:shield-off
tap_action: !include popup/alarm.yaml
style: |
ha-card {
height: 128px;
text-align: center;
}
type: 'custom:mod-card'
- entity: person.stijn
image: /local/stijn.jpg
tap_action: !include popup/persoon1.yaml
style: |
ha-card {
height: 128px;
}
type: picture-entity
- card:
name: Verlichting
type: button
icon: mdi:lightbulb-outline
tap_action: !include popup/verlichting.yaml
style: |
ha-card {
height: 128px;
}
type: 'custom:mod-card'This part isnāt working anymore. I use a picture elements card with floorplan. Now there is more space between my card en the top menu. So on my tablet the lowest part of my floorplan isnāt visible without scrolling down. Anyone an solution?
Can you clarify? You can always add a gap-card to the bottom.
Donāt post in the theme section, post in the regular area.
You can try adding a gap-card.
sorry didnt see that, thx for the headup, reposted in correct topic
Sorry for the cross-post, but perhaps there is a global way to fix the new issue that Iām having with how markdown styling works. I need to set the height of the markdown card globally (or better yet, completely remove it and use the one I already have set up).
With HA 117 thereās a new constructed stylesheet option that sets height to 100% of all my markdown cards. For the time being I fixed it by using !important everywhere, which now overrides the new variable. Though this is very hacky and doesnāt look nice when reloading (starts spaced then applies the height). I really hope some has a decent global solution for this.
Is there a way to set this in theme.yaml so that stylesheet gets ignored completely, so I have markdown syling as I had?
I wonder why HA is so keen on changing how markdown styling works every few releases
would there be any way to alter the option dots? have it show something else than the 3 dots (like with below screen of the Custom Header) and, control which option is visible?
would really love to be able to customize that, as the current core way is so limited on the one hand, and shows all options I dont need in yaml mode on the other.
really hurts looking back to this realizing this is no longer supportedā¦
Yeah, you can! Once you enter edit mode, though, the element will be recreated and itāll stop working. Look in the history of the wiki, and search for box-shadow. Thatāll get you started.
Hi all. Iām getting close to making sense of the post custom header world and the below is working pretty well for me, but there are still a couple things I canāt figure out.
The solution to remove the mic is apparently to disable almond, but I never enabled it. I donāt have it anywhere in my config or integrations. What am I missing, how do I get rid of that mic button?
The example Iām using below to remove the overflow menu from only mobile works okay but relies on the orientation of the device. I have some kiosk tablets where I want to keep the header but turn the overflow menu into a clock. This raises 2 issues.
a) Can I target only the kiosk tablets (in landscape mode) via their user agent or logged in user but not affect my desktop clients?
b) Is it possible to make clicking the clock bring up the overflow menu items as was possible in custom-header?
Hereās what Iām running to get rid of superflous buttons under .117 with the now built in compact header if anyone wants similar:
card-mod-theme: "midnight"
card-mod-root-yaml: |
ha-app-layout$: |
.: |
/* 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;
}
}
Thanks in advance for any ideas. I donāt really understand most of whatās going on here, but have gotten close via frankensteining stuff together.
user variable in JinjaKendell, you are our savior.
@user (username) {
? also unsure on what the ::before on the overflow menu. I assume you mean something like the below, but how do I get it to replace the overflow menu while still keeping the menu functional?
/* This adds the time */
ha-tabs::before{
display: inline-block;
font-size: 12px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }} - {{states.weather.dark_sky.attributes.temperature }}Ā°";