Seguendo questo tutorial possiamo installare 6 diverse varianti di barra laterale al vostro forum (sinistra, destra, sia, in Indice-che, globale) facilmente commutabile con una riga di codice. Tutte le barre laterali sono tableless, cross-browser testato e convalidato come XHTML 1.0 Strict.
Indice Contenuti
Step 1) Creare file Sidebar
Per mantenere i nostri file template puliti e liberi da ingombri importeremo il codice sidebar dal file del template stesso.
- Apri Notepad: Tipo “sidebar a sinistra” nell'area di testo. Clicca: File → Salva con nome:
- Nome del file: sidebar_left.html
- Salva con nome tipo: Tutti i file
- Ripetere questo processo per creare sidebar_right.html.
- Ora dovreste avere due file sidebar: sidebar_left.html è sidebar_right.html. Sposta questi in Prosilver /template/ cartella.
Step 2) Modifiche HTML
In primo luogo, stiamo andando a inserire le variabili che userete per controllare le barre laterali. Parleremo in seguito più nel dettaglio.
Apri: /styles/prosilver/template/overall_header.html
Trova:
Codice: Seleziona tutto
<head>
Codice: Seleziona tutto
<!-- DEFINE $SIDEBARS = 'both' --> <!-- Options: Left | Right | Both | Off -->
<!-- DEFINE $SIDEBAR_ON_PAGES = 'global' --> <!-- Options: Global | Index -->
#page-header
div. Essa in realtà non fa nulla e la sua presenza causa problemi con i tag della barra laterale di chiusura anticipata.Ancora in overall_header.html, trova ed elimina:
Codice: Seleziona tutto
<div id="page-header">
Codice: Seleziona tutto
</div>
<a name="start_here"></a>
Codice: Seleziona tutto
<a name="start_here"></a>
Trova:
Codice: Seleziona tutto
<div class="navbar">
Codice: Seleziona tutto
<!-- IF $SIDEBAR_ON_PAGES == 'global' or ($SIDEBAR_ON_PAGES == 'index' and SCRIPT_NAME == 'index') -->
<!-- IF $SIDEBARS != 'off' -->
<div class="sidebarwrapper">
<!-- ENDIF -->
<!-- IF $SIDEBARS == 'left' -->
<div class="fixedfluid-sidebar">
<!-- INCLUDE sidebar_left.html -->
</div>
<div class="fixedfluid-content">
<!-- ELSEIF $SIDEBARS == 'right' -->
<div class="fluidfixed-sidebar">
<!-- INCLUDE sidebar_right.html -->
</div>
<div class="fluidfixed-content">
<!-- ELSEIF $SIDEBARS == 'both' -->
<div class="fixedfluidfixed-left">
<!-- INCLUDE sidebar_left.html -->
</div>
<div class="fixedfluidfixed-content">
<!-- ENDIF -->
<!-- ENDIF -->
Apri: /styles/prosilver/template/overall_footer.html
Trova:
Codice: Seleziona tutto
<div class="copyright">{CREDIT_LINE}
Codice: Seleziona tutto
<!-- IF $SIDEBAR_ON_PAGES == 'global' or ($SIDEBAR_ON_PAGES == 'index' and SCRIPT_NAME == 'index')-->
<!-- IF $SIDEBARS == 'left' or $SIDEBARS == 'right' -->
</div><!-- /.fixedfluidcontent -->
</div><!-- /.sidebarwrapper -->
<!-- ELSEIF $SIDEBARS == 'both' -->
</div>
<div class="fixedfluidfixed-right">
<!-- INCLUDE sidebar_right.html -->
</div>
</div>
<!-- ENDIF -->
<!-- ENDIF -->
Step 3) Modifiche CSS
Per fortuna non siamo in realtà di editing qualsiasi CSS. Solo l'aggiunta di alcune nuove linee per definire la struttura e aiutare con lo styling.
Apri: /styles/prosilver/theme/common.css
Alla fine del file, aggiungere:
Codice: Seleziona tutto
/* Sidebars */
.sidebarwrapper {
position: relative;
}
/* left sidebar, right section */
.fixedfluid-content {
padding: 0 0 0 170px;
}
/* left sidebar */
.fixedfluid-sidebar, .fixedfluidfixed-left {
position: absolute;
left: 0;
top: 0;
width: 160px;
bottom: 0;
padding: 0;
}
/* right sidebar, left section */
.fluidfixed-content {
padding-right: 270px;
}
/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
position: absolute;
right: 0;
top: 0;
width: 260px;
bottom: 0;
padding: 0;
}
/* Both sidebars, middle section */
.fixedfluidfixed-content {
padding: 0 270px 0 170px;
}
/* Sidebar Styling */
.ad1, .ad2 {
display: block;
float: left;
}
.ad1 {
margin: 0 10px 10px 0;
}
.fixedfluid-sidebar ul.sidebar li, .fluidfixed-sidebar ul.sidebar li, .fixedfluidfixed-left ul.sidebar li, .fixedfluidfixed-right ul.sidebar li {
padding: 5px 10px;
}
Step 4) Istruzioni d'uso
Abilitare le barre laterali
Gli amministratori hanno diverse opzioni a disposizione, quando sono installate le barre laterali. Questi possono essere impostati modificando le seguenti righe di codice in overall_header.html:
Codice: Seleziona tutto
<!-- DEFINE $SIDEBARS = 'both' -->
-
Left
: La Sidebar sarà mostrata solo sul lato sinistro Right
: La Sidebar sarà mostrata solo sul lato destroBoth
: Le Sidebar appariranno sui lati destro e sinistro del forum contemporaneamente.Off
: Non verranno visualizzate le Sidebar.
Ci sono altre opzioni disponibili per gli amministratori se desiderano limitare le pagine della Sidebar viene mostrato sul.
Codice: Seleziona tutto
<!-- DEFINE $SIDEBAR_ON_PAGES = 'global' -->
[b]global[/b]
: La Sidebar verrà visualizzata in ogni pagina del tuo forum, compreso il Pannello di controllo utente e la pagina del login.[b]index[/b]
: La Sidebar verrà visualizzata solo sulla pagina indice del forum.
Regolazione Larghezza Sidebar
E' molto probabile che si desidera regolare la larghezza della Sidebar per ospitare le proprie esigenze pubblicitarie. A causa della natura tableless delle barre laterali di regolazione larghezza è delicato e difficile. Essenzialmente è importante ricordare che quando la larghezza della Sidebar viene modificata, il lato contenuto della larghezza del forum deve essere regolato. Quindi, se si aumenta la larghezza della Sidebar laterale destra di 10px, la larghezza del lato sinistro deve essere ridotto di 10px.
Come esempio, supponiamo che vogliamo regolare la larghezza della Sidebar laterale sinistra. Il codice è qui in common.css:
Codice: Seleziona tutto
/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
position: absolute;
right: 0;
top: 0;
width: 260px;
bottom: 0;
padding: 0;
}
260px
con un valore più grande, come 300px
. Tenete presente che ora abbiamo aumentato la larghezza di 40px
. Per evitare che la barra laterale si sovrappone al contenuto del forum, ora abbiamo bisogno di ridurre la larghezza del pannello sinistro di
40px
. questo è anche situato in common.css:
Codice: Seleziona tutto
/* right sidebar, left section */
.fluidfixed-content {
padding-right: 270px;
}
270px
with 310px
(270px + 40px). Se siete seriamente confusi regolando la larghezza fatemi sapere.
Step 5) Aggiunta del contenuto alle vostre barre laterali
Come cammino di ritorno al punto 1, la barra laterale è tirato dal file di template. Sidebar_left.html popola il left sidebar mentre sidebar_right.html popola il right sidebar.
Ecco alcuni codici pre-fatti che si possono copiare + incollare nel file della Sidebar:
Codice: Seleziona tutto
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Block 1</dt>
</dl>
</li>
</ul>
<ul class="topiclist sidebar">
<li class="bg1">Row</li>
<li class="bg2">Row</li>
<li class="bg1">Row</li>
<li class="bg2">Row</li>
<li class="bg1">Row</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
Codice: Seleziona tutto
<div class="forumbg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Block 2</dt>
</dl>
</li>
</ul>
<ul class="topiclist sidebar">
<li class="bg1">Row</li>
<li class="bg2">Row</li>
<li class="bg1">Row</li>
<li class="bg2">Row</li>
<li class="bg1">Row</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
Codice: Seleziona tutto
<div class="panel bg1">
<div class="inner"><span class="corners-top"><span></span></span>
Panel 1
<span class="corners-bottom"><span></span></span></div>
</div>
<br />
<div class="panel bg2">
<div class="inner"><span class="corners-top"><span></span></span>
Panel 2
<span class="corners-bottom"><span></span></span></div>
</div>
<br />
<div class="panel bg3">
<div class="inner"><span class="corners-top"><span></span></span>
Panel 3
<span class="corners-bottom"><span></span></span></div>
</div>
Codice: Seleziona tutto
<a class="ad1" href="#"><img src="{T_THEME_PATH}/images/1.gif" width="125" height="125" alt="" /></a>
<a class="ad2" href="#"><img src="{T_THEME_PATH}/images/2.gif" width="125" height="125" alt="" /></a>
<a class="ad1" href="#"><img src="{T_THEME_PATH}/images/3.gif" width="125" height="125" alt="" /></a>
<a class="ad2" href="#"><img src="{T_THEME_PATH}/images/4.gif" width="125" height="125" alt="" /></a>
Step 6) Finitura Off
Come in tutti i casi, ricordatevi di aggiornare il vostro tema e cache del template dopo aver caricato la modifica CSS e HTML:
ACP: Styles Tab -> Style Components -> Themes -> Prosilver -> Refresh
ACP: Styles Tab -> Style Components -> Templates -> Prosilver -> Refresh
Per favore fatemi sapere se avete problemi con qualsiasi cosa nel tutorial. E' molto probabile che in futuro scriverò un articolo secondario che si concentra in particolare su ridimensionare le barre laterali ecc, versioni future di questo tutorial sarà anche aggiungere il supporto per gli utenti di collasso barre laterali, e dare l'admin di un livello di controllo di cui pagine barre laterali sono visualizzati su.
Grazie per la lettura. Si prega di condividere.
Demo: clicca qui
Guide Simili:
http://phpbb3world.altervista.org/viewt ... 1667#p2454
http://phpbb3world.altervista.org/viewt ... 1004#p1405
http://phpbb3world.altervista.org/viewt ... t=674#p785