Bottone per scegliere lo sfondo di un post

Tutorial Bottone per scegliere lo sfondo di un post

Messaggio Da Niko Dom 17 Gen 2021 - 16:39

Bottone per scegliere lo sfondo di un post


Questo tutorial ti aiuterà ad aggiungere un pulsante Bottone per scegliere lo sfondo di un post Hrf5w1iper scegliere lo sfondo del messaggio Hrf5w1iall'editor che ti permette di scegliere lo sfondo di un post.

Bottone per scegliere lo sfondo di un post Captur57

Installazione CSS

Andiamo verso Pannello di amministrazione ► Visualizzazione ► CSSs e immagini ► Foglio di stile CSS e aggiungiamo il seguente codice al nostro foglio di stile:
Codice:
div.sceditor-container iframe, div.sceditor-container textarea { background:transparent }
.postbg { background-position:0 0; background-repeat:repeat; }

Installazione Javascript

Andiamo versoPannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice javascript, assicuriamoci che la gestione sia attivata e creiamo un nuovo codice con queste impostazioni:
  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    $(function() {
      $("div.postbody").each(function() {
        var n = this;
        if($(".post-entry", n).length) {
          n = $(".post-entry", n)[0]
        }else {
          if($(".content", n).length) {
            n = $(".content", n)[0]
          }
        }
        while(n.nodeType != 3 && n.hasChildNodes()) {
          n = n.childNodes[0]
        }
        if(n.nodeType != 3) {
          return;
        }
        if(n.nodeValue.substr(0,8)  != "[postbg=") {
          return;
        }
        var m = n.nodeValue.match(/^\[postbg=([^\]]*)\]/);
        if(!m) return;
        $(this).closest("div.post-container,div.post,td.row1,td.row2,div.postmain").addClass("postbg").css("background-image", "url(" + m[1] + ")");
        n.nodeValue = n.nodeValue.replace(/^\[postbg=[^\[]*\]\n?/, "");
        if(!n.nodeValue && n.nextSibling && n.nextSibling.nodeType == 1 && n.nextSibling.tagName == "BR") {
          $(n.nextSibling).remove()
        }
      });
      if($("#text_editor_textarea").length && $.sceditor) {
        var bglist = "https://i.imgur.com/20aRJFn.png,https://i.imgur.com/DcTM2Ng.jpg,https://i.imgur.com/tkC3deY.jpg,https://i.imgur.com/pfTcnqF.png,https://i.imgur.com/dAQtdaR.gif,https://i.imgur.com/48CU2Qx.png,https://i.imgur.com/lRuwoVi.png,https://i.imgur.com/EHp45H1.png,https://i.imgur.com/8bhbqFF.png,https://i.imgur.com/tb80sYG.png,https://i.imgur.com/6LPhzcp.png,https://i.imgur.com/DkRuYf1.png,https://i.imgur.com/57F0z86.jpg,https://i.imgur.com/PZyMuXF.png".split(",");
        var bgnum = -1;
        var val = $("#text_editor_textarea").val();
        if(val.substr(0,8)  == "[postbg=") {
          var m = val.match(/^\[postbg=([^\]]*)\]/);
          if(m) {
            var r = $.inArray(m[1], bglist);
            if(r != -1) {
              bgnum = r
            }else {
              bgnum = bglist.length - 1
            }
            $(function() {
              $(".sceditor-container").css("background-position", "0 " + ($(".sceditor-toolbar").height() + 6) + "px");
              $(".sceditor-container").css("background-image", "url(" + m[1] + ")")
            });
            $("#text_editor_textarea").val(val.replace(/^\[postbg=[^\[]*\]/, ""))
          }
        }
        $(function() {
          if(!$("#text_editor_textarea").sceditor("instance")) {
            return
          }
          $('<a class="sceditor-button" unselectable="on" title="Background del messaggio"><div unselectable="on" style="background:url(https://i.imgur.com/Hrf5w1i.gif);opacity:1">Background of message</div></a>').insertAfter(".sceditor-button-fahide").click(function(e) {
            if(e.ctrlKey) {
              $(".sceditor-container").css("background-image", "");
              bgnum = -1
            }else {
              bgnum++;
              if(!bgnum) {
                $(".sceditor-container").css("background-position", "0 " + ($(".sceditor-toolbar").height() + 6) + "px")
              }
              $(".sceditor-container").css("background-image", "url(" + bglist[bgnum % bglist.length] + ")")
            }
          })
        });
        $(function() {
          $('form[name="post"]').submit(function() {
            if(bgnum != -1) {
              $("#text_editor_textarea").val(function(i, val) {
                return"[postbg=" + bglist[bgnum % bglist.length] + "]" + val
              })
            }
          })
        })
      }
    });


Modifiche

E' possibile modificare le immagini di sfondo disponibili cambiando questa parte del codice javascript:
Codice:
https://i.imgur.com/20aRJFn.png,https://i.imgur.com/DcTM2Ng.jpg,https://i.imgur.com/tkC3deY.jpg,https://i.imgur.com/pfTcnqF.png,https://i.imgur.com/dAQtdaR.gif,https://i.imgur.com/48CU2Qx.png,https://i.imgur.com/lRuwoVi.png,https://i.imgur.com/EHp45H1.png,https://i.imgur.com/8bhbqFF.png,https://i.imgur.com/tb80sYG.png,https://i.imgur.com/6LPhzcp.png,https://i.imgur.com/DkRuYf1.png,https://i.imgur.com/57F0z86.jpg,https://i.imgur.com/PZyMuXF.png

È necessario che gli indirizzi dell'immagine siano separati da virgole.

Trucchi

  • È possibile avere un'immagine di sfondo che non è nello script, inserendola all'inizio del messaggio:
    Codice:
    [postbg=URL_immagine]
    basta sostituire URL_immagine con l'URL della tua immagine.

  • Facendo clic sul pulsante si passa automaticamente all'immagine successiva nell'elenco. Premendo il pulsante mentre si tiene premuto il tasto CTRL, si rimuove l'immagine di sfondo e si torna all'inizio dell'elenco.



Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 28
Messaggi : 9573
Località : Provincia di Varese

https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.