The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Button to choose the message background

View previous topic View next topic Go down

Button to choose the message background

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

Button to choose the message background

This tutorial will help you add a button to the editor that allows you to choose the background of a post.



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 = "http://i.imgur.com/20aRJFn.png,http://i.imgur.com/DcTM2Ng.jpg,http://i.imgur.com/tkC3deY.jpg,http://i.imgur.com/pfTcnqF.png,http://i.imgur.com/dAQtdaR.gif,http://i.imgur.com/48CU2Qx.png,http://i.imgur.com/lRuwoVi.png,http://i.imgur.com/EHp45H1.png,http://i.imgur.com/8bhbqFF.png,http://i.imgur.com/tb80sYG.png,http://i.imgur.com/6LPhzcp.png,http://i.imgur.com/DkRuYf1.png,http://i.imgur.com/57F0z86.jpg,http://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(http://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:
http://i.imgur.com/20aRJFn.png,http://i.imgur.com/DcTM2Ng.jpg,http://i.imgur.com/tkC3deY.jpg,http://i.imgur.com/pfTcnqF.png,http://i.imgur.com/dAQtdaR.gif,http://i.imgur.com/48CU2Qx.png,http://i.imgur.com/lRuwoVi.png,http://i.imgur.com/EHp45H1.png,http://i.imgur.com/8bhbqFF.png,http://i.imgur.com/tb80sYG.png,http://i.imgur.com/6LPhzcp.png,http://i.imgur.com/DkRuYf1.png,http://i.imgur.com/57F0z86.jpg,http://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 http://address-of-image by the URL of your image.
Code:
[postbg=http://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.






Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum