Display widget in text overlay with faded background

  • Created : Apr, 2, 2020
  • Last Updated: Jul, 2, 2020

Users can now show any RSS feeds in a new style with overlay text and faded background effect view using custom CSS. Previously, users were only able to show images below the text or sidewise as a thumbnail. 

Easy Steps

Widget Settings
  1. Create widget -> RSS
  2. Feed URL -> https://www.wired.com/feed/category/ideas/latest/rss
  3. General -> Width -> Responsive/In Pixels -> Responsive
  4. General -> Style -> Thumbnail
  5. General -> Height -> Posts -> 1
  6. General -> Scroll -> ON
  7. General -> Scroll -> Horizontal
  8. General -> Scroll -> Navigation Arrow -> ON
  9. General -> Scroll -> Autoscroll -> ON
  10. General -> Scroll -> Fade Transition -> ON
  11. 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  */
    
    #fw-feed-items .fw-feed-item-url[onclick] {
        position: relative;
    }
    .fw-feed-item,.fw-feed-item:hover {
        margin: 0;
        padding: 0;
        clear: both;
        border-bottom: 0px dashed #CCCCCC;
    }
    #fw-container{
    	height: 350px;
    }
    .fw-feed-item-content-module {
        margin: 0px;
        padding: 10px;
        overflow: hidden;
        position: absolute;
        top: 0;
        height: 100%;
        background: rgb(255,255,255);
        background: linear-gradient(273deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5130427170868348) 0, rgba(0,0,0,1) 100%);
        width: 100%;
    	padding-top: 75px;
    }
    .fw-feed-item-image {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 350px;
        overflow: hidden;
    }
    span.fw-feed-item-title {
        padding: 10px 0;
    }
    .fw-feed-item-image-module {
        margin: 0 0 0 5px;
        padding: 0;
         float: none;
    }
    
    .fw-feed-item-title,
    .fw-feed-item-description,
    .fw-feed-item-date {
       
        width: 50%;
    
    }
    /*   CSS Ends Here  */
    
  12. Feed Title -> Custom -> OFF
  13. Feed Content -> Size -> Item title -> 20
  14. Feed Content -> Size -> Bold -> OFF
  15. Feed Content -> Size -> Content -> 16
  16. Feed Content -> Colors -> Title font -> #0084FF
  17. Feed Content -> Colors -> Content font -> #A8A8A8
  18. Feed Content -> Colors -> Background -> #000000
  19. Feed Content -> Advanced Settings -> Time/Date -> OFF
  20. Rest keep as default

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