Sage like Opera Style

I made two styles for the SAGE looking like RSS feeds from Opera.

Firstone ist not exactly Opera like style but it looks good. I hope someone will like it.

Here is the code: /* --                   Sage "Opera" Stylesheet by MaroQ                   -- */ /* --     based on Opera's "webfeeds.html" file from Opera 10.10 USB       -- */

/** * Most important */ html, body {   margin:0; padding:0; border:0; } body {   color:#000000; background:#FFFFFF; text-align:center; font:normal normal .9em/1.5em sans-serif; padding:2em 0; } {	font-family: verdana, sans-serif; }

p {	color: #000; width: 100% }

img { max-width:300px; height: auto; }

img:hover { width:320px; height: auto; }

a {	color: #BB0000; text-decoration:none; }

a:hover {   text-decoration:underline; }

/** * Some ID's */

{	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABQCAIAAABXpYiMAAAACXBIWXMAAAsSAAALEgHS3X78AAAALUlEQVQYV2P4//8/EwMDw6DE79+/B7mLYRWV3PcXaM5XIAbRFPqZ4d27dyAzAD6MDMgR2sx0AAAAAElFTkSuQmCC") repeat-x; margin:0; font-size:1.5em; line-height:1.5em; display:block; width: 100%; height: 80px; }
 * 1) rss-title

{	font-weight: normal; color: #000; }
 * 1) rss-title a, rss-link

{	content: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgADwAPAwERAAIRAQMRAf/EAHQAAAMBAAAAAAAAAAAAAAAAAAIEBQcBAAIDAAAAAAAAAAAAAAAAAAEEAgUGEAACAgAGAQQDAAAAAAAAAAACAwEEABExEiIFQSFRcQYyExURAAIBAgUCBwAAAAAAAAAAAAECAwARITESIgRhcVGRobHxMwX/2gAMAwEAAhEDEQA/ANP+uhW7KvDLFSj2NpvNinGQ3mzsEzJczxLWZ99cYP8AOUTI2pUka5vuIkPUfNavm6onwZkXtsFGxFGhdpOqRP8AJ7IXCyFiIsJQqP8AchgxxkxmPjBh4qxTgqWMEiP3sFN1PUe9ReRpIyD9qMvbFhYjoakqber1aHV0uvqPv0LIsV2lezXI7O0ylY7dwntnMcuXjSMFYyAiRLEZUe+oOl2zwzvTjNGWd5GkCMttJRrL6Wp+lY+ylaU11JSyTduXUATFzDLLFlnWEYOfxnxn6Rriw4qz6rlUuGkYbhixB25+OdI8k8fTZWY3VFO04KGG7Lyr/9k%3D"); color: #ccc; margin-right: 3px; }
 * 1) rss-title:before

{   /*background:#a00 url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%04%00%00%00%C0%08%06%00%00%00%23%88%C2%DC%00%00%00%04gAMA%00%00%AF%C87%05%8A%E9%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%00%3AIDATx%DA%EC%D0%21%0E%000%08%04Ah%8A%EF%FF%3F%7BE%12%0C%02%BB%9B%9C%19y.%C9j%C7Z%00%00%00%000%82%E7%A2%C2%CD%BD%0E%C1c%00%00%00%C0%0E%BE%00%03%00k%9B%04%9A%B9%BDH%AF%00%00%00%00IEND%AEB%60%82") repeat-x center center;*/ color:#fff; font-size: 0.8em; padding:8px; margin:1em 0; /*border:2px solid #eee; border-width:2px 0;*/ text-align:center; position: relative; top: -52px; margin-bottom: -52px; }
 * 1) rss-desc

{	padding-bottom: 30px; background: #fff; }
 * 1) rss-header

/** * Some classes */

div.item { /*width: 28%; min-width: 14em;*/ width: 28%; height: 320px; margin: 10px 10px 8px 10px; float: left; background: #EEFDFE; border: 1px solid #A7A6AA; -moz-border-radius: 10px; color: #333; font-size: 12px; margin-bottom: 25px; padding: 0px 20px 15px 20px; position: relative; min-height: 260px; min-width: 200px; }

h2.item-title {	border-bottom: 1px solid #ddd; color: #000; display: block; font-family: arial, verdana, sans-serif; font-size: 14px; font-weight: normal; min-height: 1.3em; padding: 0px 2.3em 0px 0px; }

h2.item-title a { color: #000; text-decoration: none; }

h2.item-title a:hover {	color: #C70048; text-decoration: none; }

h2.item-title a:visited {	color: #676767; text-decoration: none; }

h2.item-title a:visited:after {	color: #676767; content: url("data:image/gif;base64,R0lGODlhDQANALMMAKvcprfhs8/rzNvw2Ve5TZ/XmZPSjGO+Wef15m/DZvP68ku0QP///wAAAAAAAAAAACH5BAEAAAwALAAAAAANAA0AAAQlkMlJq70YISzDERxADOESWAoYLMV1LGKCDUtNYsZicIzQ8kBgBAA7"); padding-left: 1em; /* font-size: 12px; */ }

.item-desc h1, .item-desc h2, .item-desc h3, .item-desc h4 { font-size: 12px; font-weight: bold; }

.item-desc td { font-size: 9px; }

.item-desc ol, .item-desc ul { padding: 0 0 0 15px; margin: 0; font-size: 10px; }

.item-desc ol { list-style-type:lower-latin; } .item-desc ul { list-style-type:circle; list-style-image: url("data:image/gif;base64,R0lGODlhBwAGAJEAAPGSMRFWjP///wAAACH5BAEAAAIALAAAAAAHAAYAAAIKlIJ2mMvGmlPUFAA7"); }

.item-pubDate {	background: #EEFDFE; border: 1px solid #A7A6AA; border-bottom: none; color : #777; font-size: 10px; font-weight: bold; line-height: 1.1em; padding: 3px 10px 4px 10px; position: absolute; right: 1.5em; text-align: center; top: -1.9em; -moz-border-radius: 10px; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 0; }

.item-desc img {   position:relative; clear:right; float:left; display:inline-block; border:1px solid #aaa; padding:1px; margin:1px 8px 8px 1px; max-width:100%; }

.item-desc {	text-align: justify; text-justify: newspaper; overflow: auto; max-height: 250px; }

.item-desc p:first-letter {	color: #333; /*font-size: 28px;*/ /*padding-right: 3px;*/ font-weight: bold; font-size: 14px; }

.items {	width: 100%; }

/* -- small adfilter, optional -- */

a:link[HREF*="googleadservices"], a:link[HREF*="ads_by_google"] { display: none !important; }

img[SRC*="feedburner.com/~a"], img[SRC*="feedster"] { display: none !important; } span.item-ordinal {display:none;} div.item-author {display:none;} div.item-technorati {display:none;} hr {display:none;} .feedflare {display:none;} .tweetmeme_button {display:none;}
 * 1) terminator {display:none;}

Second version is "more like Opera" style. /* --                   Sage "Opera" Stylesheet by MaroQ                   -- */ /* --     based on Opera's "webfeeds.html" file from Opera 10.10 USB       -- */

/** * Most important */ html, body {   margin:0; padding:0; border:0; } body {   color:#000000; background:#FFFFFF; text-align:center; font:normal normal .9em/1.5em sans-serif; padding:2em 0; } {	font-family: verdana, sans-serif; }

p {	color: #000; width: 100% }

a {	color: #BB0000; text-decoration:none; }

a:hover {   text-decoration:underline; }

/** * Some ID's */

{	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABQCAIAAABXpYiMAAAACXBIWXMAAAsSAAALEgHS3X78AAAALUlEQVQYV2P4//8/EwMDw6DE79+/B7mLYRWV3PcXaM5XIAbRFPqZ4d27dyAzAD6MDMgR2sx0AAAAAElFTkSuQmCC") repeat-x; margin:0; font-size:1.5em; line-height:1.5em; display:block; width: 100%; height: 80px; }
 * 1) rss-title

{	font-weight: normal; color: #000; }
 * 1) rss-title a, rss-link

{	content: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgADwAPAwERAAIRAQMRAf/EAHQAAAMBAAAAAAAAAAAAAAAAAAIEBQcBAAIDAAAAAAAAAAAAAAAAAAEEAgUGEAACAgAGAQQDAAAAAAAAAAACAwEEABExEiIFQSFRcQYyExURAAIBAgUCBwAAAAAAAAAAAAECAwARITESIgRhcVGRobHxMwX/2gAMAwEAAhEDEQA/ANP+uhW7KvDLFSj2NpvNinGQ3mzsEzJczxLWZ99cYP8AOUTI2pUka5vuIkPUfNavm6onwZkXtsFGxFGhdpOqRP8AJ7IXCyFiIsJQqP8AchgxxkxmPjBh4qxTgqWMEiP3sFN1PUe9ReRpIyD9qMvbFhYjoakqber1aHV0uvqPv0LIsV2lezXI7O0ylY7dwntnMcuXjSMFYyAiRLEZUe+oOl2zwzvTjNGWd5GkCMttJRrL6Wp+lY+ylaU11JSyTduXUATFzDLLFlnWEYOfxnxn6Rriw4qz6rlUuGkYbhixB25+OdI8k8fTZWY3VFO04KGG7Lyr/9k%3D"); color: #ccc; margin-right: 3px; }
 * 1) rss-title:before

{   /*background:#a00 url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%04%00%00%00%C0%08%06%00%00%00%23%88%C2%DC%00%00%00%04gAMA%00%00%AF%C87%05%8A%E9%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%00%3AIDATx%DA%EC%D0%21%0E%000%08%04Ah%8A%EF%FF%3F%7BE%12%0C%02%BB%9B%9C%19y.%C9j%C7Z%00%00%00%000%82%E7%A2%C2%CD%BD%0E%C1c%00%00%00%C0%0E%BE%00%03%00k%9B%04%9A%B9%BDH%AF%00%00%00%00IEND%AEB%60%82") repeat-x center center;*/ color:#fff; font-size: 0.8em; padding:8px; margin:1em 0; text-align:center; position: relative; top: -52px; margin-bottom: -52px; }
 * 1) rss-desc

{	padding-bottom: 30px; background: #fff; }
 * 1) rss-header

/** * Some classes */

div.item { width: 281px; height: 500px; margin: 10px 10px 8px 20px; float: left; background: #FFFFFF; color: #333; font-size: 12px; margin-bottom: 25px; padding: 0px; position: relative; min-height: 260px; min-width: 200px; }

h2.item-title {	border-bottom: 1px solid #ddd; color: #000; display: block; font-family: arial, verdana, sans-serif; font-size: 15px; font-weight: normal; min-height: 1.3em; padding: 0px 2.3em 0px 0px; height: 46px; overflow: auto/*hidden*/; text-align: left; }

h2.item-title:hover {	background: #EEEEEE; }

h2.item-title a { color: #000; text-decoration: none; }

/*h2.item-title a:hover {	color: #C70048; text-decoration: none; }*/

h2.item-title a:visited {	/*color: #676767;*/ text-decoration: none; }

h2.item-title a:visited:after {	/*color: #676767;*/ content: url("data:image/gif;base64,R0lGODlhDQANALMMAKvcprfhs8/rzNvw2Ve5TZ/XmZPSjGO+Wef15m/DZvP68ku0QP///wAAAAAAAAAAACH5BAEAAAwALAAAAAANAA0AAAQlkMlJq70YISzDERxADOESWAoYLMV1LGKCDUtNYsZicIzQ8kBgBAA7"); /*padding-left: 1em;*/ position: absolute; left: 10px; top: 60px;

}

.item-desc h1, .item-desc h2, .item-desc h3, .item-desc h4 { font-size: 10px; font-weight: bold; }

.item-desc td { font-size: 9px; }

.item-desc ol, .item-desc ul { padding: 0 0 0 15px; margin: 0; font-size: 10px; }

.item-desc ol { list-style-type:lower-latin; } .item-desc ul { list-style-type:circle; list-style-image: url("data:image/gif;base64,R0lGODlhBwAGAJEAAPGSMRFWjP///wAAACH5BAEAAAIALAAAAAAHAAYAAAIKlIJ2mMvGmlPUFAA7"); }

.item-pubDate {	color : #999999; font-size: 9px; font-weight: normal; position: absolute; right: 1.5em; text-align: center; top: 6.5em; font-family: sans-serif; }

.item-desc a { font-style: italic; }

.item-desc img {   position:relative; clear:right; float:left; display:inline-block; padding:0px; margin-top: 10px; margin-left: auto; margin-right: auto; /*min-width: 245px;*/ width:100%; }

.item-desc {	color: #555555; margin-top: 15px; text-align: justify; text-justify: newspaper; max-height: 500px; font-size: 11px; width: 275px; margin-left: auto; margin-right: auto; overflow: auto; height: 450px; }

.item-desc:hover {	color: #000000; }

.item-desc:first-letter {	color: #333; font-weight: bold; font-size: 14px; }

.items {	width: 100%; }

/* -- small adfilter, optional -- */

a:link[HREF*="googleadservices"], a:link[HREF*="ads_by_google"] { display: none !important; }

img[SRC*="feedburner.com/~a"], img[SRC*="feedster"] { display: none !important; } span.item-ordinal {display:none;} div.item-author {display:none;} div.item-technorati {display:none;} hr {display:none;} .feedflare {display:none;} .tweetmeme_button {display:none;}
 * 1) terminator {display:none;}

All images are encoded using base64 so this source code include everything that you need. If you dont trust me check this code using your antivirus software.

It's not a joke because the images may contain malicious code. Thats why on many blogs or forums you are not able to put images from external servers.

I'm not giving you any stuff like that but you don't need to trust me :)

This styles have been published on my "not blog" (I don't like to call my site "blog" so its "not blog" :D ). You may find it here: [ -- URL --] but this article was writen in Polish language. You may use translation to read it but then some sentences may be different.