¿Como agrandar el header de la plantilla JA Purity 2?

Desde hace tiempo me habia preguntado eso, desde que comenze  hacer sitios web en joomla, mis clientes se volvian mas exigentes y muchas veces la unicas olucion era tocar el codigo CSS, para poder hacer bien mi trabajo.

Ayer un amigo me pregunto ¿que tengo que hacer para poder agrandar el header de mi plantilla ja purity 2?, a lo que yo le respondi… lo unico que tienes que hacer es tocar el CSS, para poder adaptarla a tus necesidades, y el me pregunto… ¿pero como?, hay fue cundo yo le respondi, prestame tu compu y entramos a tu sitio y te explico.

Me puse a leer codigo y busque en google y en el foro de joomla spanish ya habien resulto la duda, sin mas rodeos les dejo la solucion, voy a hacer un copy, paste de la solucion y les dejo el link original.

SOLUCION A NUESTRO PARTICULAR PROBLEMA!!!

Primero creas las imágenes o editas las imágenes que encuentras en wwwTuSitio/templates/ja_purity/images/header son:

header1.png, header2.png y header3.png los que vienen por defecto con la plantilla.

El tamaño de la imagen ahora es “600x80px” digamos que quieres modificar alto y ancho, triplicamos el alto y le damos un poco más al ancho dejando las imágenes de “800x240px”

Modificas con un editor de imágenes o creas nuevas imágenes con el tamaño que deseas, a modo de ejemplo usaremos “800x240px” y guardas tus imágenes reemplazando las otras.

Segundo paso es la imagen que se carga como mascara, la encuentras en
wwwTuSitio/templates/ja_purity/images y es el header-mask.png (pensando que usas como Header Themes el valor determinado)

Si usas alguno de los colores lo encuentras en
wwwTuSitio/templates/ja_purity/styles/header/blue/images y en verde wwwTuSitio/templates/ja_purity/styles/header/green/images, en ambos casos tienen el mismo nombre.

La header-mask.png es una imagen con transparencia, si quieres aclarar como se ve la imagen lo modificas cambiando el degrade. Recuerda primero modificar tamaño de está imagen a la que vas a usar de tamaño (para seguir con lo anterior lo dejamos de “800x240px”). Como dato el borde del degrade, parte con el color #333333 (azul #006699 y verde #7BA566), dejas el segundo color transparente y lo creas a tu gusto. Donde dejes más transparencia más claro se ve.

Tercer paso sería modificar el template.css la altura “height:80px” a la nueva de 240px y al ja-headermask el ancho igual “width:800px”

Editas el template.css que se encuentra wwwTuSitio/templates/ja_purity/css

template.css

#ja-headerwrap {
	background: #333333;
	color: #CCCCCC;
	line-height: normal;
	height: 240px;    ===>> esto fue lo que modificamos
}

#ja-header {
	position: relative;
	height: 240px;   ===>> esto fue lo que modificamos
}

.ja-headermask {
	<strong>width: 800px;</strong>
	display: block;
	background: url(../images/header-mask.png) no-repeat top right;
	height: 240px;   ===>> esto fue lo que modificamos
	position: absolute;
	top: 0;
	right: -1px;
}

Lo guardamos y Listo. 🙂

La entrada en el foro la pueden encontrar pinchando AQUI.

Saludos y Paz

Andrewnix

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s