Feed Style Sheets

Stylesheets RepositoryEdit

The Latest:

White MetalEdit

Download White Metal css

-August 2013-

HuntingEdit

Download hunting css

-August 2013-

Living RoomEdit

Download living room css

How to install: Unzip the download to your preferred location. In Sage settings, set a custom style by choosing the living_room.css from the download.

Note: After choosing your new style you have to refresh the website (for eg. by pressing the F5 button)

-August 2013-

===Stealth ===

April 2013 - Finally fixed the rounded corners problem in the download (Zip) file. Thanks to Nickbeee for fixing the version stored here.

March 2012 - A low-key (*cough*) two-column layout with image hiding. Individual posts have restricted height until hovered. For those times when browsing discretion is the better part of valor. More details on its page, and in the comments. You can download the .zip file or copy the code from its page. Download Zipped File

Like a Book for SageEdit

August 2011 - I created this for my own use. I think it was origianlly based on something called "Simple Style" that was adapted by Ben Braders. Download Like a Book Stylesheet

Typography based Style for SAGEEdit

*Updated June 2010

Husk is a single column, easy to read style for Sage. It uses a custom font for the feed title, and a few images for style. You can download everything needed here: Zipped File

That zip file contains the following:

1. Fonts used by Husk.

2. the CSS.

3. Images used by Husk.

Setup: Unzip that download, install the included fonts, and place the folder named "husk" anywhere you like. Then set Sage's custom style to the husk.css in that folder. Images will work and you are off and running.

SynergySage3Edit

Single column feed layout inspired by Mozilla Live Bookmarks. After the new release, I felt like updating the skin I use for sage. The works with all releases of the Sage Add-on for Mozilla Firefox.

Homepage: SynergyMX.com Sage Synergy3 Page

Easy to Read One Column Stylesheet - Plain & GreenEdit

The Plain & Green stylesheet has one column content area. Larger text size of both the headlines and content makes it is easy to read. Content blocks have rounded corners and spacing between each of the news item for extra readability.

Safari-Like StyleEdit

I'm pretty new at this, but I took an already existing stylesheet and tweaked it to look like the soon-to-be-released Safari Tiger RSS reader. You'll need to download this one gif file and place it in the same directory as your css. Instead of copying and pasting you can also just grab the css file here.

Hope it works for you.

Geckozone-Like StyleEdit

A Geckozone Style Sheet. Instead of copying and pasting you can also just grab the css file ans pictures files here(zipped file).

Infoboxes Edit

Two-column layout with full-article feeds in mind. Neatly displays each article in a scrollable div for browsing without having to click through. Loosely based on "widescreen" style.

Simple and Clean Edit

Screenshot of Simple and Clean

I use this on my website, and like the cleanness of it. I adjusted it slightly for Sage, and this is the result. Provided so that others can hack on it further.

SynergySage2Edit

As an avid RSS junkie, I have to say that this latest revision really makes it a pleasant experience to read my feeds.

Download it: Click Here

Firefox StyleEdit

This styled is loosely based on the "Mozilla"-Style by Brian Donovan. It resembles the style of the new "Page Load Error" or "Network Error" messages that can be found in the current Firefox 1.0+ builds and the style of the current getfirefox.com website. It's intended to look as native as possible. {C {C

It uses one small image of "Feedview" wich is included in current 1.0+ builds but missing in 1.0.x. The style works perfectly fine without this image, but if you want the "full" experience just install the Feedview extension. {C {C

It also includes a small advertisement filter that removes the most common ads injected into feeds by Google, Feedster and Feedburner. The ads are still downloaded, they just won't be displayed. Of course this part is 100% optional.

Instead of copying the code below you can also just get the stylsheet here:

• Sage_Firefox_adfilter.css - with the adfilter

• Sage_Firefox.css - adfilter deactivated

• Sage_Firefox.png - a preview image of the stylesheet in action.

Glider (enhanced) - ClassicEdit

by too_much green_tea

Note: This stylesheet supports additional tags related to podcast. Read Unofficial mod for v1.3.6 for details.

Glider (enhanced) - SpringEdit

by too_much green_tea - a "glider" variant

• Background Image - save image in the same directory as the stylesheet
  

Note: This stylesheet supports additional tags related to podcast. Read Unofficial mod for v1.3.6 for details.

Glider (enhanced) - AutumnEdit

by too_much green_tea - a "glider" variant

• Background Image - save image in the same directory as the stylesheet
  

Note: This stylesheet supports additional tags related to podcast. Read Unofficial mod for v1.3.6 for details.

Euphonies (enhanced)Edit

by too_much green_tea - To celebrate the Most Innovative Upgraded Extension

• Background Image - save image in the same directory as the stylesheet
  

• Header Image - save image in the same directory as the stylesheet
  

Note: This stylesheet supports additional tags related to podcast. Read Unofficial mod for v1.3.6 for details.

Translucence (enhanced)Edit

by too_much green_tea

• Background Image - save image in the same directory as the stylesheet
  

• Important: This stylesheet was designed to push Mozilla's rendering engine to its limit rather than for speed and efficiency. Consider using Aeroglass instead if you prefer performance over eye candy (actually Aeroglass looks just as good if not better).

Note: This stylesheet supports additional tags related to podcast. Read Unofficial mod for v1.3.6 for details.

Aeroglass (enhanced)Edit

by too_much green_tea - A "translucence" variant

A cleaned, performance enhanced, stripped down version of Translucence (enhanced).

Note: This stylesheet supports additional tags related to podcast. Read Unofficial mod for v1.3.6 for details.

Summer BreezeEdit

by too_much green_tea

A brand new look for the old dull blue scheme - with rounded corners, highlights, and mouseover effects.

Note: This stylesheet supports additional tags related to podcast. Read Unofficial mod for v1.3.6 for details.

SummerStormEdit

Single column feed layout inspired by too_much_green_tea's Summer Breeze stylesheet. Changes are mostly a darkening of the palette and less mouse-over effects.

Link: SummerStorm

WinXP BlueEdit

Windows XP Blue style.

SynergySage2Edit

As an avid RSS junkie, I have to say that this revision really makes it a pleasant experience to read my feeds.

Download it: Click Here

Kubrick for SageEdit

A port of Kubrick from Wordpress.

Download

Install instructions

City of Villains StyleEdit

Based off the official City of Villains site. I'm not very experienced with css so edits are welcome, provided the change isn't one of user preference but functionality. The link has a transfer limit but I don't expect it to be a problem. If it is I can move it to a better server. City of Heroes style to follow!

Download

Note: It's best to copy and paste the css from this site as it is probably newer.

City of Heroes StyleEdit

This is pretty much the same as CoV Style with some color and image changes.

Download

Note: It's best to copy and paste the css from this site as it is probably newer.

Wide Screen StyleEdit

===

===

Organizes items into three columns.

Fairly good at avoiding the vertical gaps that can occur with size-mismatched items.

Black IceEdit

Clean black and blue theme with easy reading in mind. Single Column.

Dark Blue DesignEdit

Discover the style Dark Blue Desing, the images are integrated into the script as a file in base64.

Download Dark Blue Design

Enjoy

Caprica DuskEdit

It is a two-column theme based on Sage.css (default theme) and inspired by Mozilla (by Brian Donovan).

I think it's clear and and very convenient for reading so try it !

Watch a Full size screenshot here and download the

CSS file here.

Orange LotusEdit

A one column layout with a fixed background.

Save both of these images in the same directory as the stylesheet.

[Ordinal.png]

[Background]

MozSage CSS TemplateEdit

A one column layout sporting a Mozilla inspired theme.

Custom header and image design.

CSS: Artificial Light Edit

Two columns, with top aligned articles. Slowly evolved from SynergySage2 into my own creation. No images used, ready to go.

download

CSS: Brick WallEdit

Like Artificial Light, but with colors that are probably a bit easier on the eyes. There are some more variations inside the download file.

download

CSS: Clean hover blueEdit

by iliot.
Based on translucence (by too_much green_tea). The text appears when you hover over an item.
Enjoy !
download

RssOpera1Edit

Sage like Opera Style

SageZineEdit

sageZine

BloggerDynamicEdit

CSS:BloggerDynamic

Caffeine-for-sageEdit

July 2010 - This style is imported from the "Caffeinated" style for NetNewsWire. Download here: Zipped File Install: Unzip the download to your preferred location. In Sage settings, set a custom style by choosing the caffeine.css from the download. Enjoy;

---

---

Revision as of 23:46, August 12, 2013 Sage CSS Template Example

html * {

/* -moz-box-sizing: border-box; */ }

html {
	background-color: #cbc9c2;
}
				
body {
	margin: 0 5%;
	color: #333;
	font: 110%/120% Verdana, Arial, sans-serif;
}

a:link		{ text-decoration: none; color: green; }
a:visited	{ text-decoration: none;  color: #537986; }
a:hover		{ text-decoration: underline; }
a:active	{ text-decoration: none; }

img { height: auto; }

p.item-desc a:link { color: #029; }

#rss-header {
	margin: 1%; padding: 2%;
	background-color: #81C207;
	color: #fff;
	-moz-border-radius: 0.3em;
}
#rss-header a {
	color: #fff;
}

#rss-title {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
	font-size: 150%;
	margin: 0; padding: 2% 0 1%;
}

#rss-desc {
	font-size: 76%; color:#EDEDD8;
	margin: 0; padding: 1%;
}

