Habbo ~ Fernet - Crea Tu Plantilla ;)

Como crear una plantilla:

Primero subiremos las imagenes y para eso vamos a Imageshack, buscamos la imagen y le damos a Host It.
Esperamos unos segundos y nos van a saltar varias barras de códigos, pero nosotros solo debemos copiar la última de abajo
que dice Direct link to image.

Luego empezaremos a crear la plantilla en estos 12 pasos a seguir:

Paso 1, el fondo: body{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.edit_navi_headbg{background-image: none;}
td.edit_rechts_cbg{background-image: none;}
td.edit_rechts_bottom{background-image: none;}

Debemos conseguir una imagen de 1024 x 768 aprox. o escoger un color de la tabla de colores. Por favor, aunque pongas la URL o el COLOR en una sola línea, no borres las otras líneas porque que deformaría el fondo. Así que, dejarlos como está.

Paso 2, el encabezado:

td.edit_header_full{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;height:PIXELES DE ALTURApx;}

Debemos conseguir una imagen de 921x104 ESTANDAR o una con mayor altura porque modificaremos los pixeles de altura:

Paso 3, el menú:

td.nav_heading{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}

Debemos conseguir una imagen de 185x24 aprox. o escoger un Color:

Paso 4, botón del menú sin pasar el mouse:

td.nav{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}

Debemos conseguir una imagen de 185x33 aprox. o escoger un Color:

Paso 5, botón del menú al pasar el mouse:

td.nav:hover{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}

Debemos conseguir una imagen de 185x33 aprox. o escoger un Color:

Paso 6, arriba del box:

td.sidebar_heading{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}

Debemos conseguir una imagen de 168x24 aprox. o escoger un Color:

Paso 7, contenido de los box:

td.shouty{background-image:url(URL DE IMAGEN 1);background-color:#NÚMERO DEL COLOR;}
td.shouty2{background-image:url(URL DE IMAGEN 2);background-color:#NÚMERO DEL COLOR;}
td.shouty3{background-image:url(URL DE IMAGEN 3);background-color:#NÚMERO DEL COLOR;}
td.shouty4{background-image:url(URL DE IMAGEN 4);background-color:#NÚMERO DEL COLOR;}
td.shouty5{background-image:url(URL DE IMAGEN 5);background-color:#NÚMERO DEL COLOR;}

1ra Línea - Box1: Debemos conseguir una imagen de 168x800 aprox. o escoger un Color:
2da Línea - Box2: Debemos conseguir una imagen de 168x800 aprox. o escoger un Color:
3ra Línea - Box3: Debemos conseguir una imagen de 168x800 aprox. o escoger un Color:
4ta Línea - Box4: Debemos conseguir una imagen de 168x800 aprox. o escoger un Color:
5ta Línea - Box5: Debemos conseguir una imagen de 168x800 aprox. o escoger un Color:

Paso 8, pie del box:

td.edit_rb_footer{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}

Debemos conseguir una imagen de 168x27 aprox. o escoger un Color:

Paso 9, arriba del contenido:

td.edit_content_top{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}

Debemos conseguir una imagen de 568x38 aprox. o escoger un Color:

Paso 10, centro del contenido:

td.edit_content{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}

Debemos conseguir una imagen de 568x300 aprox. o escoger un Color:

Paso 11, semi final del contenido:

td.edit_content_bottom{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.edit_content_bottom:hover{background-image: none;}

1ra Línea: Debemos conseguir una imagen de 568x31 aprox. o escoger un Color:

2da Línea: Dejarla como está sino deformara la sección de Semifinal de contenido

Paso 12, final del contenido:

td.edit_content_bottom2{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}

1ra Línea: Debemos conseguir una imagen de 568x34 aprox. o escoger un Color:

2da Línea: Dejarla como está sino deformara la sección de Semifinal de contenido

td.edit_below_nav{visibility:hidden;}
td.edit_rechts_sbg{visibility:hidden;}

El codigo completo seria este:

<style type="text/css">

</style>

Como crear un multimenu:

Ahora vamos a aprender a crear un multimenu como el mio, me refiero a los separadores blancos del menu, lo primero que haremos sera crear una imagen de 185x33 pixeles exactos, luego colocar este codigo en el texto por abajo de la pagina:

<style type="text/css">

<!--
.sinlink{background-image:url(URL DE LA IMAGEN);margin-left: -25px;margin-top: -0px;widht: 168px;height: 34px;}

--></style>

Luego crean una nueva seccion, ponen "Mostrar opciones", lo dejan como "Puntos del menú sin link", en el nombre poneis este codigo:

<div class="sinlink"><br/>      TITULO DE LA PAGINA SIN LINK</div>

Como crear un Menu Horizontal:

Lo primero que tenemos que saber es que necesitamos alinearlo, el codigo que os dare esta predeterminado para la plantilla ice blue, lo podeis ajustar a vuestro gusto, tambien pueden agregar mas links copiando una linea, este menu quedaria algo asi:

Inicio | STAFF | Chat | ETC...

Recuerden que esto sacrificaria un 10% del encabezado, aunquelo pueden agrandar segun el texto que coloquen, tambien pueden colocar imagenes usando un codigo que podeis ver en el tutorial de html basico, en fin aqui esta el codigo:

<div style="position:absolute;left:20px;top:124px;" ><a href="URL O LINK" class="menuh">TEXTO</a> | <a href="URL O LINK" class="menuh">TEXTO</a> | <a href="URL O LINK" class="menuh">TEXTO</a> | <a href="URL O LINK" class="menuh">TEXTO</a></div>