Header rotativoTema Solucionado

[Duque de Illumbe]

Hola a todos.

¿sería posible hacer que el fondo del header sea rotativo?. No me vale con un gif animado, aunque es una posibilidad, sino que me gustaría que la imagen realmente cambiase cada x tiempo o al acceder a diferentes foros -prefiero que simplemente rote-.


URL: http://www.ejercitos.org
Versión phpBB: phpBB3 (3.0.6)
MODs Instalados: mChat, Categorize stickies, Menu Button
Plantilla(s) usada(s): Prosilver SE
Servidor: Linux, pago
Actualización desde otra versión:
Conversión desde otro sistema de foros:

[ahh72]

holas, puedes buscar ese tema en los ultimos temas de estos dias pues hay otra persona que desea hacer lo mismo y me pase buscando mods que hagan eso, no creo que demores en encontrar lo que busques

saludos

[xoom]

Veamos, entiendo que lo que quieres es que a navegador parado, la cabecera vaya cambiando el fondo cada x segundos o que el fondo se cambie al cambiar de página en el foro.

[Duque de Illumbe]

Cualquiera de las dos posibilidades me parece interesante, pero mucho más la segunda.

Estaría muy bien que la imagen del header fuese diferente al cambiar de hilo.

Ya que mi foro es de defensa, por ejemplo:

- Mostrar una imagen con un carro de combate en el hilo de sistemas terrestres.
- Mostrar un portaaviones en el de sistemas navales....

Supongo que me coges.

Lo que sucede es que como creo que es más fácil hacer que simplemente rote, con eso me conformo, soy así de bueno

[xoom]

Si rotan imágenes, como te comenté el consumo de recursos es mayor, ya que la imagen no entra en caché, con la opción de cambiar de imagen al entrar en una página u otra, las imágenes quedan guardadas en caché y por lo tanto el consumo y la carga de la página es practicamente igual a tener una única imagen.

Voy a hacer unos ajustes para que sea el fondo y no el logo el que cambie, cuando tenga algo te explico el proceso.

[xoom]

Ya lo he adaptado para que se modifique el fondo y no el logo. El comportamiento es el mismo, el fondo del header es como el original, por lo tanto quedan las imágenes guardadas en el caché y el consumo viene a ser el mismo que con una única imagen.

Como ya advertí, no es posible o al menos yo no lo he conseguido, que la imagen pueda cambiar dependiendo del foro, sólo con páginas.

Los archivos que hay que modificar son colour.css y overal_header.html

Abre colour.css

Busca

Código: Seleccionar todo

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

En este bloque solo hay que cambiar bg_header.gif por el nombre de una de las imágenes de fondo.

A continuación, añadir tantos bloques como imágenes queramos cambiar, nombrando cada uno como headerbar1, headerbar2 ... y cambiando los nombres de las imágenes por imagen1.gif, imagen2.gif ...

Código: Seleccionar todo

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

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

Abrir overall_header.html

Buscar:

Código: Seleccionar todo

        		<div class="headerbar">
        			<div class="inner"><span class="corners-top"><span></span></span>
        
        			<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 class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
        			</div>

Cambiar por:

Código: Seleccionar todo

      		<!-- IF SCRIPT_NAME == "viewtopic" --><div class="headerbar">
        			<div class="inner"><span class="corners-top"><span></span></span>
					<div id="site-description">
        				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
        				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
        			</div>
					
					<!-- ELSEIF SCRIPT_NAME == "viewforum" --><div class="headerbar1">
        			<div class="inner"><span class="corners-top"><span></span></span>
					<div id="site-description">
        				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
        				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
        			</div>
					
					<!-- ELSE --><div class="headerbar2">
        			<div class="inner"><span class="corners-top"><span></span></span>
					<div id="site-description">
        				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
        				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
        			</div><!-- ENDIF -->

Este ejemplo cambia 3 imágenes según el lugar del foro donde nos encontremos, viendo un tema (<!-- IF SCRIPT_NAME == "viewtopic" -->), viendo un foro (<!-- ELSEIF SCRIPT_NAME == "viewforum" -->) o en otro lugar distinto a los anteriores (<!-- ELSE -->)

Para añadir más imágenes, siempre deben añadirse los bloques antes del último condicional (<!-- ELSE -->). Si por ejemplo, queremos cargar una imagen cuando se abra la lista de usuarios del foro, el bloque debe comenzar con <!-- ELSEIF SCRIPT_NAME == "memberlist" --> seguido de <div class="headerbar3">. Aquí hemos añadido el siguiente número de imagen, en nuestro ejemplo el 3 y logicamente, también habría que añadir en colour.css el .headerbar correspondiente que sería .headerbar3

Tienes un ejemplo en mi foro de pruebas de como queda una imagen para el index, otra para viewforun y otra para viewtopic http://www.muchografico.net/foro/

[Duque de Illumbe]

Muchas gracias.

Lamentablemente, no funciona bien y creo que puede ser por el Buttons Menu, pero la idea es buena. Trataré de trabajar en ella.

Las otras dos posibilidades que se me ocurren son la que he visto por ahí con el archivo "rotate.php" que probé ayer sin éxito y que por tanto, descarto y a ver si voy desencaminado con la mía:

Si cojo el Prosilver SE y lo renombro varias veces, podría tenerlo instalado cuatro o cinco veces, con diferentes imágenes de header cada uno y, aprovechando que se puede poner un estilo diferente a cada categoría, tener así cabeceras diferentes para cada sección.... ¿Lo veis viable?.

[Duque de Illumbe]

Comprobado, funciona.

Ya he creado el estilo "Prosilver_Tierra" que ahora, decoraré y luego iré a por el "Prosilver_aire".

Saludos.

[Alorse]

Tal vez esto ayude

http://www.phpbb-es.com/foro/anadir-una ... 21738.html

[Makoto]

bueno yo hice mi header rotativo con ayuda de otras plantillas, es decir tome un archivo de un style que hacia que
el fondo de la pagina cambie y lo puse en el header

el adjunto ponerlo en /styles/tu_plantila/theme/images/

en subsilver2
Abrir

Código: Seleccionar todo

/styles/tu_plantila/theme/stylesheet.css

buscar

Código: Seleccionar todo

#logodesc {
	background-color: #C1CAD2;
	background-image: url('./images/background.gif');
	background-repeat: repeat-x;
	background-position: center bottom;
	padding: 0 25px 15px 25px;
}

Reemplazar por

Código: Seleccionar todo

#logodesc {
	background-color: #C1CAD2;
	background-image: ('./images/header/normal/random.php');
	background-repeat: repeat-x;
	background-position: center bottom;
	padding: 0 25px 15px 25px;
}

Abrir
overral_header.html

Buscar

Código: Seleccionar todo

<div id="logodesc">
		<table width="100%" cellspacing="0">
		<tr>
			<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
			<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
		</tr>
		</table>
</div>

Reemplazar por

Código: Seleccionar todo

<div id="logodesc">
</div>

*lo elimino por que no quiero q el logo aparesca
*<div id="logodesc"> puede cambiar de nombre pero siempre ira antes de

Código: Seleccionar todo

<table width="100%" cellspacing="0">
		<tr>
			<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
			<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
		</tr>
</table>