Creando nuestro diseño Ice Blue (PWG)
Haora crearemos un estilo Ice Blue propio, sin duda siempre hemos querido crear una plantilla a nuestra manera, a nuestro gusto y a nuestra satisfaccion, haora ya lo podremos hacer con una serie de pasos que son muy faciles.
Para eso nosotros vamos a llenar cada campo de ese codigo con un color o una imagen en especifico.
<!--
td.edit_below_nav{visibility:hidden;}
td.edit_navi_headbg{background-image:url();}
td.edit_rechts_sbg{visibility:hidden;}
td.edit_rechts_cbg{background-image: url();}
td.edit_rechts_bottom{background-image: url();}
td.edit_header_full{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.nav_heading{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.nav{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.nav:hover{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.sidebar_heading{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.shouty{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.shouty2{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.shouty3{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.shouty4{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.shouty5{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.edit_rb_footer{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.edit_content_top{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.edit_content{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.edit_content_bottom{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.edit_content_bottom:hover{background-image:url();}
td.edit_content_bottom2{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.edit_below_nav{visibility:hidden;}
td.edit_rechts_sbg{visibility:hidden;}
<!--
body {background-image:url(URL DE IMAGEN);}
--></style>
Haora vamos a explicar cada parte de esa plantilla en blanco, como todos sabran cada parte representa una funcion en especifico. asi que vamos a ver de que se trata cada parte para asi hir armando nuestro diseño, para facilitar el trabajo separare cada parte de la plantilla con un color en especifico para poder identificarla facilmente.
BUSCAMOS ESTA PARTE EN LA PLANTILLA:
body {background-image:url(URL DE IMAGEN);}
DESCRIPCION DE ESA PARTE:
esto es el FONDO debemos conseguir una imagen de 1024 x 768 aprox. o escoger un color
BUSCAMOS ESTA PARTE EN LA PLANTILLA:
td.edit_header_full{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
DESCRIPCION DE ESA PARTE:
esto es el ENCABEZADO debemos conseguir una imagen de 1000 x 158 aprox
BUSCAMOS ESTA PARTE EN LA PLANTILLA:
td.nav_heading{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.nav{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.nav:hover{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
DESCRIPCION DE ESA PARTE:
1ra Línea -Título de Navegación: Debemos conseguir una imagen de 185x24 aprox. o escoger un Color
2da Línea -Botón de menú: Debemos conseguir una imagen de 185x33 aprox. o escoger un Color
3ra Línea -Botón de menú al pasar el cursor: Debemos conseguir una imagen de 185x33 aprox. o escoger un Color
BUSCAMOS ESTA PARTE EN LA PLANTILLA:
td.sidebar_heading{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.shouty{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.shouty2{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.shouty3{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.shouty4{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.shouty5{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.edit_rb_footer{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
DESCRIPCION DE ESA PARTE:
1ra Línea -Título de Boxs: Debemos conseguir una imagen de 168x24 aprox. o escoger un Color
2da Línea -Box1: Debemos conseguir una imagen de 168x800 aprox. o escoger un Color
3ra Línea -Box1: Debemos conseguir una imagen de 168x800 aprox. o escoger un Color
4ta Línea -Box1: Debemos conseguir una imagen de 168x800 aprox. o escoger un Color
5ta Línea -Box1: Debemos conseguir una imagen de 168x800 aprox. o escoger un Color
6ta Línea -Box1: Debemos conseguir una imagen de 168x800 aprox. o escoger un Color
7ma Línea -Pie de box: Debemos conseguir una imagen de 168x27 aprox. o escoger un Color
BUSCAMOS ESTA PARTE EN LA PLANTILLA:
td.edit_content_top{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.edit_content{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.edit_content_bottom{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
td.edit_content_bottom:hover{background-image:url();}
td.edit_content_bottom2{background-image:url(URL DE IMAGEN);background-color:#NÚMERO DEL COLOR;}
DESCRIPCION DE ESA PARTE:
1ra Línea - Título de página: Debemos conseguir una imagen de 568x38 aprox. o escoger un Color:
2da Línea - Contenido: Debemos conseguir una imagen de 568x300 aprox. o escoger un Color:
3ra Línea - Semifinal de Contenido: Debemos conseguir una imagen de 568x31 aprox. o escoger un Color:
4ta Línea - Colocarla como está sino deforma la sección de Semifinal de contenido
5ta Línea - Final de Contenido: Debemos conseguir una imagen de 568x34 aprox. o escoger un Color
Cuando hayamos acabado de armar y diseñar nuestra plantilla, devemos pegar el codigo terminado en Contenido del 1box derecha.
Aqui les dejo unos videos que yo hize hace algun tiempo, para que pueden orientarse y les ayude para crear su popio diseño Ice blue.
Parte 1
Parte 2
Leave a Comment