Widget con ultimi argomenti di una sezione

Da Insane Sab 4 Gen 2014 - 17:30

Widget ultimi argomenti

Salve con questo tutorial vi farò vedere come inserire un widget nel vostro forum, che visualizzerà gli ultimi argomenti di un determinato sub-forum. Esempio:

1- Passo:
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.

2- Passo:
Creiamo un nuovo Javascript, andiamo in PDA--->Moduli--->Gestione dei codici Javascript--->

Creare un nuovo Javascript

Ora 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)"); });

Ricordatevi di segnare

Tutte le pagine

Ora dove trovate

Codice:: INSERIRE QUI IL LINK

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

Codice:: f4-blabla-comunicazione

Una volta finito, salvate il tutto.

4- Passo:
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!

Tutorial creato da: Ange Tuteur tradotto da Insane
Copyrigth FORUMATTIVO.COM