Opencommercio - E-commerce in Italia

Paragrafo 4: Gli autoblocks

Se si vuole piazzare un blocco in una posizione diversa da sinistra, destra, centro oppure si vuole avere un aspetto o una dimensione differente del blocco, bisogna creare un template specifico per quel blocco, che deve essere chiamato, per ogni blocco diverso, rispettivamente area1block.html, area2block.html, ecc. ( Da notare: si possono chiamare questi templates anche in modo diverso, ma si dovrebbero poi effettuare notevoli modifiche in vari files, come nel theme.cfg, e il nome del template non viene comunque visualizzato in nessuna parte del tema, perciò si consiglia di lasciare i nomi di default area1block.html, ecc..). Si possono creare con questa versione gratuita di AutoTheme Lite fino a 9 area block.

Step 1: Creare un template generico di Areablock:

Per conoscere come funziona un template di blocco, verranno create 3 diverse aree collocate nella colonna centrale del tema, proprio tra la barra di navigazione dei top link e i blocchi centrali. Il modo migliore per creare questi templates è copiare il codice dal file leftblock.html e poi salvarlo nella stessa cartella dove si trova theme.html con i nomi area1block.html, area2block.html, e area3block.html. Sarà più semplice poi modificare e personalizzare questi files per adeguarli alle proprie esigenze. Ricordarsi che tutti i files di template grafici, con la sola eccezione di theme.html, non hanno i tag iniziali e finali , e . Ecco il codice generico di un blocco:

<TABLE WIDTH="165" BORDER="0" CELLPADDING="0" CELLSPACING="3" BGCOLOR="#FFC22C">
<TR>
<TD CLASS="title">

</TD>
</TR>
</TABLE>
<TABLE WIDTH="165" BORDER="0" CELLPADDING="1" CELLSPACING="0" BGCOLOR="#FF9900">
<TR>
<TD><TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="4" BGCOLOR="#FFFFFF">
<TR>
<TD>

</TD>
</TR>
</TABLE></TD>
</TR>
</TABLE>
<TABLE WIDTH="165" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD HEIGHT="7"> <IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="1" HEIGHT="7"></TD>
</TR>
</TABLE>

Step 2: Inserire gli areablock nel template generale del tema theme.html

I tre autoblock generici verranno dapprima inseriti nel tema (nel file theme.html) e solo dopo la loro anteprima verranno modificati e configurati nel contenuto. Aprite perciò il template generale del tema theme.html, trovate la riga con i comandi per i blocchi di sinistra left blocks ecercate dove inserire i comandi per gli autoblocks, inseriti così: . Scusate l'uso improprio e alternato dei tag HTML un pò in maiuscolo e un pò in minuscolo: i tag HTML dovrebbero sempre essere scritti in caratteri minuscoli, secondo le raccomandazioni W3C... è solo per gli scopi didattici della presente guida :-)

Salvate poi.
un file bloccomio.html col codice HTML che si vuole, che sia immagine, testo, link: attenzione a non debordare oltre ai 150 pixel dei blocchi, altrimenti si sfasa il tema, es. :

</TR>

</TABLE>

</TD>

<table border="0" cellpadding="0" cellspacing="0" width="98%">

<tr HEIGHT="3"></tr><tr>

<td valign="top" width="66%"></td>

<td> </td>

<td valign="top" width="33%"></td>

<td> </td>

</tr>

</table>

<table border="0" cellpadding="0" cellspacing="0" width="98%">

<tr>

<td valign="top" width="100%">

</td>

<td> </td>

</tr>

</table>

<TR>

Abbiamo allora aggiunto due nuove tabelle HTML con misure relative e larghezza width=98% (98% per avere quel 2% di distanza dai blocchi di sinistra e di destra contigui...), ma prima dei blocchi centrali.

a. la prima tabella comprende due celle: una per l'area1block che copre il 66% della riga, la seconda per area2block che copre il restante 33% della tabella. Prima di esse, una piccola riga di altezza Height=3 pixel per separare i nuovi blocchi dalla fascia sovrastante che contiene la barra di navigazione dei top link.

b. la seconda tabella è interamente coperta al 100% da area3block.

Step 3: Creare tre nuovi blocchi nella cartella /includes/boxes

Come visto sopra.... oppure usare blocchi già presenti nel sistema e in tal caso non crearne nuovi.

Step 4: Impostare i tre nuovi blocchi nel file theme.cfg del tema

Come visto sopra....specificando la posizione giusta.

Step 5: Personalizzare i template di areablock

Passiamo alla personalizzazione dei tre templates di areablock.

a. Iniziamo con area1block.html: apritelo col vostro editor web preferito, e modifcatelo come sotto (meglio: cancellatene il contenuto e poi un Copia&Incolla del codice sotto... è più veloce) e vediamo cosa è stato cambiato:

un file bloccomio.html col codice HTML che si vuole, che sia immagine, testo, link: attenzione a non debordare oltre ai 150 pixel dei blocchi, altrimenti si sfasa il tema, es. :

<TR>

<TR>

</TD>

</TR>

</TABLE></TD>

</TR>

</TABLE>

<TR>

<TD HEIGHT="7"> <IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="1" HEIGHT="7"></TD>

</TR>

</TABLE>

L'area1block originale conteneva 3 tabelle: una per il titolo, una per il contenuto e la terza era spaziatrice. In questo nuovo template è stata eliminata la tabella per il titolo del blocco per non visualizzare l'intestazione gialla col nome del titolo, Blocco Immagine, appena impostato nella creazione del blocco nel Pannello di Amministrazione. Salvate.

Puntate il browser all'anteprima del tema e controlliamo la modifica effettuata (vedere in anteprima ogni singola modifica effettuata, ricordate il consiglio?), oppure aggiornate la pagina se avete ancora il browser aperto.

http://127.0.0.1/mdpro/index.php?theme=ATTest , l'URL di anteprima del tema.

b. Passiamo a area2block.html : questo blocco lo teniamo come quelli originali di destra o di sinistra, perciò lasciamo il codice HTML pressocchè invariato.

un file bloccomio.html col codice HTML che si vuole, che sia immagine, testo, link: attenzione a non debordare oltre ai 150 pixel dei blocchi, altrimenti si sfasa il tema, es. :

<TR>

<TR>

</TD>

</TR>

</TABLE></TD>

</TR>

</TABLE>

<TR>

<TD HEIGHT="7"> <IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="1" HEIGHT="7"></TD>

</TR>

</TABLE>

E' il template principale del tema theme.html, che ha fissato la sua larghezza al 33% dello spazio centrale...perciò, nel blocco stesso, non dobbiamo modificare niente, come anche per il template HTML;

c. area3block.html : anche per questo file lasciamo il codice base dei blocchi, poi sarà il template principale ad espanderlo su tutto lo spazio centrale della pagina: unica modifica: il titolo del blocco è stato centrato:

un file bloccomio.html col codice HTML che si vuole, che sia immagine, testo, link: attenzione a non debordare oltre ai 150 pixel dei blocchi, altrimenti si sfasa il tema, es. :

<TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="3" BGCOLOR="#CCCCCC">
<TR>
<TD CLASS="title">
<center></center>
</TD>
</TR>
</TABLE>
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="1" CELLSPACING="0" BGCOLOR="#FF9900">
<TR>
<TD><TABLE WIDTH="100%" HEIGHT="60" BORDER="0" CELLPADDING="0" CELLSPACING="4" BGCOLOR="#FFFFFF">
<TR>
<TD>

</TD>
</TR>
</TABLE></TD>
</TR>
</TABLE>
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD HEIGHT="7"> <IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="1" HEIGHT="7"></TD>
</TR>
</TABLE>

Step 6: Inserimento dei contenuti nei blocchi

Aprite in includes/boxes i tre nuovi blocchi di tipo text o di tipo HTML come descritto più sopra ed inserite l'HTML o il testo desisderato e li vedrete nel vostro tema.

************************************************************************************************

Segue una descrizione più dettagliata per principianti dell'uso dei comandi AutoTheme, di blocchi e moduli e loro templates.

Indietro Torna all'indice