280 Million Impression / Month

FeedWind is an RSS feed widget. Simply copy & paste the snippet of code to embed into your web page. It's free and ready to use without having to register!

  • Home >
  • Support >
  • Customize FeedWind with CSS - Part 2 of 2

Customize FeedWind with CSS - Part 2 of 2

FeedWind RSS Customization - Advanced Settings

RSS feed widgets don’t have to resemble the dull appearance of a typical CNN or CBS news sidebars. An RSS feed can contain some great media elements and with FeedWind RSS, this can be presented in a custom format that matches your website design. 

There is a broad range of media available through RSS

Many people do not realize the huge variety of RSS feeds available which can add all types of Rich Media content to a site. The best thing about RSS is that it is live information which means that a site presenting live feeds will be always seen as up to date and relevant. Once you find the RSS feeds they want to display and make available on your sites, it is possible to customize FeedWind to get those feeds to match the colors, dimensions and design of the site they are placed on.

FeedWind allows for custom CSS to be applied which will allow a web designer to create matching designs for this handy and very capable RSS widget so that it looks good on the target site. There are many different wensite builders out there, so it is not practical to go through the process for each one. However, the common denominator for them all is that the FeedWind Widget is HTML-based, so any site design which can utilize a block of HTML in a site element such as a panel, widget area, sidebar, footer, attached to a text box etc. can use the FeedWind RSS HTML code with just a copy/paste action.

The following guide will help you match the design shapes and colors of any website

To begin you will need access to a paint program such as Photoshop or Corel Paintshop – there’s plenty out there and most web designers will own one anyway. Even a freebie such as Windows Paint will do for our purposes. You probably do not want to delve into the CSS of your site just to find out information about it. If the CSS is part of a template in WordPress, Joomla or other CMS, the elements of the template may be shared between many style sheets and be hard to find. 

However, there are ways to find out the dimensions and colors of elements in a template without accessing the CSS of the template itself. All browsers have a developer function to examine the details of page elements - pressing F12 in most browsers will disaplay a console below the page you are viewing. We will also determine dimensions of other design elements too. Let’s start with a simple site design that you want to emulate by using in a Custom CSS file for FeedWind.

Custom CSS For FeedWind

Please see Using Custom CSS with FeedWind - Part 1 of 2 for details on the inital template used for your custom CSS
A custom CSS file for FeedWind can contain many CSS commands and be used to modify the FeedWind output so it displays the way you want. To get the FeedWind widget design to match your site, you have to find the correct parameters to use with the Custom CSS commands. 

Trial and error with different settings is a laborious and inefficient process – trying to figure out corner radius etc. is not that simple unless you have the source specification for the element in question. For example if your website has a common corner radius of 10% it is a pain to figure out a radius using screenshots and a graphics program - although quite possible, we show you how to do this later on. The dimensions and parameters for a radius are usually right there in the HTML of the page. In some cases where there are Flash elements for example, using a screenshot plus a graphics program may be the only way to find out the exact radius dimension.

Developer tools

To begin with you need to be familiar with the developer tools that the major browsers come equipped with. Anyone who is able to create custom CSS would probably already be familiar with one or two of these but still might not realize how useful they are when it comes to designing a site.

Pressing the F12 key in your browser will bring up the developer console in Chrome, Explorer and FireFox - 

Opera/Safari users can use shortcut:  Command (⌘) + Option (⌥) + I. 

The developer console is a key area that will show you every component of a web page and well worth the effort in spending a little time to figure it out.

FireFox seems to be the best developer console

We will use FireFox (the most elegant of the mainstream consoles) in our examples. Clicking F12 gives us information about the page we are looking at. The tools vary from browser to browser but they all include the ability to look at the code that makes up the web page being displayed in the upper pane. 

This may be HTML, CSS, JavaScript, PHP and typically a combination of any one or more of these. The code is displayed in a hierarchical manner when viewed as HTML, CSS or Script mode. To the seasoned web programmer there is no difficulty in finding the information you need in the developer panes; to the uninitiated however, the array of code and all the available options can seem a little overwhelming but it is actually fairly easy to navigate around and find what you want.

custom feed widget


