FANDOM


Stylesheets RepositoryEdit

The Latest:

White MetalEdit

Zrzut ekranu-1

Download White Metal css

-August 2013-

This line is required.

HuntingEdit

Hunting

Download hunting css

-August 2013-

This line is required.

Living RoomEdit

Living room

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-

This line is required.
Harrys Comeback - Letzter Puff vor Helgoland (Komödie)01:11:04

Harrys Comeback - Letzter Puff vor Helgoland (Komödie)

===Stealth ===
Stealth

Stealth stylesheet for Sage

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

This line is required.

Like a Book for SageEdit

Sage Styles LikeABook
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

Husk1

Husk for Sage RSS

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

This line is required.

SynergySage3Edit

Sage synergy3 screen
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

This line is required.

Easy to Read One Column Stylesheet - Plain & GreenEdit

Sage style green screenshot large

Screenshot of Plain & Green

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.

This line is required.

Geckozone-Like StyleEdit

Geckostyle

Screenshot of Geckozone

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

This line is required.


Infoboxes Edit

Infoboxes

Screenshot of Infoboxes


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.


This line is required.


Simple and Clean Edit

Sage-ss-clean


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.


This line is required.

SynergySage2Edit

Sage synergy2 screen

Screenshot of SynergySage2


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


This line is required.


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:





This line is required.


Glider (enhanced) - ClassicEdit

SageGlider

Screenshot


by too_much green_tea



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


This line is required.



Glider (enhanced) - SpringEdit

SageSpring

Screenshot


by too_much green_tea - a "glider" variant




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


This line is required.


Glider (enhanced) - AutumnEdit

SageAutumn

Screenshot


by too_much green_tea - a "glider" variant




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


This line is required.


Euphonies (enhanced)Edit

SageEuphoniesEnhanced01

Screenshot


by too_much green_tea - To celebrate the Most Innovative Upgraded Extension



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


This line is required.


Translucence (enhanced)Edit

SageTranslucence01

Screenshot


by too_much green_tea



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


This line is required.


Aeroglass (enhanced)Edit

SageAeroglass

Screenshot


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.


This line is required.


Summer BreezeEdit

SageSummerBreeze

Screenshot


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.


This line is required.


SummerStormEdit

Summer Storm screen
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


This line is required.


WinXP BlueEdit

Sage-WinXP-blue

Screenshot


Windows XP Blue style.


This line is required.


SynergySage2Edit

Sage synergy2 screen

Screenshot of SynergySage2


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


This line is required.


Kubrick for SageEdit

Kubrick screenshot mini

Screenshot of Kubrick for Sage


A port of Kubrick from Wordpress.


Download


Install instructions


This line is required.


City of Villains StyleEdit

CoV Style

Screenshot


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.


This line is required.


City of Heroes StyleEdit

CoH Style

Screenshot


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.


This line is required.


Wide Screen StyleEdit

===

===
WideScreenStyleScreenshot

Screenshot


Organizes items into three columns.


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


This line is required.

Black IceEdit

Sageblackice


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


This line is required.


Dark Blue DesignEdit

Dark-blue2

Screenshot Dark Blue Design


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


Download Dark Blue Design



Enjoy


This line is required.


Caprica DuskEdit

Caprica Dusk thumb

Screenshot By HELES Romain


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.


This line is required.

Orange LotusEdit

Orange lotus screen

Orange Lotus


A one column layout with a fixed background.


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


[Ordinal.png]


[Background]


This line is required.


MozSage CSS TemplateEdit

Mozsage

MOZSage CSS Template


A one column layout sporting a Mozilla inspired theme.


Custom header and image design.

This line is required.


CSS: Artificial Light Edit

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

download

This line is required

CSS: Brick WallEdit

Brick Wall Sage-css

Brick Wall stylesheet screenshot

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


This line is required.


CSS: Clean hover blueEdit

Clean blue style

Clean hover blue stylesheet screenshot

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

RssOpera1Edit

RssOpera1

Sage like Opera Style

This line is required.

SageZineEdit

SageZine

sageZine

This line is required.

BloggerDynamicEdit

Blogger

BloggerDynamic Preview

CSS:BloggerDynamic

This line is required.

Caffeine-for-sageEdit

Caffeine-for-sage

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;

This line is required.


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

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.