XML Format - Free News Feeds - JavaScript Style

Dress Up Your Output With Cascading Style Sheets (CSS)

Once you have created your RSS Feed JavaScript Code, using the Build Page, you can customized the content output by applying different Style Sheets. Each part of the Feed has an Identifier, allowing you to add Styles to the box containing the Feed, the Title, the Item display, and the Posting Date. A few sample Styles are provided for you to tinker with and each one can be modified to create one that suits you best. At the end of the page are some tips on how to use the Styles in your own Web Pages.

Select One Of The Style Sheets

URL: Enter The Web Address of The RSS Feed to “Stylize” or Use Ours To Quickly View All Samples.

Style Selector: Here are few sample Styles you can modify or use to create your own. For a blank style, select the "No Style / Blank Template" option. For one with No Bullets or Indents on the list items, select the "No Bullets" option.

How To Use a Style Sheet

You will need to incorporate the CSS code or linkage in your own HTML files. There are two ways you can do this:

1. Insert the CSS code directly into the HTML for the page that will display the feed. This methods is best for sites that are only displaying the feed on one or a few pages. Use the form below to find the Style you desire, copy the CSS and paste it somewhere into the <HEAD>...</HEAD> of your HTML file that contains the JavaScript Feed code, surrounded by the <style>...</style> tags shown below.

<style type="text/css" media="all"> 
<!--  This is Where You Will Paste The CSS Code Provided by the Form Below -->
</style>

2. Link to an External Style Sheet. This method is best if you will be using the Feeds on multiple pages, as the CSS Code is stored externally. This method also allows you to change the output display of many pages by editing a single file. Just copy the CSS Code provided by the form below and paste it into a new text file. Save this text file as something called "myfeed.css". Think smart about where you decided to store this file, as other HTML pages that call it need to define a correct path to the file. Many Websites just create a top level directory named Style and store all Style Sheet files in this directory.

Regardless, to connect the HTML file that contains the JavaScript Feed code to an External Style Sheet, insert this line into the <HEAD>...</HEAD> section of your HTML Document.

<link rel="stylesheet" href="style/myfeed.css" media="all">

Remember again, that the Value of href= must be a Correct Relative Path or a Full Valid URL Address such as: http://www.site.com/style/myfeed.css from the HTML File to the CSS File.

Cascading Style Sheets (CSS) Classes

This Sketch Represents The CSS Classes That Can Be Manually Configured By The End User RSS Box

rss-box - Defines the bounding div for the entire display where you can use it to define borders and color fill, etc.
rss-title - Defines the title of the feed and link style if displayed. Use with variants of rss-title a:link, rss-title a:hover, etc for rollover link styles.
rss-items - Defines the unordered list <ul>...</ul> for the feed items. Use to define the padding/margins for items.
rss-item - Display of each feed item description and title, <li>...</li> and the channel description, if displayed.
rss-item a: - Variant for the item title and link style.
rss-date - Defines the display of item posting dates. You can add bold emphasis or underlines to them etc.

RSS 2.0 Feeds With Podcast Enclosures

For any RSS 2.0 Feeds with Podcast Enclosures, Feed2JS will provide a Play XXX link, where “XXX” is the extension of the media file, e.g. “mp3”, “m4a”, etc. The styles applied are modeled after Well Styled’s Inline Buttons method.

<div class="pod-play-box">
<a class="pod-play" href="podcastURL"><em>Play</em><span>File</span></a>
</div>

Custom colors may be achieved by editing appropriate foreground and background colors from the base styles (emphasized below):

.pod-play { _width: 12em; margin: 0 0.2em; padding: 0.1em 0;
            _padding: 0; white-space: nowrap; text-decoration: none;
            vertical-align: middle; background: #fb6;
            color: black; }
            
.pod-play em { _width: 1em; _cursor: hand ; font-style: normal;
               margin: 0; padding: 0.1em 0.5em;
               background: white; color: #222; }
               
.pod-play span { _width: 1em; _cursor: hand; margin: 0; 
                 padding: 0.1em 0.5em 0.1em 0.3em; }
                 
.pod-play:hover { background: #666; color: white; }

.pod-play:hover em { background: black; color: white }

Advanced Section: Two Styles in One Page

If you have more than one feed displayed per page, you can assign different styles to each display. You will need a solid understanding of CSS and inheritance to get this to work!

By supplying a value for CSS Custom Class in the Build Form, you can now create different top level classes. The value passed will create a CSS class named rss-box-XXXX where XXXX is this value. This implies that you may have to specify more specific classes for the other classes listed above, or use the top level rss-box-XXXX Classes to Define a Different Background Color.

Please Refer To The Following Two Examples:

Two Completely Different Styles: The Second Style has a Value of css=spirit, so all CSS Elements are Defined to be a Descendant of this Class.

Two Similar Styles: In this case, the only Difference is the Background Color, which can be Specified in the rss-box-w and rss-box-g classes.

Special Thanks is Given To For Allowing Us To Use This Open Source Code

Recommended Anti-Spyware And Adware Removal Software

Spyware and Adware refer to any software program that covertly gathers user information through the user’s Internet connection without his or her knowledge, usually for advertising purposes. Spyware applications are typically bundled as a hidden component of freeware or shareware programs that can be downloaded from the Internet. Although, the majority of shareware and freeware programs do not come with Spyware. Once installed, the Spyware will monitor user activity on the Internet and then secretly transmit that information to someone else. Spyware can also gather information about E-mail Addresses and even Passwords and Credit Card Numbers! Any of the below Software Applications will Detect and Remove Spyware and Adware Infections for you! So don’t delay, Download Your Free Trial Version Today!

Top Rated Anti-Spyware And Adware Removal Software

No Adware	XoftSpySE	Adware Alert	SpyWare Nuker
Rating:	Rating:	Rating:	Rating:
$29.95	$29.95	$19.95	$39.95
Click Here To Visit Site	Click Here To Visit Site	Click Here To Visit Site	Click Here To Visit Site
You Can View More Great Software Products In Our: Computer Store

E-Mail This Page To A Friend

Print Friendly Page Version

Want To Really Clean, Maintain And Protect Your Computer?

line

Feel Free To Share Your Expressions!

	Enter your search terms Submit search form