[Diseño para CSS-Design] Natural Gloom

Este tuto es realizado por cssplantillas

CAPTURA



Codigo por encima de la pagina:

Código:


<style>
#header_wrapper
{background: Url("URL DE TU CABEZAL") repeat-x;} /* ANCHO 992PX ALTO: 150PX */
</style>
<div id="layout_wrapper"><div id="layout_wrapper2">
<div id="layout_wrapper3"><div id="layout_wrapper4">
<div id="header_wrapper"><div id="head">     
<div id="site_title">
  <!-- Cabecera -->
  <h1><a href="http://cssplantillas.es.tl">Css Plantillas</a></h1>
  <h2>Recursos web!</h2>
  <!-- Fin Cabecera -->
</div></div></div>
<div id="navigation"><div id="nav"><ul class="tabbed">
<!-- menu 1 -->
<li class="current_page_item"><a href="URL">Inicio</a></li>
  <li><a href="URL">Link's 2</a></li>
  <li><a href="URL">Link's 3</a></li>
  <li><a href="URL">Link's 4</a></li>
  <li><a href="URL">Link's 5</a></li>
<!-- Fin menu 1 -->
</ul><div class="clearer"></div>
</div><div id="subnav">
<ul class="tabbed">
  <li class="current_page_item"><a href="URL">Link's 1</a></li>
  <li><a href="URL">Link's 2</a></li>
  <li><a href="URL">Link's 3</a></li>
  <li><a href="URL">Link's 4</a></li>
</ul>
<div class="clearer"></div>
</div></div>
<div id="main_wrapper"><div id="main">
<div class="left" id="content_wrapper">

Codigo por debajo de la pagina:

Código:

</div><div class="right" id="sidebar_wrapper">
<div id="sidebar"><div class="box">
<div class="box_title">Nuestra web</div>
<div class="box_content"><p>
<!-- Escribe aqui lo que quieras! -->
Aenean sit amet dui at felis lobortis dignissim. Pellentesque risus nibh, feugiat in, convallis id, congue ac, sem. Sed tempor neque in quam.
<!-- Fin -->
</p></div></div>
<div class="box"><div class="box_title">Categorias</div>
<div class="box_content"><ul>
  <li><a href="URL">Link's 1</a></li>
  <li><a href="URL">Link's 2</a></li>
  <li><a href="URL">Link's 3</a></li>
  <li><a href="URL">Link's 4</a></li>
  <li><a href="URL">Link's 5</a></li>
</ul>
</div></div><div class="box">
<div class="box_title">Recursos</div>
<div class="box_content"><ul>
  <li><a href="URL">Link's 1</a></li>
  <li><a href="URL">Link's 2</a></li>
  <li><a href="URL">Link's 3</a></li>
  <li><a href="URL">Link's 4</a></li>
  <li><a href="URL">Link's 5</a></li>
</ul>
</div></div></div></div>
<div class="clearer"></div>
</div></div>

<div id="dashboard_outer"><div id="dashboard">
<div class="col3 left"><div class="col3_content">
<div class="col_title">Link's final 1</div><ul>
  <li><a href="URL">Link's 1</a></li>
  <li><a href="URL">Link's 2</a></li>
  <li><a href="URL">Link's 3</a></li>
  <li><a href="URL">Link's 4</a></li>
  <li><a href="URL">Link's 5</a></li>
</ul></div></div>
<div class="col3mid left"><div class="col3_content">
<div class="col_title">Link's final 2</div><ul>
  <li><a href="URL">Link's 1</a></li>
  <li><a href="URL">Link's 2</a></li>
  <li><a href="URL">Link's 3</a></li>
  <li><a href="URL">Link's 4</a></li>
  <li><a href="URL">Link's 5</a></li>
</ul></div></div>
<div class="col3 right"><div class="col3_content">
<div class="col_title">Link's final 3</div><ul>
  <li><a href="URL">Link's 1</a></li>
  <li><a href="URL">Link's 2</a></li>
  <li><a href="URL">Link's 3</a></li>
  <li><a href="URL">Link's 4</a></li>
  <li><a href="URL">Link's 5</a></li>
</ul></div></div>
<div class="clearer"></div></div></div>
<div id="footer"><div class="left">
<!-- Copyright -->
© 2009 Website.com - tusitioweb
<!-- Fin Copyright -->
</div><div class="right">
<a href="http://templates.arcsin.se">Website template</a> Adapter by: <a href="http://cssplantillas.es.tl">Css Plantillas</a>
</div>
<div class="clearer"></div>
</div></div></div></div></div>

Codigo "Sin style tag":

