Odiseum-DragonsAnime - Tutorial PWG

Esto es algo basico, todavia falta añadirle codigos para que puedas modificar absolutamente todo, pero puedes ver un poco para tener la base sobre el cambio del diseño mediante CSS.

ESTO ES PARA LA PLANTILLA ICEBLUE

--------------------------------------------------------------------------------

Ok, bueno aqui voy a dar una pequeña reseña de como es la cosa:
primero que nada el codigo comienza y termina asi:
<style type="text/css">
<!--

AQUI VAN LOS CODIGOS (CONTENIDO)

-->
</style>

Ok, ahora, que se puede cambiar?..... bueno en la plantilla ice-blue se cambia absolutamente todo, aunque solo voy a mostrar lo basico para crearse un diseño original.
esto es lo que se puede cambiar: ( lo basico, como dije, se cambia todo)

los codigos de los colores los puedes conseguir en la seccion de "links" aqui mismo en la pagina, alli hay un link adonde puedes ver todos los codigos de los colores. lo demas es crear una imagen que suplante a la que viene por defecto y colocar el URL donde te pidan. puedes dejar en blanco la casilla de URL y usas solo color, como puedes usar solo la casilla URL en algunos casos.

ok, ya sabiendo que es lo que se puede cambiar vamos con los que va adentro, osea el codigo como tal.

ire poniendo el codigo como es, y hare una pequeña reseña sobre lo que hace cada uno.

td.edit_header_full{background-image:url( URL de el encabezado );background-color:;}
este es para cambiar el encabezado, muy bueno si quieres colocar uno flash (swf)

body{background-image:url( URL de el fondo de pagina );background-attachment: fixed;background-color:#000000;}
este es para cambiar el fondo de la plantilla

td.nav{background-image:url(URL de la imagen del boton NAV debe ser del mismo tamaño 185x33 );}
este es para cambiar la imagen del boton de la izquierda, puedes poner solo color o solo la imagen URL

td.nav:hover{background-image: url(URL de la imagen del boton cuando se pone el mouse encima);}
este es para cambiar la imagen del boton de la izquierda, es para cuando pones el mouse encima hover

td.nav_heading{background-image:url(URL de la imagen );background-color:#000000;}
este es para cambiar el color o la imagen de lo que arriba de los botones

td.edit_below_nav{visibility:hidden;}
este es para cambiar lo que va debajo de los botones, esa seccion debajo de los botones

td.edit_content_top{background-image:url(URL de la parte top arriba el contenido);background-color:;}
este es para cambiar lo que va en el centro (contenido) (568x38) todo lo de arriba, puedes colocar un url o un color

td.edit_content{background-image:url(URL del centro del contenido);background-color:;}
este es para cambiar lo que va en el centro, la parte del medio,(568x765) todo el centro como tal, puedes colocar url o color

td.edit_content_bottom{background-image:url(URL de la parte de abajo del contenido);background-color:;}
este es para cambiar lo que va en el centro, la parte de abajo,(568x34) abajo en el centro puedes colores URL o color

td.shouty{background-image:url(URL de la imagen para los box);background-color:;}
este es para cambiar los BOX de la derecha, el contenido del box 1

td.shouty2{background-image:url(URL de la imagen para los box);background-color:#000000;}
este es para cambiar los BOX de la derecha, el contenido del box 2

td.shouty3{background-image:url(URL de la imagen para los box);background-color:;}
este es para cambiar los BOX de la derecha, el contenido del box 3

td.shouty4{background-image:url(URL de la imagen para los box);background-color:;}
este es para cambiar los box de la derecha, el contenido del box 4

td.shouty5{background-image:url(URL de la imagen para los box);background-color:;}
este es para cambiar los box de la derecha, el contenido del box 5

td.edit_rb_footer{background-image:url(URL del piso del box el fondo de abajo);background-color:#000000;}
este es para cambiar lo de abajo del box, puedes poner url o color

td.edit_content_bottom:hover{background-image:url(URL de el fondo de el contenido);background-color:;}
este es para poner una imagen abajo en el contenido (el centro) aparte de la pasada, es para cuando pasen el mouse por alli se active y se muestre la imagen que pongas. puedes poner este como si quieres no, no pasa nada.

Esto es algo super basico, es para que veas mas o menos por donde salen las cosas, aunque faltan algunas, recuerda que puedes colocar el codigo del color si no deseas colocar una imagen, aunque lo ideal es colocar una imagen que modifique a la imagen que viene por defecto en la plantilla, puedes crear las imagenes con el programa "banner shop gif animator" o con el "photoshop" con los dos se pueden hacer.

Sabiendo cambiar lo basico y el nombre de lo que hace cada cosa, ya solo debes pegar este codigo con sus respectivos complementos cambiados, osea el color o el URL del mismo.

<!--
body{background-image:url( URL IMAGEN FONDO );background-attachment: fixed}
td.nav:hover{background-image: url( URL NAV HOVER );}
td.nav_heading{background-image:url( URL NAV );}
td.edit_below_nav{visibility:hidden;}
td.edit_navi_headbg{background-image: none;}
td.edit_rechts_sbg{visibility:hidden;}
td.sidebar_heading{background-image:url( URL SIDE BAR );}
td.edit_content_top{background-image:url( URL CONTENT TOP );}
td.edit_content{background-image:url( URL CONTENT );}
td.edit_content_bottom{background-image:url( URL CONTENT BOTTOM );}
td.edit_content_bottom2{background-image: none;}
td.shouty{background-image:url( URL SHOUTY 1 fondo );}
td.shouty2{background-image:url( URL SHOUTY 2 fondo );}
td.shouty3{background-image:url( URL SHOUTY 3 fondo );}
td.shouty4{background-image:url( URL SHOUTY 4 fondo );}
td.shouty5{background-image:url( URL SHOUTY 5 fondo );}
td.edit_rechts_cbg{background-image: url(URL);}
td.edit_rb_footer{background-image:url(URL Footer box);}
td.edit_rechts_bottom{background-image: url(URL);}
td.edit_content_bottom:hover{background-image: none;}

--></style>

REPITO DE NUEVO, ESTO ES PARA ICE-BLUE, los codigos los pegas en "editar diseño" vas a "configuraciones avanzadas", y lo pegas en "Texto debajo de la pagina". debes crear tus imagenes (por logica), o colocar tus codigos de colores que quieras.

INDICE DEL LA WEB