We will be looking to find information about specific page elements such as box dimensions, radius or color codes and the easiest way in most browsers is to Right-Click and select Inspect Element and so not only will the console appear, it will have the correct area of the HTML or CSS highlighted. >

There is a fair bit of difference between the features available in the various browsers’ developer windows but we only need a little information. FireFox even allows you to zoom in and select/look at an element to make it easy to find the information you need. Explorer (as usual) has to be different and unhelpfully does not allow easy navigation of page elements. For this reason is rarely used by anyone who programs code other than to check how their efforts work in Internet Explorer.  rss feed widget can be customized
 

 

rss feed widget customization

After locating the specific element you want to examine check in the lower pane for the item highlighted in the left hand pane. In the right hand pane should be the details that you need in order for you to extract your design information to use afterwards in FeedWind. Something that should be noted at this point. Some sites have elements with radiused corners for example or fill colors that are not defined in the HTML as these have been converted to images instead of being described as a vector element. There is a different method for determining properties in this case. In our example we have the HTML that created the corner radii for the element we chose, the border thickness and the relevant HTML color codes.

custom corners in rss feed widget


 

 

The information about the element will be displayed in the bottom developer pane. There is extensive information available in this area and even for those accustomed to it, navigation to find what you need can be tricky. In the image right, you can see the code for a page background element which has a corner radius of 7px.

 

 

use Firefox to identify rss container dimensions

If you cannot locate the code relating to the element you are looking to match and not already using it, you can try the (free) FireFox browser which has a nifty 3D element locater that allows you to see the page in a view where each layer of an element can be seen like a slice through a layer cake. 

 

Looking at the page sideways on, you can select layer elements with complete accuracy. The 3D layers are colored in FireFox for ease of selection. In the example we use the layers to find the radius of a search button.  

 

 

select colors for your custom feed widget

 

There is even a color picker available in FireFox to make it easy to find colors used in a web page. The HTML color code can be used in the FeedWind custom CSS to match design.

 

USE A SCREENSHOT TECHNIQUE TO IDENTIFY ELEMENT DIMENSIONS

If the element is simply a graphic and not described at all in HTML, there is a fairly easy solution to get the corner radius. Simply take a screen shot of the page you want using CTRL+ALT+PRINTSCRN keys and then CTRL+Paste (CTRL+V) into your favorite paint program. 
Note: Always make sure the zoom on the browser is at 100% otherwise the zoom will distort the real radius size .Here you can use a number of methods to get the radius. The easiest is to zoom in on the corner you are interested in and draw a perfect circle using the vector tool. Making sure the “Fill” is set to transparent, with any color border, drag the circle over the corner and resize it until the circle radius matches the corner.

custom feed widget - finding the corner radius

Using Corel Paint Shop, the vector circle drawn over the corner radius we are looking to match (seen in orange) has dimensions displayed in the toolbar. This information is available in any drawing package that deals properly with vectors such as Corel Paintshop Pro or Photoshop. 

Even Windows Paint will give you the information you need - although it does not allow for radius dimensioning, it will give you the radius dimension of a circle you just drew. Simply use a circle drawing tool and draw one until it fits snugly on the inside, middle, or outside of the corner you are matching.  

For elliptical corners, there are two radius dimensions. As you can see in the screenshot, Corel Paintshop gives you an -x and a -y radius so you can use the relevant commands in your custom CSS to produce these more exotic shapes.

The screen you are taking screenshots from must be visible in a 100% zoom. If the window is zoomed in or out, your radius measurements will be proportionally out of scale. Many other measurements can be taken using the screenshot, pasted into a paint package then overlaid with a shape to get measurements in pixels. The crop tool is another popular way to get pixel dimensions for shapes on a page.

Tip: hit F11 before you take a screenshot and you will get the full width/height of the page and at 100% zoom you get an image with exact pixel dimensions. This is handy for plenty of reasons. Any other elements which you wish to match and use perhaps as a background or style for your FeedWind can be captured, cropped and reused again. For example in the screenshot below, we have created a FeedWind RSS newsfeed from the NASA website and matched it with the page elements of the rest of the site.

cusom feed widget example

