📰 Lovelace: RSS Feed Parser Plugin/List Card

[ColtonYYZ]

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 }}

[ColtonYYZ]

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:

[Gurulee (Lee)]

@ColtonYYZ was super helpful and got this resolved for me.
Had to fix my Lovelace HTML card install and dashboard card yml.

[Arsenick]

Were you able to create this ? I’m looking for something similar

[perlchamp]

@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]

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>

[perlchamp]

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

[ColtonYYZ]

@perlchamp, Bahnschrift is nice. I have always liked Tahoma so it’s my usual go to. Other than that, no other reason really.

[perlchamp]

@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;">&nbsp;[[ sensor.chiefs_news_attributes_0 ]]</span>&nbsp;&nbsp;&nbsp;
      <span class="ticker__item"  color: #FFFFFF;"><img src="/local/img/logo_chiefs.svg" alt="logo" style="height: 20px; vertical-align: middle;">&nbsp;[[ sensor.chiefs_news_attributes_1 ]]</span>&nbsp;&nbsp;&nbsp;
      <span class="ticker__item"  color: #FFFFFF;"><img src="/local/img/logo_fortuna.svg" alt="Fortuna 95" style="height: 20px; vertical-align: middle;">&nbsp;[[ sensor.fortuna_news_attributes_0 ]]</span>&nbsp;&nbsp;&nbsp;
      <span class="ticker__item"  color: #FFFFFF;"><img src="/local/img/logo_ger.svg" alt="logo" style="height: 20px; vertical-align: middle;">&nbsp;[[ sensor.ger_news_attributes_0 ]]</span>&nbsp;&nbsp;&nbsp;
      <span class="ticker__item"  color: #FFFFFF;"><img src="/local/img/logo_it.svg" alt="logo" style="height: 20px; vertical-align: middle;">&nbsp;[[ sensor.it_news_attributes_0 ]]</span>&nbsp;&nbsp;&nbsp;
      <span class="ticker__item"  color: #FFFFFF;"><img src="/local/img/logo_sp.svg" alt="logo" style="height: 20px; vertical-align: middle;">&nbsp;[[ sensor.sp_news_attributes_0 ]]</span>&nbsp;&nbsp;&nbsp;
    </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: &nbsp;&nbsp;;
        color: #ffff00;
        font-size: 1.5rem;
        font-weight: bold;
        margin-right: 10px;        
      }
  </style>

the png:

So long
Pc

[Gurulee (Lee)]

Two things I’d like to do:

1. Have the ticker items link to the external page when tapped/clicked.
2. Have a card that shows rss items in scrollable and linked to external page.

[perlchamp]

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