The Naked GeekZone CSS

Howdy,

This probably isn't the best way to go about learning CSS, but for those of you who have looked at the orignal file:

================

body {background-color:#B0B8A0;margin:25px;font-family:verdana,arial,helvetica,sans-serif;font-size:11px;word-wrap:break-word;}
img {margin:0 auto;border-width:0px;padding:3px;vertical-align:middle;}
hr {margin:0px 15px 0px 15px;}
h1 {font-size:16px;font-weight:bold;margin:0px 15px 0px 15px;}
h2 {font-size:14px;font-weight:bold;margin:0px 0px 15px 0px;}
h3 {font-size:12px;font-weight:bold;margin:15px 15px 15px 15px;}
blockquote {display:block;padding:1em 25px;margin:0 0 15px 0;font:normal 11px/1.4em "Palatino","Georgia",sans-serif;color:#333;background:transparent url(https://cdn.geekzone.co.nz/images/blockquote.gif) top left no-repeat;}
.miniicons {font-size:10px;padding:0px;margin:15px 15px 0px 15px;}
.byline {text-decoration:none;}
.ahrefblogtitle {text-decoration:none;}
.ahrefblogtitle:active {text-decoration:none;}
.ahrefblogtitle:hover {text-decoration:none;}
.ahrefblogtitle:visited {text-decoration:none;}
.maintable{background-color:#FFFFFF;width:70%;float:left;margin:0px;}
.righttable {background-color:#FFFFFF;width:27%;float:right;margin:0px;}
.innerrighttable {margin:15px;}
.header {background-color:#D1DABF;width:100%;margin:0px;height:100px;}
.postodd {background-color:#FFFFFF;width:100%;margin:0px;}
.posteven {background-color:#FFFFFF;width:100%;margin:0px;}
.footer {font-size:9px;clear:both;margin:20px;}
.floatimageright {float:right;margin:5px 5px 5px 5px;}
.floatimageleft {float:left;margin:5px 5px 5px 5px;}
.blogtitle {font-size:30px;font-weight:bold;margin:2px;}
.blogtag {font-size:18px;font-weight:bold;margin:2px;}
.blogsmallline {font-size:10px;margin:15px 15px 0px 15px;}
.blogadsense {margin:15px 15px 0px 15px;}
.blogpost {margin:15px;}
.blogpost:first-letter {color:#94A598;font-family:georgia,times new roman;font-size:large;font-weight:bold;}
.blogcomment {margin:15px;}
.blogcommentodd {margin:15px;}
.blogcommenteven {margin:15px;}
.blogcommentauthor {margin:15px;background: transparent url(/images/blockquote.gif) top left no-repeat;}
.hrbetweenposts {margin:0px 15px 0px 15px;}
.hrbetweencomments {margin:0px 15px 0px 15px;}
.navigation {background-color:#FFFFFF;margin:15px;font-size:11px;text-align:center;}
.bloglist {margin:15px 0px 15px 0px;}
.wrap {width:100%;margin:0 auto;padding:0;text-align:left;}

==============

and thought "maybe I'll work on this a bit later" - here's my "first step" contribution toward flattening out that learning curve. It a simple re-formatting of the original with a bit of re-arranging of the commands into what I view as a more helpful structure with page formatting ("box") commands at the top, and font and color commands toward the bottom.

You will probably note that the lines between these commands are not clear, and some commands contain instructions to modify all three elements.

A lot of credit should be given to the authors of this sheet as the command names go a long way to explaining what each does. The second step in this process is to find a blog (or blogs) that use these commands so we can see what each one actually does.

Happy to accept donation blogs for anyone that is willing to share. Also happy to accept corrections and contrary opinions .

Remember, "A Pretty blog is a Happy blog"

================

/* This is the original style sheet used by GeekZone, modified by Deck Hazen */
/* December 19, 2010

/*       ================== Box formatting starts here ==================== */

body {
background-color:#B0B8A0;
margin:25px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:11px;
word-wrap:break-word;
}

.maintable {
  background-color:#FFFFFF;
  width:70%;
  float:left;
  margin:0px;
  }

.header {
background-color:#D1DABF;
width:100%;
margin:0px;
height:100px;
}

.righttable {
background-color:#FFFFFF;
width:27%;
float:right;
margin:0px;
}

.innerrighttable {
margin:15px;
}

.postodd {
background-color:#FFFFFF;
width:100%;
margin:0px;
}

.posteven {
background-color:#FFFFFF;
width:100%;
margin:0px;
}

.footer {
font-size:9px;
clear:both;
margin:20px;
}

img {
margin:0 auto;
border-width:0px;
padding:3px;
vertical-align:middle;
}

blockquote {
display:block;
padding:1em 25px;
margin:0 0 15px 0;
font:normal 11px/1.4em Palatino, Georgia, sans-serif;
color:#333;
background-image:url(https://cdn.geekzone.co.nz/images/blockquote.gif);
background-position:'top left';
background-repeat: no-repeat;

}

.floatimageright {
float:right;
margin:5px 5px 5px 5px;
}

.floatimageleft {
float:left;
margin:5px 5px 5px 5px;
}

.blogsmallline {
font-size:10px;
margin:15px 15px 0px 15px;
}

.blogadsense {
margin:15px 15px 0px 15px;
}

.blogpost {
margin:15px;
}

.blogcommentauthor {
margin:15px;
background: transparent url(/images/blockquote.gif) top left no-repeat;
}

.hrbetweenposts {
margin:0px 15px 0px 15px;
}

.hrbetweencomments {
margin:0px 15px 0px 15px;
}

.navigation {
background-color:#FFFFFF;
margin:15px;
font-size:11px;
text-align:center;
}

.blogcomment {
margin:15px;
}

.blogcommentodd {
margin:15px;
}

.blogcommenteven {
margin:15px;
}

.bloglist {
margin:15px 0px 15px 0px;
}

.wrap {
width:100%;
margin:0 auto;
padding:0;
text-align:left;
}

/* ============= Headers, Fonts, and Colours start here ====================*/

hr {
margin:0px 15px 0px 15px;
}

h1 {
font-size:16px;
font-weight:bold;
margin:0px 15px 0px 15px;
}

h2 {
font-size:14px;
font-weight:bold;
margin:0px 0px 15px 0px;
}

h3 {
font-size:12px;
font-weight:bold;
margin:15px 15px 15px 15px;
}

.miniicons {
font-size:10px;
padding:0px;
margin:15px 15px 0px 15px;
}

.byline {
text-decoration:none;
}

/* ============================= Link Colours =====================*/

.ahrefblogtitle {
text-decoration:none;
}

.ahrefblogtitle:active {
text-decoration:none;
}

.ahrefblogtitle:hover {
text-decoration:none;
}

.ahrefblogtitle:visited {
text-decoration:none;
}

/* =========================== Titles and Tags ================*/

.blogtitle {
font-size:30px;
font-weight:bold;
margin:2px;
}

.blogtag {
font-size:18px;
font-weight:bold;
margin:2px;
}

.blogpost:first-letter {
color:#94A598;
font-family:georgia,"times new roman";
font-size:large;
font-weight:bold;
}

===============================

               -- Deck

dhazen

dhazen

freitasm

dhazen