First of all, sorry for touching the eggs so much ā¦
I canāt remove the chevrons and the three dots when I try the side menu button disappears, letās see if someone can help me, this is how I have it now:
Thanks for the reply. The badge-card does not have an āha-cardā element (I guess element is the correct terminology to use, or should I say it is not derived from the āha-cardā style?) So, when replacing the ā.ā with āha-cardā, it still doesnāt work.
When I inspect the badge-card I see:
element
.cards
element (inherited from hui-view)
:host (inherited from hui-root)
:host (inherited from home-assistant-main)
element (inherited from home-assistant)
ā¦
What I was trying to do, and given my limited understanding of CSS I donāt if this is possible, is to end up with whatās shown below. I thought the ā.ā selector applied the style to the current element, which in the case would be the badge-card.
mayker
(maykar (pronounced "maker" with a southern accent))
146
Put together a quick compact-header config for this in case anyone is interested. Itās just the standard compact header look, wonāt affect edit mode (aside from shifting cards, will look for a fix), and should keep backgrounds and cards in the view unaffected. Commented as much as possible for any adjustments that would be needed.
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;
}
Do you know if there is a way to have your config above and still have the Home Assistant dark mode get applied?
A few of us are unable to get this going. Once you set a theme, the dark mode no longer gets applied. We even created a theme called ādefaultā but it only shows the light mode colors.
Nice! How well does it do on mobile? Do the top of cards get cut off in edit mode?
mayker
(maykar (pronounced "maker" with a southern accent))
150
@stephack This is literally the first card-mod config Iāve made, so I donāt really know how to help with that.
@KTibow Just noticed that they do, but it should be easy enough to fix that since you can check for both edit mode and mobile. Otherwise, it works as it should on mobile.
Edit: Looks like that edit mode fix might not be as easy as I thought since the element that is causing the shift isnāt contained in the element that indicates edit mode. Iāll look into it more when I can.
There is no swipe, I donāt want it either, I just want to remove the 3 points on the right and if it is not too much to ask, change the color of the views that are not active.
I would like to have it as before:
