Balises spoiler

[Nunki]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :  

Description du problème

Bonjour à tous,

J'ai chercher un peu mais je ne trouve pas de demande identique.

J'aimerais personnaliser UNE balise spoiler. En temps normal le texte de la balises est gris, mais à l'occasion je voudrais colorer ce texte. Est-ce possible ?
J'ai essayer la balises color autour de mon texte mais ça ne marche pas
ex [ spoiler="[ color=red]"red"]Mon texte[ /color]"]ABCDE[ /spoiler]

Si ce n'est pas possible, existe t'-il un script pour avoir une deuxieme balise spoiler, du genre [ spoiler2]

Merci d'avance

[*Splash*]

Hi
Dans la CSS tu peux tenter ce code :

Code:

.spoiler_content.hidden {
    display: block;
    background-color: lightgreen;
    font-family: monospace;
}

[Nunki]

Bonjour,

Ce n'est pas la couleur de fond du contenu que je veux changer mais celui du titre donné à mon spoiler, mais pas forcement le même.
A l'occasion je veux pouvoir changer cette couleur. D’où éventuellement un deuxième code css pour une balise spoiler2.

Mais merci quand même

[.truelove]

Coucou   Tu peux essayer ce code en personnalisant comme tu le souhaites :

Code:

.spoiler {
font-family:arial;
color:#aaa;
text-align:justify;}

[*Splash*]

En ajoutant cette ligne pour la couleur

Code:

background: red!important;

[Nunki]

Je vais essayer d'être plus clair

Je veux pouvoir utiliser le spoiler classique

Titre:

Mais aussi une autre, soit en pouvant changer la couleur du TITRE soit carrément en ayant une deuxième balise Spoiler

[*Splash*]

Alors il faut prendre note de ce sujet pour ajouter un BBCode sur le forum :
https://forum.forumactif.com/t375156-comment-creer-du-bbcode-sur-son-forum-en-phpbb3

Et celui-ci : https://forum.forumactif.com/t311303-template-et-ajout-de-balise-bbcode

[Nunki]

Merci Splash

Si j'ai bien compris (car je ne suis pas du tout familiarisé avec la prog, que ce soit HTML ou CSS)

Il faut que j'ajoute ce code HTML dans mon post :

Code:

<span class='Bulle'>VOTRE TEXTE</span>

sauf qu'au lieu d'avoir Bulle je mets spoiler2

Et il faut que j'ajoute ce css dans le panneau d'admin :

Code:

.Bulle{
color: #000000; background: white; margin: 4px; padding: 5px; display: inline-block; border: 1px solid #ff3333; border-radius: 5px; box-shadow: 0 0 4px #ff3333; }

toujours en remplacant Bulle par spoiler2 et que je modifie le reste à ma guise

EDIT :

Bon j'ai essayé et ça donne rien XD, j'ai même essayé une balise [spoiler2] sur mon post à la place de <span.....

[Nunki]

Alors, j'avais pas vu un lien,

Si je comprends bien, il faut que je rajoute dans Overall_header deux lignes du style :
<script src=""></script>
<script src=""></script>
Mais quoi mettre dedans ? car les liens indiqués ne m'apporteront pas ce que je veux j'imagine.

Ensuite dans overall_footer (begin ou end ?) encore une ligne du même style

Et enfin dans le CSS, vu qu'il n'y a pas d'ajout de BBCode, je suis censé mettre :

Code:


    $(function(){
      $.getScript("http://deckbox.org/javascripts/bin/tooltip.js",function(){
          $.getScript("http://deckbox.org/javascripts/bin/decks.js",function(){
            Deckbox.utils.DeckParser.initializePhpbb('mtg');
          });
      });
    });


en modifiant les 3 liens en conséquence.

Si oui, et en imaginant que ça marche, comment modifier ensuite pour lui donner la même apparence que mes balises spoiler déjà existante ?

Encore merci pour vos conseils

[*Splash*]

Avec ce tuto il est possible d'ajouter un menu déroulant sur la barre d'outils de l'éditeur pour sauvegarder des messages préformatés

On place ce code en CSS :

Code:

#savec { position:relative; }
.save-bloc { color: #555!important; z-index: 1000; padding: 5px;  border: 1px solid #BCBCBC; background: #efefef url(https://2img.net/i/fa/prosilver/bg_button.gif) repeat-x; display:none;top:20px;left:0px;position:absolute; white-space:nowrap; }
.save-bloc div:hover { color: #050505!important; }
.save-bloc div { cursor: pointer; }
.save-bloc select { background: #ccc; border: 1px solid #aaa; margin-bottom: 5px; }

Ensuite mettre ce script sur toutes les pages :

Code:

function insertText(a) {
  var c = localStorage.getItem("fasave" + a);
  if(null === c) {
    $("#savep div[onClick^='insertText(" + a + ")']").remove()
  }else {
    if(1 == $("#savep select").val()) {
      localStorage.removeItem("fasave" + a), localStorage.removeItem("fasavet" + a), $("#savep div[onClick^='insertText(" + a + ")']").remove()
    }else {
      if(2 == $("#savep select").val()) {
        var b = localStorage.getItem("fasavet" + a), b = prompt("Entrer le titre de la sauvegarde :", b ? b : "");
        null !== b && ("" == b ? (localStorage.removeItem("fasavet" + a), $("#savep div[onClick^='insertText(" + a + ")']").text('"' + c.substr(0, 30).replace(/</g, "<").replace(/>/g, ">") + (30 < c.length ? "..." : '"'))) : (localStorage.setItem("fasavet" + a, b), $("#savep div[onClick^='insertText(" + a + ")']").text(b)))
      }else {
        replaceTxt(c)
      }
    }
  }
}
function replaceTxt(a) {
  var c = $(".sourceMode textarea");
  if(c.length) {
    start = c[0].selectionStart;
    end = c[0].selectionEnd;
    stop = c[0].scrollTop;
    sleft = c[0].scrollLeft;
    text = c.val();
    for(var b = [""], e = /^([\s\S]*?)(((\$\$)+)(\$?)|(\$))0([\s\S]*)$/, d;d = a.match(e);) {
      b[b.length - 1] += d[1], "$" == d[6] || "" == d[4] ? b[b.length] = "" : b[b.length - 1] += d[3].substr(0, d[3].length / 2) + "0", a = d[7]
    }
    b[b.length - 1] = a;
    e = text.substring(start, end);
    a = b[0];
    d = a.length;
    for(var f = 1;f < b.length;f++) {
      a += e, a += b[f]
    }
    c.val(text.substr(0, start) + a + text.substr(end));
    c[0].selectionStart = start + d;
    c[0].selectionEnd = 1 < b.length ? end + d : start + d;
    c[0].scrollTop = stop;
    c[0].scrollLeft = sleft
  }
}
function saveExport() {
  for(var a = null === localStorage.getItem("fasave-length") ? 0 : localStorage.getItem("fasave-length"), c = "[", b = 0;b < a;b++) {
    var e = localStorage.getItem("fasave" + b);
    if(null !== e) {
      var d = localStorage.getItem("fasavet" + b);
      "[" != c && (c += ",");
      c += (null === d ? "" : escape(d) + ":") + escape(e)
    }
  }
  replaceTxt(c + "]")
}
function saveImport() {
  var a = $(".sourceMode textarea").val().substring($(".sourceMode textarea").prop("selectionStart"), $(".sourceMode textarea").prop("selectionEnd")).replace(/\s/g, "");
  if(/^\[[%/^a-zA-Z0-9\*@_\+\.\/:,-]*\]$/.test(a)) {
    for(var a = a.substr(1, a.length - 2).split(","), c = 0;c < a.length;c++) {
      var b = a[c].split(":");
      2 == b.length ? saveItem(unescape(b[1]), unescape(b[0])) : saveItem(unescape(b[0]), "")
    }
  }
}
function saveSelect() {
  var a = $(".sourceMode textarea");
  0 != $(a).prop("selectionStart") - $(a).prop("selectionEnd") && (a = a.val().substring($(a).prop("selectionStart"), $(a).prop("selectionEnd")), saveItem(a, ""))
}
function saveItem(a, c) {
  for(var b = parseInt(null === localStorage.getItem("fasave-length") ? 0 : localStorage.getItem("fasave-length")), e = 0;e < b;e++) {
    var d = localStorage.getItem("fasave" + e);
    null !== d && d == a && (localStorage.removeItem("fasavet" + e), $("#savep div[onClick^='insertText(" + e + ")']").remove(), localStorage.removeItem("fasave" + e))
  }
  localStorage.setItem("fasave" + b, a);
  "" != c && localStorage.setItem("fasavet" + b, c);
  localStorage.setItem("fasave-length", b + 1);
  $("#savep select").after('<div class="savedt" onClick="insertText(' + b + ');return false;">' + (c ? c : """ + a.substr(0, 30).replace(/</g, "<").replace(/>/g, ">") + (30 < a.length ? "..." : """)) + "</div>")
}
$(function(){$(function() {
  $("#text_editor_textarea").length && window.localStorage && "Microsoft Internet Explorer" != navigator.appName && ($('.sceditor-button-source').before('<a class="sceditor-button" unselectable="on" title="Sauvegarde" id="save_button"><div unselectable="on" style="background-image:url(https://i.servimg.com/u/f49/15/59/73/38/save10.png)">Sauvegarde</div></a>'), $("#save_button").click(function(a) {
    a.stopPropagation();
    if(a.shiftKey) {
      $("#saveshift").length || $('<div class="save-bloc sceditor-dropdown" id="saveshift" style="display:none"><div onClick="saveExport()">Exporter</div><div onClick="saveImport()">Importer</div></div>').appendTo("body").css({top:$('#save_button').offset().top,left:$('#save_button').offset().left,marginTop: $('#save_button').outerHeight(),position:'absolute'}), $("#savep").hide(300), $("#saveshift").toggle(300)
    }else {
      if(!$("#savep").length) {
        $('<div class="save-bloc sceditor-dropdown" id="savep" style="display:none"><div><select style="margin-bottom:5px"><option value="0">Insérer</option><option value="1">Supprimer</option><option value="2">Nommer</option></select></div><div id="saves" style="display:none"><br /><span onClick="saveSelect()">Sauver la sélection</span></div></div>').appendTo("body").css({top:$('#save_button').offset().top,left:$('#save_button').offset().left,marginTop: $('#save_button').outerHeight(),position:'absolute'});
        $("#savep").click(function(a) {
          a.stopPropagation()
        });
        for(var a = null === localStorage.getItem("fasave-length") ? 0 : localStorage.getItem("fasave-length"), c = 0;c < a;c++) {
          var b = localStorage.getItem("fasave" + c);
          null !== b && $("#savep select").after('<div class="savedt" onClick="insertText(' + c + ');return false;">' + (null === localStorage.getItem("fasavet" + c) ? """ + b.substr(0, 30).replace(/</g, "<").replace(/>/g, ">") + (30 < b.length ? "..." : """) : localStorage.getItem("fasavet" + c)) + "</div>")
        }
      }
      $("#saveshift").hide(300);
      $("#savep").toggle(300)
    }
  }), $(".sourceMode textarea").select(function() {
    $("#saves").show()
  }), $(".sourceMode textarea").bind("click keyup keydown", function() {
    0 == $(this).prop("selectionStart") - $(this).prop("selectionEnd") && $("#saves").hide()
  }))
})});

Par contre je ne trouve pas de code pour insérer un Spoiler personnalisé

[Nunki]

Quand tu dis de mettre le script sur toutes les pages, c'est sur la trentaine de templates ?

[*Splash*]

Non du tout !
Regarde ce tuto : https://lesforums.caforum.fr/t364-tuto-le-javascript

[Nunki]

Ok ^^ Je pourrais essayer tout ça demain. La ce que j'ai c'est pour faire un menu déroulant dans l’édition de message ? Il manque plus qu'un code pour les spoilers personnalisé c'est ça ?

Merci Splash

[*Splash*]

Oui, ça ajoute un menu dans la barre d'outils de l'éditeur et grâce à ce menu tu peux enregistrer des des formules à ressortir comme tu le veux sans être obligé de les réécrire à chaque fois.

[Invité]

Hello les ami(e)s,
pourquoi charger ce script si il ne sert à rien Fred?

Ce script ferait l'affaire :

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Codes Javascript

Mets un titre explicite.
Coches sur toutes les pages.


Déposes ceci:

Code:


$(function(){$(function(){
//L IMAGE DU BOUTON SUR L EDITEUR
var spoiler_img="https://i.servimg.com/u/f20/20/11/87/27/issue10.png";
  //TEXTE DE L INFOBULLE AU SURVOL DU BOUTON
var spoiler_title="Spoiler personnalisé";
$('<a class="sceditor-button" unselectable="on" title="'+spoiler_title+'"><div unselectable="on"style="background-image:url('+spoiler_img+')">'+spoiler_title+'</div></a>').insertAfter('a.sceditor-button-faspoiler').click(function(){
$('#text_editor_textarea').sceditor("instance").insert('<dl class="codebox spoiler"><dt style="cursor: pointer;"><span style="color:red;">MODIFIER LE TEXTE ICI</span></dt><dd><div class="spoiler_content">MODIFIER LE CONTENU DU SPOILER ICI</div></dd></dl>');
});})});




Penses a cliquer sur le bouton VALIDER

a++

[Nunki]

Merci Milouze14, je viens de le coller a l'endroit prévu. Une fois script ajouté, comment je l'utilise ?
Je n'ai rien de plus sur la barre de boutons d’édition des messages (Gras Italique etc...)

EDIT : je n'avais pas activé la gestion des scripts java

Problème résolu, merci beaucoup à vous deux