FluxBB.fr

Le site des utilisateurs francophones de FluxBB.

Recherche rapide

Vous n'êtes pas identifié(e).

Version 1.4.13 : [.tar.gz][.zip] (maj 20/10/2014)
Pack langue française pour 1.4.x : [.zip] (maj 06/01/2012)

Branche 1.5.x : fluxbb.org
Pack langue française pour 1.5.x : [.zip] (maj 14/01/2016)

Ancienne Version 1.2.24 fr : [.zip] (maj 26/08/2011)

Vous avez un problème ?
Avant de poser votre question sur les forums d'entraide nous vous invitons à consulter :

#1 18-01-2014 19:32:14

alex83270
Habitué
Inscription : 06-11-2013
Messages : 162

Ajout d'une balise [spoiler] personalisable.

Bonjour,
j'espère réussir à aider des personne comme beaucoup m'ont aidé.

Voici une petite mod / astuce qui a été créé à partir de :
http://fluxbb.fr/forums/viewtopic.php?id=13335

Un grand merci à David18 qui m'a énormément aidé depuis que je suis sur ce site.

Avec un peu de mélange de :
http://www.kafeinemarketing.com/collapsing-divs-jquery/

Donc voici un spoiler qui marche et personnalisable avec une séparation du teaser et du contenu caché, elle peut être aussi utilisé avec la FluxToolbar.

Il est aussi possible de créer une section dans le help.php mais je ne l'ai pas fais dans la mod.

PS : Je suis un débutant donc a mon avis des erreurs il y en aura mais pour l'instant j'en ai pas.

Download : http://www.mediafire.com/view/du2dgc4c9 … oiler).txt

Pastebin : http://pastebin.com/RQt2SzhY

Astuce : Pour ceux qui veulent changer "spoiler" par "montrer" et "cacher" voici le code :

parser.php

CHANGER L'ANCIEN CODE PAR :

	$replace[] = '<div class="spoiler"><div class="teaser"><p class="show">Montrer</p><p class="hide"><Cacher></p></div><div class="contenu">$1</div></div>'; // SPOILER




main.tpl

CHANGER L'ANCIEN CODE PAR :

// AJOUTER || SPOILER
$(document).ready(function() {
jQuery(".contenu").hide();
jQuery(".teaser").click(function()
{
jQuery(this).next(".contenu").slideToggle(500);
var title = $('.show');
if (title.text() == 'Montrer') title.text('Cacher');
else title.text('Montrer');
});
});





style.css

CHANGER L'ANCIEN CODE PAR :

 /* AJOUTER || SPOILER
 ----------------------------------------------------------------*/
div.spoiler {
	margin: 0 0 5px 0;
 }

div.teaser {
	padding: 5px 10px;
	margin-bottom: -5px;
	cursor: pointer;
	position: relative;
	background-color: rgb(35, 35, 35);
	border-top: 5px solid rgb(48, 206, 0);
	width: 7.5%;
 }
 
p.show {
	color: rgb(48, 206, 0);
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	padding: 0px;
 }

p.hide {
	color: rgb(48, 206, 0);
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	padding: 0px;
 }

div.contenu {
	padding: 5px 10px;
	background-color: rgb(35, 35, 35);
	color: white;
	border-top: 5px solid rgb(48, 206, 0);
 }

/!\ Petit Problème /!\ :

petit problème, la balise ne suis pas le texte,
si on centre le texte ne suis pas.
bugspoiler.png

Exemple :

spoilervie.png

Amicalement.

Dernière modification par alex83270 (18-01-2014 19:33:17)

Hors ligne

Pied de page des forums