Cambiar header por una imagen

Qayene · #1

URL: http://l2dragonlanceforum.net/ (actualmente en desarrollo así que veréis poco

)
Plantilla(s) usuada(s): prosilver Special Edition
MODs instalados: -
Versión de phpBB: 3.0.8
Servidor: De pago.
Si es una actualización desde otra versión: -
Si es una conversión desde otro tipo de Foro: -
Especificar lo mejor posible el problema, copiando y pegando el error de tu sitio
Realizando una búsqueda antes de preguntar en cualquiera de los foros.

Entiendo que hay muchos temas con ésta pregunta pero la mayoria hablan sobre cambiar el logo o cosas así, lo que necesito es cambiar todo el header por una imagen -vamos, un banner-, no quiero ni logos ni el Searh ni nada, sólo una simple foto, que quede centradita, vamos, que quede como en esta página, http://www.l2jserver.com/forum/ , las medidas ya las pondría yo, también si se puede hacer que quede ajustado para todos, es decir, que los vean todos los usuarios igual!

He intendado cambiado el colour.css y aún así no se van los colores grises de atras, y para quitar el logo y el motor de busqueda ni idea. Espero que me podáis ayudar.

Un saludo y gracias.

DaVidU · #2

primero de todo quitaremos la búsqueda del header y la pondremos con el resto de enlaces, para ello:

abre tu archivo: styles/tu estilo/template/overall_header.html

busca esto:

Código: Seleccionar todo

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

lo reemplazas por esto otro:

Código: Seleccionar todo

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
		<!-- ENDIF -->

ahora lo movemos de sitio:

buscamos esto:

Código: Seleccionar todo

<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

y añadimos esta línea en una nueva línea justo después:

Código: Seleccionar todo

<li class="icon-search"><a href="{U_SEARCH}" title="{L_FAQ_EXPLAIN}">{L_SEARCH}</a></li>

ahora vamos a cambiar el header

buscamos esto:

Código: Seleccionar todo

<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>

y lo reemplazamos por esto otro:

Código: Seleccionar todo

<a href="{U_INDEX}" title="{L_INDEX}" id="logo"><img src="images/spacer.gif" width="870" height="136" alt="" /></a>

ahora abrimos el archivo: styles/tu estilo/theme/colours.css

buscamos esto:

Código: Seleccionar todo

