HA isn’t stripping anything, the developer tools template tool is just interpreting Jinja (no YAML there). When you involve YAML you need to adhere to YAML rules as well.
but how come these identical templates work perfectly as icon_templates in a template sensor then?
(Not trying to start a theoretical discussion per se here, don’t get me wrong, my intensions are good 
)
Fair point, it does seem that HA strips them in that case. Sorry for the assumption, as that is how YAML operates. Though I still don’t want to strip the white space, there are some intricacies that are interesting with this.
If you make a markdown card for instance, it renders the newline if you have a tab.
Here’s with the tab:
And without:
yes, Markdown is the exception in Ha, behaving differently on jinja templates. Solution is always adding a newline there Also, markdown is the only core card excepting jinja templating.
in my setup, adding something in the exceptional case is easier than taking things out in the ‘normal’.
So it seems like CH is on par with Jinja being used in the frontend 
Ha, cool, yes.
Forgive me for (ab)using this thread for another quest I am seeking some help for. Since this is about custom headers I figure it to be the thread with the most dedicated group of users for the cause…
I would love to create a small sub header, to display on all of my views, with 4 or 5 of the most used tabs in my view structure, with an identical layout as the Custom Header uses. Ive been playing with the q-card which can display a card on each view easily enough (though I am not sure what the actual difference is with a simple !include of that same card setup…).
If anything, what would be the sizing default for the CH menu bar/tabs?
So, I would love to have these 5 buttons in a horizontal-stack with the same Style.
Has anyone here done such a thing yet? If so, please post some of the config so I could re-use that?
made it this far:
using a small template:
button_menu_button:
size: 25px
styles:
icon:
- color: var(--background-color)
card:
- background: var(--primary-color)
- padding: 0px
- margin: 0px
and a horizontal-stack.
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: button_menu_button
icon: mdi:home
tap_action:
action: navigate
navigation_path: home
- type: custom:button-card
template: button_menu_button
icon: mdi:light-switch
tap_action:
action: navigate
navigation_path: lights
etc etc
I’ve tried to get rid of the margins but wont get any closer than this… Or have to use the custom:stack-in-card, but then I lose the colors…
type: vertical-stack
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:button-card
template: button_menu_button
icon: mdi:home
tap_action:
action: navigate
navigation_path: home
- type: custom:button-card
template: button_menu_button
icon: mdi:light-switch
tap_action:
action: navigate
navigation_path: lights
etc etc
I can use this in a q-card on each view:
cards:
- type: custom:q-card
card: menu
and ui-lovelace.yaml:
q_cards:
menu:
!include lovelace/buttons/buttons_shortcut_menu.yaml
Main question remains: Ryan, please let me know which variables are used for the active and inactive background color of the Custom header, and the icon and the active icon?
The above seems to come close, but when using the default theme, one can easily spot this isn’t yet correct…:
ok, made it this far (without using the colors of the CH, but the default colors of the selected theme)(though still would love to hear which colors are used in CH…)
please see Lovelace: Button card if you’re interested, didn’t want to crosspost or diverge too much from this topic. thanks.
Custom Header uses styles in the following order, if one isn’t set it moves on to the next:
- Styling values set in it’s config (if set here,there are no vars)
- Custom Header’s CSS vars
- Your theme’s variables
- HA’s default
If you’re not sure about the theme’s or HA’s variables you can right click and inspect the element or check one of the many threads or Github pages that list those variables.
yeh, thanks, I understand the bigger picture here its just that I would need the variable names CH uses by default uses for the
Header bar, icon color, and active icon background.
If I set nothing in my own shortcut menu, I would love it to be identical to your CH coloring scheme, but it doesnt work like that apparently… see screenshots above
using this now to follow my themes:
styles:
icon:
- color: var(--secondary-text-color)
card:
- background: >
[[[ return variables.view == variables.path
? 'var(--secondary-background-color)' : 'var(--paper-card-background-color)';
]]]
is really nice, but not according to the CH coloring.
Custom Header sets no colors at all if it hasn’t been set in it’s config or used in CH css variables. This means that the default HA values are used. You can see it in the code for CH’s defaults here. Most of the values there return an empty string if it hasn’t been set in CH.
The two exceptions to this are background and icon/text color (elements_color) which are still grabbing the theme variables or HA’s default, but just doing it explicitly.
The header background color from theme is --app-header-background-color or HA’s default --primary-color
The icon/text color from theme is --app-header-text-color or HA’s default --text-primary-color
thanks! that is what I was looking for. only one left is the active tab color, to set in my template. I use
active_tab_css: 'background-color: rgba(0, 0, 0, 0.3);'
resulting in: 
(never mind the gold icon, this is about the active background…)
in the custom header, but that doesn’t work the way I expect it to in the template above… 
which is way to black
Would you know how to get that overlay in the template?
The background you’re using there is black with 30% (0.3) opacity. So it wouldn’t show the blue behind since there is nothing behind it in button card. Just sample the color with chrome dev tools or any image editing software. It’s #255288
Also, I don’t believe there is a variable you can use for active tab color other than Custom Header’s css variable --ch-active-tab-color when set in your themes yaml
yeah, I am struggling with that one. I simply need it to be relative to the default var(--primary-color) and set it just the bit ‘off’…to keep it in the family and dont hard code any color
like the slider background 
as an alternative, I could use the active sidebar background,
tried something ike this:
'rgb(var(--primary-color),0.1)'
without luck…
If you just want it to be lighter and darker you could add a css filter to it if button card allows for it, if not it should work in card-mod. A contrast or brightness filter might do it.
I turned on kiosk mode, thinking that I could just disable it with ?disable_ch. Using ?disable_ch does allow the page to work normally until refreshing, but I cannot access the custom header option from the menu at the top of the page to actually disable kiosk mode. I tried uninstalling (through hacs), but the behavior persists.
While using ?disable_ch open your raw config editor (top right button, configure ui, then top right again, raw config editor) and remove kiosk_mode: true from the custom_header: config
I had never used the raw config editor. Now I understand. Thanks!
yes, that is possible:
card:
- background: var(--primary-color)
- opacity: >
[[[ return variables.view == variables.path
? '0.7' : '1';
]]]
though unfortunately that also causes the icon to go transparent.
not all of the filters are available as property (brightness nor contrast)… and the RGBA() method doesnt work on the variables, though this suggests otherwise https://github.com/home-assistant/frontend/blob/d392695ab75ab48461cbfe42ba56ec1f0ccd5d8b/src/resources/styles.ts#L11
cant get it to work though…
wait!:
card:
- background: >
[[[ return variables.view == variables.path
? 'rgba(var(--rgb-primary-color), 0.6)' : 'rgba(var(--rgb-primary-color),1)';
]]]
creates this:
or in a darker theme:
which seems to be just what I was looking for. cool. Thanks for helping me on the right track!
well, not sure about this one, neither variant succeeds:
home_summary: >-
{% if states('sensor.hubs_badge') > '0' or states('sensor.status_badge') > '0' %} red
{% else %} green
{% endif %}
or
{{'red' if states('sensor.hubs_badge') > '0'
or states('sensor.status_badge') > '0'
else 'green'}}
seems to ‘read’ the space after the ‘or’ and create ‘orn’… how should I write this please?
Hmm, not sure what’s going on there. Both of your examples are working for me just fine (straight copy and paste from your post). Will look into it more when I get a chance as I’ve only check in storage mode.