In questa guida verrà spiegato come creare un container per forum, come
questo. Qui di seguito verranno postate due versioni: una con semplici colori mentre l'altra con immagini.
Versione semplice
Per la prima accediamo al pannello amministrativo (Amministrazione) -> Gestione codici HTML e nel box "Codice html che verrà visualizzato in ogni pagina in cima al forum" incolliamo il seguente codice:
HTML
HTML
<table align="center" width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#669900" width="5%"></td>
<td bgcolor="#FFFFFF" width="90%" align="center">
e nel box "Codice html che verrà visualizzato in ogni pagina in fondo al forum":
HTML
</td><td bgcolor="#669900" width="5%"></td></tr></table></center>
Per cambiare i colori dovremmo modificare il valore #669900 dell'attributo bgcolor con un altro
valore esadecimalevalore esadecimale.
Per modificare la larghezza modifichiamo i valori degli attributi width con una percentuale.Versione con immagini
Se vogliamo inserire la seconda versione mettiamo nel box "Codice html che verrà visualizzato in ogni pagina in cima al forum":
HTML
<table align="center" width="80%" height="100%" border="0" cellspacing="0" cellpadding="0">
HTML
<table align="center" width="80%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="http://container_left.gif" style="background-repeat:repeat-y"></td>
<td bgcolor="#FFFFFF" align="center" width="92%">
e nel box "Codice html che verrà visualizzato in ogni pagina in fondo al forum":
HTML
</td>
<td background="http://container_right.gif" style="background-repeat:repeat-y"></td>
</tr></table>
Ricordatevi di modificare
http://container_left.gif e
http://container_right.gif con delle immagini hostate sul web.
Spero che questa guida sia stata utile a qualcuno.
Per problemi nell'installazione scrivete pure qui.
Container chiuso a quattro bordi
in cima al forum:
CODICE
<br>
<body bgcolor="" leftmargin="10" topmargin="10" marginwidth="10" marginheight="10" alink="#000000" vlink="#000000">
<center><table cellpadding= "0" cellspacing="0" width="700" class="border" background="http://Immagine sfondo">
<tr>
<td><img src="http://immagine angolo su a sinistra"></td>
<td width="100%" background="http://immagine bordo su"></td>
<td><img src="http://immagine angolo su a destra"></td></tr>
<tr>
<td background="http://immagine bordo a sinistra">
<img src="http://immagine bordo a sinistra"></td><td>
<center>
<br>
in fondo al forum:
CODICE
</a>
</td><td background="http://immagine bordo a destra">
<img src="http://immagine bordo a destra"></td></tr>
<tr align="center">
<td><img src="http://immagine angolo in basso a sinistra"></td>
<td background="http://immagine bordo in basso"></td>
<td><img src="http://immagine angolo in basso a destra"></td></tr></table>
<br>
<br>
<tr>
<td class="msub_left"></td>
<td class="msub_center"> </td>
<td class="msub_right"></td></tr></table></td>
<td class="mright_bottom"></td></tr></table></p></div>
<div></div>
Container chiuso con bordo e sfondo in Html CSS
Codice da inserire in cima al forum:
CODICE
<center><div style="background-color:#000000;padding:3px;width:80%; border: 1px solid #414141" align="center">
questo è un semplice container, komposto da ''bordo'' e ''background'' ke potrete moderare a vostro piacere^^
poi consigliato inserire
sia prima del code ke dopo kosi ke ci sia un po di spazio sia su ke in fondo al forum poi fate voi
Container ai due lati di tutta la pagina
(è possibile trovare una guida alternativa
allo skinlab).
Un container per un forum è qualcosa di simile alle due barre che contengono il vostro forum, proprio come in questo
forum di prova. Come si inserisce? E' molto ma molto semplice. Per poterlo aggiungere andate su "Gestione codice HTML ->Codice html che verrà visualizzato in ogni pagina in cima al forum" ed inserite questo codice
CODICE
<style type="text/css">
body {background-color: #FFFFFF}
.header_width, .skin_tbl, .skin_tbl_width, .stats .border {width:86%}
#centrale {margin: auto;
width: 86%;
background-color: #ffffff}
#sinistra {background: url(http://crazydesignseng.altervista.org/_altervista_ht/orangearrows/border.gif) left repeat-y}
#destra {background: url(http://crazydesignseng.altervista.org/_altervista_ht/orangearrows/border.gif) right repeat-y}
</style>
<div id="centrale">
<div id="sinistra">
<div id="destra">
Ed in "Codice html che verrà visualizzato in ogni pagina in fondo al forum" questo codice
Andiamo ora ad analizzare i vari parametri che possono essere cambiati.
CODICE
body {background-color: #FFFFFF}
Il colore di sfondo della nostra skin
CODICE
#centrale {margin: auto;
width: 86%;
background-color: #ffffff}
Il tag "centrale" ci sta ad indicare che stiamo parlando della porzione centrale della nostra pagina, dove troveremo la board. Stabiliamo la sua grandezza, in percentuale, e il colore di sfondo.
CODICE
#sinistra {background: url(http://crazydesignseng.altervista.org/_altervista_ht/orangearrows/border.gif) left repeat-y}
Indica l'immagine del container che si trova più a sinistra (il "bordo sinistro", per così dire). Dobbiamo semplicemente modificare il percorso dell'immagine.
CODICE
#destra {background: url(http://crazydesignseng.altervista.org/_altervista_ht/orangearrows/border.gif) right repeat-y}
Stessa cosa per il bordo destro del nostro container, per cambiare l'immagine sostituite il percorso.
Spero che il tutorial sia stato piuttosto chiaro, se ci sono dubbi o domande non esitate a chiedere.
Edited by °Dark Anubis° - 19/3/2009, 17:49
