Create RSS custom design list style widget with Fade effect

  • Created : Jan, 16, 2020
  • Last Updated: Jan, 17, 2020


Easy Steps

Widget Settings
  1. Create widget -> RSS
  2. Feed URL -> https://www.wired.com/feed/category/business/latest/rss
  3. General -> Width -> Responsive/In Pixels -> Responsive
  4. General -> Style -> Thumbnail
  5. General -> Height -> Posts -> 3
  6. General -> Scroll -> ON
  7. General -> Scroll -> Vertical
  8. General -> Scroll -> Scroll Bar -> OFF
  9. General -> Scroll -> Autoscroll -> ON
  10. General -> Scroll -> Autoscroll -> Normal
  11. General -> Scroll -> Scroll Speed-> 4
  12. General -> Advanced Settings -> Custom CSS link -> Show custom css
    Note: Copy CSS from below, paste into your CSS file [your-file-name.css] , make changes as per your need and upload to your server or in Dropbox [ Check How to host CSS on Dropbox Click here], copy the complete CSS path [e.g. http//example.com/css/your-file.css] and paste in "Custom CSS Link" field in Feedwind setting.
    
    
    /* Copy CSS from here  */
    
    @import url('https://fonts.googleapis.com/css?family=Muli:300,400,700,900');
    
    #fw-container {
      font-family: 'Muli', sans-serif;
    }
    
    header {
      letter-spacing: 1px;
      text-align: center;
      box-shadow: 0px 5px 10px #00000066;
      z-index: 1000;
      position: relative;
    }
    
    .fw-feed-item,
    .fw-feed-item:hover {
      padding: 0;
      transition: all 0.5s linear;
    }
    
    .fw-feed-item-image-module {
      margin: 0;
    }
    
    .fw-feed-item:nth-child(odd) {
      background-color: #f3f3f3;
    }
    
    .fw-feed-item:nth-child(even) {
      background-color: #fff;
    }
    
    .fw-feed-item:hover {
      background-color: #c6a1e8;
    }
    
    .fw-feed-item:hover .fw-feed-item-title,
    .fw-feed-item:hover .fw-feed-item-date {
      color: #fff;
    }
    
    .fw-feed-item-image {
      position: relative;
      transition: all 0.5s linear;
    }
    
    .fw-feed-item-image:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #c6a1e8b3;
      transition: all 0.5s linear;
    }
    
    .fw-feed-item:hover .fw-feed-item-image {
      -webkit-filter: grayscale(100%);
      /* Safari 6.0 - 9.0 */
      filter: grayscale(100%);
    }
    
    .fw-feed-item:hover .fw-feed-item-image:after {
      background-color: transparent;
    }
    
    .fw-feed-item-content-module {
      padding: 30px 0 0 30px;
    }
    
    .fw-feed-item-title,
    .fw-feed-item-date {
      font-weight: 700;
    }
    
    
    /* CSS Ends Here  */
    
  13. Feed Title -> Custom -> ON
  14. Feed Title -> Font size -> 14
  15. Feed Title -> Colors -> Background color -> #00cba9
  16. Feed Title -> Colors -> Font color -> #FFFFFF
  17. Feed Content -> Display Content -> Title
  18. Feed Content -> Size -> Item title -> 14
  19. Feed Content -> Size -> Bold -> OFF
  20. Feed Content -> Size -> Content -> 12
  21. Feed Content -> Colors -> Title font -> #000000
  22. Feed Content -> Colors -> Content font -> #505659
  23. Feed Content -> Colors -> Background -> #FFFFFF
  24. Feed Content -> Advanced Settings -> Separation line -> OFF
  25. Feed Content -> Advanced Settings -> Time/Date -> ON
  26. Feed Content -> Advanced Settings -> Time/Date -> [10] [#505659]
  27. Rest keep as default

Start your free trial. FeedWind is the easiest way to add dynamic content on your website.
Create Now