Navigazione nei topic con un'indice dei post


Tutorial Navigazione nei topic con un'indice dei post

Messaggio Da Niko Ven 24 Dic 2021 - 1:06

Navigazione nei topic con un'indice dei post


Questo tutorial consente di implementare la Navigazione nei topic con un'indice dei post

Navigazione nei topic con un'indice dei post Scherm16

Codice di stile CSS

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile CSS e aggiungiamo il seguente codice CSS:
Codice:
postnav.container {
    background-color: white;
    position: fixed;
    right: 0;
    top: 30vh;
    width: 20vw;
    z-index: 999;
    height: 30vh;
    padding: 1%;
    box-sizing: border-box;
    transform: translateX(19vw);
    transition: all .5s ease-in-out;
    box-shadow: 0 0 30px #15151525;
}
 
a.post--ref {
    display: block;
    margin: 10px 0;
    font-size: 9.5pt;
    color: #454545;
    font-family: Arial, sans-serif;
    opacity: .7;
    transition: all .5s ease-in-out;
    text-decoration: none !important;
}
 
postnav.title {
    text-align: center;
    display: block;
    font-size: 13pt;
    border-bottom: 1px solid #15151515;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
 
postnav.preview {
    color: #858585;
    font-size: 9pt;
}
 
a.post--ref:hover {
    opacity: 1;
}
 
postnav.--button {
    background-color: white;
    position: fixed;
    right: 20vw;
    top: 30vh;
    z-index: 999;
    height: 30vh;
    padding: 1%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transform: translateX(20vw);
    cursor: pointer;
    transition: all .5s ease-in-out;
    box-shadow: 0 0 15px #15151525;
}
 
postnav.--button img {
    width: 13pt;
}
 
.notrsf {
    transform: none !important;
}

Modifica ai Templates

ModernBB

Andiamo verso Pannello di amministrazione ► e modifichiamo il template viewtopic_body
Inserisci questo all'inizio del template:

In seguito:
Cerca:
Sostituisci con:

Alla fine del template aggiungi::

PhpBB2

Andiamo verso Pannello di amministrazione ► e modifichiamo il template viewtopic_body
Inserisci questo all'inizio del template:

In seguito nello stesso template
Trova:
Sostituisci con:

Quindi poi:
Trova:

Sostituisci con:

Alla fine del template:
Aggiungi:

PhpBB3

Per la versione PhpBB3 segui i medesimi passaggi della versione PhpBB2, ma il codice javascript da inserire come aggiunta alla fine del template sarà questo:
Codice:
<script type="text/javascript">
$('postnav.--button').on('click', function() {
  $('postnav.container').toggleClass('notrsf');
  $(this).toggleClass('notrsf');
});
 
$(function() {
$('div.post').each(function() {
  var $plink = $(this).find('h2.topic-title a').attr('href');
  var $pauth = $(this).find('p.author a').html();
  var $pid = $(this).find('.post--id').attr('id');
  var str = $(this).find('.postbody .content div').text();
  var $length = '150';
  var $preview = str.substring(0,$length);
 
 
$('postnav.container').append('<a class="post--ref" href="' + $plink + '">' + $pauth + ' - Messaggio # ' + $pid + '<br /><postnav class="preview">' + $preview + '...</postnav></a>');
  });
}, 500);</script>

Personalizzazione

Puoi personalizzare il numero di caratteri delle anteprime da mostrare cambiando il numero 32 nella var $length = '32'; parte con il numero di vostra scelta.

Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 25
Messaggi : 8846
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/

A rozalia piace questo messaggio.

Niko è 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.