Create card style widget with read more option

  • Created : Jan, 15, 2020
  • Last Updated: Apr, 14, 2023


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 -> Card
  5. General -> Height -> Image -> 300
  6. General -> Height -> Posts -> 1
  7. General -> Scroll -> ON
  8. General -> Scroll -> Navigation Arrow -> ON
  9. General -> Scroll -> Autoscroll -> ON
  10. General -> Scroll -> Scroll Speed-> 4
  11. General -> Style -> Image Scale-> Fits the Shortest side
  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  */
    
    .fw-feed-item-content-module {
      padding: 20px !important;
    }
    
    .fw-feed-item-title {
      font-weight: bold;
      padding-bottom: 10px !important;
    }
    
    span.fw-feed-item-more-link {
      display: block;
      padding: 10px;
      margin: 10px 0 0 0;
      background: #ff8f00;
      border-radius: 25px;
      width: 120px;
      text-align: center;
      letter-spacing: 1px;
      color: white;
    }
    
    .fw-feed-item-date {
      margin: 20px 0 0 0 !important;
    }
    
    /* CSS Ends Here  */
    
  13. Feed Title -> Custom -> OFF
  14. Feed Content -> Display "Read more" -> ON
  15. Feed Content -> Size -> Item title -> 16
  16. Feed Content -> Size -> Bold -> OFF
  17. Feed Content -> Size -> Content -> 14
  18. Feed Content -> Colors -> Title font -> #000000
  19. Feed Content -> Colors -> Content font -> #505659
  20. Feed Content -> Colors -> Background -> #FFFFFF
  21. Feed Content -> Advanced Settings -> Time/Date -> ON
  22. Feed Content -> Advanced Settings -> Time/Date -> [12] [#505659]
  23. Rest keep as default


Related posts

Bento design style widget

Ultimate Bento Design in FeedWind Widgets

Contents1 Why Bento Design?2 Crafting Your Bento Design Style Widget with FeedWind: A Step-by-Step Guide3 Bento Design Style Widget...

podcast guide banner

Facebook posts: Enhance your brand’s online presence with custom overlay design

Stand Out with Custom Overlay Designs While images play a vital role in catching the eye, the design elements...

Create widget in Overlay style with linear gradient background

Create widget in Overlay style with linear gradient background