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

ultimi 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

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

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