Balises spoiler

3 participants

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

Résolu Balises spoiler

Message par Nunki Lun 15 Juin 2020 - 9:13

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 Wink


Dernière édition par Nunki le Mar 16 Juin 2020 - 6:59, édité 1 fois
Nunki

Nunki
Nouveau membre

Messages : 11
Inscrit(e) le : 17/02/2019

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

Résolu Re: Balises spoiler

Message par *Splash* Lun 15 Juin 2020 - 10:13

Hi
Dans la CSS tu peux tenter ce code :
Code:
.spoiler_content.hidden {
    display: block;
    background-color: lightgreen;
    font-family: monospace;
}

Balises spoiler Spoile10
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balises spoiler

Message par Nunki Lun 15 Juin 2020 - 10:31

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 Wink
Nunki

Nunki
Nouveau membre

Messages : 11
Inscrit(e) le : 17/02/2019

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

Résolu Re: Balises spoiler

Message par .truelove Lun 15 Juin 2020 - 10:50

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

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

.truelove
**

Messages : 71
Inscrit(e) le : 27/09/2015

https://everybodylies.forumactif.com/
.truelove a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balises spoiler

Message par *Splash* Lun 15 Juin 2020 - 10:56

En ajoutant cette ligne pour la couleur
Code:
background: red!important;
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balises spoiler

Message par Nunki Lun 15 Juin 2020 - 10:57

Je vais essayer d'être plus clair Neutral

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
Nunki

Nunki
Nouveau membre

Messages : 11
Inscrit(e) le : 17/02/2019

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

Résolu Re: Balises spoiler

Message par *Splash* Lun 15 Juin 2020 - 11:22

*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balises spoiler

Message par Nunki Lun 15 Juin 2020 - 11:50

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

Nunki
Nouveau membre

Messages : 11
Inscrit(e) le : 17/02/2019

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

Résolu Re: Balises spoiler

Message par Nunki Lun 15 Juin 2020 - 13:55

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
Nunki

Nunki
Nouveau membre

Messages : 11
Inscrit(e) le : 17/02/2019

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

Résolu Re: Balises spoiler

Message par *Splash* Lun 15 Juin 2020 - 15:16

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é
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balises spoiler

Message par Nunki Lun 15 Juin 2020 - 20:56

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

Nunki
Nouveau membre

Messages : 11
Inscrit(e) le : 17/02/2019

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

Résolu Re: Balises spoiler

Message par *Splash* Lun 15 Juin 2020 - 21:03

*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balises spoiler

Message par Nunki Lun 15 Juin 2020 - 21:08

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
Nunki

Nunki
Nouveau membre

Messages : 11
Inscrit(e) le : 17/02/2019

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

Résolu Re: Balises spoiler

Message par *Splash* Lun 15 Juin 2020 - 21:12

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.

*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balises spoiler

Message par Invité Mar 16 Juin 2020 - 4:03

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++
Anonymous

Invité
Invité


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

Résolu Re: Balises spoiler

Message par Nunki Mar 16 Juin 2020 - 6:56

Merci Milouze14, je viens de le coller a l'endroit prévu. Une fois script ajouté, comment je l'utilise ? Embarassed
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 Embarassed

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

Nunki
Nouveau membre

Messages : 11
Inscrit(e) le : 17/02/2019

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

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

- Sujets similaires

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