.headerbar {
	background-color: #7C8891;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}

lo reemplazamos por esto otro:

Código: Seleccionar todo

.headerbar {
	background-color: #FFFFFF;
	background-image: url("{T_THEME_PATH}/images/site_logo.png");
	color: #FFFFFF;
}

La imagen "site_logo.png" debes moverla de su directorio a "styles/tu estilo/theme/images", las medidas son: 900x145

una vez hecho esto, desde el acp, debes actualizar el tema, limpiar el cache del foro y refrescar el navegador para ver los cambios, espero sea esto lo que buscas

Qayene · #3

DaVidU escribió:primero de todo quitaremos la búsqueda del header y la pondremos con el resto de enlaces, para ello:

abre tu archivo: styles/tu estilo/template/overall_header.html

busca esto:
Código: Seleccionar todo
		
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="{SEARCH_WORDS}{L_SEARCH_MINI}" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		
lo reemplazas por esto otro:
Código: Seleccionar todo
		
		
ahora lo movemos de sitio:

buscamos esto:
Código: Seleccionar todo
<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
y añadimos esta línea en una nueva línea justo después:
Código: Seleccionar todo
<li class="icon-search"><a href="{U_SEARCH}" title="{L_FAQ_EXPLAIN}">{L_SEARCH}</a></li>
ahora vamos a cambiar el header
buscamos esto:
Código: Seleccionar todo
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
y lo reemplazamos por esto otro:
Código: Seleccionar todo
<a href="{U_INDEX}" title="{L_INDEX}" id="logo"><img src="images/spacer.gif" width="870" height="136" alt="" /></a>
ahora abrimos el archivo: styles/tu estilo/theme/colours.css

buscamos esto:
Código: Seleccionar todo
.headerbar {
	background-color: #7C8891;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}
lo reemplazamos por esto otro:
Código: Seleccionar todo
.headerbar {
	background-color: #FFFFFF;
	background-image: url("{T_THEME_PATH}/images/site_logo.png");
	color: #FFFFFF;
}
La imagen "site_logo.png" debes moverla de su directorio a "styles/tu estilo/theme/images", las medidas son: 900x145

una vez hecho esto, desde el acp, debes actualizar el tema, limpiar el cache del foro y refrescar el navegador para ver los cambios, espero sea esto lo que buscas

Hola,

Gracias por tu respuesta, he hecho todo lo que has dicho y todo bien, el Search se cambía al lado de FAQ y Members (ahí está bien) el único problema es que sale el fondo con imagen doble, esto es, el foro intenta cubrir todo el espacio con la imagen y al no cubrirlo entero con una usa la misma dos veces, es decir, ahora mismo en el header veo una imagen y la otra pegando, no sé si me explico. A ver si me podéis ayudar porque madre mía cuanto trabajo para cambiar un banner!

DaVidU · #4

lograste solucionarlo verdad?

yo lo veo correcto ahora, si persiste el problema hazme una captura de pantalla vea el error

Qayene · #5

Hola, mira, esto es como lo veo yo (lo he quitado hasta que pueda solucionarlo!)

Imagen

P.D: Hago otra pregunta y así no abro otro thread ¿hay alguna manera de descargarse todos los archivos del Advanced BBCode box ya "tocados" y que directamente sea copy+paste para instalarlo? sin tener que hacer paso a paso todo.

Saludos.

Makoto · #6

bueno no se en que estilo usas el tutorial por DavidU

pues el estilo que usas actualmente el prosilver_se y dicho estilo no tiene un cuadro de busqueda como muestras dichas imagenes

Qayene · #7

¿Entonces...?

Makoto · #8

debes modificar el overall_header.html en
styles/prosilver_se/templates/overall_header.html
y
styles/prosilver_se/theme/colours.css

DaVidU · #9

para ayudarte necesito ver como queda en "directo" para ver la imágen, su tamaño y el css del estilo para ver que falla

dhanict · #10

A mí tambien me pasa lo mismo, intenté poner una imagen en el header, solo imagen, lo quiero como tú, sin searh y sin logo, solo imagen. Sin embargo se me pone la imagen y al lado la misma y entre cortada. ¿Que medidas debe ser o que hay que hacerle ?

Qayene · #11

Hola de nuevo, parece que he logrado colocar el header...ahora bien, si quito en la imagen el Site name y el Site description es como si las medidas del header "encogieran", si por ejemplo pongo un punto en site name y site description el tamaño de la imagen aumenta hasta el tamaño original del header, es definitiva, si pongo algo en esos campos desde el ACP la imagen se ve como se debería ver, si los quito, la imagen se corta por la mitad y solo se ve la parte superior...no se si me explico, ¿alguien sabe como solucionar esto? no necesito poner ninguna informacion más de la que viene en la imagen del header.

Saludos.

dhanict · #12

Te pasaba lo mismo que a mí, la imagen cambia según la resolución de pantalla, y encontré la solución:

Añade este código a common.css

Código: Seleccionar todo

#wrap { width: 960px; margin: 0 auto; }

Colócalo al principio de este bloque, justo despues de Main block y los puntos suspensivos

Código: Seleccionar todo

/* Main blocks
---------------------------------------- */
#wrap {
   min-width:760px;
   margin-left:13%;
   margin-right:13%;
}
/*#wrap {
   -moz-border-radius:20px;
   -webkit-border-radius:20px;
   border:0px;
   padding:20px;
   margin:20px;
   margin-left:75px;
   margin-right:75px;
   min-width:650px;
   background:transparent url('{T_THEME_PATH}/images/white_30.png');
}*/

Así ya te debería funcionar, ya no tienes que tener problema con la imagen, en todas las resoluciones se verá exactamente igual

Qayene · #13

Hola, gracias por tu respuesta, el problema es que ahora que estoy pensando si borro el name de mi foro, para que no salga en el banner también lo borro "al navegar" por el foro, lo tipico que cuando vas navegando te sale arriba en el navegador, NAME DEL FORO - Off topic por ejemplo, eso es lo que busco, de verdad que no me puedo creer que de tantos problemas el cambiar un puto banner...es increible

dhanict · #14

Pues tengo que decirte que es posible que salga el nombre de tu foro en la pestañita esa xD, incluso pudiendo quitar el nombbre del foro del baner de la cabecera. Para conseguirlo haz esto:

Tienes que abrir el archivo overall_header.html de prosilver o subsilver (styles \ {nombre del estilo} \ template). Si no tienes esos stilos, mira ver el que tienes y mira ver si está basado en uno u otro (todos los estilos se basan en prosilver y subsilver).

Localiza lo siguiente:

Código: Seleccionar todo

<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
</div>

ELIMINA:

Código: Seleccionar todo

<h1>{SITENAME}</h1>

TE vas al panel de ACP del foro, actualizas la plantilla, y limpias la caché.

Ahora coges, y vas al ACP de nuevo, ahí te vas a GENERAL>CONFIGURACION DEL SITIO:

- En nombre del sitio pon el que quieras, en este caso será el nombre de tu foro. YA NO TE SALDRÄ EN EL BANNER DE LA CABECERA; sólamente te saldrá en la pestaña del navegador

Qayene · #15

Gracias de nuevo por tu respuesta, he hecho eso y como comentas, se ha ido el nombre del sitio en el banner, pero como puedes apreciar "el banner se ha cortado un poco", sabes a que me refiero, ¿no? ¿quizas hay que cambiar medidas en algun sitio? =/

EDITO: He cambiado unas medidas y de paso he quitado la descripción del sitio y queda perfecto, ¿tú así lo ves bien no?

Gracias de nuevo a todos por la ayuda.

phpBB España Oficial

Cambiar header por una imagen Tema Solucionado

Cambiar header por una imagen

Re: Cambiar header por una imagen

Re: Cambiar header por una imagen

Re: Cambiar header por una imagen

Re: Cambiar header por una imagen

Re: Cambiar header por una imagen

Re: Cambiar header por una imagen

Re: Cambiar header por una imagen

Re: Cambiar header por una imagen

Re: Cambiar header por una imagen

Re: Cambiar header por una imagen

Re: Cambiar header por una imagen

Re: Cambiar header por una imagen

Re: Cambiar header por una imagen

Re: Cambiar header por una imagen