Create the FeedWind v1 style using v2

  • Created : May, 9, 2017
  • Last Updated: Jun, 8, 2022

Some users who have previously created v1 widgets and have migrated to v2 might like to retain the default appearance of the FeedWind v1 style widget. The setup screen for v1 has now been removed so we now only provide v2 setup for our widgets.

Recreating the FeedWind v1 style

To recreate the v1 style in v2, you must use a custom CSS. Here is an example custom CSS for the FeedWind v1 style for you to copy to your own .css file and store on your server (or store on Dropbox). When you use this CSS, you may still wish to control widget settings from the v2 setup screen – for example, font sizes are easy to set and can be instantly previewed in the setup screen as opposed to controlling them through CSS.

/*Start CSS: FeedWind-v1-style */

a{text-decoration: none;}
#fw-container{text-align:left;overflow:hidden;margin:0;padding:0;width:auto;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
header .fw-feed-title {margin:0;padding:0;font-weight:bold;border-bottom: none; word-wrap:break-word;}
header .fw-feed-title a:link{color:#FFFFFF;text-decoration:none;}
header .fw-feed-title a:hover{color:#FFFFFF;text-decoration:underline;}
header .fw-feed-title a:hover{color:#FFFFFF;text-decoration:underline;}
header .fw-feed-title a:visited{color:#FFFFFF;text-decoration:none;}
header .fw-feed-title a:active{color:#FFFFFF;text-decoration:none;}
#fw-feed-items{overflow:hidden;margin:0 0 0 0;padding:5px 0px 0px 0px;background-color:#FFFFFF;background-image:none;}
#fw-feed-items .fw-feed-item{margin:0 0 7px 0;padding:0 0 7px 0;border-bottom:1px dashed #CCCCCC;clear:both;}
#fw-feed-items .fw-feed-item-url{display: block;overflow: hidden;}
#fw-feed-items .fw-feed-item-content-module{margin:0 0 0 3px;padding:0;}
#fw-feed-items .fw-feed-item-title{margin:0;padding:0;color:#0066FF;font-weight:bold;}
#fw-feed-items .fw-feed-item-image{width:110px; height:100px; float:left; margin:5px 8px 5px 5px; overflow:hidden;}
#fw-feed-items .fw-feed-item-description{margin:0;padding:0;color:#666666;line-height:135%;word-wrap:break-word;clear:both;}
#fw-feed-items .fw-feed-item-date{margin:3px 0;padding:3px 0;color:#666666;overflow:hidden;text-overflow:ellipsis;clear:both;}

/* End CSS */


Example v1 style widget

The resulting widget should look something like this:

If you need any assistance in creating the FeedWind v1 style in the v2 setup screen, please contact support and we will help you.

Related posts

Create a Vimeo Video Widget for Your Website

How to Create a Vimeo Video Widget for Your Website – Easy Guide

Contents1 Step 1: Get the Vimeo Video Feed2 Step 2: Create a FeedWind Account3 Step 3: Make Your Vimeo...


Add a Dynamic Sports Widget to Your Website

Contents1 Increase User Engagement1.1 Increased Engagement1.2 Lower Bounce Rates1.3 Level Up User Experience2 How to Add FeedWind Sports Widget...

Create a single column widget for mobile

An official document for FeedWind’s Single Column widget for mobile devices.