Prosilver Sidebar Tutorial Completo [2013]

Area dedicata alle Guide
Regole del forum
Immagine

Vota per questa Guida creata dall'utente Christian Bullock

Eccellente
6
75%
Ottima
1
13%
Buona
1
13%
Mediocre
0
Nessun voto
Scarsa
0
Nessun voto
Brutta
0
Nessun voto
 
Voti totali: 8

Avatar utente
phpBB3
News PhpBB3
News PhpBB3
Messaggi: 81
Iscritto il: 6 lug 2013, 14:01

Prosilver Sidebar Tutorial Completo [2013]

Messaggio da phpBB3 » 21 ago 2013, 16:04

Immagine
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. :thumbup:

imgdestra Indice Contenuti
  1. Creare file Sidebar
  2. Modifiche HTML
  3. Modifiche CSS
  4. Istruzioni d'uso
  5. Aggiunta Contenuti
  6. Finitura Off

imgdestra 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.
  1. 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
  2. Ripetere questo processo per creare sidebar_right.html.
  3. Ora dovreste avere due file sidebar: sidebar_left.html è sidebar_right.html. Sposta questi in Prosilver /template/ cartella.
Immagine


imgdestra 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>
Sotto, Aggiungi:

Codice: Seleziona tutto

<!-- DEFINE $SIDEBARS = 'both' --> <!-- Options: Left | Right | Both | Off -->
<!-- DEFINE $SIDEBAR_ON_PAGES = 'global' --> <!-- Options: Global | Index -->
Ora abbiamo bisogno di rimuovere il #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">
Trova:

Codice: Seleziona tutto

    </div>

    <a name="start_here"></a>
Sostituire con:

Codice: Seleziona tutto

<a name="start_here"></a>
Ora stiamo andando ad aggiungere il codice strutturale della sidebar.

Trova:

Codice: Seleziona tutto

<div class="navbar">
Aggiungi, Prima:

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 -->
Naturalmente, per ogni tag che abbiamo aperto deve essere chiuso.

Apri: /styles/prosilver/template/overall_footer.html

Trova:

Codice: Seleziona tutto

<div class="copyright">{CREDIT_LINE}
Aggiungi, Prima:

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 -->

imgdestra 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; 
}

imgdestra 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' -->
Opzioni:
  • Left: La Sidebar sarà mostrata solo sul lato sinistro
  • Right: La Sidebar sarà mostrata solo sul lato destro
  • Both: 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' -->
Opzioni:
  • [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;
}
Per aumentare la larghezza, dobbiamo semplicemente sostituire 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;
}
Qui è dove le cose si fanno un po di confusione. Per ridurre la larghezza della parte sinistra, in realtà abbiamo bisogno di aumentare il valore di padding a destra. Il valore di spaziatura destra aumenta la distanza tra il lato destro del foro e il browser. La sidebar floats sopra lo spazio bianco questo lascia. Così dobbiamo sostituire il 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:

Immagine

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>
Immagine

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>
Immagine

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>
Immagine

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>

imgdestra 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

Avatar utente
infermieriattivi
Utente phpBB3World
Utente phpBB3World
Messaggi: 2
Iscritto il: 30 set 2013, 18:37

Re: Prosilver Sidebar Tutorial Completo [2013]

Messaggio da infermieriattivi » 1 ott 2013, 0:07

Grazie splendida guida.
Ho installato la sidebar, perfetto.
Ma essendo uno smanettone del copia incolla, che non sa una cippa di html, ci sono degli esempi di codice per inserire gli ultimi iscritti gli ultimi messaggi ecc..

Avatar utente
salvocortesiano
Membro phpBB3World
Membro phpBB3World
Messaggi: 58
Iscritto il: 20 gen 2013, 9:22
Località: Firenze
Contatta:

Re: Prosilver Sidebar Tutorial Completo [2013]

Messaggio da salvocortesiano » 1 ott 2013, 14:10

Bisognerebbe installare delle mod prima, per incollare poi il codice html nella sidebar interessata.
Sono amico di tutti, ma alle condizioni di nessuno!

Avatar utente
systemcrack
Membro phpBB3World
Membro phpBB3World
Messaggi: 44
Iscritto il: 13 set 2013, 14:28
Contatta:

Re: Prosilver Sidebar Tutorial Completo [2013]

Messaggio da systemcrack » 4 ott 2013, 22:29

Scusate se ve lo faccio notare e lungi da me una critica, ma proprio perchè siete un forum serio vi segnalo questa cosa .. la guida non è stata creata dall'utente christian, ma tradotta, perchè l'originale è questa.
Sperando d'avere fatto cosa gradita ;)

Buona serata a tutti. :/>

Avatar utente
Rey
Staff phpBB3World
Staff phpBB3World
Messaggi: 563
Iscritto il: 3 nov 2012, 13:41
Località: 在世界上
Contatta:

Re: Prosilver Sidebar Tutorial Completo [2013]

Messaggio da Rey » 5 ott 2013, 0:59

Freccia_Destra Name: Christian Bullock
Grazie, ma comunque è sempre lui, il link messo da te quello è il suo sito ufficiale. :) Christian 2.0 ||||| Prosilver Complete Sidebar Tutorial [2013]