div.item {
	margin: 1%; padding: 1%;
	background: #fff;
	float:left; width: 96%;
	-moz-border-radius: 0.3em;
}

h2.item-title {
	font: 120% Halvetica, Arial, sans-serif; font-weight: normal;
	margin: 0; padding: 1%;
	clear: both; color: #999;
	border-bottom: 1px dotted #ccc;
}

span.item-ordinal {}

div.item-desc {
	font-size: 70%;
	margin: 0; padding: 1%;
}

div.item-desc a { text-decoration: underline; }
div.item-desc a:hover { text-decoration: none; }

div.item-pubDate {
	font-size: x-small;
	color: #999;
	padding: 1%;
	float: left; clear:left;
}

div.item-technorati {
	float: right; clear: right;
}

div.item-desc img {
	height: auto;
	float: left; margin-right: 0.6em;
	padding: 1px;
	border: 1px solid #999;
}
div.item-desc a img  {
	border: 1px solid #81C207;
}
div.item-desc a:hover img {
	border: 1px solid #000;
}

html * { /* -moz-box-sizing: border-box; */ }

html {
	background-color: #EBEBEB;
}
				
body {
	margin: 0 5%;
	color: #333;
	font: 110%/120% Verdana, Arial, sans-serif;
}

a:link		{ text-decoration: none; color: green; }
a:visited	{ text-decoration: none;  color: #537986; }
a:hover		{ text-decoration: underline; }
a:active	{ text-decoration: none; }

img { height: auto; }

p.item-desc a:link { color: #029; }

#rss-header {
	margin: 1%; padding: 2%;
	background-color: #81C207;
	color: #fff;
	-moz-border-radius: 0.3em;
}
#rss-header a {
	color: #fff;
}

#rss-title {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
	font-size: 150%;
	margin: 0; padding: 2% 0 1%;
}

#rss-desc {
	font-size: 76%; color:#EDEDD8;
	margin: 0; padding: 1%;
}

div.item {
	margin: 1%; padding: 1%;
	background: #fff;
	float:left; width: 96%;
	-moz-border-radius: 0.3em;
}

h2.item-title {
	font: 120% Halvetica, Arial, sans-serif; font-weight: normal;
	margin: 0; padding: 1%;
	clear: both; color: #999;
	border-bottom: 1px dotted #ccc;
}

span.item-ordinal {}

div.item-desc {
	font-size: 70%;
	margin: 0; padding: 1%;
}

div.item-desc a { text-decoration: underline; }
div.item-desc a:hover { text-decoration: none; }

div.item-pubDate {
	font-size: x-small;
	color: #999;
	padding: 1%;
	float: left; clear:left;
}

div.item-technorati {
	float: right; clear: right;
}

div.item-desc img {
	height: auto;
	float: left; margin-right: 0.6em;
	padding: 1px;
	border: 1px solid #999;
}
div.item-desc a img  {
	border: 1px solid #81C207;
}
div.item-desc a:hover img {
	border: 1px solid #000;
}