Create the FeedWind v1 style using v2
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
How to Dynamically Display WooCommerce Products on Your Website Using FeedWind
Contents1 Step 1: Access Your WooCommerce Product RSS Feed2 Step 2: Add Product Images to Your RSS Feed3 Step...
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...