Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

Widget con ultimi argomenti di una sezione


Tutorial Widget con ultimi argomenti di una sezione

Messaggio Da Insane il Sab 04 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



Insane
Veterano dello staff

Sesso : Maschile
Età : 24
Messaggi : 3848
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