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
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,
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
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,
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
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
Cierro el tema porque la respuesta a la pregunta inicial resuelve el problema.
Gracias,
María