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?
@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.
Iām going to try to merge yours with mine on the wiki, giving that yours has comments and some shorter stuff sometimes.
after dozens of attempts I canāt, someone can tell me how to remove the 3 points on the right without the side menu button disappearing
Show config?
right now I have it like this:
card-mod-root-yaml: |
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;
}
"ha-app-layout":
$: |
#contentContainer {
padding-top: 48px !important; /*Change this to 0px if you want the header on the bottom*/
}
.: |
app-toolbar {
height: 0;
}
.edit-mode, app-header, app-toolbar {
background-color: transparent !important;
background: url('/local/fondo_negro.png') !important;
}
/*Uncomment this if you want the header on the bottom
app-header {
top: calc(100vh - 48px) !important;
}
*/
app-header.edit-mode {
border-bottom: 2px var(--primary-color) solid;
padding-bottom: 10px;
}
app-header[shadow] > ::before {
box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.3);
}
#add-view ha-svg-icon {
background-color: var(--primary-color) !important;
color: #EEE !important;
border-radius: 5px !important;
}
.edit-icon {
color: var(--primary-color) !important;
}
mwc-icon-button[label="Start conversation"] {
top: 0;
right: calc(48px * 1);
z-index: 2;
position: absolute;
}
mwc-icon-button[title="Help"] {
top: 0;
right: calc(48px * 2);
position: absolute;
z-index: 2;
}
mwc-icon-button[title="Close"] {
top: 0;
left: 0;
position: absolute;
z-index: 2;
}
mwc-icon-button#add-view {
position: fixed;
right: calc(48px * 1);
}
ha-button-menu {
top: 0;
right: 0;
z-index: 2;
margin-left: 5px;
position: absolute;
/*Uncomment this out to hide the overflow menu
display: none;
*/
}
app-toolbar > [main-title] {
display: none;
}
menu-button[style="visibility: hidden;"] {
display: none;
}
ha-menu-button {
z-index: 2;
top: 24px;
}
paper-tabs {
--paper-tabs-selection-bar-color: transparent !important;
margin-left: 65px !important;
}
paper-tab[aria-selected="true"] > ha-icon {
color: orange !important;
}
paper-tab[aria-selected="true"] {
color: var(--primary-color) !important;
}
@media (orientation: portrait) {
paper-tabs {
margin-left: 55px !important;
margin-right: 0px !important;
}
ch-header > paper-tabs,
app-header.edit-mode > * > paper-tabs {
margin-left: 10px !important;
margin-right: 10px !important;
}
}
ch-header > ha-button-menu {
top: unset;
}
ch-header > paper-tabs,
app-header.edit-mode > paper-tabs {
margin-left: 0;
}
app-toolbar a {
color: var(--primary-text-color) !important;
}
Screenshot of it not working? On mobile it should hide the sidebar button, so swipe from left to right instead.
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:
Uncomment the part that says āuncomment this out to hide the overflow menuā (yes itās called an overflow menu). As for the other one, change
.edit-mode, app-header, app-toolbar {
background-color: transparent !important;
background: url('/local/fondo_negro.png') !important;
}
to
.edit-mode, app-header, app-toolbar {
background-color: transparent !important;
background: url('/local/fondo_negro.png') !important;
color: red;
}
Change red to your color
hallelujah, thank you so much
Is there any way to add transparent background to Maykers above code?
Iāve been trying for about an hour and canāt get itā¦
Thanks
Set app-header-background-color and app-header-text-color.
Awesome thanks heaps that workedā¦ now to find a way to add my background image to it and it will be complete.
Thanks again
Can you share part of the transparent background code?
app-header-background-color
app-header-text-color
Iām confused.
Thank you
This is great and exactly what I needed to fully replace my CH setup (in addition to what was already in the wiki). Thanks!
Excuse me, Iām not sureā¦ does this part belong in the ui.lovelace.yaml as well as the ācustom_headerā entry before? I have taken your example here, but my header doesnāt change at all.
What am I doing wrong or what do I not understand correctly?
Yeah sure just add
app-header-background-color: 'rgba(0, 0, 0, 0.5)'
app-header-text-color: 'rgba(255, 255, 255, 1)'
Into your theme. This will give white icons or text with semi transparent background.
You know the way this SHOULD work would be if this was a theme called compact-header or whatever and it overrode a theme called my-original-theme
So then I could select compact-header as the theme and it would load in the my-original-theme. Then if I want to use a different theme, instead of adding loads of code to every theme I could change just that one line in the compact-header theme. This would be really useful.
I am so confused, where do I add this?
Update: Found it myself. You add it to the āthemeā.yaml.
In my case I was using dark_mint.yaml.
What I did is copy dark_mint.yaml and created a new folder ch and copied dark_mint.yamls as ch.yaml and then added the code to the start of the file. Then I went to the display that had HA on it, and chose the ch theme. It then worked like a charm. Looks exactly as when I used the Customer Header addon