Recent changes Random page
GAMING
Technology
 
Gaming
Entertainment
Science Fiction
 Biggest wikis
Hobbies
Music
See more...

Feed Style Sheets

From Sage Community Wiki

Jump to: navigation, search

Contents

[edit] Brief Sage CSS Template Explanation

To use this copy and paste the standard Sage template into a text editor. Then save it where you can find it. Have Sage use this file instead. Then edit the file to your liking. I just provide a quick explanation to what each item does.

html * /* Im not sure yet. Possibly mozilla specific formatting? */ { 

   -moz-box-sizing: border-box;

}

html /* General Html formatting I think */ { 

   line-height: 1.3;
   background-color: #FFF;

}

body /* Body formatting */ { 

   margin: 0px;
   color: #222;
   font-family: verdana;

}

a:link /* Link properties */ { 

   text-decoration: none;
   color: #436976;
   font-weight: bold;

}

a:visited /* Visited link properties */ { 

   text-decoration: none;
   color: #537986;

}

a:hover /* Over link properties */ { 

   text-decoration: underline;

}

a:active /* Link as it is being clicked properties */ { 

   text-decoration: none;

}

p.item-desc a:link /*Paragraph and paragraph link properties */ { 

   color: #029;

}

  1. rss-header

/* This is the global title of the site. rss-title and rss-desc are children to this one */ { 

   background-color: #dee7ec;
   border: 1px solid #8cacbb;
   padding: 6px 8px;
   margin: 10px 2%;

}

  1. rss-title

/* The RSS header properties. Basically the where the <title> */ { 

   /* background-color: red; */ /* uncomment to see effect */
   font-size: large;
   line-height: 1;
   margin: 0px;
   padding: 0px;

}

  1. rss-desc

/* The description of the RSS. Not all sites have this, but a lot do. */ { 

   /* color: red; */ /* uncomment to see what it does */
   font-size: small;
   margin: 0px;
   padding: 5px 0px 0px 20px;

}

div.item /* Global news table properties */ { 

   /* background-color: #000000; */ /* uncomment to see effect */
   border: 1px solid #8cacbb;
   border: 1px solid #000000;
   width: 47%; /* if you want it to be one right after another instead comment or remove this line */
   min-width: 14em;
   margin: 0px 0px 8px 2%;
   padding: 0px;
   float: left;

}

h2.item-title /* The div.item's header properties */ { 

   background-color: #dee7ec; /* change around to see what cell it's changing */
   font-size: x-small;
   font-weight: normal;
   line-height: 1.1;
   margin: 0px;
   padding: 5px 5px 8px 8px;

}

span.item-ordinal /* The news's entry number properties */ { 

   /* color: red; */ /* uncomment to see what it does */
   padding-right: 0.2em;

}

div.item-desc /* The news's body properties */ { 

   /* color: red; */ /* uncomment to see what it does */
   min-height: 6em;
   font-size: x-small;
   margin: 0px;
   padding: 8px 10px;

}

div.item-pubDate /* Date which it was released */ { 

   /* background-color: #FF0000; */ /* Uncomment to see where it is */
   font-size: x-small;
   margin: 0px;
   padding: 8px 10px;
   width: 80%;
   float: left;

}

div.item-technorati /* Bottom cell where respond bubble is */ { 

   /* background-color: #00FF00; */ /* uncomment to see where it is */
   font-size: x-small;
   margin: 0px;
   padding: 8px 10px;
   width: 20%;
   float: right;
   text-align: right;

}

[edit] Stylesheets


[edit] Stylesheets Repository

You can submit your custom stylesheets in this section.

[edit] SynergySage3

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.

[edit] Easy to Read One Column Stylesheet - Plain & Green

Screenshot of Plain & Green
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.

This line is required.

[edit] Safari-Like Style

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.

[edit] Geckozone-Like Style

Screenshot of Geckozone
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.

[edit] Simple and Clean

Sage-ss-clean.png Sage-ss-clean.png

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.

[edit] SynergyMX.com Style

Based on the simple and clean style above, I've added some formatting changes, different font and added some mozilla specific code to round corners and such. Enjoy! (SynergyMX.com)

Download it here: http://www.synergymx.com/stuff_detail.asp?ID=67

This line is required.

[edit] Firefox Style

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:

This line is required.

[edit] Glider (enhanced) - Classic

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

[edit] Glider (enhanced) - Spring

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

[edit] Glider (enhanced) - Autumn

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

[edit] Euphonies (enhanced)

Screenshot
Screenshot

by too_much green_tea - To celebrate the Most Innovative Upgraded Extension


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

This line is required.

[edit] Translucence (enhanced)

Screenshot
Screenshot

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.

This line is required.

[edit] Aeroglass (enhanced)

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

[edit] Summer Breeze

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

[edit] SummerStorm

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.

[edit] WinXP Blue

Screenshot
Screenshot

Windows XP Blue style.

This line is required.

[edit] SynergySage2

Screenshot of SynergySage2
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.

[edit] Kubrick for Sage

Screenshot of Kubrick for Sage
Screenshot of Kubrick for Sage

A port of Kubrick from Wordpress.

Download

Install instructions

This line is required.

[edit] City of Villains Style

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

[edit] City of Heroes Style

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

[edit] Wide Screen Style

Screenshot
Screenshot

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

[edit] Black Ice

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

This line is required.

[edit] Dark Blue Design

Screenshot Dark Blue Design
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.

[edit] Caprica Dusk

Screenshot By HELES Romain
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.

Retrieved from "http://sage.wikia.com/wiki/Feed_Style_Sheets"
Rate this article:
Share this article: