Widget con ultimi argomenti di una sezione

Tutorial Widget con ultimi argomenti di una sezione

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




Ultima modifica di Niko il Mar 16 Gen 2024 - 20:56 - modificato 1 volta. (Motivazione : Aggiornamento layout + screenshot)
Insane
Insane
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 32
Messaggi : 4178
Località : Varese

https://aiuto.forumattivo.it/
Insane è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.