Create transparent feed widget

  • Created : Jan, 15, 2020
  • Last Updated: Oct, 21, 2022

Here’s an example of a transparent Feed Widget.

Follow these steps to create a similar customized transparent feed widget for your website.

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


Related posts

Create widget in Overlay style with linear gradient background

Create widget in Overlay style with linear gradient background

Create widget in Overlay style

Create widget in Overlay style

Here’s an example and steps to create a overlay widget

Facebook widget

Example Facebook page widget in large image style

Easily create a Facebook widget with a large image style and customize it as your need.

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