Sage with no withspaces

[Oceanwatcher]

I am looking for a theme like FF Sage, but without a table, so that I do not have those big white areas when a short and a long story is beside each other. Can it be done?

I am not a programmer and just airing the idea. Must be others that have been thinking the same

[enricopoli]

This works for me:

Code: Select all

/* body level */
body
{
   margin: 0px;
   color: #222;
   font-family: verdana;
   text-align: left;
}

a:link      { text-decoration: none; color: #436976; font-weight: bold; }
a:visited   { text-decoration: none;  color: #537986; }
a:hover      { text-decoration: underline; }
a:active   { text-decoration: none; }

img
{
   border: 0px;
   max-width: 100%;
   padding: 2px;
}

/* pager */
div.gn_pager
{
   clear: both;
   font-size: 10px;
   font-weight: bold;
   text-align: right;
   margin: 10px;
   padding: 10px;
}
span.gn_pagenumber
{
   padding-right: 2px;
   padding-left: 2px;
   color: white;
   background-color: gray;
}
a.gn_pagerlink
{
}

/* channel level */
div.gn_channeltitle
{
   clear: both;
   background-color: #dee7ec;
   border: 1px solid #8cacbb;
   margin: 0 auto;
   margin-bottom: 3px;
   padding: 2px;
   width: 95%
}

div.gn_channeltitle a
{
   font-size: 110%;
   font-weight: bold;
   padding: 2px;
}

div.gn_channeldesc
{
   font-size: 80%;
   font-weight: normal;
   margin: 10px;
}

div.gn_channelimage
{
   display: none;
}

/* story level */
div.gn_story, div.gn_stories
{
   border: 1px solid #8cacbb;
   margin: 5px 0.25% 5px 0.5%;
   vertical-align: top;
   padding: 0px;
}

div.gn_story
{
   margin: 0 auto;
   width: 95%;
   overflow: visible;
}

div.gn_stories
{
   margin: 0 auto;
   /*display: inline;*/
   width: 95%;
   /*float: left;*/
   overflow: hidden;
   margin-bottom: 5px;
}

div.gn_storytitle
{
   clear: both;
   font-size: 80%;
   font-weight: bold;
   line-height: 1.1;
   background-color: #dee7ec;
   margin: 0px;
   padding: 5px 5px 8px 8px;
}

div.gn_storydetails,td
{
   clear: both;
   font-size: 80%;
   margin: 0px;
   padding: 8px 10px;
   text-align: left !important;
}

div.gn_storydetails div
{
   text-align: left !important;
}

div.gn_storyfooter
{
   clear: both;
   margin: 0px;
   padding: 8px 10px;
   font-size: 80%;
}

span.gn_publishtime, a.noLabel, a.withLabel, span.noLabel, span.withLabel
{
   text-align: left;
   font-size: 70%;
}

div.comment
{
   margin-top: 15px;
   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;
   margin: 1px 10px 1px 1px;
}


[Oceanwatcher]

I am sorry that it took this long to respond.

Yes, I am sure this works well for you. But it is not really what I was after. There has never been any issue with whitespace in a one column view. What I was looking for was a solution for the two column view that is the Sage template in GreatNews. There is a lot of whitespace in it if you have articles of varying lenghts. Does anyone know how to remove that ie make a css template that is not as rigid as a table?

[enricopoli]

You're right obviously

The problem here is that news items tend to be of different height, and when floating left they unavoidably clash one against the other.

I'm afraid I don't see a soultion using css alone.

If Curio gives me a hook in html to let me apply a style to every other news item, like a "class: alternate" every two items:

Code: Select all

<div id='item26756' class='gn_stories gn_unreaditem' style=''">...</div>
<div id='item26755' class='gn_stories gn_unreaditem' style=''" class="alternate">...</div>

then I could make something *slighty* more like the thing you want...

Bye, Enrico

[Oceanwatcher]

Cool that you understand that I am looking for. I like the two column format, but it is really annoying with the white spaces.

Good to see that there are somed possibilities. I know too little css at the moment to figure out things like this, but understand a lot when people explain things to me.

Thank you for taking the time to look into this. I am sure I am not alone with this wish.

Again, thank you.