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.

Message background

View previous topic View next topic Go down

Solved Message background

Post by Kami-sama on February 23rd 2016, 3:21 pm

Hello!

I followed this tutorial:
http://help.forumotion.com/t137252-button-to-choose-the-message-background#926885

Yet I have an issue. The background appears only like this:
Spoiler:

I would like it also to be under the avatar on the left side and in the bottom under the buttons (facebook, skype,..... ) How should I edit the script from the tutorial?

Kami-sama
Forumember

Female Posts : 86
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Message background

Post by Kami-sama on February 26th 2016, 6:51 pm

Up Wink

Kami-sama
Forumember

Female Posts : 86
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Message background

Post by Kami-sama on March 1st 2016, 10:42 am

up Wink

Kami-sama
Forumember

Female Posts : 86
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Message background

Post by Kami-sama on March 8th 2016, 5:41 pm

Soo.... it's not possible? Very Happy

Kami-sama
Forumember

Female Posts : 86
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Message background

Post by Genesis on March 8th 2016, 7:23 pm

So would you like the whole topic page background to be an image you choose?

Genesis
Helper
Helper

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Message background

Post by Kami-sama on March 9th 2016, 3:42 pm

No Wink in the tutorial image example you can see that background is under the post text and avatar. When I use the code, the background is only under the post text. (look at the picture in my first post). I would like the background to also be under the avatar on the left side and in the bottom under the buttons (facebook, skype,..... ) How should I edit the script from the tutorial?

Kami-sama
Forumember

Female Posts : 86
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Message background

Post by Ange Tuteur on March 9th 2016, 3:49 pm

Hey,

Change the script to the following for phpbb2 :
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(".post").find('> td').addClass("postbg").css("background-image", "url(" + m[1] + ")");
    $(this).closest(".post").next().find('> td').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
          })
        }
      })
    })
  }
});

It should apply the background to each cell in the post.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Message background

Post by Kami-sama on March 9th 2016, 5:37 pm

Thank you that works.

As I understand it takes ech table element ( <tr> ) and gives it background? And as I understand avatar section is one cell, post section is 2nd and contact buttons is 3rd section?

Now every section gets a background but you can see the "seams". Is it possible to give background to the element witch is "under" the 1st and 2nd cells (under the avatar and post), so there would not be any visible background pattern connection, as it is now.

This may sound a bit overly complicated, when I say it like that Very Happy

Kami-sama
Forumember

Female Posts : 86
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Message background

Post by Ange Tuteur on March 9th 2016, 7:01 pm

You could give it to the rows instead of the cells, but some browsers are iffy about that. Therefore, I'd suggest removing the border-spacing on the tables with this CSS rule :
Code:
.forumline { border-spacing:0; }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Message background

Post by Kami-sama on March 10th 2016, 4:19 pm

Ah, okey. Thank you a lot, Ange!

SOLVED

Kami-sama
Forumember

Female Posts : 86
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Message background

Post by SLGray on March 10th 2016, 6:58 pm

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36648
Reputation : 2443
Language : English
Location : United States

http://ztwds.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