When custom configuration like this refers to putting it in your config, does that mean mean the configuration.yml?
Yes it does.
1 Like
I have the config in my configuration.yml, but now what card type do I use to display it properly?
Iām getting this odd error as though its not reading the yml properlyā¦ that I cannot figure out:
You need the Lovelace Html Card.
Also, since I posted this, I have added one line of code to force it to be full width at the bottom of the screenā¦
z-index: 99;
In the ha-card section:
<style>
ha-card {
height: 0px;
visibility: hidden;
z-index: 99;
}
1 Like
I just installed the Lovelace HTML card and tried to create the card again, then reloaded HA.
But I still get the same error as noted above when putting the yml in the manual card type, still complains about no card type configured.
When I paste in your card yml:
I see this erroneous error as though its not reading the yml correctly and duplicates characters or is missing characters each time I try. Iāve confirmed what Iām pasting in as well as correct and does not have typos:
I tried this from the HA app and webuiā¦
paste your whole yaml for the card here so we can verify your formattingā¦
Use ``` before and after it to keep the formatting.
Also, maybe try and reboot has first to see if that solves the problem. Did you reboot after you added your config info?
Hereās the paste of the yml for the card:
type: custom:html-card
view_layout:
position: main
content: |
<div class="ticker-wrap">
<div class="ticker">
<span class="ticker__item">[[ sensor.google_news_attributes ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_2 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_3 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_4 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_5 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_6 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_7 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_8 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_9 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_10 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_11 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_12 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_13 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_14 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_15 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_16 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_17 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_18 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_19 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_20 ]]</span>
<span class="ticker__item">Today's High: [[sensor.toronto_island_temperature]]Ā°C</span>
<span class="ticker__item">[[sensor.toronto_island_summary]]</span>
</div>
</div>
<style>
ha-card {
height: 0px;
visibility: hidden;
z-index: 99;
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-75%, 0, 0);
}
}
.ticker-wrap {
font-family: tahoma;
font-size: 1.6rem;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
height: 2.5rem;
background-color: black;
visibility: visible;
padding-left: 100%;
box-sizing: content-box;
.ticker {
display: inline-block;
height: 2.5rem;
line-height: 2.5rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 110s;
&__item {
display: inline-block;
color: white;
}
}
}
.ticker__item:before {
content: " Ā»Ā» ";
color: yellow;
font-size: 30px;
}
.ticker__item:after {
margin-right: 10px;
}
</style>
Hmmm weird, I am not getting that error message, but I am getting " Cannot read properties of undefined (reading āattributesā)". I canāt figure out why because everything is defined, AND it has worked in my dashboard ever since I posted my comment. Iāve since tweaked it a bit.
So in your config file, you have a section that says -platform: feedparser for Google News? Then you have the section for the sensors. Right?
If you want to send me a DM, I can help you directly so we arenāt spamming the thread. 
***EDIT: @Gurulee, hey, delete this line from your card yaml:
<span class="ticker__item">[[ sensor.google_news_attributes_20 ]]</span>
That is, unless youāve defined it in your yaml. It was in my original yaml by mistake. Once I do that, I donāt get any errors with the card yaml.
1 Like
For those who would like to see the tweaks I made:
Config File
sensor:
- platform: feedparser
name: CTV News
date_format: "%a, %d %b %Y %H:%M:%S %Z"
feed_url: "https://www.ctvnews.ca/rss/ctvnews-ca-top-stories-public-rss-1.822009"
inclusions: title
exclusions: []
scan_interval:
minutes: 15
show_topn: 20
- platform: feedparser
name: Google News
date_format: "%a, %d %b %Y %H:%M:%S %Z"
feed_url: "https://www.google.ca/alerts/feeds/00028625660956993271/15040452229692133315"
inclusions: title
exclusions: []
scan_interval:
minutes: 15
show_topn: 20
## CTV NEWS
- platform: template
sensors:
ctv_news_attributes_0:
friendly_name: "CTV News Content 0"
value_template: >
{{ states.sensor.ctv_news.attributes.entries[0].title }}
- platform: template
sensors:
ctv_news_attributes_1:
friendly_name: "CTV News Content 1"
value_template: >
{{ states.sensor.ctv_news.attributes.entries[1].title }}
- platform: template
sensors:
ctv_news_attributes_2:
friendly_name: "CTV News Content 2"
value_template: >
{{ states.sensor.ctv_news.attributes.entries[2].title }}
- platform: template
sensors:
ctv_news_attributes_3:
friendly_name: "CTV News Content 3"
value_template: >
{{ states.sensor.ctv_news.attributes.entries[3].title }}
- platform: template
sensors:
ctv_news_attributes_4:
friendly_name: "CTV News Content 4"
value_template: >
{{ states.sensor.ctv_news.attributes.entries[4].title }}
- platform: template
sensors:
ctv_news_attributes_5:
friendly_name: "CTV News Content 5"
value_template: >
{{ states.sensor.ctv_news.attributes.entries[5].title }}
- platform: template
sensors:
ctv_news_attributes_6:
friendly_name: "CTV News Content 6"
value_template: >
{{ states.sensor.ctv_news.attributes.entries[6].title }}
- platform: template
sensors:
ctv_news_attributes_7:
friendly_name: "CTV News Content 7"
value_template: >
{{ states.sensor.ctv_news.attributes.entries[7].title }}
- platform: template
sensors:
ctv_news_attributes_8:
friendly_name: "CTV News Content 8"
value_template: >
{{ states.sensor.ctv_news.attributes.entries[8].title }}
- platform: template
sensors:
ctv_news_attributes_9:
friendly_name: "CTV News Content 9"
value_template: >
{{ states.sensor.ctv_news.attributes.entries[9].title }}
## GOOGLE NEWS
- platform: template
sensors:
google_news_attributes_0:
friendly_name: "Google News Content 0"
value_template: >
{{ states.sensor.google_news.attributes.entries[0].title }}
- platform: template
sensors:
google_news_attributes_1:
friendly_name: "Google News Content 1"
value_template: >
{{ states.sensor.google_news.attributes.entries[1].title }}
- platform: template
sensors:
google_news_attributes_2:
friendly_name: "Google News Content 2"
value_template: >
{{ states.sensor.google_news.attributes.entries[2].title }}
- platform: template
sensors:
google_news_attributes_3:
friendly_name: "Google News Content 3"
value_template: >
{{ states.sensor.google_news.attributes.entries[3].title }}
- platform: template
sensors:
google_news_attributes_4:
friendly_name: "Google News Content 4"
value_template: >
{{ states.sensor.google_news.attributes.entries[4].title }}
- platform: template
sensors:
google_news_attributes_5:
friendly_name: "Google News Content 5"
value_template: >
{{ states.sensor.google_news.attributes.entries[5].title }}
- platform: template
sensors:
google_news_attributes_6:
friendly_name: "Google News Content 6"
value_template: >
{{ states.sensor.google_news.attributes.entries[6].title }}
- platform: template
sensors:
google_news_attributes_7:
friendly_name: "Google News Content 7"
value_template: >
{{ states.sensor.google_news.attributes.entries[7].title }}
- platform: template
sensors:
google_news_attributes_8:
friendly_name: "Google News Content 8"
value_template: >
{{ states.sensor.google_news.attributes.entries[8].title }}
- platform: template
sensors:
google_news_attributes_9:
friendly_name: "Google News Content 9"
value_template: >
{{ states.sensor.google_news.attributes.entries[9].title }}
- platform: template
sensors:
google_news_attributes_10:
friendly_name: "Google News Content 10"
value_template: >
{{ states.sensor.google_news.attributes.entries[10].title }}
- platform: template
sensors:
google_news_attributes_11:
friendly_name: "Google News Content 11"
value_template: >
{{ states.sensor.google_news.attributes.entries[11].title }}
- platform: template
sensors:
google_news_attributes_12:
friendly_name: "Google News Content 12"
value_template: >
{{ states.sensor.google_news.attributes.entries[12].title }}
- platform: template
sensors:
google_news_attributes_13:
friendly_name: "Google News Content 13"
value_template: >
{{ states.sensor.google_news.attributes.entries[13].title }}
- platform: template
sensors:
google_news_attributes_14:
friendly_name: "Google News Content 14"
value_template: >
{{ states.sensor.google_news.attributes.entries[14].title }}
- platform: template
sensors:
google_news_attributes_15:
friendly_name: "Google News Content 15"
value_template: >
{{ states.sensor.google_news.attributes.entries[15].title }}
- platform: template
sensors:
google_news_attributes_16:
friendly_name: "Google News Content 16"
value_template: >
{{ states.sensor.google_news.attributes.entries[16].title }}
- platform: template
sensors:
google_news_attributes_17:
friendly_name: "Google News Content 17"
value_template: >
{{ states.sensor.google_news.attributes.entries[17].title }}
- platform: template
sensors:
google_news_attributes_18:
friendly_name: "Google News Content 18"
value_template: >
{{ states.sensor.google_news.attributes.entries[18].title }}
- platform: template
sensors:
google_news_attributes_19:
friendly_name: "Google News Content 19"
value_template: >
{{ states.sensor.google_news.attributes.entries[19].title }}
1 Like
And my HTML Card in the Dashboard:
type: custom:html-card
view_layout:
position: main
content: |
<div class="ticker-wrap">
<div class="ticker">
<img src="/local/images/the-weather-network-6.png" alt="logo" style="height: 30px; vertical-align: middle;"> </span>
<span class="ticker__item" style="color: #FFFFFF; font-weight: bold; animation: flashBlue 1s infinite;">WEATHER OUTLOOK </span>
<style>
@keyframes flashBlue {
0% { color: #0984ff; font-weight: bold; }
50% { color: #000000; font-weight: bold; }
100% { color: #0984ff; font-weight: bold; }
}
</style>
<span class="ticker__item" style="color: #0984ff; font-weight: bold;">Current Temperature: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_realfeel_temperature ]]Ā°C </span>
<span class="ticker__item" style="color: #0984ff; font-weight: bold;">Today's High: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_realfeel_temperature_max_day_0 ]]Ā°C </span>
<span class="ticker__item" style="color: #0984ff; font-weight: bold;">Current Conditions: </span><span style="color: #FFFFFF;"> [[ sensor.toronto_summary ]] [[ sensor.seaton_st_condition_day_0 ]]. </span>
<span class="ticker__item" style="color: #0984ff; font-weight: bold;">Tonight: </span><span style="color: #FFFFFF;> [[ sensor.seaton_st_condition_night_0 ]]. </span>
<span class="ticker__item" style="color: #0984ff; font-weight: bold;">Total Hours of Sun Today: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_hours_of_sun_day_0 ]]. </span>
<span class="ticker__item" style="color: #0984ff; font-weight: bold;">Air Quality Today: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_air_quality_day_0 ]]. <img src="/local/images/the-weather-network-6.png" alt="logo" style="height: 30px; vertical-align: middle;"> </span></span>
<span class="ticker__item" style="color: #39FF14;">Ragweed Pollen Index:</span><span style="color: white; font-weight: bold;"> [[ sensor.seaton_st_ragweed_pollen_day_0 ]]</span>
<span class="ticker__item" style="color: #39FF14;">Grass Pollen Index:</span><span style="color: white; font-weight: bold;"> [[ sensor.seaton_st_grass_pollen_day_0 ]]</span>
<span class="ticker__item" style="color: #39FF14;">Tree Pollen:</span><span style="color: white; font-weight: bold;"> [[ sensor.seaton_st_tree_pollen_day_0 ]]</span>
<span class="ticker__item" style="color: #0984ff; animation: flashBlue 1s infinite;">IN THE NEWS TODAY <span style="color: green; font-weight: bold;"></span> </span>
<style>
@keyframes flashRed {
0% { color: red; font-weight: bold; }
50% { color: #000000; font-weight: bold; }
100% { color: red; font-weight: bold; }
}
</style>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.ctv_news_attributes_0 ]] | <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.ctv_news_attributes_1 ]] | <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.ctv_news_attributes_2 ]] | <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.ctv_news_attributes_3 ]] | <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.ctv_news_attributes_4 ]] | <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.ctv_news_attributes_5 ]] | <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.ctv_news_attributes_6 ]] | <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.ctv_news_attributes_7 ]] | <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.ctv_news_attributes_8 ]] | <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.ctv_news_attributes_9 ]] | <img src="/local/images/ctv-news.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_0 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_1 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_2 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_3 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_4 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_5 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_6 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_7 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"> </span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_8 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_9 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_10 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_11 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_12 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_13 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_14 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_15 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_16 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_17 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_18 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
<span class="ticker__item" color: #FFFFFF;">[[ sensor.google_news_attributes_19 ]] | <img src="/local/images/google-news-4.png" alt="logo" style="height: 20px; vertical-align: middle;"></span> </span>
</div>
<style>
ha-card {
height: 0px;
visibility: hidden;
z-index: 99;
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
font-family: tahoma;
font-size: 1.3rem;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
height: 2.5rem;
background-color: black;
visibility: visible;
padding-left: 100%;
box-sizing: content-box;
}
.ticker {
display: inline-block;
height: 2.5rem;
font-size: 1.3rem;
line-height: 2.5rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 240s;
&__item {
display: inline-block;
color: white;
font-weight: bold;
}
}
.ticker__item:before {
content: " Ā»Ā»";
color: #ffff00;
font-size: 1.5rem;
font-weight: bold;
margin-right: 10px;
}
.ticker__item:after {
}
</style>
And this is what the tweaked version looks like:
1 Like
@ColtonYYZ was super helpful and got this resolved for me.
Had to fix my Lovelace HTML card install and dashboard card yml.
1 Like
Were you able to create this ? Iām looking for something similar
@ColtonYYZ : great work, thanks. Greatings to canada (from germany).
for your information:
iām a beginner and i read the complete thread.
i copied your posted code - the last ones - and did everything right. I got an error message, that - i donāt know excatly - but the solution was to delete the span-tags with the temperatur-stuff, because (i think) they were not listet in the config.yaml. Ok no problem, so far.
Iām a person who doesnāt like deleting code. Thatās why I like to use comments.
DO NOT DO THIS in the manual configuration of the dashboard. I now have a black dashboard and when I want to edit it, it stays black and the editing mask does not appear.
WTH!
Since I no longer have the ability to edit the dashboard via the GUI, Iām now looking for a way to change these comment ātagsā in the file. WHERE IS THIS?
I use the Studio Code Server add-on.
Great work!
[EDIT]
Solution: raw-Configeditor (3 dots top corner right). Though i could edit the code. Now the scrolling footer-feed bar is working again.
[/edit]
So long
Pc
Hey @perlchamp, sorry you had a blip there but glad you were able to figure it out!
The span tags are just formatting, so feel free to delete them! Thatās what I like about sharing code - we can tweak it to our liking!
If you are curious to try, I was able to move my ticker to the top. Here is the code for that:
type: custom:html-card
view_layout:
position: main
content: |
<div class="ticker-wrap">
<div class="ticker">
<style>
@keyframes flash {
0% { background-color: #ff0000; opacity: 1; }
50% { background-color: #000000; opacity: 0; }
100% { background-color: #ff0000; opacity: 1; }
}
.ticker__alert {
animation: flash 2s infinite;
}
.ticker img {
animation-name: none;
animation-duration: 0s;
animation-timing-function: initial;
animation-delay: initial;
animation-iteration-count: initial;
animation-direction: initial;
animation-fill-mode: initial;
animation-play-state: initial;
}
</style>
<img src="/local/images/the-weather-network-6.png" alt="logo" style="height: 30px; vertical-align: middle;">
<span class="ticker__alert" style="color: #FFFFFF; font-weight: bold;">!!!! ALERT !!!!</span>
<span class="ticker__item" style="color: #2492ff; font-weight: bold;">Current Temperature: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_apparent_temperature ]]Ā°C </span>
<span class="ticker__item" style="color: #2492ff; font-weight: bold;">Feels Like: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_realfeel_temperature ]]Ā°C </span>
<span class="ticker__item" style="color: #2492ff; font-weight: bold;">Wind Chill: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_wind_chill_temperature ]]Ā°C </span>
<span class="ticker__item" style="color: #2492ff; font-weight: bold;">Daytime Wind Gusts Up To: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_wind_gust_speed_day_0 ]] km/r </span>
<span style="color: #2492ff; font-weight: bold;">Nighttime Wind Gusts Up To: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_wind_gust_speed_night_0 ]] km/r </span>
<span class="ticker__item" style="color: #2492ff; font-weight: bold;">Today: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_condition_day_0 ]] </span><span style="color: #2492ff; font-weight: bold;">Tonight: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_condition_night_0 ]] </span>
<span class="ticker__item" style="color: #2492ff; font-weight: bold;">Air Quality Index: </span><span style="color: #FFFFFF;"> [[ sensor.toronto_aqhi ]]PM </span>
</div>
<style>
ha-card {
height: 0px;
visibility: hidden;
z-index: 99;
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
font-family: tahoma;
font-size: 1.3rem;
position: fixed;
top: 40px;
left: 0;
width: 75%;
overflow: hidden;
height: 2.7rem;
background-color: black;
visibility: visible;
padding-left: 100%;
box-sizing: content-box;
}
.ticker {
display: inline-block;
height: 2.5rem;
font-size: 1.3rem;
line-height: 2.5rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 24s;
&__item {
display: inline-block;
color: white;
font-weight: bold;
}
}
.ticker__item:before {
content: " Ā»Ā»";
color: #ffff00;
font-size: 1.5rem;
font-weight: bold;
margin-right: 10px;
}
</style>
</div>
If you want a DOUBLE ticker at the bottom, I figured that out too!
**NOTE: It will cover up the Cancel and Save buttons when you are editing the card unfortunately. But what I do is change my zoom of my browser (CTRL+Mouse Wheel) as small as I need it to go, in order to see them again so I can save the edit.
Hereās the code for that:
type: custom:html-card
view_layout:
position: main
content: |
<div class="ticker-wrap" style="bottom: 2.5rem; left: 0; padding-left: 0;">
<div class="ticker" style="padding-left: 0;">
<span class="ticker__item" style="color: #FFFFFF; font-weight: bold; animation: flashBlue 1s infinite;">WEATHER OUTLOOK </span>
<style>
@keyframes flashBlue {
0% { color: #0984ff; font-weight: bold; }
50% { color: #000000; font-weight: bold; }
100% { color: #0984ff; font-weight: bold; }
}
</style>
<span class="ticker__item" style="color: #0984ff; font-weight: bold;">Current Temperature: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_realfeel_temperature ]]Ā°C </span>
<span class="ticker__item" style="color: #0984ff; font-weight: bold;">Tonight: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_condition_night_0 ]]. </span>
<span class="ticker__item" style="color: #0984ff; font-weight: bold;">Today's High: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_realfeel_temperature_max_day_0 ]]Ā°C </span>
<span class="ticker__item" style="color: #0984ff; font-weight: bold;">Air Quality Today: </span><span style="color: #FFFFFF;"> [[ sensor.seaton_st_air_quality_day_0 ]]. </span>
</div>
</div>
<div class="ticker-wrap" style="bottom: 0; left: 0; padding-left: 0;">
<div class="ticker" style="padding-left: 0;">
<span class="ticker__item" style="color: #FFFFFF; font-weight: bold; animation: flashRed 1s infinite;">IN THE NEWS TODAY </span>
<style>
@keyframes flashRed {
0% { color: red; font-weight: bold; }
50% { color: #000000; font-weight: bold; }
100% { color: red; font-weight: bold; }
}
</style>
<span class="ticker__item" style="color: #FFFFFF;">[[ sensor.ctv_news_attributes_0 ]] | </span>
<span class="ticker__item" style="color: #FFFFFF;">[[ sensor.ctv_news_attributes_1 ]] | </span>
<span class="ticker__item" style="color: #FFFFFF;">[[ sensor.google_news_attributes_0 ]] | </span>
<span class="ticker__item" style="color: #FFFFFF;">[[ sensor.google_news_attributes_1 ]] | </span>
</div>
</div>
<style>
ha-card {
height: 0px;
visibility: hidden;
z-index: 99;
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
font-family: tahoma;
font-size: 1.3rem;
position: fixed;
width: 100%;
overflow: hidden;
height: 2.5rem;
background-color: black;
visibility: visible;
box-sizing: content-box;
}
.ticker {
display: inline-block;
height: 2.5rem;
font-size: 1.3rem;
line-height: 2.5rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 80s;
}
.ticker__item {
display: inline-block;
color: white;
font-weight: bold;
}
.ticker__item:before {
content: " Ā»Ā»";
color: #ffff00;
font-size: 1.5rem;
font-weight: bold;
margin-right: 10px;
}
</style>
2 Likes
hi @ColtonYYZ ,
double sounds well. The Ticker at the bottom works for me, but i give the top one a shot.
You took tahoma, cause itās tall? You then could throw an eye on āBahnschriftā. Very clear and taller. This is used in Germanyās train stations. Bloody nice - imo - is the condensed or semi-condensed. In your case maybe condensed-lightā¦
First i have to find some rss-sitesā¦
Best wishes, stay healthy.
So long
Pc
1 Like
@perlchamp, Bahnschrift is nice. I have always liked Tahoma so itās my usual go to. Other than that, no other reason really.
yes, it is. here are my files:
config.yaml:
- platform: feedparser
name: CHIEFS News
date_format: "%a, %d %b %Y %H:%M:%S %Z"
feed_url: "https://www.sport.de/rss/news/te3064/kansas-city-chiefs/"
inclusions: title
exclusions: []
scan_interval:
minutes: 15
show_topn: 5
- platform: feedparser
name: FORTUNA News
date_format: "%a, %d %b %Y %H:%M:%S %Z"
feed_url: "https://www.f95.de/rss.xml"
inclusions: title
exclusions: []
scan_interval:
minutes: 15
show_topn: 5
- platform: feedparser
name: GER News
date_format: "%a, %d %b %Y %H:%M:%S %Z"
feed_url: "https://www.bundesregierung.de/service/rss/breg-de/1151244/feed.xml"
inclusions: title
exclusions: []
scan_interval:
minutes: 15
show_topn: 5
- platform: feedparser
name: IT News
date_format: "%a, %d %b %Y %H:%M:%S %Z"
feed_url: "https://www.pcwelt.de/feed?story_types=news%2Cfeature"
inclusions: title
exclusions: []
scan_interval:
minutes: 15
show_topn: 5
- platform: feedparser
name: SP News
date_format: "%a, %d %b %Y %H:%M:%S %Z"
feed_url: "https://www.presseportal.de/rss/polizei/r/Speyer.rss2"
inclusions: title
exclusions: []
scan_interval:
minutes: 15
show_topn: 5
## CHIEFS NEWS
- platform: template
sensors:
chiefs_news_attributes_0:
friendly_name: "Chiefs News Content 0"
value_template: >
{{ states.sensor.chiefs_news.attributes.entries[0].title }}
- platform: template
sensors:
chiefs_news_attributes_1:
friendly_name: "Chiefs News Content 1"
value_template: >
{{ states.sensor.chiefs_news.attributes.entries[1].title }}
## FORTUNA NEWS
- platform: template
sensors:
fortuna_news_attributes_0:
friendly_name: "Fortuna News Content 0"
value_template: >
{{ states.sensor.fortuna_news.attributes.entries[0].title }}
## GER NEWS
- platform: template
sensors:
ger_news_attributes_0:
friendly_name: "GER News Content 0"
value_template: >
{{ states.sensor.ger_news.attributes.entries[0].title }}
## IT NEWS
- platform: template
sensors:
it_news_attributes_0:
friendly_name: "IT News Content 0"
value_template: >
{{ states.sensor.it_news.attributes.entries[0].title }}
## SP NEWS
- platform: template
sensors:
sp_news_attributes_0:
friendly_name: "SP News Content 0"
value_template: >
{{ states.sensor.sp_news.attributes.entries[0].title }}
yaml dashboard:
type: custom:html-card
view_layout:
position: main
content: |
<div class="ticker-wrap">
<div class="ticker">
<style>
@keyframes flashBlue {
0% { color: #0984ff; font-weight: bold; }
50% { color: #000000; font-weight: bold; }
100% { color: #0984ff; font-weight: bold; }
}
</style>
<style>
@keyframes flashRed {
0% { color: red; font-weight: bold; }
50% { color: #000000; font-weight: bold; }
100% { color: red; font-weight: bold; }
}
</style>
<span class="ticker__item" color: #FFFFFF;"><img src="/local/img/logo_chiefs.svg" alt="chiefs kingdom" style="height: 20px; vertical-align: middle;"> [[ sensor.chiefs_news_attributes_0 ]]</span>
<span class="ticker__item" color: #FFFFFF;"><img src="/local/img/logo_chiefs.svg" alt="logo" style="height: 20px; vertical-align: middle;"> [[ sensor.chiefs_news_attributes_1 ]]</span>
<span class="ticker__item" color: #FFFFFF;"><img src="/local/img/logo_fortuna.svg" alt="Fortuna 95" style="height: 20px; vertical-align: middle;"> [[ sensor.fortuna_news_attributes_0 ]]</span>
<span class="ticker__item" color: #FFFFFF;"><img src="/local/img/logo_ger.svg" alt="logo" style="height: 20px; vertical-align: middle;"> [[ sensor.ger_news_attributes_0 ]]</span>
<span class="ticker__item" color: #FFFFFF;"><img src="/local/img/logo_it.svg" alt="logo" style="height: 20px; vertical-align: middle;"> [[ sensor.it_news_attributes_0 ]]</span>
<span class="ticker__item" color: #FFFFFF;"><img src="/local/img/logo_sp.svg" alt="logo" style="height: 20px; vertical-align: middle;"> [[ sensor.sp_news_attributes_0 ]]</span>
</div>
<style>
ha-card {
height: 0px;
visibility: hidden;
z-index: 99;
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
font-family: "bahnschrift";
font-stretch: condensed;
font-size: 1.3rem;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
height: 2.5rem;
background-color: black;
visibility: visible;
padding-left: 100%;
box-sizing: content-box;
}
.ticker {
display: inline-block;
height: 2.5rem;
font-size: 1.3rem;
line-height: 2.5rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 240s;
&__item {
display: inline-block;
color: white;
font-weight: bold;
}
}
.ticker__item:before {}
.ticker__item:after {
content: ;
color: #ffff00;
font-size: 1.5rem;
font-weight: bold;
margin-right: 10px;
}
</style>
the png:
So long
Pc
Two things Iād like to do:
- Have the ticker items link to the external page when tapped/clicked.
- Have a card that shows rss items in scrollable and linked to external page.
Hi,
Personally, I donāt necessarily need this behavior: a scrollable link