Aggiungere una colonna laterale al tema prosilver

[Galandas]

Aggiungere una colonna laterale al tema prosilver
Scritto da mukundis

---

Nel forum basato su phpbb3 potremmo avere la necessità di aggiungere una sidebar, ovvero una colonna laterale, in cui inserire le nostre pubblicità, adsense, link, immagini, o ciò che desideriamo.

In questa piccola guida vi spiegherò come aggiungere una sidebar (colonna) verticale a destra o a sinistra del forum stesso.

Questa guida è valida per il tema Prosilver sebbene il CSS ed il codice stesso potrebbe variare rispetto agli altri temi.

Prima di tutto dobbiamo creare un file sidebar.html con estensione in html ed inserirlo nella cartella template che si trova al seguente percorso: styles/prosilver/template/
All' interno di questo file, momentaneamente possiamo anche non scrivere nulla, ci penseremo alla fine.

Adesso dobbiamo andare a modificare il file overall_footer.html che possiamo modificare attraverso il nostro pannello amministrativo (stili > template > overall_footer.html), cerchiamo il seguente codice (si trova nella prima riga):

Codice: Seleziona tutto

</div>

ed inseriamo subito dopo questo codice:

Codice: Seleziona tutto

<div class="page-sidebar">
<!-- INCLUDE sidebar.html -->
</div>

Adesso dobbiamo modificare il CSS, ovvero lo stile del forum.

apri:styles/prosilver/theme/common.css
cerchiamo il seguente codice:

Codice: Seleziona tutto

#page-body {
	margin: 4px 0;
	clear: both;
}

sostituisci con:

Codice: Seleziona tutto

#page-body {
      width:80%;
      float:left;
}

Adesso apri:styles/prosilver/theme/colours.css
in fondo aggiungi questo codice

Codice: Seleziona tutto

.page-sidebar {
float:right;
margin-top:4px;
width:20%;
}

In questo modo avremo il corpo del forum a sinistra e la colonna a destra. Se invece volessimo spostare la colonna a sinistra dobbiamo semplicemente modificare i due float degli ultimi due codici che ho appena scritto: il primo float dovrà essere float=right ed il secondo float=left .

Per finire dobbiamo modificare la colonna che abbiamo appena creato e per far si che abbia una grafica uguale a quella delle tabelle del forum, inseriamo questo codice nella pagina creata prima sidebar.html per ogni tabella:

Codice: Seleziona tutto

<div class="forabg">
   <div class="inner">
      <span class="corners-top"><span></span></span>
      <ul class="topiclist">
         <li class="header"><dl><dt>QUI METTI IL TITOLO DEL BOX</dt></dl></li>
      </ul>
      <ul class="topiclist forums">
         <li><dl>
            <dd class="posts_portal">
               QUI DENTRO SCRIVI IL CONTENUTO DEL BOX
            </dd>
         </dl></li>
      </ul>
      <span class="corners-bottom"><span></span></span>
   </div>
</div>

dopo finito tutti i passaggi aggiornare temi,template,svuotare la chacke.