Agregar otra imagen a la derecha del header

[Sikander]

Hola! Quisiera agregar otra imagen a la derecha del header aparte del logo, tengo instalado el tema 1BlackOut, por lo cual creo que cambiaria las cosas.
Calculo que deberia editar los archivos overall_header.html y common.css pero realmente no se bien como hacerlo.
Saludos!
PD: La razon de agregar esta 2da imagen es que necesito un link directo a la pagina de la radio http://www.radioretrostation.com.ar que sea visible desde el foro.


URL: http://www.radioretrostation.com.ar/foro
Versión phpBB: phpBB-3.0.10
MODs Instalados: Advertisement Management
Plantilla(s) usada(s): 1BlackOut basada en Prosilver
Servidor: Linux, pago, Dattatec
Actualización desde otra versión: No
Conversión desde otro sistema de foros: No

[disiami]

Abrir: /styles/1BlackOut/template/overall_header.html

Buscar:

Código: Seleccionar todo

<a href="index.php" id="logopedia"></a>

Reemplazar con:

Código: Seleccionar todo

<a href="index.php" id="logopedia"></a> <a href="http://www.radioretrostation.com.ar/" id="radioretrostationweb"></a>

Abrir: /styles/1BlackOut/theme/common.css

Buscar:

Código: Seleccionar todo

#logopedia {
		float:left;
	display:block;
	width:581px;
	height:80px;
	background:url(./images/logo.png) no-repeat;
	margin: -160px 0 0 -4px;

}

Agregar después:

Código: Seleccionar todo

#radioretrostationweb {
		float:right;
	display:block;
	width:581px;
	height:80px;
	background:url(./images/logo.png) no-repeat;
	margin: -160px ;

}

Reemplaza ./images/logo.png por la imagen que necesites.

Desde el panel de control ve a la pestaña ESTILOS » Temas y actualiza la plantilla 1BlackOut
Desde el panel de control ve a la pestaña ESTILOS » Plantillas y actualiza la plantilla 1BlackOut

[Sikander]

Hola disiami!
Gracias por la respuesta pronta, eres un genio!

Estuve casi todo el dia y recien pude usarla hace un rato, hice lo que me escribiste y me aparecieron 2 logos iguales, mira!
Tambien se me borraron los banners del advertisement management, quizas eso sucede a causa de que el 2 logo se va de la pagina.

...

Ahora me avive (son las 5am aqui =P) y modifique la imagen png como me escribiste abajo, tambien le cambie el tamaño en common.css pero me aparecio pegada al margen izquierdo y no centrada, ahora tengo q averiguar si modificando el margin la puedo ubicar justo despues del logo (asi la recorte para que me quede bien ubicada).

[Sikander]

No encontre la forma de poder ubicarlo bien, no se bien que coordenadas usar.
Me podrias dar una mano?

[disiami]

Hay lo tienes, en el código esta las instrucciones para que lo muevas según tu necesidad, como esta actualmente es como ves en la imagen.

Código: Seleccionar todo

#radioretrostationweb {
		float:right;
	display:block;
	width:440px; /* Alinear derecha/izquierda */
	height:180px;
	background:url(./images/escuchar_radio.png) no-repeat;
	margin: -130px ; /* Alinear arriba/abajo */

}

[Sikander]

gracias disiami por la respuesta!

no consigo ubicar bien la imagen, no entiendo bien como utilizar el codigo, por ej. este es mi codigo de la imagen:

Código: Seleccionar todo

#radioretrostationweb {
		float:right;
	display:block;
	width:326px;
	height:163px;
	background:url(./images/escuchar_radio.png) no-repeat;
	margin: -160px;

lo que busco es que visualmente quede asi:

[disiami]

Veo que no estas usando el código que te deje mas arriba, si lo pones en tu hoja de estilo veras como te queda así.

Para dejártelo mas facil

Abrir: /styles/1BlackOut/theme/common.css

Buscar en tu código actual:

Código: Seleccionar todo

#radioretrostationweb {
		float:right;
	display:block;
	width:326px;
	height:163px;
	background:url(./images/escuchar_radio.png) no-repeat;
	margin: -160px;

}

Reemplazar con:

Código: Seleccionar todo

#radioretrostationweb {
		float:right;
	display:block;
	width:440px; /* Alinear derecha/izquierda */
	height:180px;
	background:url(./images/escuchar_radio.png) no-repeat;
	margin: -130px ; /* Alinear arriba/abajo */

}

Desde el panel de control ve a la pestaña ESTILOS » Temas y actualiza la plantilla 1BlackOut

Lo he probado con tu imagenes y queda como quieres, si lo quieres mas arriba, mas abajo, a la derecha o a la izquierda lee el código, te he dejado una comentario entre /* */

Código: Seleccionar todo

#radioretrostationweb {
		float:right;
	display:block;
	width:440px; /* Alinear derecha/izquierda */
	height:180px;
	background:url(./images/escuchar_radio.png) no-repeat;
	margin: -130px ; /* Alinear arriba/abajo */

}

Como te comento arriba lo he probado y quedan las dos imágenes en una posición buena, una imagen de muestra.

[Sikander]

Copie el codigo y me queda bien alineada, pero disculpa que sea tan quisquillozo pero no es donde la quiero exactamente.

No entiendo que debo escribir entre /* */ para poder alinearla a mi gusto.
por ejemplo debo utilizar el commando align o algo asi? como seria?
width:440px; align right 20px/* Alinear derecha/izquierda */ (seguramente no esta bien, pero trato de darte una idea)

Otra cosa que no entiendo es por que escribir
width:440px;
height:180px;
cuando mi imagen tiene este tamaño:
width:326px;
height:163px;