Avatar utente
systemcrack
Membro phpBB3World
Membro phpBB3World
Messaggi: 44
Iscritto il: 13 set 2013, 14:28
Contatta:

Re: Prosilver Sidebar Tutorial Completo [2013]

Messaggio da systemcrack » 3 nov 2013, 16:03

Ciao ragazzi, volevo chiedervi secondo voi come si poteva ovviare a questo problema: vedi screenshot in pratica la colonna laterale va sopra alla navbar del footer perchè il forum è più corto.. :roll:

Avatar utente
Rey
Staff phpBB3World
Staff phpBB3World
Messaggi: 563
Iscritto il: 3 nov 2012, 13:41
Località: 在世界上
Contatta:

Re: Prosilver Sidebar Tutorial Completo [2013]

Messaggio da Rey » 3 nov 2013, 16:24

Questo errore la maggior parte delle volte può dipendere dai <div></div> controlla nel tuo file overall_footer.html che non ci siano in più o in meno, questi devono avere una apertura è di conseguenza una chiusura, ma se ci sono in più o in meno, la maggior parte causa il problema che hai notificato.

Consiglio: scaricati il file in locale, è carica un overall_footer.html pulito è controlla se il difetto sparisce, se sparisce allora hai già la certezza che l'errore si trova li, è che forse dipende dai div che ho detto.

E tutto da scoprire.

Avatar utente
systemcrack
Membro phpBB3World
Membro phpBB3World
Messaggi: 44
Iscritto il: 13 set 2013, 14:28
Contatta:

Re: Prosilver Sidebar Tutorial Completo [2013]

Messaggio da systemcrack » 3 nov 2013, 18:57

Guarda l'unica cosa che mi pare non vada è questa:

Codice: Seleziona tutto

<div>
	<a id="bottom" name="bottom" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>
comunque non mi pare che non ci sia nulla che non vada.. ti posto il footer magari vedi qualcosa che non ho visto io.

Codice: Seleziona tutto

</div>

<div id="page-footer">

	<div class="navbar">
		<div class="inner"><span class="corners-top"><span></span></span>

		<ul class="linklist">
			<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_WATCH_FORUM_LINK --><li <!-- IF S_WATCHING_FORUM -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{S_WATCH_FORUM_LINK}" title="{S_WATCH_FORUM_TITLE}">{S_WATCH_FORUM_TITLE}</a></li><!-- ENDIF -->
					<!-- IF U_WATCH_TOPIC --><li <!-- IF S_WATCHING_TOPIC -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}">{L_WATCH_TOPIC}</a></li><!-- ENDIF -->
					<!-- IF U_BOOKMARK_TOPIC --><li class="icon-bookmark"><a href="{U_BOOKMARK_TOPIC}" title="{L_BOOKMARK_TOPIC}">{L_BOOKMARK_TOPIC}</a></li><!-- ENDIF -->
					<!-- IF U_BUMP_TOPIC --><li class="icon-bump"><a href="{U_BUMP_TOPIC}" title="{L_BUMP_TOPIC}">{L_BUMP_TOPIC}</a></li><!-- ENDIF -->
				<!-- ENDIF -->
			<li class="rightside"><!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> &bull; <!-- ENDIF --><!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> &bull; <!-- ENDIF -->{S_TIMEZONE}</li>
		</ul>

		<span class="corners-bottom"><span></span></span></div>
	</div>
<!-- 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 -->
	<div class="copyright">{CREDIT_LINE}
		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
	</div>
</div>

</div>

<div>
	<a id="bottom" name="bottom" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

<!-- IF SN_MODULE_IM_ENABLED -->
    <!-- INCLUDE socialnet/im.html -->
<!-- ENDIF -->
<!-- altervista stats, do not remove! -->
<script type="text/javascript">
//<![CDATA[
document.write('<s'+'cript type="text/javascript" src="http://tb.altervista.org/stats/'+escape(window.location.hostname)+'.js?p='+escape(window.location)+'&r='+new Date().getTime()+'"><\/s'+'cript>');
//]]>
</script>

<!-- IF S_REGISTRATION or S_CHANGE_PASSWORD -->
	<!-- INCLUDE password_strength.html -->
<!-- ENDIF -->
</body>

</html>
P.s.
Grazie e buona domenica ;)

Avatar utente
Rey
Staff phpBB3World
Staff phpBB3World
Messaggi: 563
Iscritto il: 3 nov 2012, 13:41
Località: 在世界上
Contatta:

Re: Prosilver Sidebar Tutorial Completo [2013]

Messaggio da Rey » 4 nov 2013, 13:22

Sembra apposto, prova a mettergli la larghezza alla navbar.
Sostituisci il codice con questo:

Codice: Seleziona tutto

.navbar {
background-color: #e1ebf2;
width: 75%;
}

Avatar utente
systemcrack
Membro phpBB3World
Membro phpBB3World
Messaggi: 44
Iscritto il: 13 set 2013, 14:28
Contatta:

Re: Prosilver Sidebar Tutorial Completo [2013]

Messaggio da systemcrack » 6 nov 2013, 14:15

mmm intendi nel common.css ?

Rispondi

Torna a “[3.0.x] Guide”

Chi c’è in linea

Visitano il forum: Nessuno e 3 ospiti