ColtonYYZ
(ColtonYYZ)
November 20, 2024, 12:48pm
326
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?
Gurulee
(Lee)
November 20, 2024, 1:02pm
327
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>
ColtonYYZ
(ColtonYYZ)
November 20, 2024, 1:19pm
328
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
ColtonYYZ
(ColtonYYZ)
November 20, 2024, 1:20pm
329
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
ColtonYYZ
(ColtonYYZ)
November 20, 2024, 1:22pm
330
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
Gurulee
(Lee)
November 20, 2024, 11:52pm
331
@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
ColtonYYZ
(ColtonYYZ)
December 13, 2024, 1:38am
334
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
ColtonYYZ
(ColtonYYZ)
December 13, 2024, 2:25am
336
@perlchamp , Bahnschrift is nice. I have always liked Tahoma so itās my usual go to. Other than that, no other reason really.
@ColtonYYZ :
ColtonYYZ:
Bahnschrift is nice
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
Gurulee
(Lee)
December 19, 2024, 11:06am
338
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,
Gurulee:
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.
Personally, I donāt necessarily need this behavior: a scrollable link
Camatobe
(Camatobe)
January 25, 2025, 9:30pm
340
I recently built an automatic news feed on top of my kitchen dashboard tablet.
It autoscrolls after several seconds and shows the latest rss articles.
Every link is clickable and links to the external site.
you may need to adjust the animation duration.
type: custom:html-template-card
ignore_line_breaks: true
content: |
<style>
.marquee-container {
width: 100%;
height: 75px;
border-radius: 6px;
overflow: hidden;
overflow-x: scroll;
padding-bottom: 8px;
white-space: nowrap;
box-sizing: border-box;
}
.marquee {
display: inline-flex;
animation: marquee 270s linear infinite;
}
.marquee a {
display: flex;
align-items: center;
margin-right: 32px;
text-decoration: none;
color: #ddd !important;
padding-right: 24px;
border-right: 1px solid #333;
}
a img {
max-height: 75px;
margin-right: 10px;
border-radius: 6px;
}
a div {
display: flex;
flex-direction: column;
max-height: 70px;
height: 100%;
}
a div span:nth-child(1) {
font-weight: 700;
width: 270px;
white-space: initial;
line-height: 1.2rem;
transform: translateY(-4px);
}
a div span:nth-child(2) {
color: #777;
line-height: 0.88rem;
font-size: 0.7rem;
white-space: initial;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
}
@keyframes marquee {
0% { transform: translateX(0); }
13% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
<div class="marquee-container">
<div class="marquee">
{% for entry in state_attr('sensor.otz_jena', 'entries') %}
<a href="{{ entry.link }}">
<img src="{{ entry.links[1].href }}" alt="">
<div style="background: none;">
<span>{{ entry.title }}</span>
<span>{{ entry.summary }}</span>
</div>
</a>
{% endfor %}
</div>
</div>
card_mod:
style: >
ha-card { background: none; border: none; padding-left: 0 !important;
padding-right: 0 !important;}
maybe it enlighten someones day.
GrĆ¼Će aus der Pfalz nach ThĆ¼ringenā¦
maybe it enlighten someones day.
seems difficult without a example-link or example-picture ?
you see just a black strip/block ā¦
Paktas
February 3, 2025, 7:09pm
343
I tried this example (also with ChatGPT), but html-card
card is sanitising and cleaning all classes. Itās also not able to run able to run any jinja for cycles.
Paktas
February 3, 2025, 7:14pm
344
Can you clarify what you are using for html-template-card
? I cannot find such a card in HACS.
ColtonYYZ
(ColtonYYZ)
February 3, 2025, 8:50pm
345
Search āHTML Jinja2 Template cardā without the quotes.