Vai alla pagina precedente Vai alla pagina successiva Stampa questa pagina Torna alla Home Supporto italiano Supporto internazionale    
CAMBIARE IL LOGO

Iniziamo la personalizzazione della nostra nuova board cambiando il logo.

Il tema di default è lo stile Ice degli MG Themes, troveremo quindi nella cartella locale templates\mg_themes\images\ice l'immagine sitelogo_small.png che rappresenta il logo attualmente caricato.

Il modo più semplice di cambiare il logo è quello di crearne uno nuovo in formato .png e di nominarlo sitelogo_small, una volta sovrascritto a quello originale e caricato via FTP avremo il nostro nuovo logo bene in vista! Ricordatevi che il formato png supporta la trasparenza e anche la semitrasparenza (mentre il formato gif supporta solo la trasparenza e il jpg non supporta niente di tutto questo), utile se volete creare un logo con gli angoli arrotondati o con un effetto di ombra; ai fini di questo tutorial ho creato un logo con entrambi gli effetti e l'ho caricato nel sito di test e dopo averlo caricato ecco il risultato...

Per vedere il vostro nuovo logo è sufficiente in questo caso fare un refresh del browser (cioè ricaricare la pagina), anche se spesso dopo aver fatto delle modifiche alla nostra board - ad esempio dopo aver cambiato del codice - è necessario vuotare la cache del sito via FTP.

Refresh in Firefox

Refresh in Internet Explorer

Ma qual è il problema nel logo caricato? Che la grandezza dell'immagine che ho creato non viene più contenuta nell'area superiore.
Se volete evitare questo problema attenetevi alle dimensioni del logo standard, se invece volete inserire un'immagine di dimensioni più grandi (ricordatevi però che un logo grande può essere pacchiano) è necessario mettere mano al codice dell'header (in inglese header = intestazione, si intende quindi la porzione superiore della pagina, che è uguale per tutto il forum). Stesso discorso se volete un logo più piccolo e che le dimensioni dell'area retrostante non sbordino.

Per modificare i file potete usare il semplice blocco notes (se usate windows) oppure un editor più evoluto come Notepad++ che è molto valido ed è anche in italiano.

APRI
templates/mg_themes/overall_header.tpl

TROVA

<td height="150" align="left" valign="middle"><a href="{FULL_SITE_PATH}{U_PORTAL}" title="{L_HOME}"><img src="{FULL_SITE_PATH}{SITELOGO}" alt="{L_HOME}" title="{L_HOME}"/></a></td>

e sostituisci il valore height="150" con l'altezza che desideri impostare.

APRI
templates/mg_themes/style_ice.css

TROVA

#top_logo{
border: 0px solid #FFFFFF;
background: url(images/ice/top_header.png) repeat;
/* background: url(images/ice/top_header_ts.png) repeat; */
/* MG XMas */
/*background: url(images/ice/xmas/xmas_header.png);*/
/* MG XMas */
height: 150px;
}

e anche qui sostituisci il valore height="150" con l'altezza che desideri. Con un semplice refresh dovresti già essere in grado di visualizzare i cambiamenti apportati.

Nota: se usate Notepad++ la combinazioni di tasti Ctrl + F e vi apparirà la finestra dove potete inserire tutto il codice da cercare o una parte significativa di esso.



COME CENTRARE IL LOGO?

APRI
templates/mg_themes/overall_header.tpl

TROVA

<td height="150" align="left" valign="middle"><a href="{FULL_SITE_PATH}{U_PORTAL}" title="{L_HOME}"><img src="{FULL_SITE_PATH}{SITELOGO}" alt="{L_HOME}" title="{L_HOME}"/></a></td>

SOSTITUISCI CON

<td height="84" align="left" valign="middle"><div align="center"><a href="{FULL_SITE_PATH}{U_PORTAL}" title="{L_HOME}"><img src="{FULL_SITE_PATH}{SITELOGO}" alt="{L_HOME}" title="{L_HOME}"/></a></div></td>/a></td>

 

COME CAMBIARE LO SFONDO DIETRO AL LOGO?

L'immagine che sta dietro il logo è templates/mg_themes/images/ice/top_header.png, se la si vuole cambiare è sufficiente sovrascriverla e ricaricarla.
Se volete cambiare degli altri parametri dello sfondo del logo basta modificare ciò che vi serve in templates/mg_themes/style_ice.css

#top_logo{
border: 0px solid #FFFFFF;
background: url(images/ice/top_header.png) repeat;

/* background: url(images/ice/top_header_ts.png) repeat; */
/* MG XMas */
/*background: url(images/ice/xmas/xmas_header.png);*/
/* MG XMas */
height: 150px;
}