📰 Lovelace: RSS Feed Parser Plugin/List Card

[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