El primer paso es ir al código del template y fijarnos qué dimensiones tiene la cabecera actual para crear una similar.
Entonces, entramos al código y buscamos la línea:
#header-wrapper {
Debajo de ésta, están todas las especificaciones de la imagen de cabecera.
No es algo complicado, veamos:
width: 900px;
Esto indica el ancho que tiene la cabecera, en el ejemplo, tenemos una cabecera de 900 pixeles de ancho.
height: 170px;
Esto indica el alto que tiene la cabecera. A veces esta línea no se incluye, entonces se toman sólo los 100 primeros pixeles de la imagen y es lo que se muestra.
background: url(gráfico);
Esta línea indica que existe una cabecera gráfica y su localización; donde: gráfico es la dirección donde se ubica la imagen, que podría ser del tipo:
background-position: center;
Esto indica la posición de la imagen, no se utiliza con mucha frecuencia, pero según el diseño del template lo podemos encontrar.
También podría verse enganchado al final de la línea anterior, de esta forma:
background: url(gráfico) center;
La otra opción más común que se puede encontrar es TOP, e incluso habrá momentos, insisto, según el diseño, donde estén mencionadas las dos instrucciones de esta manera:
background: url(gráfico) top center;
background-repeat: no-repeat;
Esto indica que no debe repetirse la cabecera. Lo que significa que si damos un alto mayor a la cabecera que el que ocupa la imagen, ésta no va a repetirse.
background-repeat: repeat-x;
Esta opción se utiliza cuando trabajamos con un gráfico que va a repetirse - como un patrón - a lo ancho de toda la cabecera. Entonces tomamos una pequeña porción de ese gráfico, la subimos al host de imágenes y luego indicamos, con esta instrucción, que queremos que se repita todas las veces que sean necesarias hasta cubrir todo el ancho de la cabecera.
Y si queremos que se repita a pantalla completa, en el witdh pondremos 100%;
Tanto la opción anterior como ésta, pueden verlas enganchadas en la línea de definición de la cabecera de esta manera:
background: url(gráfico) no-repeat;
o bien.. background: url(gráfico) repeat-x;
Y lo único que falta por definir son los márgenes.
margin: 0;
Indica que deseamos que no haya espacio ni arriba, ni abajo, ni a la derecha, ni a la izquierda.
Si queremos que quede un espacio entre el inicio de la cabecera y el margen superior, entonces pondremos:
margin-top: ..px;
Donde los puntos representan la cantidad de pixeles que desean separar la cabecera del margen superior.
Con estas definiciones podremos instalar la cabecera gráfica que más nos guste en el template que tenemos en uso sin que se altere el diseño, siempre y cuando el diseño general lo permita.
Suerte y buen post.
