Benvenuto in phpBB.it Lo Staff ti augura Buon Lavoro!
Login
     
Faq e Guide Faq e Guide per Stili Header - modifiche varie
Header - modifiche varie PDF Stampa
Autore: Nico
Note: Questo articolo spiega alcune tra le modifiche più richieste per l'header del forum phpBB3. Si ricorda di fare il backup di tutti i file che modificherai, onde evitare spiacevoli conseguense. Dopo ogni modifica devi fare un refresh dello stile andando in PCA => Stili => (Template & Temi) => prosilver e cliccando AGGIORNA.
  1. Aggiungere immagine come sfondo nell'header
  2. Togliere logo
  3. Togliere nome sito e descrizione
  4. Eliminare il box di ricerca
  5. Aggiungere immagine random
  6. Aggiungere immagine
  7. Sostituire immagine logo con animazione in flash

Aggiungere immagine come sfondo nell'header

Carica l'immagine nella cartella styles/prosilver/theme/images/

Apri il file styles/prosilver/theme/common

Cerca:

.headerbar {
background: #ebebeb none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;

Dopo aggiungi:

height: 100px ;
Cambia l'altezza (100px) in base a quella dell'immagine

Apri styles/prosilver/theme/colours.css

Cerca:

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

Cambia (bg_header.gif) con il nome della tua immagine

Apri styles/prosilver/template/overall_header.html

Cerca:

<div id="site-description">

Prima aggiungi:

<div style="height: 90px ;">
L'altezza deve essere 10px meno dell'altezza dell'immagine!

Cerca:

<a href="{U_SEARCH}" mce_href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->

Dopo aggiungi:

</div>

La modifica e terminata e se hai fatto tutto correttamente vedrai il lavoro ultimato perfettamente.
NB: ricorda che dopo ogni modifica devi fare un refresh dello stile andando in PCA => Stili => (Template & Temi) => prosilver e cliccando AGGIORNA.

Togliere logo

Apri styles/prosilver/template/overall_header.html

Trova ed elimina:

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

La modifica e terminata e se hai fatto tutto correttamente vedrai il lavoro ultimato perfettamente.
NB: ricorda che dopo ogni modifica devi fare un refresh dello stile andando in PCA => Stili => (Template & Temi) => prosilver e cliccando AGGIORNA.

Togliere nome sito e descrizione

Apri styles/prosilver/template/overall_header.html

Trova ed elimina:

<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>

La modifica e terminata e se hai fatto tutto correttamente vedrai il lavoro ultimato perfettamente.
NB: ricorda che dopo ogni modifica devi fare un refresh dello stile andando in PCA => Stili => (Template & Temi) => prosilver e cliccando AGGIORNA.

Eliminare il box di ricerca

Apri styles/prosilver/template/overall_header.html

Trova ed elimina:

<!-- 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}" mce_href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->

La modifica e terminata e se hai fatto tutto correttamente vedrai il lavoro ultimato perfettamente.
NB: ricorda che dopo ogni modifica devi fare un refresh dello stile andando in PCA => Stili => (Template & Temi) => prosilver e cliccando AGGIORNA.

Aggiungere immagine random

Questo tutorial prende spunto dal seguente articolo di Pentapenguin. Knowledge Base - Adding a Random Header Image. Mostrerà un'immagine di sfondo a random nell'header, invece che un logo come nell'articolo menzionato.

Crea le tue immagini e nominale seguendo questa procedura header_random_1.ESTENSIONE

  • Inizia da 1 e aumenta. Non saltare nessun numero.
  • Sostituisci ESTENSIONE con quella usata per le tue immagini (gif, png, jpg, ecc.) L'estensione DEVE essere la stessa per tutte le immagini.

Carica le immagini nella cartella styles/prosilver/theme/images/

Apri includes/functions.php

Cerca:

'T_STYLESHEET_NAME' => $user->theme['theme_name'],

Dopo aggiungi:

'RANDOM_HEADER' => mt_rand(1, NUMERO-DELLE-IMMAGINI),
Modifica NUMERO-DELLE-IMMAGINI con il mumero massimo di immagini create.

Apri style.php

Cerca:

'{S_USER_LANG}' => $user['user_lang']

Sostituisci con:

'{S_USER_LANG}' => $user['user_lang'],
'{RANDOM_HEADER}' => mt_rand(1, NUMERO-DELLE-IMMAGINI)

Come prima, modifica NUMERO-DELLE-IMMAGINI con il mumero massimo di immagini create.

Apri styles/prosilver/theme/colours.css

Cerca:

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

Sostituisci con:

.headerbar {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/header_random_{RANDOM_HEADER}.ESTENSIONE");
color: #FFFFFF;
}
Modifica ESTENSIONE con quella delle tue immagini.
La modifica e terminata e se hai fatto tutto correttamente vedrai il lavoro ultimato perfettamente.
NB: ricorda che dopo ogni modifica devi fare un refresh dello stile andando in PCA => Stili => (Template & Temi) => prosilver e cliccando AGGIORNA.

Aggiungere immagine

Aggiunge un'immagine cliccabile, affiancata al logo (non di backgruond) e che sostituisca il titolo.

Creare la nuova immagine e nominarla es. tipo banner_sito.gif o title_sito.gif (l'estensione può essere anche diversa, tipo png ma eviterei le jpg che non vi permettono trasparenze)

L'immagine va necessariamente aggiunta qui root\styles\VOSTRO_STILE\theme\images, in modo da poter essere richiamata *dinamicamente* ed essere visibile su tutte le pagine, header, compresa quella di accesso al PCA.

Apri il file styles/VOSTRO_STILE/template/overall_header.htm

Cerca:

<div id="site-description">
<a href="{U_INDEX}" mce_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" mce_href="#start_here">{L_SKIP}</a></p>
</div>

Sostisci con:

<div id="site-description">
<table width="100%" border="0"><tr><td>
<a href="{U_INDEX}" mce_href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a> </td>
<td>
<a href="{U_INDEX}" mce_href="{U_INDEX}" title="{L_INDEX}"><img src="{T_THEME_PATH}/images/banner.gif" mce_src="{T_THEME_PATH}/images/banner.gif" width="550" height="85" alt="Banner Forum" /></a>
<br />{SITE_DESCRIPTION}
<p style="display: none;"><a href="#start_here" mce_href="#start_here">{L_SKIP}</a></p> </td></tr> </table>
</div>

Dove:

  • banner.gif dovrà essere il nome ed estensione della tua reale immagine aggiunta prima
  • width e height le reali misure della tua immagine
  • alt testo alternativo all'immagine

Browsers testati: FireFox, IE6 e IE7, Opera e Safari

Note:

Se non vuoi il link eliminalo, togliendo:

<a href="{U_INDEX}" mce_href="{U_INDEX}" title="{L_INDEX}"> e </a>

Se vuoi cambiare il collegamento modifica gli attributi inserendo l'url che vuoi linkare, sostituendo:

{U_INDEX} e {L_INDEX}

Se vuoi eliminare la descrizione, elimina:

<br />{SITE_DESCRIPTION}

La modifica e terminata e se hai fatto tutto correttamente vedrai il lavoro ultimato perfettamente.
NB: ricorda che dopo ogni modifica devi fare un refresh dello stile andando in PCA => Stili => (Template & Temi) => prosilver e cliccando AGGIORNA.

Sostituire immagine logo con animazione in flash

Apri il file styles/miostile/template/overall_header.html

Cerca:

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

Sostisci con:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="764" height="93">
<param name="movie" value="http://www.percorso.swf">
<param name="quality" value="high">
<embed src="http://www.percorso.swf" mce_src="http://www.percorso.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="764" height="93"></embed></object>
La modifica e terminata e se hai fatto tutto correttamente vedrai il lavoro ultimato perfettamente.
NB: ricorda che dopo ogni modifica devi fare un refresh dello stile andando in PCA => Stili => (Template & Temi) => prosilver e cliccando AGGIORNA.
 
phpBB.it Italian Communities