Using Jinja2 templates
Ok but you are never allowed to update your themes again because having to re add all my custom stuff everytime you improve your themes would drive me around the bend. Deleting the single column stuff everytime is enough. Lol
Themes werenāt designed for this. Someone needs to add a mod that lets you define jinja2 variables that themes can use
1 Like
Agreed. Someone please take over Custom Header. Thatās how I do all this now.
And, yes, I realize I am being a whiney little baby man right now.
Regarding the survey ā¦ in my case what I use is the mobile, I would like a header with only the side menu button 
Okay, so making a new survey. Check all buttons you still want around on mobile devices. (On desktop it wonāt change)
- None at all
- Sidebar button
- Voice button
- Overflow button (think: button you press that opens a menu so you can edit the dashboard)
0 voters
This is pretty much what I was getting at yesterday.
Iām probably only going to add to the confusion, and Iām sorry in advance for that :-).
But what I want is:
- On mobile, where horizontal screen real-estate is so very precious: none at all
- On desktop, where I have plenty of horizontal and do all my editing: overflow button
Thank you for any/all efforts!!!
Itās okay, I just updated it. Sorry, didnāt realize it was unclear.
3 Likes
Ah. Now you have a great learning opportunity!
https://www.w3schools.com/css/css3_mediaqueries.asp
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
2 Likes
LOL, ugh! But also, thanks! Forgot I could use media queries.
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ā¦