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/
