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>
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;
}
Codice: Seleziona tutto
#page-body {
width:80%;
float:left;
}
in fondo aggiungi questo codice
Codice: Seleziona tutto
.page-sidebar {
float:right;
margin-top:4px;
width:20%;
}
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>