Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Limiter la longueur des citations

Voir le sujet précédent Voir le sujet suivant Aller en bas

Astuce Limiter la longueur des citations

Message par Walt le Ven 14 Avr 2017 - 11:48

Limiter la longueur des citations


Ce tutoriel vous permet de limiter la hauteur des citations afin de ne pas rallonger inutilement vos sujets. Par défaut, vos citations seront limitées à 400px de hauteur, en intégrant un lien permettant de poursuivre la lecture. Ce script est compatible avec toutes les versions de forum.



Installation du script

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Limiter citations" et pour placement "Sujets".

Insérez-y le code suivant :
Code:
/* globals jQuery */
   
    /**
    * Make tall quotes on topics collapsed.
    *
    * @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
    * @license MIT
    */
   
    var FA = FA || {};
   
    FA.Topic = FA.Topic || {};
   
    FA.Topic.QuoteCollapse = (function($, settings) {
      'use strict';
   
      var $quotes;
      var version;
   
      /**
      * Initialization function
      */
      function QuoteCollapse() {
        var self = this;
   
        $(function() {
          $.each({
            'phpbb2': 'table.bodylinewidth',
            'phpbb3': 'body#phpbb',
            'punbb': 'div.pun',
            'invision': 'div#ipbwrapper',
            'modernbb': 'body#modernbb',
            'mobile': 'div#mpage-body',
            'mobile-modern': 'body#mpage-body-modern',
          }, function(key, selector) {
            if ($(selector).length !== 0) {
              version = key;
            }
          });
   
          if (!version) {
            return;
          }
   
          self.init();
          self.collapse();
        });
      }
   
      QuoteCollapse.prototype.init = function() {
        switch (version) {
          case 'phpbb2':
            $quotes = $('.postbody dl.codebox > dd');
            break;
          case 'phpbb3':
            $quotes = $('.postbody blockquote');
            break;
          case 'punbb':
            $quotes = $('.postbody blockquote');
            break;
          case 'invision':
            $quotes = $('.postbody blockquote');
            break;
          case 'modernbb':
            $quotes = $('.postbody blockquote');
            break;
          case 'mobile':
            $quotes = $('.content blockquote .quote_content');
            break;
          case 'mobile-modern':
            $quotes = $('.post-content blockquote .quote_content');
            break;
          default:
            return;
        }
   
        $quotes
          .addClass('fa-quote')
          .append($('<a>', {
            href: '#',
            class: 'fa-quote-expand',
            text: settings.label,
          }));
   
        $quotes.on('click', '.fa-quote-expand', function(event) {
          event.preventDefault();
   
          $(this)
            .closest('.fa-quote')
            .removeClass('fa-quote-collapsed');
        });
      };
   
      QuoteCollapse.prototype.collapse = function() {
        $quotes.each(function() {
          var $self = $(this);
   
          if ($self.height() > settings.height) {
            $self.addClass('fa-quote-collapsed');
          }
        });
      };
   
      return new QuoteCollapse();
    }(jQuery, {
      height: 400,
      label: 'Continuer la lecture',
    }));

Installation du CSS

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Ajoutez le code suivant à votre CSS :
Code:
/** BEGIN Quote Collapse */
.fa-quote-collapsed {
   display:block;
   height:200px;
   overflow:hidden;
   position:relative;
}
a.fa-quote-expand {
   display:none;
   position:absolute;
   z-index:1;
   left:50%;
   width:150px;
   margin-left:-75px;
   height:30px;
   line-height:30px;
   bottom:15px;
   text-align:center;
   text-decoration:none;
   color:inherit;
   background-color:#fff;
   border:1px #999 solid;
}
.fa-quote-collapsed a.fa-quote-expand {
   display: block;
}
/** END Quote Collapse */

L'astuce devrait être fonctionnelle. Very Happy

avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 5087
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum