sure here you go:
ch header:
#https://maykar.github.io/custom-header/#configuration/main
#test_template: >-
# System alerts: {{states('sensor.marquee_alerts')}}
header_text: >-
{% if is_state('input_boolean.ch_use_header_text_template','on')%}
<style>
#flipper{color:#999;}
#flip {height:24px;overflow:hidden;}
#flip > div > div {color:var(--primary-text-color);height:24px;margin-bottom:24px;display:inline-block;text-overflow: clip;white-space: nowrap;}
#flip div:first-child {animation: show 10s linear infinite;}
@keyframes show {
0% {margin-top:-144px;}
17% {margin-top:-96px;}
33% {margin-top:-96px;}
50% {margin-top:-48px;}
67% {margin-top:-48px;}
83% {margin-top:0px;}
100% {margin-top:0px;}}
#flipper p {position:fixed;color:#999; }
</style>
<div style='float: left'>Ha Rpi4: </div>
<div id=flip><div><div>
Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
Daily - {{states('sensor.dark_sky_daily_summary')}}</div></div><div><div>
Hourly - {{states('sensor.dark_sky_hourly_summary')}}</div></div><div><div>
Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
{% endif %}
# {{states('sensor.dark_sky_summary')}}</div></div><div><div>
# {{states('sensor.br_symbol')}}</div></div><div><div>
## all default
disabled_mode: >-
{{is_state('input_boolean.ch_disabled_mode','on')}}
kiosk_mode: >-
{{ is_state('input_select.mode','Kiosk') }}
compact_mode: >-
{{is_state('input_boolean.ch_compact_mode','on')}}
shadow: >-
{{is_state('input_boolean.ch_shadow','on')}}
footer_mode: >-
{{is_state('input_boolean.ch_footermode_mode','on')}}
split_mode: >-
{{is_state('input_boolean.ch_split_mode','on')}}
disable_sidebar: >-
{{is_state('input_boolean.ch_disable_sidebar','on')}}
hide_header: >-
{{is_state('input_boolean.ch_hide_header','on')}}
hide_help: >-
{{is_state('input_boolean.ch_hide_help','on')}}
hide_unused: >-
{{is_state('input_boolean.ch_hide_unused','on')}}
hide_refresh: >-
{{is_state('input_boolean.ch_hide_refresh','on')}}
hide_config: >-
{{is_state('input_boolean.ch_hide_config','on')}}
#hide_raw: false
default_tab_on_refresh: false
# https://maykar.github.io/custom-header/#configuration/buttons
menu_hide: >
{{is_state('input_boolean.ch_menu_hide','on')}}
voice_hide: >-
{{is_state('input_boolean.ch_voice_hide','on')}}
options_hide: >-
{{is_state('input_boolean.ch_options_hide','on')}}
menu_dropdown: >-
{{is_state('input_boolean.ch_menu_dropdown','on')}}
voice_dropdown: >-
{{is_state('input_boolean.ch_voice_dropdown','on')}}
reverse_button_direction: >-
{{is_state('input_boolean.ch_reverse_button_direction','on')}}
#button_icons:
button_text:
options: >-
{% if is_state('input_boolean.ch_use_options_text_template','on')%}{{ time }} - <ha-icon icon='{{states('sensor.weather_icon')}}' style='vertical-align: middle';></ha-icon> - {{states('sensor.temp_current') }}°
{% endif %}
#options_css: 'color:var(--primary-text-color);'
show_tabs: >
{% if not is_state('input_select.mode','Developer') %}0 to 21, 26 to 28
{% else %} 0 to 28
{% endif %}
# https://maykar.github.io/custom-header/#configuration/exceptions
exceptions:
- conditions:
user: Gezin, redacted names
config:
show_tabs: 0 to 3,6,15 to 18
voice_hide: true
options_hide: true
- conditions:
user_agent: iPhone
config:
footer_mode: true
indicator_top: false
header_text: >-
{% set inside=states('sensor.temperatuur_living')%}
{% set outside=states('sensor.temp_current')%}
{% set temp_color='var(--primary-text-color)'%}
{% set symbol='°C' %}
<div style='display: flex;display: -webkit-flex;'>
<div>Ha Rpi4: </div>
<marquee>
<span style='color: {{ temp_color }}'>
Inside temperature: {{ inside }}{{ symbol }},
Outside temperature: {{ outside }}{{ symbol }},
</span>
<span style='color: orange;'>
System alerts: {{states('sensor.marquee_alerts')}},
</span>
<span style='color: {{ temp_color }}'>
Summary - {{states('sensor.dark_sky_summary')}},
Daily - {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
</span>
</marquee>
# {% set alerts = namespace(active=[], color='var(--google-red-500)') %}
# {% if states('sensor.weatheralerts') | float != 0 %}
# {% for alert in state_attr('sensor.weatheralerts', 'alerts') %}
# {% set alerts.active = alerts.active + [alert['title']] %}
# {% endfor %}
# {% else %} {% set alerts.active = alerts.active + ['No active alerts'] %}
# {% endif %}
# {% set inside=states('sensor.temperatuur_living')%}
# {% set outside=states('sensor.temp_current')%}
# {% set temp_color='var(--primary-text-color)'%}
# {% set symbol='°C' %}
# <div style='display: flex;display: -webkit-flex;'>
# <div>Ha Rpi4: </div>
# <marquee>
# <span style='color: {{ temp_color }}'>
# Inside temperature: {{ inside }}{{ symbol }},
# Outside temperature: {{ outside }}{{ symbol }},
# </span>
# <span style='color: {{ alerts.color }};'>
# Alerts: {{ alerts.active | join(' - ')}},
# </span>
# <span style='color: orange;'>
# System alerts: {{states('sensor.marquee_alerts')}},
# </span>
# <span style='color: {{ temp_color }}'>
# Summary - {{states('sensor.dark_sky_summary')}},
# Daily - {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
# Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
# </span>
# </marquee>
menu_hide: true
# voice_hide: false
options_hide: true
- conditions:
user_agent: iPad
config:
menu_hide: true
# voice_hide: false
options_hide: true
# https://maykar.github.io/custom-header/#configuration/tabs
chevrons: >-
{{is_state('input_boolean.ch_chevrons','on')}}
indicator_top: >-
{{is_state('input_boolean.ch_indicator_top','on')}}
#default_tab:
reverse_tab_direction: >-
{{is_state('input_boolean.ch_reverse_tab_direction','on')}}
#hide_tabs: An array or comma separated string of tabs to hide, more info below
#show_tabs: An array or comma separated string of tabs to hide, more info below
hidden_tab_redirect: >-
{{is_state('input_boolean.ch_hidden_tab_redirect','on')}}
tab_icons:
alarm: >-
{{states('sensor.alarm_panel_icon')}}
phones_tablets: >-
{{states('sensor.presence_icon')}}
weer_klimaat: >-
{{states('sensor.weather_icon')}}
alarmclock: >-
{{'mdi:alarm-off' if is_state('sensor.next_alarm','Not set') else 'mdi:alarm'}}
#active_tab_color: black
active_tab_css: 'background-color: rgba(0, 0, 0, 0.3);'
tab_indicator_color: black
tabs_color:
alarm: >-
{{states('sensor.alarm_panel_icon_color')}}
phones_tablets: >-
{{state_attr('sensor.family_home','icon_color')}}
alarmclock: >-
{{'green' if is_state('sensor.next_alarm','Not set') else 'red'}}
package:
homeassistant:
customize_glob:
input_boolean.ch_*:
templates:
icon_color: >
if (state === 'on') return 'green';
return 'grey';
customize:
input_boolean.ch_disabled_mode:
templates:
icon: >
if (state === 'on') return 'mdi:death-star-variant';
return 'mdi:death-star';
icon_color: >
if (state === 'on') return 'red';
return 'green';
##########################################################################################
# Inputs
##########################################################################################
input_boolean:
ch_disabled_mode:
name: Disabled mode
ch_use_options_text_template:
name: Use options text template
icon: mdi:code-braces
ch_use_header_text_template:
name: Use header text template
icon: mdi:code-braces
# ch_kiosk_mode:
# name: Ch Kiosk mode
# icon: mdi:overscan
ch_compact_mode:
name: Compact mode
icon: mdi:resize
ch_disable_sidebar:
name: Disable sidebar
icon: mdi:dock-left
ch_menu_dropdown:
name: Menu dropdown
icon: mdi:menu
ch_voice_dropdown:
name: Voice dropdown
icon: mdi:microphone
ch_reverse_tab_direction:
name: Reverse tab direction
icon: mdi:arrow-left-right-bold
ch_hidden_tab_redirect:
name: Hidden tab redirect
icon: mdi:directions
ch_reverse_button_direction:
name: Reverse button direction
icon: mdi:arrow-left-right-bold
ch_footer_mode:
name: Footer mode
icon: mdi:arrow-down-bold-box
ch_split_mode:
name: Split mode
icon: mdi:page-layout-header-footer
ch_chevrons:
name: Chevrons
icon: mdi:chevron-right-box-outline
ch_shadow:
name: Shadow
icon: mdi:text-shadow
ch_indicator_top:
name: Indicator top
icon: mdi:format-vertical-align-top
ch_hide_header:
name: Hide header
icon: mdi:format-header-1
ch_hide_help:
name: Hide help
icon: mdi:help
ch_hide_unused:
name: Hide unused
icon: mdi:block-helper
ch_hide_refresh:
name: Hide refresh
icon: mdi:refresh
ch_hide_config:
name: Hide config
icon: mdi:settings-helper
ch_hide_raw:
name: Hide raw
icon: mdi:code-braces-box
ch_menu_hide:
name: Menu hide
icon: mdi:menu
ch_voice_hide:
name: Voice hide
icon: mdi:microphone
ch_options_hide:
name: Options hide
icon: mdi:apple-keyboard-option
# ch_icon_changes:
# name: Ch icon change demo
# icon: mdi:emoticon-poop
#
# ch_text_changes:
# name: Ch button text demo
# initial: off
# icon: mdi:alphabetical
lovelace card:
- type: entities
show_header_toggle: false
title: Custom header settings
entities:
- input_boolean.ch_disabled_mode
- input_boolean.ch_compact_mode
- input_boolean.ch_footer_mode
- input_boolean.ch_split_mode
- input_boolean.ch_chevrons
- input_boolean.ch_shadow
- input_boolean.ch_indicator_top
- input_boolean.ch_use_options_text_template
- input_boolean.ch_use_header_text_template
- input_boolean.ch_hidden_tab_redirect
- type: divider
- input_boolean.ch_reverse_tab_direction
- input_boolean.ch_reverse_button_direction
- input_boolean.ch_disable_sidebar
- input_boolean.ch_menu_dropdown
- input_boolean.ch_voice_dropdown
- type: divider
- input_boolean.ch_hide_header
- input_boolean.ch_hide_help
- input_boolean.ch_hide_unused
- input_boolean.ch_hide_refresh
- input_boolean.ch_hide_config
- input_boolean.ch_hide_raw
- type: divider
- input_boolean.ch_menu_hide
- input_boolean.ch_voice_hide
- input_boolean.ch_options_hide
will customize some icons based on state, but this does it for now ;-
