Page 1 of 1

My stylesheet - reduces content displayed, but expands with

Posted: Wed Jul 25, 2007 12:54 am
by justauser
Here is a stylesheet I use. This one gets rid of images and shrinks bodies to three lines. If you clikc on the body, it will expand to its full size. Click again and it contracts. This makes scanning new quicker and then if you see somehting you are interested in, you click to see the full article (if there is a full article).

</style>
<script>
/* Script for Greatnews By Justauser */
/*
Borrowed this code to get elements by classname - Justauser
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
*/

function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
function toggleView()
{
els = this;
if( els.style.height == "auto")
els.style.height = "30px";
else
els.style.height = "auto";
}
function simple_init(doc)
{

var els = new Array();
els = getElementsByClassName(doc,"div","gn_storydetails");
for( var i=0; i < els.length; i++)
{
els[i].onclick = toggleView;
}
}
</SCRIPT>
<Script>
window.onload = function() {
simple_init(document);
};</script>
<style>

body
{
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
margin: 0px;
padding-top: 10px;
}

div.gn_pager
{
font-size: 10px;
font-family: 'Arial Black' , Arial;
text-align: right;
margin: 10px;
}
span.gn_pagenumber
{
padding-right: 2px;
padding-left: 2px;
color: white;
background-color: gray;
}
a.gn_pagerlink
{
color: blue;
}
img {
display: none;
border: 0px;
}
div.gn_channeltitle
{
border-top: #333 1px solid;
font-weight: bold;
font-size: 18px;
padding-bottom: 2px;
margin: 10px;
padding-top: 2px;
border-bottom: #333 1px solid;
font-family: Verdana, Georgia, serif, 'Times New Roman';
background-color: #f8f8f8;
}
div.gn_channeltitle a
{
color: black;
text-decoration: none;
}
div.gn_channeltitle a:hover
{
text-decoration: underline;
}

div.gn_channeldesc
{
display: none;
font-weight: normal;
font-size: 14px;
/* margin: 10px; */
}

div.gn_channelimage
{
display: none;
/* margin: 10px; */
text-align: left;
/* height: 1px;
width: 1px; */
}

a.gn_channelimage img.gn_channelimage
{
display: none;
height: 1px;
width: 1px;
}




div.gn_story,div.gn_stories
{
clear: none;
display: inline-block;
border-top: #999 1px solid;
margin: 10px;
vertical-align: top;
overflow: hidden;
width: 98%;
/* padding: 4px; */
}


div.gn_storytitle
{
clear: both;
font-weight: bold;
font-size: 14px;
font-family: Arial, sans-serif;
padding: 5px 0 5px 0;
}

a.gn_storytitle
{
text-decoration: none;
}
a.gn_storytitle:hover
{
text-decoration: underline;
}
div.gn_storydetails /*,td */
{
clear: both;
font-size: 14px;
color: #333;
font-family: Tahoma, Verdana, Arial, sans-serif;
height: 34px;
overflow: hidden;
cursor: n-resize;
}

div.gn_storyfooter
{
clear: both;
font-size: 11px;
font-family: Verdana, Arial, sans-serif;
}

span.gn_publishtime, span.noLabel, span.withLabel
{
color: gray;
text-align: right;
}


div.comment
{
font-size: 11px;
font-family: Verdana, Arial, sans-serif;
}

div.comment p
{
margin: 1px;
}

span.commentTime
{
color: white;
border-bottom: 1px solid;
background-color: gray;

}

H4
{
font-size: 12px;
border: 0px'
padding: 0px;
margin: 0px;
display: inline;
}


Posted: Thu Sep 06, 2007 5:36 pm
by Jack
Thanks justauser.