Sage with no withspaces

Discussions related to custom GreatNews styles

Moderators: justauser, MysteryFCM

Oceanwatcher
Posts: 9
Joined: Sun May 14, 2006 11:37 am

Sage with no withspaces

Postby Oceanwatcher » Sat Jan 20, 2007 7:54 pm

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 :-)
Regards,

Oceanwatcher

enricopoli
Posts: 2
Joined: Sat Apr 28, 2007 9:40 am

Postby enricopoli » Sat Apr 28, 2007 9:42 am

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
Posts: 9
Joined: Sun May 14, 2006 11:37 am

Postby Oceanwatcher » Mon Jun 25, 2007 7:11 am

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?
Regards,



Oceanwatcher

enricopoli
Posts: 2
Joined: Sat Apr 28, 2007 9:40 am

Postby enricopoli » Tue Jul 10, 2007 4:02 am

You're right obviously :wink:

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
Posts: 9
Joined: Sun May 14, 2006 11:37 am

Postby Oceanwatcher » Tue Jul 10, 2007 3:20 pm

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.
Regards,



Oceanwatcher


Return to “GreatNews Styles”

Who is online

Users browsing this forum: No registered users and 2 guests