Any ideas on how to use :host to style the sidebar? I think it should be possible if I can stack it.
Hmmā¦ my existing themeoveride.js with the border radius isnāt working now either and I hadnāt noticed because the themes seem to have that variable generally nowā¦ was wondering why the corners were more roundedā¦
Is there an alternate way to do this?
I added the wall of text at the bottom of the wiki for compact header to my theme. Looks pretty goodā¦
However 2 issuesā¦ with compact-header, I could use an image as the background for the header. Am I still able to do that?
Second, can I increase the space between the hamburger menu and the view tabs?
Second, adjust the padding-left here:
First, change
.edit-mode, app-header, app-toolbar {
background-color: var(--primary-background-color) !important;
color: var(--primary-text-color) !important;
}
to
.edit-mode, app-header, app-toolbar {
background-color: transparent !important;
color: var(--primary-text-color) !important;
}
app-header {
background: url(myimg) !important;
}Line 354 is as I am using from the wiki.
Tried:
.edit-mode, app-header, app-toolbar {
background-color: transparent !important;
color: var(--primary-text-color) !important;
}
/*Uncomment this if you want the header on the bottom
app-header {
background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-blue-red.jpg')"
top: calc(100vh - 48px) !important;
}
*/
No difference to above screenshot.
also
.edit-mode, app-header, app-toolbar {
background-color: transparent !important;
color: var(--primary-text-color) !important;
}
/*Uncomment this if you want the header on the bottom
app-header {
background: url('/hacsfiles/themes/ios-themes/homekit-bg-blue-red.jpg')
top: calc(100vh - 48px) !important;
}
*/
same result
Oh shit!! itās commented out. duh!
You should probably remove the top part if you donāt want it at the bottom too. Let me know how it goes.
okā¦ so using:
.edit-mode, app-header, app-toolbar {
background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-blue-red.jpg')" !important;
color: var(--primary-text-color) !important;
}
I see
So the views need to be shifted right some.
Changed to here:
paper-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
margin-left: 65px !important;
and this now:
Will that cause any issues I wonder?
Can I change the icon color so it stays white and only underlines the selected tab?
1 Like
It shouldnāt cause any issues to do that.
The highlighting is built in to paper-tabs, the underlining was manually added. It already
I donāt see which setting to change to change the icon color or underline color.
Also not sure my image is working correctly. It looks different to how it did when I used Custom Headerā¦
Iām a CSS newb but Iāve been trying to figure out how to put a border around a badge-card.
I tried the code below thinking it would be applied to the ācurrent elementā which is the badge-card. However, I obviously have no clue what Iām doing. Any help would be appreciated.
style: |
.{
border-top-width: 2;
border-top-width: solid;
border-right-width: 2;
border-right-width: solid;
border-left-width: 7px;
border-left-style: solid;
border-top-width: 7px;
border-top-style: solid;
border-right-width: 7px;
border-right-style: solid;
border-bottom-width: 7px;
border-bottom-style: solid;
}
Change the . to ha-card
hi, would you be so kind as to share the settings of the second view?
I used the settings at the bottom of the wiki and set margin-left to 65px as shown. You can check here for my full themeā¦
Itās the ios-dark-mode-blue-red oneā¦
1 Like
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:
card-mod-theme: personal
card-mod-root-yaml: |
paper-tabs:
$: |
.not-visible {
display: none;
}
/*Uncomment this if you want the header on the bottom
#selectionBar {
bottom: unset !important;
}*/
"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: 64px !important;
margin-right: 32px !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;
}
Hello everyone
How can I fix this situation ?
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.
<badge-card style="border-left-width: 7px;border-left-style: solid;border-top-width: 7px;border-top-style: solid;border-right-width: 7px;border-right-style: solid;border-bottom-width: 7px;border-bottom-style: solid;">
Thanks again for your help.
Are you trying to style badges? Most cards are moddable with ha-card.
You can increase the margin-right. So I can help you, are you on mobile?
I need an odd number of votes so that the overflow button isnāt 50%. If you havenāt voted yet, please vote.
1 Like
Thank you, everything worked out.
Added here:
paper-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
margin-left: 48px !important;
margin-right: 30px !important;
}
1 Like
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;
}
34 Likes
You sir are AWESOME !!