Widget con ultimi argomenti di una sezione


Tutorial Widget con ultimi argomenti di una sezione

Messaggio Da Insane il 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---> :new: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


avatar
Insane
Aiutattivo
Aiutattivo

Sesso : Maschile
Età : 25
Messaggi : 3926
Località : Varese


Vedere il profilo dell'utente http://aiuto.forumattivo.it/
Insane è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum