Create transparent feed widget

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


Easy Steps

Widget Settings
  1. Create widget -> RSS
  2. Feed URL -> https://www.wired.com/feed/rss
  3. General -> Width -> Responsive/In Pixels -> Responsive
  4. General -> Style -> Thumbnail
  5. General -> Height -> In Pixels -> 390
  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  */
    header {
      border-bottom: 6px solid #00e7ff;
    }
    
    .fw-feed-title {
      text-align: center;
    }
    
    .fw-feed-item {
      padding: 0px 0px 0px 0;
      position: relative;
      width: 95%;
      margin: 0 auto;
    }
    
    .fw-feed-item:hover {
      padding: 0px 0px 0px 0;
      margin: 0 auto;
    }
    
    .fw-feed-item-image-module {
      padding: 0;
      float: none;
      margin: 0 0 0 0px;
      width: 100%;
      text-align: left;
      height: 300px;
      width: 100% !important;
    }
    
    .fw-feed-item-image {
      display: none;
    }
    
    #fw-feed-items .fw-feed-item-description {
      margin: 0 2px 0 0;
      padding: 0 2px 0 0;
      color: #505659;
      word-wrap: break-word;
      line-height: 1.5;
      font-size: 16px;
      font-weight: bold;
      overflow: hidden;
      display: block;
      text-align: center;
    }
    
    .fw-feed-item-description,
    .fw-feed-item-description img {
      width: 100% !important;
    }
    
    .fw-feed-item-content-module {
      margin: 20px 51px;
      padding: 20px 5px;
      overflow: visible;
      text-align: center;
      position: absolute;
      top: 27%;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.66);
      border-radius: 15px;
      border: 7px solid rgba(255, 176, 9, 0.39);
    }
    
    
    /* CSS Ends Here  */
    
  13. Feed Title -> Custom -> ON
  14. Feed Title -> Custom -> Main Title -> Feedwind Youtube Channel
  15. Feed Title -> Font size -> 18
  16. Feed Title -> Bold -> ON
  17. Feed Title -> Colors -> Background color -> #191919
  18. Feed Title -> Colors -> Font color -> #FFFFFF
  19. Feed Content -> Display Content-> Title
  20. Feed Content -> Size -> Item title -> 16
  21. Feed Content -> Size -> Bold -> OFF
  22. Feed Content -> Size -> Content -> 12
  23. Feed Content -> Colors -> Title font -> #FFFFFF
  24. Feed Content -> Colors -> Content font -> #FFFFFF
  25. Feed Content -> Colors -> Background -> #FFFFFF
  26. Feed Content -> Advanced Settings -> Background -> Add Image URL
  27. Rest keep as default

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