Browse > Home / Phpbb3 / Modifica Template: Menù A Pulsanti

Modifica Template: Menù A Pulsanti

April 18, 2008 · Print This Article

Questo tutorial ha lo scopo di illustrare coem inserire nel forum dei pulsanti con mouseover effect/image.

- Inserire i pulsanti nella pagina html del forum (che non sia phpbb3.0 RC4-RC7 ma versioni precedenti), apri il file overall_header.html che puoi trovare nella directory styles/prosilver/template e cerca la seguente porzione di codice:

Codice:

<head>

In una riga successiva aggiungi :

Codice:
<script type=”text/JavaScript”>
<!–
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(”#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(”?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//–>
</script>

- Se, invece, devi inserire i pulsanti e stai utilizzando una delle seguenti versioni di phpbb3.0 RC4-RC7 , apri il file overall_header.html che trovi nella seguente directory styles/prosilver/template e cerca la seguente porzione di codice:
Codice:
<body id=”phpbb” class=”section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}”>

Dopo la stringa {S_CONTENT_DIRECTION}” inserisci:

Codice:
onLoad=”MM_preloadImages(’/demo/buttons/buttonover.jpg,button.jpg’)”
/demo/buttons/buttonover.jpg è il percorso dell’immagien ceh tu stai utilizzando come pulsante

Se si vogliono caricare più pulsanti ad esempio due, allora al posto della stringa di sopra si deve utilizzare questa seguente:

Codice:
onLoad=”MM_preloadImages(’new buttons/buttonover.jpg,buttonover1.jpg,buttonover2.jpg’)”
- Ancora modifiche sul file overall_header, inserire il codice html seguente nella posizione in cui si voglia visualizzare il menù!!
Codice:
<div align=”center”><a href=”Inserisci Link Destinazione Pulsante” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(’Home’,”,’/demo/buttons/buttonover.jpg’,1)”><img src=”/demo/buttons/button.jpg” alt=”Home” name=”Home” width=”100″ height=”31″ border=”0″></a><a href=”Inserisci Link Destinazione Pulsante” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(’Home1′,”,’/demo/buttons/buttonover.jpg’,1)”><img src=”/demo/buttons/button.jpg” alt=”Home1″ name=”Home1″ width=”100″ height=”31″ border=”0″></a><a href=”Inserisci Link Destinazione Pulsante” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(’Home2′,”,’/demo/buttons/buttonover.jpg’,1)”><img src=”/demo/buttons/button.jpg” alt=”Home2″ name=”Home2″ width=”100″ height=”31″ border=”0″></a><a href=”Inserisci Link Destinazione Pulsante” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(’Home3′,”,’/demo/buttons/buttonover.jpg’,1)”><img src=”/demo/buttons/button.jpg” alt=”Home3″ name=”Home3″ width=”100″ height=”31″ border=”0″></a><a href=”Inserisci Link Destinazione Pulsante” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(’Home4′,”,’/demo/buttons/buttonover.jpg’,1)”><img src=”/demo/buttons/button.jpg” alt=”Home4″ name=”Home4″ width=”100″ height=”31″ border=”0″></a><a href=”Inserisci Link Destinazione Pulsante” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(’Home5′,”,’/demo/buttons/buttonover.jpg’,1)”><img src=”/demo/buttons/button.jpg” alt=”Home5″ name=”Home5″ width=”100″ height=”31″ border=”0″></a><a href=”Inserisci Link Destinazione Pulsante” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(’Home6′,”,’/demo/buttons/buttonover.jpg’,1)”><img src=”/demo/buttons/button.jpg” alt=”Home6″ name=”Home6″ width=”100″ height=”31″ border=”0″></a></div>
Guarda il codice dove trovi scritto Inserisci Link Destinazione Pulsante devi inserire il link della pagina a cui il pulsante fa riferimento. I pulsanti inoltre sono nominati “home,home1,home2,home3 e via dicendo… ovviamente è possibile personalizzarli a proprio piacimento. Le misure dei pulsanti sono di 100px in larghezza e 31px in altezza, ovviamente anche questi modificabili a prorpio piacimento.
- A questo punto è necessario entrare nel pannello di amministrazione del forum e aggiornare prima il template e poi svuotare la cache così:

Pannello di controllo amministrazione > Stili > Temi > Aggiorna (in riferimento al template che usi )
Pannello di controllo amministrazione > Stili > Template > Aggiorna( in riferimento al template che usi )
Pannello di controllo amministrazione > svuota la cache
Andare nel link del forum a cui è stata apportata la modifica e aggiornare il browser.

Written by admin · Filed Under Phpbb3 
Tagged: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Comments

Got something to say?