Using a 0px radius gave us the sharp corners and we used the screenshot technique to get the corner radius as described above, which was 32px. Matching the design shape and using a color gradient which was generated using colors selected from our screenshot we have produced a great looking newsfeed, right on the page that matches the whole style and look of the site. The title font in the FeedWind widget was selected to match the font used in site name in the header. This is an image and has had padding added to allow a title for the container to be static while the newsfeed title just below can change with the news.

Tip: An important point to note here is that if you produce layers to achieve your custom FeedWind widget, you must make sure that the widget is in the uppermost layer in your design program otherwise although you will be able to see and read the news, you will be unable to click on the links.

GET YOUR COLORS RIGHT

To get colors right, the same process is used, except you are looking for CSS “color” commands which are followed by the HTML color number in either full 6 character Hex 6 or Triple Hex where every other digit is ignored. Triple Hex color codes simply reduces the number of shades available to a fixed palette. CSS also supports simple color names like Blue, DarkRed, LimeGreen, of which there are 147 in total. 

Tip: if you need to know exactly how to use CSS try http://www.w3schools.com/ where CSS is explained in proper classroom style and you can play with custom code to see what it does and how it works. Another great feature here is the color matching and charts. Everything you need to know about online color coding etc. is here too - a wonderful resource for anyone who wants to learn more about CSS.

Tip: Here is a great site to find out all about color codes, CSS etc. You can find any color code and cross match different coding systems such as Pantone, Hex, Websafe etc…

Even those with little programming experience can customize FeedWind because there is already a template available here for the standard Custom CSS, all you have to do is add some commands to make the FeedWind RSS HTML widget exactly the way you want it. We have prepared tutorials for all the main activities such as precise guidance on creating radiused corners for the FeedWind container.

 


A FEEDWIND CUSTOM CSS TEMPLATE

Here is a basic FeedWind custom.css with nothing added: When used, this will display exactly as on the FeedWind homepage example. 

Note:  it is not possible to use some CSS commands in FeedWind custom css. For example, -repeat commands for wrapper images in the header are not supported.  We cannot cover every eventuality as there are so many css commands and parameter combinations  that could be present.  Usually, adding a new item into the custom CSS and checking it on your web page is the easiest way to find out if our CSS works with FeedWind. 

/*##########Container##########*/

#container{margin:0;padding:0;width:200px;height:300px;font-size:12px;font-color:#FFFFFF;border-radius: 20px;background-color:#9AB1D2;}
/*##########Header##########*/
#header{width:200px;height:10px;margin:10px 0px 10px 0;padding:10px 5px 10px 5px;font-color:#FFFFFF;}
#header.feed_title{margin:10px 0px 50px 0;padding:10px 5px 50px 5px;;font-weight:bold;}
#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##########*/
#content{margin:0;padding:5px 5px 10px 10px;}
#content.feed_item{margin:10px 0 10px 0px;padding:0 0 0px 0px;}
#content.feed_item_title{margin:1px 20px 1px 3px;padding:1px 0 1px 3px;color:#FFFFFF;font-weight:bold;}
#content.feed_item_title a:link{color:#FFFFFF;text-decoration:none;}/*feed_item_title:link*/ 
#content.feed_item_title a:visited{color:#FFFFFF;text-decoration:none;}/*feed_item_title:visited*/
#content.feed_item_title a:hover{color:#FFFFFF;text-decoration:underline;}/*feed_item_title:hover*/  
#content.feed_item_title a:active{color:#FFFFFF;text-decoration:none;}/*feed_item_title:active*/ 
#content.feed_item_description{margin:0 0 0 3px;padding:0 0 0 3px;color:#FFFFFF;line-height:135%;}/*feed_item_description:active*/ 

CONCLUSION

Your imagination is the only thing you need to ensure that you get the best looking site around with live feeds from FeedWind! To be extra-innovative, make sure you look around for the best RSS feeds - there are millions available - nearly every blog has them for a start! You can even put this FeedWind blog onto your web page if you want! (we welcome you to do that - the RSS link is here). 


 

Posted by Tim Higgins
customized rss widget, customize feedwind, custom widget, custom fonts in rss feed, custom feed widget rss, custom feed widget,

Back to Top