Display widget in text overlay with faded background

• Created : Apr, 2, 2020
• Last Updated: Feb, 24, 2023

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

Rest keep as default

Related posts

Create widget in Overlay style with linear gradient background

Create widget in Overlay style

Here’s an example and steps to create a overlay 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.