Page 1 of 1

2 Soft colors styles (normal & headers)

Posted: Sat Oct 11, 2008 8:50 pm
by OneStopUser
First I apologize for using 10 Minute Mail email for registration; I just wanted to share my hard work with all.

Here's a screenshot showing both of the styles:
styles.jpg
Screenshot of both styles.
styles.jpg (107.45 KiB) Viewed 12861 times


And here's the files separately (since I can't upload css files)

SoftColor Normal.css:

Code: Select all

/* body */

body
{
   margin: 0px 10px 0px 10px;
   padding: 0px 10px 0px 10px;
   color: black;
   font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}

a:link   { text-decoration: none; color: #c07030; }
a:hover   { text-decoration: underline; }



/* pager */

div.gn_pager
{
   float: right;
   margin: -1px 0px 10px 0px;
   padding: 7px 0px 8px 0px;
   color: #999;
   font-size: 11px;
   text-align: right;
}

span.gn_pager span
{
   padding: 2px 6px 3px 6px;
   border: 1px solid #fff;
}

span.gn_pager span.gn_pagenumber
{
   padding: 6px 10px 7px 10px;
   border: 1px solid #d0d0d0;
   border-top: 1px solid #fff;
   color: black;
}

a.gn_pagerlink         { text-decoration: none; padding: 2px 6px 3px 6px; border: 1px solid #fff; }
a:hover.gn_pagerlink    { border: 1px solid #d0d0d0; background: #eee; }



/* channel title */

div.gn_channeltitle
{
   margin-top: 10px;
   border-bottom: 1px solid #d0d0d0;
   font-size: 24px;
}

div.gn_channeltitle a       { text-decoration: none; color: #80c040; }
div.gn_channeltitle a:hover   { text-decoration: underline; }



/* channel title description */

div.gn_channeldesc
{
   color: #007000;
   font-size: 11px;
}



/* story container */

div.gn_story, div.gn_stories
{
   padding-top: 15px;
   padding-bottom: 5px;
   border-bottom: 1px solid #d0d0d0;
   vertical-align: top;
   overflow: auto;
}



/* story title */

div.gn_storytitle
{
   font-size: 15px;
}

a.gn_storytitle       { text-decoration: none; color: #006989; }
a.gn_storytitle:hover   { text-decoration: underline;}

div.gn_readitem a.gn_storytitle       { text-decoration: none; color: #999; }
div.gn_readitem a.gn_storytitle:hover   { text-decoration: underline;}



/* story details */

div.gn_storydetails, td
{
   padding-top: 10px;
   padding-left: 15px;
   color: #333;
   font-size: 12px;
}

div.gn_readitem div.gn_storydetails, td
{
   color: #999;
}

div.gn_storydetails img
{
   margin: 10px;
}



/* story footer */

div.gn_storyfooter
{
   font-size: 10px;
   text-align: right;
}

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



/* story comments */

div.comment
{
   margin: 0px 0px 20px 100px;
   border-top: 1px solid #d0d0d0;
   font-size: 11px;
}

span.commentTime
{
   margin: 1px 20px 1px 1px;
   color: #006989;
}

div.comment p
{
   margin: 10px;
}



SoftColor Headers.css:

Code: Select all

/* body */

body
{
   margin: 0px 10px 0px 10px;
   padding: 0px 10px 0px 10px;
   color: black;
   font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}

a:link   { text-decoration: none; color: #c07030; }
a:hover   { text-decoration: underline; }



/* pager */

div.gn_pager
{
   float: right;
   margin: -1px 0px 10px 0px;
   padding: 7px 0px 8px 0px;
   color: #999;
   font-size: 11px;
   text-align: right;
}

span.gn_pager span
{
   padding: 2px 6px 3px 6px;
   border: 1px solid #fff;
}

span.gn_pager span.gn_pagenumber
{
   padding: 6px 10px 7px 10px;
   border: 1px solid #d0d0d0;
   border-top: 1px solid #fff;
   color: black;
}

a.gn_pagerlink         { text-decoration: none; padding: 2px 6px 3px 6px; border: 1px solid #fff; }
a:hover.gn_pagerlink    { border: 1px solid #d0d0d0; background: #eee; }



/* channel title */

div.gn_channeltitle
{
   margin-top: 10px;
   border-bottom: 1px solid #d0d0d0;
   font-size: 24px;
}

div.gn_channeltitle a       { text-decoration: none; color: #80c040; }
div.gn_channeltitle a:hover   { text-decoration: underline; }



/* channel title description */

div.gn_channeldesc
{
   color: #007000;
   font-size: 11px;
}



/* story container */

div.gn_story, div.gn_stories
{
   padding-top: 5px;
   padding-bottom: 5px;
   border-bottom: 1px solid #d0d0d0;
   vertical-align: top;
   overflow: auto;
}



/* story title */

div.gn_storytitle
{
   float: left;
   font-size: 15px;
}

a.gn_storytitle       { text-decoration: none; color: #006989; }
a.gn_storytitle:hover   { text-decoration: underline;}

div.gn_readitem a.gn_storytitle       { text-decoration: none; color: #999; }
div.gn_readitem a.gn_storytitle:hover   { text-decoration: underline;}



/* story details */

div.gn_storydetails, td
{
   display: none;
}



/* story footer */

div.gn_storyfooter
{
   padding-top: 5px;
   font-size: 10px;
   text-align: right;
   white-space: nowrap;
}

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



/* story comments */

div.comment
{
   margin: 0px 0px 20px 100px;
   border-top: 1px solid #d0d0d0;
   font-size: 11px;
}

span.commentTime
{
   margin: 1px 20px 1px 1px;
   color: #006989;
}

div.comment p
{
   margin: 10px;
}


That's it. Have phun.

Re: 2 Soft colors styles (normal & headers)

Posted: Sun Oct 12, 2008 8:19 pm
by Jack
Thanks OneStopUser. They look fantastic!