Página 1 de 2
Cambiar header por una imagen
Publicado: 27 Abr 2011, 15:02
por Qayene
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.

Re: Cambiar header por una imagen
Publicado: 27 Abr 2011, 19:08
por DaVidU
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

Re: Cambiar header por una imagen
Publicado: 30 Abr 2011, 20:09
por Qayene
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
<!-- 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

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!

Re: Cambiar header por una imagen
Publicado: 01 May 2011, 12:34
por DaVidU
lograste solucionarlo verdad?
yo lo veo correcto ahora, si persiste el problema hazme una captura de pantalla vea el error

Re: Cambiar header por una imagen
Publicado: 01 May 2011, 14:09
por Qayene
Hola, mira, esto es como lo veo yo (lo he quitado hasta que pueda solucionarlo!)
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.
Re: Cambiar header por una imagen
Publicado: 01 May 2011, 15:04
por Makoto
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

Re: Cambiar header por una imagen
Publicado: 01 May 2011, 15:15
por Qayene
¿Entonces...?
Re: Cambiar header por una imagen
Publicado: 01 May 2011, 15:27
por Makoto
debes modificar el overall_header.html en
styles/prosilver_se/templates/overall_header.html
y
styles/prosilver_se/theme/colours.css
Re: Cambiar header por una imagen
Publicado: 01 May 2011, 23:45
por DaVidU
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

Re: Cambiar header por una imagen
Publicado: 02 May 2011, 21:20
por dhanict
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 ?
Re: Cambiar header por una imagen
Publicado: 14 May 2011, 21:31
por Qayene
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.
Re: Cambiar header por una imagen
Publicado: 14 May 2011, 22:30
por dhanict
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
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
Re: Cambiar header por una imagen
Publicado: 14 May 2011, 22:51
por Qayene
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

Re: Cambiar header por una imagen
Publicado: 14 May 2011, 23:29
por dhanict
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:
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

Re: Cambiar header por una imagen
Publicado: 14 May 2011, 23:48
por Qayene
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.