Código:


#pre_header {display: none;}
#post_header {display: none;}
#header_container {display: none;}
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
#header {display: none;}
#title {display: none;}
#nav_container {display:none;}
table {margin-left:auto;margin-right:auto;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, input, select {margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
table {border-collapse: collapse; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
table, td, th {vertical-align: middle;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: none;}
html {height: 100%;padding-bottom: 1px;}
body {background: #797E84 url("http://img.webme.com/pic/c/cssplantillas/ngloom1.jpg");
color:#444;font:normal 80% sans-serif;line-height:1.5;}
h1,h2,h3,h4,h5,h6 {color:#555;font-weight:normal;line-height:1;margin-bottom:0.3em;}
h4,h5,h6 {font-weight: bold;}
h1 {font-size: 2.6em;}
h2 {font-size: 2em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.25em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}
p {margin-bottom: 1em;}
a:focus,a:hover {color: #000;}
a {color: #357;text-decoration: underline;}
abbr, acronym {border-bottom: 1px dotted #666;}
address {margin-bottom: 1.5em;}
blockquote {margin: 1.5em;}
del, blockquote {color: #666;}
em, dfn, blockquote, address {font-style: italic;}
strong, dfn {font-weight: bold;}
sup, sub {line-height: 0;}
pre {margin: 1.5em 0;white-space: pre;}
pre,code,tt {font: 1em monospace;line-height: 1.5;}
li ul, li ol {margin-left: 1.5em;}
ul, ol {margin: 0 1.5em 1.5em 1.5em;}
ul {list-style-type: disc;}
ol {list-style-type: decimal;}
dl {margin: 0 0 1.5em 0;}
dl dt {font-weight: bold;}
dd {margin-left: 1.5em;}
ul.tabbed {display: inline;margin: 0;}
ul.tabbed li {float: left;list-style: none;margin: 0;}
textarea {overflow: auto;}
input.text, textarea, select {background: #FCFCFC;border: 1px inset #AAA;padding: 4px 5px;}
input.text:focus, textarea:focus, select:focus {background: #FFFFF5;}
input.button {background: #F9F9F3;border: 1px outset #AAA;padding: 4px 5px;}
input.button:active {border-style: inset;}
.form_property, .form_value {float: left;}
.form_property {text-align: right;width: 110px;}
.form_value {padding-left: 24px;}
.form_row_submit .form_value {padding-left: 132px;}
.center,.aligncenter {display: block;margin-left: auto;margin-right: auto;}
img.bordered,img.alignleft,img.alignright,img.aligncenter {background-color: #FFF;
border: 1px solid #DDD;padding: 3px;}
img.alignleft, img.left {margin: 0 1.5em 1em 0;}
img.alignright, img.right {margin: 0 0 1em 1.5em;}
.left,.alignleft {float: left;}
.right,.alignright {float: right;}
.clear,.clearer {clear: both;}
.clearer {display: block;font-size: 0;line-height: 0;}
.content_separator, .archive_separator {background: #D5D5D5;clear: both;color: #FFE;
display: block;font-size: 0;height: 1px;line-height: 0;margin: 12px 0 24px;}
.archive_separator {margin: 0 0 14px;}
.post {margin-bottom: 24px;}
.post_title a,.post_meta a, .post_date a {text-decoration: none;}
.post_title a:hover,.post_meta a:hover, .post_date a:hover {text-decoration: underline;}
.post_date {border-top:1px solid #D5D5D5;color:#777;font-size:0.9em;padding:8px 0 12px;}
.post_date a {color: #444;}
.post_meta {background: #E7E7E7;border: 1px solid #D7D7D7;
color: #777;font-size: 0.9em;padding: 6px 10px;}
.post_meta a {color: #345; }
.post_meta a:hover {color: #001;}
.archive_pagination {margin-bottom: 1.6em;}
.archive_post {margin-bottom: 14px;}
.archive_post_title {padding-top: 3px;}
.archive_post_date {background:#FAFAFA;border-bottom:1px solid #C5C5C5;border-right:1px solid #CFCFCF;
float: left;margin-right:12px;padding: 2px 0 5px;text-align: center;width: 46px;}
.archive_post .post_date {border: none;padding:3px 0 0;}
.archive_post_day {font: normal 1.6em Georgia,serif;}
.thumbnails {margin: 0 0 1em -8px;}
.thumbnails a.thumb{background:#D5D5D5;display:block;float:left;margin:0 0 8px 8px;padding:3px;}
.thumbnails a.thumb:hover {background: #C0C0C0;}
.thumbnails .thumb img {display: block;}
.box {margin-bottom: 0.6em;}
.box_title {background: #D2D5D8;border-bottom: 1px solid #C6C9CB;color: #70767A;
font: bold 1.3em sans-serif;padding: 7px 10px 6px;}
.box_content {padding: 8px 0 8px;}
.box li:first-child {border-top: none;}
div.comment_list {border-top: 1px solid #D6D6D6; margin: 1em 0 2em;}
.comment {border-bottom: 1px solid #D6D6D6;padding-top: 10px;}
.comment_date {font-size: 0.9em;}
.comment_date a {color: #567;text-decoration: none;}
.comment_date a:hover {color: #001;text-decoration: underline;}
.comment_body {padding-top: 4px;}
.comment_gravatar {width: 48px;}
.comment_gravatar img {background: #FFF;border: 1px solid #DDD;padding: 2px;}
#layout_wrapper {background: url("http://img.webme.com/pic/c/cssplantillas/ngloom2.jpg") repeat-x;
padding-bottom: 16px;}
#layout_wrapper2 {background: url("http://img.webme.com/pic/c/cssplantillas/ngloom3.jpg") no-repeat center top;
padding-top: 10px;}
#layout_wrapper3 {background: #FFF;margin: 0 auto;width: 992px;  }
#layout_wrapper4 {padding: 6px;}
#header_wrapper {height: 150px;}
#head {padding: 48px 48px 0 48px;}
#site_title h1 {color: #A0C3D0;font-size: 2.5em;}
#site_title h1 a {color: #A0C3D0;text-decoration: none;}
#site_title h1 a:hover {color: #DDD;}
#site_title h2 {color: #999;font-size: 1.3em;}
#navigation {background: #6E7D85 url("http://img.webme.com/pic/c/cssplantillas/ngloom5.gif") repeat-x;
margin-bottom: 3px;padding-top: 4px;}
#navigation a {color:#E0E6EA;display:block;font-weight:bold;text-decoration: none;}
#navigation a:hover {color: #F0F6FA;}
#nav li {border-right: 1px solid #54646C;}
#nav a {font-size: 1.3em;padding: 10px 16px;}
#nav a:hover {background: #5E6D75;}
#nav li.current_page_item a {background: #6E7D85;color: #FFF;}
#subnav {border-top: 1px solid #555A5F;background: #60656A;}
#subnav li {border-right: 1px solid #50555A;}
#subnav a {font-size: 1.1em;padding: 9px 12px;}
#subnav a:hover {background: #555A5F;}
#main_wrapper {background: url("http://img.webme.com/pic/c/cssplantillas/ngloom6.gif") repeat-y;
border-bottom: 1px solid #C3C4C1;margin-bottom: 3px;}
#main {background: url("http://img.webme.com/pic/c/cssplantillas/ngloom7.gif") no-repeat;padding: 24px 0;}
#content_wrapper {width: 690px;}
#content {padding: 0 20px;}
#sidebar_wrapper {width: 290px;}
#sidebar {padding: 0 18px;}
#dashboard_wrapper {}
#dashboard {background: #C9CDCF url("http://img.webme.com/pic/c/cssplantillas/ngloom8.gif") repeat-x;
border:1px solid #ACAFB0;color:#404448;margin-bottom:3px;padding: 16px;}
#dashboard .col3 {width: 288px;}
#dashboard .col3mid {width: 370px;}
#dashboard .col3mid .col3_content {border-left: 1px solid #B0B4B8;
border-right: 1px solid #B0B4B8;margin: 0 20px;padding: 0 20px;}
#dashboard .col_title {color: #606669;font-size: 1.5em;}
#dashboard ul {margin: 0;}
#dashboard li {border-bottom:1px solid #BABEBF;list-style:none;padding:5px 0;}
#dashboard li a {color: #404448;text-decoration: none;}
#dashboard li a:hover {color: #202428;text-decoration: underline;}
#footer {background: #DDD;border: 1px solid #CCC;padding: 8px 12px;}
#footer .right, #footer .right a {color: #777;text-decoration: none;}
#footer .right a:hover {color:#223;text-decoration: underline;}
* html #main, * html #dashboard {height: 0.01%; min-height: 0.01%;}

perdón esto no es un tuto, es un design jeje pero gracias por el aporte, creare una sección para este tipo de aporte así facilitamos todo, también hacer sugerencias cuando las tengan ok se les agradecerá salu2

Jajajaa.-- brother que pena pero no sabía en que sección ubicarlo--- esperare a que crees la sección antes de subir más Design :D -_-

ok no hay problema yo creo que en 1 semana máximo