par Walt 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 scriptPanneau 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', 'awesomebb': '#header-banner', }, 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; case 'awesomebb': $quotes = $('.post-content blockquote'); 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 CSSPanneau 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.
|