Avisos
Vaciar todo

Cabecera Teline IV  

 
Marí­a
 Marí­a
Honorable Member

Hola, me gustaría sustituir el logo de la cabecera de la Teline IV. No necesito el efecto de hover y prefiero doblar el tamaño que se ve por defecto. Además me gustaría que el logo también fuese más ancho.
He modificado el template.css pero no es suficiente. Me gustaría que se mostrase un logo de 324x114px (anchoxalto)

Aquí esá el css... (bompl son marcas mías)

/* HEADER
--------------------------------------------------------- */
#ja-header { }

#ja-header .main { height: 115px; padding: 0; }

h1.logo, div.logo-text h1 { font-size: 40px; line-height: 1; }

/* Logo Image ---*/
/*bompl h1.logo { height: 57px; margin-top: 40px; width: 222px; } ---*/
bompl h1.logo { height: 114px; margin-top: 40px; width: 324px; }

h1.logo a {
background: url(../images/logo.png) no-repeat left top;
display: block;
/*bompl height: 57px; ---*/
/*bompl width: 222px; ---*/
mpl height: 114px;
mpl width: 324px;
}

/*bompl h1.logo a:hover, h1.logo a:focus { background-position: left bottom; } ---*/

/* Logo Text ---*/
div.logo-text { margin-top: 40px; }

div.logo-text h1 { letter-spacing: 2px; margin-left: 2px; }

div.logo-text h1 a { color: #000; text-decoration: none; }

p.site-slogan {
background-image: url(../images/stripe-bg.png);
color: #999;
display: block;
font-family: Arial, sans-serif;
font-size: 85%;
line-height: 1;
margin: 3px 0 0;
padding: 0;
text-align: center;
text-transform: uppercase;
}

p.site-slogan span { background: #fff; display: inline-block; padding: 0 5px; }

/* Header Right ---*/
.ja-header-r { padding: 0; position: absolute; right: 0; top: 40px; width: 500px; }

Muchísimas gracias,

María

Citar
Respondido : 28/09/2011 8:37 am
Jordi Sala
 Jordi Sala
Miembro Admin

Hola Marí­a,

Los cambio en las CSS son correctos (height y width), salvo que vas a tener que aumentar también la altura de ja-header que tendrá que ser superior a 115.
Para que te funcione, tendrás que eliminar los mpl, que entiendo que has añadido, ya que en código original no existe.
Es obvio que tienes que modificar también el tamaño de la imagen logo.png a las dimensiones que indicas.

Respecto a que la imagen no tenga el efecto hover, no me complicaría en modificar el código. Lo más sencillo veras que es editar el logo.png que está partido en dos. Pues tu logotipo ponlo igual en las dos partes, y al hacer pasar por encima el ratón no se mostrará el efecto hover..

Saludos,

ResponderCitar
Respondido : 28/09/2011 9:26 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Marí­a
 Marí­a
Honorable Member

Hola,

ya he hecho lo de duplicar la imagen para que no afecte el hover. Mi logo finalmente tiene como dimensiones 324x228

El css queda así:

/* HEADER
--------------------------------------------------------- */
#ja-header { }

#ja-header .main { height: 115px; padding: 0; }

h1.logo, div.logo-text h1 { font-size: 40px; line-height: 1; }

/* Logo Image ---*/
/*bompl h1.logo { height: 57px; margin-top: 40px; width: 222px; } ---*/
bompl h1.logo { height: 114px; margin-top: 40px; width: 324px; } 

h1.logo a {
	background: url(../images/logo.png) no-repeat left top;
	display: block;
	/*bompl height: 57px; ---*/
	/*bompl width: 222px; ---*/
	height: 114px; 
	width: 324px; 
}

bompl h1.logo a:hover, h1.logo a:focus { background-position: left bottom; } 

/* Logo Text ---*/
div.logo-text { margin-top: 40px; }

div.logo-text h1 { letter-spacing: 2px; margin-left: 2px; }

div.logo-text h1 a { color: #000; text-decoration: none; }

p.site-slogan {
	background-image: url(../images/stripe-bg.png);
	color: #999;
	display: block;
	font-family: Arial, sans-serif;
	font-size: 85%;
	line-height: 1;
	margin: 3px 0 0;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
}

p.site-slogan span { background: #fff; display: inline-block; padding: 0 5px; }

/* Header Right ---*/
.ja-header-r { padding: 0; position: absolute; right: 0; top: 40px; width: 500px; }

Sin embargo, la imagen se corta un poco ¿?

Gracias,

María

ResponderCitar
Respondido : 29/09/2011 10:43 am
Jordi Sala
 Jordi Sala
Miembro Admin

Hola Marí­a,

Los cambio en las CSS son correctos (height y width), salvo que vas a tener que aumentar también la altura de ja-header que tendrá que ser superior a 115.

Este cambio que te indiqué, no lo has realizado, en el código veo:

#ja-header .main { height: 115px; padding: 0; }

tendrás que aumentar el 115px.

Saludos,

ResponderCitar
Respondido : 29/09/2011 3:19 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Marí­a
 Marí­a
Honorable Member

Es cierto, se me había pasado, ahora todo bien.

Una última cosa de la cabecera. El banner de la derecha, me parece que se corresponde con este bloque:

/* Advertisement Modules ---*/
div.moduletable-ads .ja-box-ct { padding: 0; }

div.moduletable-ads .ads-squarebutton img,
div.moduletable-ads .ads-squarepopup img { border: 1px solid #ccc; margin: 3px; }

div.moduletable-ads .ads-squarebutton { padding: 5px; }

div.bannergroup_text div.banneritem { border-bottom: 1px dotted #ccc; padding: 5px 0; }

div.bannergroup_text div.bannerfooter { padding: 5px 0; }

¿Dónde localiza la imagen del banner?
¿Si en vez de un banner local, quisiera ahí embeber un bannder de anuncios Google, como lo embebería?

Muchas gracias,

María

ResponderCitar
Respondido : 29/09/2011 4:37 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Maria,

¿Dónde localiza la imagen del banner?
¿Si en vez de un banner local, quisiera ahí embeber un bannder de anuncios Google, como lo embebería?

Para no mezclar temas por favor abre un hilo nuevo sobre este asunto, gracias.

Saludos

ResponderCitar
Respondido : 29/09/2011 8:41 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Marí­a
 Marí­a
Honorable Member

Cierro el tema porque la respuesta a la pregunta inicial resuelve el problema.

Gracias,

María

ResponderCitar
Respondido : 30/09/2011 10:55 am