JyDcodes - Como Crear Tu Propia Plantilla Css-Desing

Hola, bueno aprendi ha hacer diseños para PWG con CSS-Desing y como en el Tutorial de Team-Webmaster no se esplica mucho les ayudare lo más facil Posible.

Donde esta Con Rojo es para que sepan para que Sirve
Donde esta Con Azul es para Modificar
Donde esta Con Amarillo es para que sepan que es un Paso.

1- Hacer su Diseño: Hantes que nada demos hacer un Diseño para nuestra web de la siguiente forma:

2- Poner este Codigo Por Ensima de su Pagina:

Código:

3- Editar el Contenido:

#content {
position: absolute;
left: 50%;
top: 230px; Aqui es donde podremos Modificar la Posicion del Contenido
margin-left:-285px;
width: 425px; Aqui es donde podremos Modificar el Ancho del Contenido
height: 362px; Aqui es donde podremos Modificar la Altura del Contenido
padding:10px;
color: #transparent;
font-size:13px; Aqui es donde podremos Modificar el Tamaño de las Letras
background-color:#transparent;
background-image: none;
border: 0px solid #FFFFFF;
overflow:auto;}

4- Editar el Color o la Imagen del Fondo

Este es para Ponerle un Color de Fondo
body {
background-color:#000000;} Aqui Modificamos el Color del Fondo

Este es para Ponerle una Imagen de Fondo
body{
background-image: url(URL DE LA IMAGEN DE FONDO)

5- Editar los Links:

a{
color:#FFFFFF; Aqui Cambiamos el Color de los Links
text-decoration: none;
font-size:13px;} con esto cambias el tamaño de las letras

a:hover {
color: #4A9AF6; Aqui Cambiamos el Color de los Links
font-size: 13px; Aqui Cambiamos el Tamaño de los Links
text-decoration: none;}

a:link {
color: #000000; Aqui Cambiamos el Color de los Links
font-size: 13px; Aqui Cambiamos el Tamaño de los Links
text-decoration: none;}

a:active {
color: #000000; Aqui Cambiamos el Color de los Links
font-size: 13px; Aqui Cambiamos el Tamaño de los Links
text-decoration: none;}

a:visited {
color: #cccccc; Aqui Cambiamos el Color de los Links
font-size: 13px; Aqui Cambiamos el Color de los Links
text-decoration: none;}

6- La Imagen del Diseño: Como ya tenemos Lista la imagen de Nuestro Diseño, solo devemos poner la URL de la imagen aqui:

*{ padding: 0; margin: 0; }

#Designmystic {
margin: 0 auto;
width: 610px;
height:600px;
background-image:url(URL DE SU DISEÑO);}

7- Pegar este Codigo donde dice CSS-Code sin Style Tags:

Código:

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}

#content {
position: absolute;
left: 50%;
top: 229px;
margin-left:-283px;
width: 380px;
height: 360px;
padding:10px;
color: #transparent;
font-size:13px;
background-color:#transparent;
background-image: none;
border: 0px solid #FFFFFF;
overflow:auto;}

#text{
color: ffffff;
position: absolute;
top: 100px;
margin-left:-300px;
left: 50%;
}

body {
background-color:#262626;}

*{ padding: 0; margin: 0; }

#Designmystic {
margin: 0 auto;
width: 610px;
height:600px;
background-image:url(URL DE SU DISEÑO);}

a{
color:#ffffff;
text-decoration: none;
font-size:13px;}

a:hover {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}

a:link {
color: #000000;
font-size: 13px;
text-decoration: none;}

a:active {
color: #000000;
font-size: 13px;
text-decoration: none;}

a:visited {
color: #cccccc;
font-size: 13px;
text-decoration: none;}

#Uebersicht{
position: absolute;
left: 50%;
top: 204px;
margin-left:-440px;
font-color:#cccccc;}