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;
}

Contents 1 Stylesheets Repository 1.1 Like a Book for Sage 1.2 CSS:Caffeine 1.3 Typography based Style for SAGE 1.4 SynergySage3 1.5 Easy to Read One Column Stylesheet - Plain & Green 1.6 Safari-Like Style 1.7 Geckozone-Like Style 1.8 Infoboxes 1.9 Simple and Clean 1.10 SynergySage2 1.11 Firefox Style 1.12 Glider (enhanced) - Classic 1.13 Glider (enhanced) - Spring 1.14 Glider (enhanced) - Autumn 1.15 Euphonies (enhanced) 1.16 Translucence (enhanced) 1.17 Aeroglass (enhanced) 1.18 Summer Breeze 1.19 SummerStorm 1.20 WinXP Blue 1.21 SynergySage2 1.22 Kubrick for Sage 1.23 City of Villains Style 1.24 City of Heroes Style 1.25 Wide Screen Style 1.26 Black Ice 1.27 Dark Blue Design 1.28 Caprica Dusk 1.29 Orange Lotus 1.30 MozSage CSS Template 1.31 CSS: Artificial Light 1.32 CSS: Brick Wall 1.33 CSS: Clean hover blue

Stylesheets RepositoryEdit

You can submit your custom stylesheets in this section.

The Latest:

Like a Book for SageEdit

Added by Jason.simanek

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

CSS:CaffeineEdit

Added by Scandalous

July 2010 - This style is ported 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;

Typography based Style for SAGEEdit

Added by Scandalous

*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

Added by Velkymx

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

Added by Alfreds

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

Added by Superjuju

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

Added by Geekahedron

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

Added by Velkymx

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. 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. 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

Added by Toomuchgreentea

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

Added by Toomuchgreentea

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

Added by Toomuchgreentea

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

Added by Toomuchgreentea

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

Added by Toomuchgreentea

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

Added by Toomuchgreentea

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

Added by Toomuchgreentea

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

Added by Mr. Gunn

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

Added by LouCypher

Windows XP Blue style.

SynergySage2Edit

Added by Velkymx

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

Added by N.arciss.us

A port of Kubrick from Wordpress.

Download

Install instructions

City of Villains StyleEdit

Added by TastyWheat

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

Added by TastyWheat

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

Added by MikerRoo

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

Added by LuciferX

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

Added by H romain753

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

Added by CPrompt^

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

Added by Avalonnis

A one column layout sporting a Mozilla inspired theme.

Custom header and image design.

CSS: Artificial Light Edit

Added by YiNXs

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

download

CSS: Brick WallEdit

Added by YiNXs

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

Added by Eliot438

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