Create a Custom CSS for FeedWind - Part 1 - Initial setup.
FeedWind allows advanced users to set up their own custom cascading style sheet (CSS). This is achieved by creating a custom CSS files which can contain a wide range of HTML and CSS modifiers which will allow you to completely customize your RSS feed. and the containers in which it appears.
We have specific tutorials for the following customizations:
- Container dimensioning - fixed and percentage sizing and scrollbars.
- Container borders - line thickness, colors and symmetric /asymmetric border radius.
- Fonts - font families, colors and text effects.
- General customizations - including more advanced font & border settings, and site design matching. whereby you can match the look and feel of your blog or site by applying styles you created yourself to the FeedWind widget.(see part two of this tutorial series - you are reading part 1)
Creating a custom CSS for your RSS widget
(1) Create a CSS file
Use your favorite text editor or software to prepare the CSS file. FeedWind is constructed with the following HTML code. Notepad++ is a great free editor that is ideal for creating a css file.
A basic file would look something like the example below, and produce the simple customization you see to the right. As you can see the CSS is split into three sections; the Container, Header and Content. We have commented these in red to mark them below. You can simply copy this code into Notepad++ or your text editor and modify the contents, then save is as myfilename.css (or whatever name you want, should have the .css extension though).
#container{text-align:left;overflow:hidden;margin:0;padding:0;width:300px;height:400px;font-family:Arial, Helvetica, sans-serif;font-size:18px;border:0px solid #CCCCCC;}
#header{margin:0px;padding:5px 5px 5px 5px;color:#FFFFFF;background-color:#0066FF;background-image:none;display:none;}
#header .feed_title{margin:0;padding:0;font-weight:bold;word-wrap:break-word;}
#header .feed_title a:link{color:#FFFFFF;text-decoration:none;}
#header .feed_title a:visited{color:#FFFFFF;text-decoration:none;}
#header .feed_title a:hover{color:#FFFFFF;text-decoration:underline;}
#header .feed_title a:active{color:#FFFFFF;text-decoration:none;}
#content{overflow:hidden;margin:0 0 0 0;;padding:5px 0px 0px 0px;background-color:#FFF7FE;background-image:none;}
#content .feed_item{margin:0 0 7px 0;padding:0 0 7px 0;border-bottom:1px dashed #CCCCCC;}
#content .feed_item_title{margin:1px 0 1px 3px;padding:1px 2px 1px 3px;color:#0066FF;font-weight:bold;}
#content .feed_item_title a:link{color:#0066FF;text-decoration:none;}
#content .feed_item_title a:visited{color:#0066FF;text-decoration:none;}
#content .feed_item_title a:hover{color:#0066FF;text-decoration:underline;}
#content .feed_item_title a:active{color:#0066FF;text-decoration:none;}
#content .feed_item_podcast{margin:0 0 0 3px;padding:0 0 0 3px;}
#content .feed_item_date{margin:0 0 0 3px;padding:0 2px 0 3px;color:#666666;overflow: hidden;text-overflow: ellipsis;}
#content .feed_item_link{margin:0 0 0 3px;padding:0 2px 0 3px;color:#666666;overflow: hidden;text-overflow: ellipsis;}
#content a.feed_item_link_anchor{color:#666666; text-decoration:none;}
#content a:link.feed_item_link_anchor{color:#666666; text-decoration:none;}
#content a:visited.feed_item_link_anchor{color:#666666; text-decoration:none;}
#content a:hover.feed_item_link_anchor{color:#666666; text-decoration:none;}
#content a:active.feed_item_link_anchor{text-decoration:none;}
#content .feed_item_description{font-size:0px;}
#content .feed_item_thumbnail{width:298px; height:200px; float:left; margin:5px; overflow:hidden;border:#000000 2px;}
#content .feed_item_clear{width:0: height:0; margin:0; padding:0; clear:both;}
#footer{display:none;height:0px;margin:0px;padding:0px;color:#FFFFFF;background-color:#FFFFFF;background-image:none;}
Tip : Use pixel (px) units when setting margin and padding, allthough in some cases percentages do work when specifying container dimensions.
(2) Upload the .CSS file to your webserver and take note of its URL.
FeedWind reads the CSS file directly from an external server. Make sure to place the CSS file on your server or use a service such as Dropbox to store your CSS file.
(3) Input the CSS URL
Click on the >Advanced Settings link in the General box. Enter the URL of the custom CSS location in URL of Custom CSS box. The new design will be displayed in the Preview area.
WIDGET HERE
Note: When using a custom CSS, some parts of the settings screen will be grayed out and disabled. This is to prevent conflicts between FeedWind’s default settings and settings in the custom CSS. When a custom CSS is used, those settings will be enabled.
FeedWind has an option for setting the maximum length of the titles and content of feeds. FeedWind automatically adjusts the number of feeds shown based on the value entered for the maximum length. Because of this, sometimes a feed may be displayed outside of the border depending on the line-height and other settings in the custom CSS. In this case, please adjust the settings in the CSS file.
See Customize FeedWind with CSS - Part 2 of 2 to find out more specific customizations that are possible.