Catégories à fermer


Aller en bas
Mäven
Mäven
Informations : Présence aléatoire

Idea Viens papoter avec nous sur le discord

Messages : 1296
http://tambouille-raleuses.forumactif.com/

Afficher les réponses des sujets dans certains forums sous forme de "commentaires de blogs" Empty Afficher les réponses des sujets dans certains forums sous forme de "commentaires de blogs"

le Lun 14 Oct - 12:22

Afficher les réponses de certains sujets sous forme de "commentaires de blogs"


Hello !

Voilà un petit tutoriel pour pouvoir mettre, sur certains sujets (ou dans certains sous forums) les réponses sous forme de "commentaires de blog" sans avoir à passer par l'option des blogs de ForumActif.

Voilà un aperçu :
Spoiler:

Afficher les réponses des sujets dans certains forums sous forme de "commentaires de blogs" 113

Arrow Tu dois comprendre les bases du HTML / CSS
Arrow Tu ne dois pas avoir peur du javascript

Exclamation Je pars de templates non modifiés !
Exclamation Ce tutoriel est compatible avec toutes les versions SAUF PhpBB2

Exclamation Attention à bien te référer à la partie concernant ta version pour la partie "template"

Une modification de templates

Ici, on va aller ajouter dans le template le petit avatar sur la gauche des réponses.
Dans ton template viewtopic_body, il faut que tu colles ce code :
Code:
  <div class="avatarBlog"></div>

Juste avant la partie qui suit selon ta version :

PhpBB3 & ModernBB

Code:
  <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
Tu enregistres, et tu publies.

PunBB

Code:
<h2>
 <strong>{postrow.displayed.COUNT_POSTS}</strong>
 {postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a> {postrow.displayed.POST_DATE_NEW}
 </h2>
Tu enregistres, et tu publies.

Invision

Code:
<h3>{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h3>
Tu enregistres, et tu publies.

AwesomeBB

Code:
<h2>
                                <i class="material-icons">description</i>
                                {postrow.displayed.ICON}
                                <span><a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></span>
                            </h2>
Tu enregistres, et tu publies.

Un peu de CSS

Avec ce bout de code (à placer dans Affichage > Couleurs > Feuille de style CSS), on va placer et redimensionner l'avatar.
Code:
.avatarBlog{
 float:left;
}
.avatarBlog img{
  max-width:50px;
  max-height:50px;
}

Du javascript


Dans Module > Gestion des codes javascripts > Créer un nouveau javascript.
Tu coche comme ceci :
Afficher les réponses des sujets dans certains forums sous forme de "commentaires de blogs" 211

Et tu colles le code disponible dans quelques lignes en mettant à jour cette partie :
Code:
if(forum=='8' || forum=='2'){
Pour savoir quoi mettre, tu te mettre dans ton forum (par exemple pour moi : https://maven.forumactif.org/f8-nom-du-forum-n1 ) et récupérer juste le numéro qui suit le F : https://maven.forumactif.org/f 8 -nom-du-forum-n1

Tu peux en mettre un seul (et donc retirer || et ce qui suit), ou en mettre bien plus et dans ce cas il te faut rajouter avant la fermeture de parenthèse : || forum=="X"

Tu dois également mettre à jour la version de ton forum :
Code:
 var version='phpbb3';

Code:
$(function(){
  // On crée différentes variable qui, dans l'ordre, vont récupérer :
  // Le lien pour cibler le forum, la class utilisé par les messages,
  //la class utilisée pour le profil, l'élèment pour cibler l'avatar,
  //l'élèment pour récupétet l'avatar et la class pour cibler le corps du message
  var ciblerForum,
  message,
  ciblerProfil,
  ciblerAvatar,
  recupererAvatar,
  ciblerCorps;
 
  // On défini notre version. Syntaxe à utiliser : phpbb3, punbb, modernbb, invision, awesomebb
  var version='phpbb3';

  // On rempli toutes les variables selon la version
  switch (version) {
    case 'phpbb3':
      ciblerForum='.pathname-box';
      message='.post';
      ciblerProfil='.postprofile';
      ciblerAvatar='.postprofile  a[href*=/u] img';
      recupererAvatar='dt a[href*=/u]:first-child';
      ciblerCorps='.postbody';
      break;

    case 'punbb':
      ciblerForum='.crumbs';
      message='.post';
      ciblerProfil='.postbody .user';
      ciblerAvatar='.user-basic-info  a[href*=/u] img';
      recupererAvatar='.user-basic-info a[href*=/u]:first-child';
      ciblerCorps='.postmain';
      break;

    case 'invision':
      ciblerForum='#navstrip';
      message='.post';
      ciblerProfil='.postprofile';
      ciblerAvatar='.postprofile-details  a[href*=/u] img';
      ciblerCorps='.post-container';
      recupererAvatar='dt a[href*=/u]:first-child';
      break;

    case 'modernbb':
      ciblerForum='.sub-header-path';
      message='.post';
      ciblerAvatar='.postprofile  a[href*=/u] img';
      ciblerProfil='.postprofile';
      ciblerCorps='.postbody';
      recupererAvatar='dt a[href*=/u]:first-child';
      break;

    case 'awesomebb':
      ciblerForum='#breadcrumbs';
      message='.post-wrap';
      ciblerAvatar='.post-aside .avatar-big a';
      recupererAvatar='.avatar-big';
      ciblerProfil='.post-aside';
      ciblerCorps='.post';
      break;
    }

  // On récupère le forum où on se trouve
  var forum= $(ciblerForum).html().split("/f");
  forum= forum[1].split("-");
  forum=forum[0];

  // Si on se trouve dans un des forums souhaité
  if(forum=='8' || forum=='2'){
    // On initialise une variable "i" qui va compter le nombre de messages.
    if (version=="invision"){
      var i =-1;
    }else{
      var i=0;
    }
    // Pour chaque message
    $(message).each(function(){
      // On incrémente notre variable
      i++;
      // Si on est après le premier message
      if(i>1){
        // Si c'est le second
        if(i==2){
          //On ajoute une marge avant.
          $(this).css('margin-top','50px');
        }
        // On récupère l'avatar du posteur et on l'intègre dans la div qu'on a ajouté au template
        var avatar = $(this).find(ciblerAvatar).parent(recupererAvatar).html();
        $(this).find(".avatarBlog").html(avatar);
        // On cache la partie "profil"
        $(this).find(ciblerProfil).css('display','none');
       
        // Pour les versions punbb et invision on a besoin de retirer d'autres marges
        if(version=='punbb'){
        $(this).find('.postfoot').css('margin-left','0');
        $(this).find('.postmain').css('margin-left','0');
        }else if(version=="invision"){
          $(this).find('.post-container').css('margin-left','0');
        }
        // On demande à la partie contenant le message de prendre toute la place
        $(this).find(ciblerCorps).css('width','100%');
        // On ajoute une marge à gauche pour faire le retrait
        $(this).css('margin-left','4%');
      }
    });
  }
});


_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

Post-It des Râleuses