Can you please share a code that is already uncommented?
Iām not sure what the get rid of
So i have a code that does put it to the bottom?
Are you using a translator? Anyway, Iāll help you just because, even though itās a small task:
compact-header:
card-mod-theme: compact-header
# Header
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
#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: 0px !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;
}
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 conversation"] {
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;
}
card-mod-view-yaml: |
hui-masonry-view$: |
mwc-fab[title="Add Card"] {
bottom: 96px !important;
}
Hope this worksā¦
1 Like
ok its at the bottom, thank you for that, but its not good yet
some stuff on my phone, is hidden behind the bottom header
I want to hide 2 tabs from that header too
and the top header should be visible so i can add messages in there
Sorry i keep asking help, but CH was so much easier 
and yes i used a translator, which said to get rid of the # but that wasnt enough
Can you send a screenshot? You can already hide tabs based on users:
Can you give an example of what kind of messages you want?
When i hide the tab from users, they wont be visible anymore, i just dont want them to show in the headerā¦ they do have to able to be reached
For the messages, with CH i had the space to show following messages:
- Current Temperature
- When washing machine is ready
- Welcome messages
It was using a vertical marquee
What should be the toggle between being hidden and unhidden?
I can try to whip something up to keep the header not compact but at the bottom.
- Yes, having the header at the bottom without it being compact is a good idea
- No, having the header at the bottom without it being compact isnāt a good idea
0
voters
Hiding them as @KTibow mentions using Visability only hides them in the header. They are still reachable. For example, I have views for my Roku remotes. I hide the tab (at the top in my case) but a long press on a button setup for on/off of the TV will take me to the remote.
I canāt find Card-Mod on HACS?
Under the frontend section, show a screenshot.
Is it called card-tools?
Thatās a separate thing. Itās card-mod.
Sorry Its says āGeen repositoriesā (no repositories)
Can you send a screenshot?
It will say that if searching for it and it is already installed
Sorry Itās in dutch. Tried both in intergrations and frontend. Iām using a couple of hacs plugins already.
Does it show up in the list of already installed stuff in frontend?
No. I canāt find anything anymore. It has something to do with my repositories?
Do you see any notices on the home page of HACS?