Souldhack
Souldhack necesita de nuestra ayuda! Por favor lee la siguiente nota! Necesitamos tu ayuda! Y apoyanos!

souldhack

Tu propio diseño Ice Blue

Creando nuestro propio diseño Ice Blue

Escrito por Administrador - 6/octubre/2011
Deja tu comentario


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.

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.


<style type="text/css">`
<!--
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

Volver arriba ↑ Recursos



Acerca del autor
Manolo M./Administrador
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
Interesante
Aqui hablaremos de articulos de interes y debate.

Interesante
CSS/HTML
utilidades, mejoras, servicios, diseño... ¿te quieres volver loco con estos codigos?

CSS/HTML



 
Site5.com

Souldhack necesita tu ayuda!

Souldhack necesita nuestra ayuda!
Todos podemos ayudar a souldhack entrando al blog Souldhacko Y dandole click a la publicidad y anuncios de google que estan en dicho blog, de esta manera estaremos apoyando y agradeciendo a souldhack por toda su ayuda brindada hacia nosotros!, espero y todos nos apoyen, no saben lo agradecidos que estaremos con todos ustedes!, Recuerden que souldhack! esta echo por y para ustedes!.

¿Que pasa en souldhack y souldhacko?

Recuerda que se están escribiendo artículos recientemente en el blog, Souldhacko


Siguenos en Facebook!

Recent Posts

Cuadro ultimos tweets
Para todos los usuarios de twitter que tienes una web acargo en esencial...

Abril 14, 2012

 
Botones compartir articulos
Cuando un articulo es satisfactorio, o simplemente era lo que estabamos...

Febrero 18, 2012

 
Usar/Utilizar jQuery
Bueno en este tutorial explico como instalar y usar jquery ya sea en un diseño profecional...

Noviembre 13, 2011

 
Cambiar botones a Ice Blue
En este mi mas reciente video subido explico como cambiar los botones de los diseños...

Mayo 3, 2012

 

Chat

Los comentarios...

Los comentarios...

Mi video mas reciente

Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis