Widget con ultimi argomenti di una sezione

Da Insane Sab 4 Gen 2014 - 17:30

Widget con ultimi argomenti di una sezione

Salve,

con questo tutorial vi farò vedere come inserire un widget nel vostro forum, che visualizzerà gli ultimi argomenti di un determinato sub-forum.
Questo tutorial ti consentirà quindi di creare un widget che mostrerà gli argomenti recenti di uno specifico subforum. Wink

argomenti - Widget con ultimi argomenti di una sezione Tuto19

Creazione del widget

Andiamo a creare un widget in PDA > Moduli >Widget dell'Indice > :Modificare:Crea un widget personalizzato
Ora inseriamo questo codice:

Codice:: <div id="newsareal1" class="newsareal"> </div>

Ora salvate.

Codice Javascript

Andiamo verso PDA > Moduli > HTML & Javascript > Gestione dei codici javascript, e creiamone uno nuovo su tutte le pagine. Quindi, incolliamo il seguente codice

ATTENZIONE Exclamation

ogni piattaforma ha il suo codice:

phpBB2:
Codice:
jQuery(document).ready(function(){ jQuery("#newsareal1").load("/INSERIRE QUI IL LINK div.topictitle:lt(11)"); });
phpBB3:
Codice:
jQuery(document).ready(function(){ jQuery("#newsareal1").load("/INSERIRE QUI IL LINK div.topic-title-container:lt(11)"); });
PunBB & Invision:
Codice:
jQuery(document).ready(function(){ jQuery("#newsareal1").load("/INSERIRE QUI IL LINK a.topictitle:lt(11)"); });

Ora dove trovate

Codice:: INSERIRE QUI IL LINK

Modifiche al codice javascript

Dovrete inserire la parte finale del link del forum che volete far comparire nel widget esempio:

Codice:: f4-blabla-comunicazione

argomenti - Widget con ultimi argomenti di una sezione Tuto410

Una volta finito, salvate il tutto.

Se desideri modificare la quantità di argomenti recenti visualizzati, modifica semplicemente 11 nel tuo Javascript.

argomenti - Widget con ultimi argomenti di una sezione Tuto510

Il codice CSS

Ora andiamo ad aggiungere il codice CSS in PDA > Visualizzazione > Colori > Foglio di Stile CSS
qui andiamo ad incollare il seguente codice, ATTENZIONE Exclamation

alla versione:

phpBB2:
Codice:
.newsareal div.topictitle { display: block !important; margin: 2px 1px 0; padding: 2px 5px 5px 30px; border: 1px solid #B1BFC0; border-radius: 5px; background: #F3F9F9 url('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center; } .newsareal div.topictitle:hover { background-color: #D8DEDE; } .newsareal div.topictitle a { color: #708090 !important; text-decoration: none !important; text-shadow: #fff 1px 1px 0px }
phpBB3:
Codice:
.newsareal div.topic-title-container { display: block !important; margin: 2px 1px 0; padding: 2px 5px 5px 30px; border: 1px solid #B1BFC0; border-radius: 5px; background: #F3F9F9 url('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center; } .newsareal div.topic-title-container:hover { background-color: #D8DEDE; } .newsareal div.topic-title-container a { color: #708090 !important; text-decoration: none !important; text-shadow: #fff 1px 1px 0px }
PunBB & Invision:
Codice:
.newsareal a.topictitle { display: block !important; margin: 2px 1px 0; padding: 2px 5px 5px 30px; border: 1px solid #B1BFC0; border-radius: 5px; background: #F3F9F9 url('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center; text-decoration: none !important; } .newsareal a.topictitle:hover { background-color: #D8DEDE; color: #708090 !important; text-shadow: #fff 1px 1px 0px }

Ora salvate ed il gioco è fatto!