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 */

body{margin:20px;padding:0;overflow-x:hidden;}
img{border:none;}
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{margin:0;padding:5px;color:#FFFFFF;background-color:#0066FF;background-image:none;}
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

Sports-widget

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.

Using Custom Tags With Feedwind

Using Custom Tags With Feedwind

An official FeedWind document detailing their custom tags feature, which allows you to add custom tag categories to your...