souldhack
Tu propio diseño Ice Blue
Creando nuestro propio diseño Ice Blue
Escrito por Administrador - 6/octubre/2011Haora 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.
Asi que vamos a empezar, el siguiente codigo se podria decir que es la plantilla Ice Blue en blanco, es decir no tiene nada.
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: none;}
td.edit_rechts_sbg{visibility:hidden;}
td.edit_rechts_cbg{background-image: none;}
td.edit_rechts_bottom{background-image: none;}
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: none;}
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 168x300 aprox. o escoger un Color
3ra Línea -Box1: Debemos conseguir una imagen de 168x300 aprox. o escoger un Color
4ta Línea -Box1: Debemos conseguir una imagen de 168x300 aprox. o escoger un Color
5ta Línea -Box1: Debemos conseguir una imagen de 168x300 aprox. o escoger un Color
6ta Línea -Box1: Debemos conseguir una imagen de 168x300 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: none;}
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
Tweet
Acerca del autor
Les cuento un poco sobre mi... soy un aficionado en todo lo relacionado con las paginas web, haora estoy enamorado de mi pagina web en la cual se comparten conocimientos, ideas... Leer mas
Algunas categorias
utilidades, mejoras, servicios, diseño... ¿te quieres volver loco con estos codigos?
CSS/HTML
Souldhack necesita tu ayuda!
¿Que pasa en souldhack y souldhacko?
Recuerda que se están escribiendo artículos recientemente en el blog, Souldhacko Seguir a @Souldhack95Siguenos en Facebook!
Recent Posts
Para todos los usuarios de twitter que tienes una web acargo en esencial...
Abril 14, 2012
Cuando un articulo es satisfactorio, o simplemente era lo que estabamos...
Febrero 18, 2012
Bueno en este tutorial explico como instalar y usar jquery ya sea en un diseño profecional...
Noviembre 13, 2011
En este mi mas reciente video subido explico como cambiar los botones de los diseños...
Mayo 3, 2012