Button to choose the message background

by Ange Tuteur December 5th 2014, 9:16 am

Button to choose the message background

This tutorial will help you add a button Button to choose the message background Hrf5w1i

to the editor that allows you to choose the background of a post.

Button to choose the message background Captur57

Installation

So the background is visible in the editor and in the right place on posts, add this to your stylesheet ( Administration Panel > Display > Colors > CSS stylesheet ) :

Code:: div.sceditor-container iframe, div.sceditor-container textarea { background:transparent } .postbg { background-position:0 0; background-repeat:repeat; }

Then go to Administration Panel > Modules > JavaScript codes management and create a new script.

Title : Your choice
Placement : In all the pages

Code:: $(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 of message"><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 }) } }) }) } });

You can change the list of background images here :

Code:: 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

It is necessary that the image addresses are separated by commas.

Tricks

• It is possible to have a background image that is not in the script, by placing this at the beginning of your message :
Just replace https://address-of-image by the URL of your image.

Code:: [postbg=https://address-of-image]

• Clicking the button automatically changes to the next image in the list. Pressing the button while holding the CTRL key, removes the background image and goes back to the beginning of the list.