I’ve created another sensor which gives me the temperature outside from weather.hom
- platform: template
sensors:
temperature:
unit_of_measurement: °C
value_template: "{{ state_attr('weather.thuis', 'temperature') }}"I want this to show in the vertical scroller. But i want it to say:
Temperature outside is … (then the state)
How do i do this?
Cool works thx
It even shows the °C after the state
Cool!
Thx mate
Any idea when the title problem will be fixed?
I don’t really give estimated times for anything like this anymore. Currently working 2 jobs, trying to finish up a large project due for my coding bootcamp, and, most importantly, keep the family happy.
When I give time frames for fixes or feature implementations it just adds to the pile of stress I’m trying to manage, so I need to stop doing it. Explaining it here so that I can just link to this post when someone else asks a similar question 
Thx for the insight !
No problem mate!
Can somebody help me with my custom header? I want my text to be aligned to the left (as opposed to the icons to the right). And at the same time change the style options (font-family and font-weight).
This is what I have now:
I use the following code (that I have copied and mixed from this thread 
)
custom_header:
header_text: >-
<div>
<div style='display:inline-block'>
{% if is_state('binary_sensor.middag', 'on')%} Goedemiddag {{user}} {% elif is_state('binary_sensor.ochtend', 'on')%} Goedemorgen {{user}} {% elif is_state('binary_sensor.nacht', 'on')%} Goedenacht {{user}} {% elif is_state('binary_sensor.avond', 'on')%} Goedenavond {{user}} {% endif %}
<div style='display:inline-block'>
<ha-icon icon='{% if is_state("binary_sensor.presence_10", "on") %}mdi:motion-sensor{% else %}mdi:walk{% endif %}'
style='color:{% if is_state("binary_sensor.presence_10", "on") %}orange{% else %}{% endif %}'</ha-icon>
</div>
<div style='display:inline-block'>
<ha-icon icon='{% if is_state("binary_sensor.presence_20", "on") %}mdi:motion-sensor{% else %}mdi:walk{% endif %}'
style='color:{% if is_state("binary_sensor.presence_20", "on") %}orange{% else %}{% endif %}'</ha-icon>
</div>
<div style='display:inline-block'>
<ha-icon icon='{% if is_state("binary_sensor.vibration_12", "on") %}mdi:vibrate{% else %}mdi:vibrate-off{% endif %}'
style='color:{% if is_state("binary_sensor.vibration_12", "on") %}orange{% else %}{% endif %}'</ha-icon>
</div>
<div style='display:inline-block'>
<ha-icon icon='{% if is_state("binary_sensor.vibration_13", "on") %}mdi:fridge-alert{% else %}mdi:fridge{% endif %}'
style='color:{% if is_state("binary_sensor.vibration_13", "on") %}orange{% else %}{% endif %}'</ha-icon>
</div>
Any help is greatly appreciated! I have tried different stuff, but couldn’t get it to work.
Ok, sorry for this, it was indeed both an obvious AND newb issue.
Should have removed compact mode: true.
A possibly total newb or obvious question:
I 'm getting a Your configuration contains comment(s), these will not be saved. Do you want to continue? message when trying to use the vertical scroller in the raw configuration editor.
Do I have to be using yaml mode for lovelace, or is there something else that I’m missing?
custom_header:
compact_mode: true
default_tab: >-
{% if is_state("media_player.playerkatana", "playing") %}1{% else %}0{%
endif %}
button_text:
options: >-
{{ hours24 }}:{{ minutesLZ }} <br><div style='display:inline-block;
height:22px; width:22px; vertical-align:bottom;'><ha-icon
icon='mdi:weather-{% if is_state("weather.home", "partlycloudy")
-%}partly-cloudy{%- else -%}{{ states('weather.home')}}{%- endif
%}'></ha-icon></div> {{ states('sensor.temperature_38') }}°
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 id=flipper><div id=flip><div><div>
{{states('counter.count_espresso')}} coffees today</div></div><div><div>
{{states('sensor.total_48h_precipitation')}}mm precipitation during the last 48 hours</div></div><div><div>
Sonoff 2 was on for {{states('sensor.sonoff_2_on')}} minutes today</div></div><div><div>
{{states('counter.count_espresso')}} coffees today</div></div><div><div>
swipe_nav:
animate: swipe
prevent_default: true
skip_tabs: 5
swipe_amount: 10
wrap: true
title: ''
views:
Sorry, late reply. You had a couple of unclosed divs, didn’t break anything, but you want to make sure that each div has and opening and closing tag. Also, it looks like you’re using reverse_button_direction: true so that’s what I based the changes below on.
Essentially all I did was remove the unneeded first <div> tag, made sure the text element’s div had a closing tag </div>, and gave it a style to push it to the right float:right; and a font font-family: Comic Sans MS, cursive, sans-serif; (fogot to add a font-weight, but just add that to the same style in the first div)
custom_header:
header_text: >-
<div style='display:inline-block; float:right; font-family: Comic Sans MS,
cursive, sans-serif;'> {% if is_state('binary_sensor.middag', 'on')%}
Goedemiddag {{user}} {% elif is_state('binary_sensor.ochtend', 'on')%}
Goedemorgen {{user}} {% elif is_state('binary_sensor.nacht', 'on')%}
Goedenacht {{user}} {% elif is_state('binary_sensor.avond', 'on')%}
Goedenavond {{user}} {% endif %} </div> <div style='display:inline-block'>
<ha-icon icon='{% if is_state("binary_sensor.presence_10", "on")
%}mdi:motion-sensor{% else %}mdi:walk{% endif %}' style='color:{% if
is_state("binary_sensor.presence_10", "on") %}orange{% else %}{% endif
%}'</ha-icon></div><div style='display:inline-block'> <ha-icon icon='{% if
is_state("binary_sensor.presence_20", "on") %}mdi:motion-sensor{% else
%}mdi:walk{% endif %}' style='color:{% if
is_state("binary_sensor.presence_20", "on") %}orange{% else %}{% endif
%}'</ha-icon></div><div style='display:inline-block'> <ha-icon
icon='{% if is_state("binary_sensor.vibration_12", "on") %}mdi:vibrate{%
else %}mdi:vibrate-off{% endif %}' style='color:{% if
is_state("binary_sensor.vibration_12", "on") %}orange{% else %}{% endif
%}'</ha-icon></div><div style='display:inline-block'> <ha-icon
icon='{% if is_state("binary_sensor.vibration_13", "on")
%}mdi:fridge-alert{% else %}mdi:fridge{% endif %}' style='color:{% if
is_state("binary_sensor.vibration_13", "on") %}orange{% else %}{% endif
%}'</ha-icon></div>
Thanks alot for your response! I’ll try it and get back to you.
Is it possible (I guess it is) to have the vertical scroller next to the three mdi:water-off icons, and not below?
custom_header:
button_text:
options: >-
{{ hours24 }}:{{ minutesLZ }} <div style='display:inline-block;
height:24px; width:24px; vertical-align:bottom;'><ha-icon
icon='mdi:weather-{% if is_state("weather.home", "partlycloudy")
-%}partly-cloudy{%- else -%}{{ states('weather.home')}}{%- endif
%}'></ha-icon></div> {{ states('sensor.temperature_38') }}°
default_tab: >-
{% if is_state("media_player.playerkatana", "playing") %}1{% else %}0{%
endif %}
footer_mode: true
header_text: >-
<div> <div style='display:inline-block'> <ha-icon icon='{% if
is_state("switch.sonoff_1000b19f94_2", "on") %}mdi:water{% else
%}mdi:water-off{% endif %}' style='color:{% if
is_state("switch.sonoff_1000b19f94_2", "on") %}green{% else %}#800{% endif
%}'</ha-icon> </div> <div style='display:inline-block'> <ha-icon icon='{% if
is_state("switch.sonoff_1000b19f94_3", "on") %}mdi:water{% else
%}mdi:water-off{% endif %}' style='color:{% if
is_state("switch.sonoff_1000b19f94_3", "on") %}green{% else %}#800{% endif
%}'</ha-icon> </div> <div style='display:inline-block'> <ha-icon icon='{% if
is_state("switch.sonoff_1000b19f94_4", "on") %}mdi:water{% else
%}mdi:water-off{% endif %}' style='color:{% if
is_state("switch.sonoff_1000b19f94_4", "on") %}green{% else %}#800{% endif
%}'</ha-icon> </div><style> #flipper {color:#999;} #flip
{height:24px;overflow:hidden;} #flip > div > div
{color:#99h;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
id=flipper><div id=flip><div><div> {{states('counter.count_espresso')}}
coffees today</div></div><div><div> Last 48h rain:
{{float(states('sensor.total_48h_precipitation'))}} mm</div></div><div><div>
Sonoff 2 was ON for {{ float(states('sensor.sonoff_2_on')) * 60 }} minutes
</div></div><div><div> {{states('counter.count_espresso')}} coffees
today</div></div><div><div>
split_mode: true
header_text: >-
<style>ha-icon {display:inline-block; float:left} #flipper {color:#999;}
#flip {height:24px;overflow:hidden;} #flip > div > div
{color:#99h;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><ha-icon icon='{% if is_state("switch.sonoff_1000b19f94_2", "on")
%}mdi:water{% else %}mdi:water-off{% endif %}' style='color:{% if
is_state("switch.sonoff_1000b19f94_2", "on") %}green{% else %}#800{% endif
%}'</ha-icon></div><div><ha-icon icon='{% if
is_state("switch.sonoff_1000b19f94_3", "on") %}mdi:water{% else
%}mdi:water-off{% endif %}' style='color:{% if
is_state("switch.sonoff_1000b19f94_3", "on") %}green{% else %}#800{% endif
%}'</ha-icon></div><div><ha-icon icon='{% if
is_state("switch.sonoff_1000b19f94_4", "on") %}mdi:water{% else
%}mdi:water-off{% endif %}' style='color:{% if
is_state("switch.sonoff_1000b19f94_4", "on") %}green{% else %}#800{% endif
%}'</ha-icon></div><div id=flipper><div id=flip><div>
{{states('counter.count_espresso')}} coffees today</div><div> Last 48h rain:
{{float(states('sensor.total_48h_precipitation'))}} mm</div><div> Sonoff 2
was ON for {{ float(states('sensor.sonoff_2_on')) * 60 }} minutes
</div><div> {{states('counter.count_espresso')}} coffees
today</div><div><div>
Thanks @mayker! There is some line “jumping” during the scrolling, but I will figure it out! Other that that, it looks ok!
@skank This is the place to discuss these things.
Try this, I just removed all color styles:
<style> #flip {height:24px;overflow:hidden;} #flip > div > div
{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;} </style> <div
id=flipper><div id=flip><div><div>
Huidige buitentemperatuur: {{states('sensor.temperature')}}°C</div></div><div><div>
{{states('sensor.greeting')}}</div></div><div><div>
{{states('sensor.afval')}}</div></div><div><div>
Cool mate ! Thx a lot ! that fixed it !
I’m trying to change the header to get a spotify style footer using the latest version of CH. But when I scroll down to the bottom of the page the bar scrolls.
Is there anything I can do to fix it?
this is my configuration:
custom_header:
hide_reload_resources: true
hidden_tab_redirect: false
show_tabs:
- Home
- Scenari
- sorveglianza
tab_icons_and_text: true
tab_icons:
Home: none
Scenari: none
sorveglianza: none
header_css: 'height: 90px; padding-bottom: 0px; padding-left: 0px!important; box-shadow: none!important;'
# padding-right: 0px doesn't work with iphone
stack_css: 'margin: 0!important; padding-top: 6px;'
header_text_css: 'padding: 0px!important;'
all_tabs_css: 'padding-bottom: 26px; padding-left:32px; padding-top: 6px; padding-right: 32px; border-radius: 3em; filter:opacity(50%);'
active_tab_css: 'filter:opacity(100%);'
tabs_css:
Home: 'padding-left: 50px;'
tab_text:
Home: >-
<img src='/local/ico/lovelace-1.svg' style='height:38px;'>
Scenari: >-
<img src='/local/ico/lovelace-2.svg' style='height:38px;'>
sorveglianza: >-
<img src='/local/ico/lovelace-3.svg' style='height:38px;'>
header_text: >-
{% if is_state('media_player.spotify', 'playing') %}
<style>
.box { border-top: 1px solid Black; margin-top: 8px; margin-left:0px; margin-right: -10px; height: 50px; }
.text { font-size: 0.6em; line-height: 1.5em; color: white; font-family: MuseoSans;}
.barra-container {margin: 0; height: 2px; width: 100%;}
.barra-progress {height:2px;background:rgb(230,230,230);width:0;
-webkit-transition:width 0s linear;
transition:width 0s linear;
-webkit-animation:progressbar {{(state_attr('media_player.spotify', 'media_duration')-state_attr('media_player.spotify', 'media_position'))|round(0)}}s infinite;
animation:progressbar {{(state_attr('media_player.spotify', 'media_duration')-state_attr('media_player.spotify', 'media_position'))|round(0)}}s infinite; }
@-webkit-keyframes progressbar {from {width:{{(100*state_attr('media_player.spotify', 'media_position')/state_attr('media_player.spotify', 'media_duration'))|round(0)}}%}to{width:100%}}
</style>
<div class='box'>
<div class='barra-container'>
<div class='barra-progress'></div>
</div>
<div style=' display:flex; justify-content: space-between; align-items: center;'>
<a style=' text-decoration: none; display:flex; align-items: center;' href='http://open.spotify.com' >
<img src='https://my.duckdns.org:8123{{ state_attr('media_player.spotify', 'entity_picture') }}' style='height:50px;padding-right:12px;'>
<div class='text'>
{{state_attr('media_player.spotify', 'media_title')}} •
<span style='color: rgb(180,180,180)';>{{state_attr('media_player.spotify', 'media_artist')}}</br></span>
<div style='display:flex; align-items: baseline;'>
<img src='/local/ico/cast.svg' style='height:10px'>
<div style='color: rgb(29,185,84); font-size: 0.9em; text-transform: uppercase';> {{state_attr('media_player.spotify', 'source')}}</div>
</div>
</div>
</a>
<form action='https://my.duckdns.org:8123/api/webhook/toggle' method='post'> <!-- webhook -->
<input type='image' src='/local/ico/pause.svg' style='height:34px'> <!-- image with padding -->
</form>
</div>
</div> <!-- /box -->
{% else %}
{% endif %}
background: rgba(56,60,69,1)
footer_mode: true
compact_mode: "{% if is_state('media_player.spotify', 'playing') %}false{% else %}true{% endif %}"
tab_indicator_color: transparent
menu_hide: true
voice_hide: true
options_hide: true
chevrons: false
Sorry for the late reply on this one. This is a really creative use of templates, very cool. I’ll have to test this a bit once I get one of my iOS devices up and running again. On Android, and any other browser really, it doesn’t let you scroll past the bottom of the page like that, but you might want to play with view_css: to add padding or a margin to the views bottom or one of the other advanced styling options may help.
I’ll give it a look when I get a chance.
Hi, I tried this but it’s not what I meant (sorry if my idea was unclear). Basically I want to recreate this (see below) as a custom header. I now use two markdown cards for the text (the bottom text are multiple markdown cards each wrapped inside its own conditional card, to only show when a certian sensor is on) and button cards for the icons (tied to the same sensors).
The downside of this way is that I have to copy it to each lovelace tab and that it’s gone when you scroll. That’s why I want to recreate this exact layout as a custom header that’s always there. So welcome text on the left, under there conditional text based on entity states and sensors on the right.
Do you think this is possible?
This is when there are no alerts:
This is when there is an alert: the icon turns orange and the orange text apears (using markdown wrapped inside a conditional card). When multuple sensors are on, the markdown cards will swipe vertically (wrapped all the cards inside swiper card with autoplay parameter )
Perhaps this is a little too much to do in Custom Header, but I have seen other things like vertical text swipes and sensors. So I have hopes this is possible If the bottom text is too much, I’ll be more than happy to just have the welome greet on the left and the icons on the right (so without the bottom text in orange).
It’s possible for sure and you’re a bit of the way there already. It will be trial and error, and you may even need to modify the styles of multiple elements with advanced styling. All of this isn’t really a feature or supported in CH, it’s a happy accident that you can insert your own HTML and CSS that can be templated with Jinja.
just thinking out aloud here, but since the above markdown setup could be written as an !include, probably even is, (believe that’s how Jim added it to all views in his Theme package before),
wouldn’t it be nice if we could somehow import that as an !include in the custom header? Must admit I haven’t tried or investigated that yet, but it would seem feasible, at least conceptually…
like:
header_text: !include /../../header_welcome.yaml
This above is not something I got from Jim, I designed/coded my own lovelace view. I do know he has some kind of notifications as well, but I have not looked into his code to see how he created his.
Using !include inside the header_text would be amazing, provided it also carries over the style options…
I think what would be amazing (and open up a LOT of new doors) is if HA allowd us to pin a card in the screen. This way you can create your own banner/header pin it and it will always be at the op when scrolling. You’d need to copy it to all tabs, but that’s a small price to pay (I think you can just create an !include to easily duplicate it).