464,230,207 widgets served
The largest re-publisher of feeds on the Internet
How to Implement CSS with FeedSweep

Summary: Using Cascading Style Sheets as your formatting method provides some unique opportunities for displaying FeedSweep Widgets. This article provides the basic information to get going with this method.

Within the Advanced Editor, there are two ways of formatting your FeedSweep Widget:

  1. HTML Tables
  2. CSS Classes using DIVs

This article provides the basic information for implementing "CSS Classes Using DIVs" with your FeedSweep Widget. The assumption is that you have a rudimentary knowledge of Cascading Style Sheets (CSS). If you do not, then search on "Introductory CSS" or "Learning CSS" to learn these fundamentals.

The Basics

CSS can be used to apply style characteristics like color, font, alignment and bordering to your widget so you can have your own unique, look 'n feel.

Every Cascading Style Sheet is a series of instructions called statements. A statement does two things:

  • it identifies the elements in the FeedSweep widget it affects
  • it tells the end-user's browser how to draw these elements

For our purposes, we define elements as the viewable components of a feed including date, headline, body etc.- as far as FeedSweep widgets are concerned, elements are its content wrapped in DIV tags.

The part of a statement which identifies elements is called a selector. Selectors select elements.

The part of a statement which tells a browser how selected elements should be drawn is called the declaration. A declaration can contain any number of properties which are to be applied to the selected element.

Here is an example:

.feedsweep_body
{
text-indent: 1cm;
text-align: left;
}

This is a single statement - keeping in mind your widget will most likely have more than one statement. The selector is feedsweep_body. This means the statement will affect the body content of each article in a FeedSweep widget.

The statement has a declaration with two properties. This means that each article's body content will have two properties applied. Each property has a name, for example "text-align" and a value, for example "left".

Default Widget Selectors

Unless you name your own selectors in the Advanced Editor, FeedSweep will automatically insert the following selectors in a widget:

  • feedsweep - a DIV class enclosing entire widget
  • feedsweep_title - a DIV class for the widget title
  • feedsweep-item - a DIV class for each article (or item) in the widget
  • feedsweep_itemX - an ID (not a class!) selector for each item in the widget where X starts at 1 and increments for each article in the widget
  • feedsweep_date - a DIV class for each date of each article in the widget
  • feedsweep_headline - a DIV class for each headline of each article in the widget
  • feedsweep _link - a DIV class for each link of each article in the widget
  • feedsweep_body - a DIV class for each body (content) of each article in the widget

 

If you were to look at the source output of a FeedSweep widget, this is how these selectors would appear:

 <!-- DIV enclosing entire FeedSweep widget -->
<div class="feedsweep">
<div class="feedsweep_title">THIS IS AN EXAMPLE TITLE</div>
<!-- start repeat for each article item, beginning with article #1, -->
<!-- where feedsweep_item# = 1 to #_of_articles                             -->
<div class="feedsweep_item" id="feedsweep_item1">
<div class="feedsweep_date">Thu, Apr 10 2008 - 4:54 PM</div>
<div class="feedsweep_headline">
<a class="feedsweep_link" href="http://to_some_link_1.com" target="_blank">
Apparent tornadoes hit Texas, Oklahoma</a>
</div>
<div class="feedsweep_body">
An apparent tornado with winds of up to 70 mph moved through West Texas early
Thursday, tearing shingles from roofs, shattering glass and flipping vehicles.
</div>
<!-- end of article #1 -->
</div>
<!-- start of article #2 -->
<div class="feedsweep_item" id="feedsweep_item2">
<div class="feedsweep_date">Thu, Apr 10 2008 - 4:51 PM</div>
<div class="feedsweep_headline">
<a class="feedsweep_link" href="http://to_some_link_2.com" target="_blank">
Dalai Lama set to begin 6-day US visit</a>
</div>
<div class="feedsweep_body">
The Dalai Lama will mark his first visit to the United States since the
recent turmoil in Tibet by anchoring an ambitious conference on compassion.
</div>
</div>
<!-- end repeat for each feed article -->
<div class="feedsweep_headline">
<a target="_blank" title="Learn about FeedSweep, a free service from ToolButton Inc."
class="feedsweep_link" href="http://www.FeedSweep.com/products/fs/">Powered
by FeedSweep</a>
</div>
</div>

View in a separate window.

An example of some accompaning CSS statements for a CSS-formatted FeedSweep widget like the above might look like the following:

<style type="text/css">
.feedsweep { background-color: Blue; color: white; width: 300px; padding: 10px;
font-family: sans-serif; text-align: right;}
.feedsweep_link {text-decoration: underline;}
<!--
    alternatively we could use the hyperlink CSS pseudo-class, as per:
    a.feedsweep_link:link {color: #ff0000; font-size: x-small; } 
    a.feedsweep_link:visited {color: #0000ff; font-size: x-small; } 
    a.feedsweep_link:hover {color: #000000; font-size: 150%; }
    -->
.feedsweep_title {color: #00ff00; text-transform: uppercase; text-align: center;}
.feedsweep_item {font-style: italic; text-align: left;}
.feedsweep_date {margin-top: 7px; text-align: right;}
.feedsweep_headline {color: #dda0dd;}
.feedsweep_body {text-indent: 1cm; text-align: left;}
</style>

Of course, this is the beauty of CSS - by customizing the statements, you can create virtually any look 'n feel you might want. So the example above is just that - an example. The possibilities are really limitless.

Do Not Forget

Your FeedSweep widget will only be formatted according to your CSS layout if the wiidget can "see" the CSS declarations. It is your responsibility to ensure these declarations are included within the web page hosting your widget. There are no CSS declarations included in the code when you create a widget in either the Basic or Advanced Editor. You must create these declarations in a CSS file yourself.

There are two ways that a style sheet can be associated with a widget. First, the style sheet can be embedded in the head of the hosting HTML document.

The second way is the preferred way of associating widgets with style sheets and that is to place a link in the HEAD of the web page to the style sheet.

With this link, when the end user's browser begins reading the page, it sees the style sheet link, downloads the style sheet and then uses the style sheet to draw the page.

You can in fact place links to several style sheets in an HTML web page but remember the last one seen is the one that wins.
 

Examples

See the Examples section for some of the different look 'n feels you can create using the "CSS Classes with DIVs" formatting option.

 


How would you rate this article?

 

Rating: 6 user(s) have rated this article Average rating: 3.8
Posted by: admin, on 07/09/2008, in category "FeedSweep How-To's"
Views: this article has been read 26810 times

DiggDigg It!  Del.icio.usDel.icio.us  RedditReddit  StumbleUponStumbleIt  NewsvineNewsvine  FurlFurl  BlinkListBlinkList