ok thanks Ryan, this works perfectly now (have to study your remarks on indents, because in my current code, this doesnt cause any n’s).
The div works perfectly, and exactly as I want it, very very nice indeed!
Shortened(simplified) the namespace setup of the original entry, because I don’t need that (now) and filtered the output of the dark sky sensors a bit, because some of them use a period in the state, which I don’t want…
header_text: >-
{% set alerts = namespace(active=[], color='var(--google-red-500)') %}
{% set inside=states('sensor.temperatuur_living')%}
{% set outside=states('sensor.temp_current')%}
{% set temp_color='var(--primary-text-color)'%}
{% set symbol='°C' %}
{% 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 %}
<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: {{ 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>
gives me all I need now. For full disclosure (…) and reference, this is my full CH config now:
#https://maykar.github.io/custom-header/#configuration/main
# https://community.home-assistant.io/t/custom-header/155399/255
header_text: >-
<style>
#flipper{color:#999;}
#flip {height:24px;overflow:hidden;}
#flip > div > div {color:#fff;height:24px;margin-bottom:24px;display:inline-block;}
#flip div:first-child {animation: show 10s linear infinite;}
@keyframes show {
0% {margin-top:-144px;}
5% {margin-top:-96px;}
33% {margin-top:-96px;}
38% {margin-top:-48px;}
66% {margin-top:-48px;}
76% {margin-top:0px;}
100% {margin-top:0px;}}
#flipper p {position:fixed;color:#999; }
</style>
<div style='float: left'>Ha Rpi4: </div>
<div id=flipper><div id=flip><div><div>
{{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>
{{states('sensor.dark_sky_summary')}}</div></div><div><div>
{{states('sensor.dark_sky_summary')}}</div></div><div><div>
# {{states('sensor.br_symbol')}}</div></div><div><div>
## all default
#disabled_mode: false
kiosk_mode: >-
{{ is_state('input_select.mode','Kiosk') }}
#"{{ states('input_select.mode') =='Kiosk'}}"
compact_mode: true
shadow: true
footer_mode: false
split_mode: true
#disable_sidebar: false
#hide_header: false
#hide_help: false
#hide_unused: false
#hide_refresh: false
hide_config: true
#hide_raw: false
# https://maykar.github.io/custom-header/#configuration/buttons
#menu_hide: false
#voice_hide: false
#options_hide: false
#menu_dropdown: false
#voice_dropdown: false
#reverse_button_direction: false
#button_icons:
button_text:
options: >-
{{ time }} - <ha-icon icon='{{states('sensor.weather_icon')}}' style='vertical-align: middle';></ha-icon> - {{states('sensor.temp_current') }}°
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 list of Names 1-6)
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 alerts = namespace(active=[], color='var(--google-red-500)') %}
{% set inside=states('sensor.temperatuur_living')%}
{% set outside=states('sensor.temp_current')%}
{% set temp_color='var(--primary-text-color)'%}
{% set symbol='°C' %}
{% 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 %}
<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: {{ 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>
# Ha Rpi4:
# {% set alerts = namespace(active=[], color="var(--google-red-500)") %}
# {% set temperature = namespace(inside=states('sensor.temperatuur_living'), outside=states('sensor.temp_current'), color="var(--primary-text-color)", symbol="°C") %}
# {% 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 %}
# <marquee>
# <span style='color: {{ temperature.color }}'>
# Inside temperature: {{ temperature.inside }}{{ temperature.symbol }}
# Outside temperature: {{ temperature.outside }}{{ temperature.symbol }}
# </span>
# <span style='color: {{ alerts.color }}; margin-left: 10px;'>
# Alerts: {{ alerts.active | join(' - ')}}
# </span>
# <span style='color: {{ temperature.color }}'>
# {{states('sensor.dark_sky_summary')}}
# Daily - {{states('sensor.dark_sky_daily_summary')}}
# Hourly - {{states('sensor.dark_sky_hourly_summary')}}
# </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: true
indicator_top: true
#default_tab:
#reverse_tab_direction: false
#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: true
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'}}
tabs_color:
phones_tablets: >-
{{state_attr('sensor.family_home','icon_color')}}
magic in the works!
