
Home: Swing over to: Wedding Directory \| Shouts

Marketplace

Index Help Add RSS MyFeeds

Apply CSS styles to MyFeeds

Jump

Simple	Fancy	Complete
content-syndicate.php	content-syndicate-css.php	content-syndicate-dsc.php

Customize your channels using CSS styles

On MyFeeds we learned how to easily put any channel into any web page. We did this by copying and pasting 1 line of code. This resulted in the display of selected channels on any web page. The display was a 'simple' look.

Below we will learn how to customize the look and feel of those channels. The look and feel can be 1 of 3 'looks':

3 looks

simple
fancy
complete

We will apply one of these looks to the channels. Using different looks in channels is made possible by using different filenames.

Change the filename to change the look and feel

#	look	filename	used for	shows
1	simple	content-syndicate.php	default	title
2	fancy	content-syndicate-css.php	channels with applied css formatting	title and datetime
3	complete	content-syndicate-dsc.php	channels with applied css formatting and description	everything

for a simple look - do nothing! ... that's the default
for a fancy look, rename content-syndicate.php to content-syndicate-css.php
for a complete look - rename content-syndicate.php to content-syndicate-dsc.php

Once you've renamed the file ...

Once you've renamed the file to either content-syndicate-css.php or to content-syndicate-dsc.php you can apply your specific style formatting. Your formatting can be any color combination or font-sizes or background-color or more. Change this formatting by changing .class selectors.

Class selectors, Properties and their values

The following selectors have properties which may be changed. Change the property to the value you like.

.rss_box { background-color: white; margin: 3px 5%; padding: 4px 6px; border: solid 2px maroon; width: 180 }

.rss_title, rss_title a { font-size: 14px; font-family: FontName, Arial; font-weight: bold; letter-spacing: 1px; margin: 5px 0; padding: 0 }

.rss_item { color: black; font-size: 95%; font-family: Arial; font-weight: normal; margin: 3px 0 }

.rss_item a:link, .rss_item a:visited { color: #990000; font-size: 120%; text-decoration: none }

.rss_item a:hover { color: gray; text-decoration: underline }

.rss_date { color: gray; font-size: 10px; font-weight: normal }

.rss_desc { color: red; font-size: 18px; font-weight: normal }

Example: .rss_box is a selector. The selector has properties, like color. The properties have a value, like 'red'.

As an example of what to modify, change .rss_box { background-color: from white to ivory like this:

.rss_box { background-color: #FFFFCC; margin: 3px 5%; padding: 4px 6px; border: solid 2px maroon; width: 180 }

You'll then have an ivory background-color. Make other changes to the property values to obtain the look and feel you like.

Apply CSS styles

The styles you end up with - your custom styles - can be applied in 3 different ways. Apply with in-line, in-head or external style sheet declarations. Not sure how? Learn more at the Web Developers Virtual Library. Look for 'CSS'.

Download the best Windows based CSS Style editor on this planet at Bradsoft.com, look for TopStyle. You can also get their RSS reader while you're there.

Jump

Add your item Carry a channel on your own website. Add our feed to your newsreader Learn about RSS

Index Help Add RSS My Feeds Contact us