Create Circular widget

  • Created : Jan, 16, 2020
  • Last Updated: Mar, 23, 2022


Easy Steps

Widget Settings
  1. Create widget -> RSS
  2. Feed URL -> http://www.techmeme.com/feed.xml
  3. General -> Width -> Responsive/In Pixels -> Responsive
  4. General -> Style -> Thumbnail
  5. General -> Height -> In Pixels-> 351
  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 -> 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  */
    
    /* This adds the ability to utlize Google WebFonts in your FeedWind widget */
    @import 'https://fonts.googleapis.com/css?family=Noto+Sans';
    
    /* This is the styling for main feed container - NOTE: the background-color affects the footer background.*/
    
    
    #fw-container {
      border-radius: 50%;
      font-family: 'Noto Sans', Helvetica, sans-serif;
      box-shadow: 1px 1px 18px #9c9696;
      width: 300px;
      height: 300px !important;
      margin: 10px;
    }
    
    .fw-feed-item-image-module {
      float: none;
      display: block;
      text-align: center;
    }
    
    .fw-feed-item-image {
      margin: 0 auto;
    }
    
    .fw-feed-item-description {
      padding: 20px 25px;
    }
    
    /* CSS Ends Here  */
    
  12. Feed Title -> Custom -> ON
  13. Feed Title -> Font size -> 16
  14. Feed Title -> Colors -> Background color -> #55a0ff
  15. Feed Title -> Colors -> Font color -> #FFFFFF
  16. Feed Content -> Display Content -> Content
  17. Feed Content -> Size -> Item title -> 16
  18. Feed Content -> Size -> Bold -> OFF
  19. Feed Content -> Size -> Content -> 12
  20. Feed Content -> Colors -> Title font -> #2e7ec8
  21. Feed Content -> Colors -> Content font -> #505659
  22. Feed Content -> Colors -> Background -> #FFFFFF
  23. Feed Content -> Advanced Settings -> Time/Date -> OFF
  24. 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

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