The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Chatbox Modding

2 posters

Go down

Solved Chatbox Modding

Post by FrOsTyXi April 14th 2015, 3:58 pm

Hello friends I have a question : You can add the chatbox images of a group ?

Chatbox Modding Test1210   I would like it to look like this.
[list=linenums]
Code:
/**************************************************************************
 * Module: cb_avatar
 * Description: Add avatar of members in the "Online / Away" user list
 * Author: Made and Optimizations by JScript - 2015/02/17
 * Version: RC1 (Release candidate 1!)
 ***************************************************************************/

// Redefine function!
function insertChatBox(chatbox_id, chatbox_url) {
   return insertChatBoxNew(chatbox_id, chatbox_url);
}
// Redefine function!
function insertChatBoxNew(chatbox_id, chatbox_url) {
   // Put the chat box on top of widgets!
   $('#' + chatbox_id).parent().detach().prependTo('#wrapper');

   document.getElementById(chatbox_id).innerHTML = '<iframe src="/chatbox/index.forum?archives=1" id="frame_chatbox" scrolling="no" width="100%" height="345px" marginwidth="0" marginheight="0" frameborder="0"></iframe>';

   $('#frame_chatbox').load(function(){
      var oIframe = (document.getElementById("frame_chatbox").contentWindow || document.getElementById("frame_chatbox").contentDocument),
         script = oIframe.document.createElement("script");

      script.type = "text/javascript";
      script.innerHTML =
         'chatbox.init();\n' +
         'var interval = setInterval(function() {\n' +
         '   chatbox.init();\n' +
         '}, 5000);\n' +
         'Chatbox.prototype.refresh = function(data) {\n' +
         '   if (data.error) {\n' +
         '      $("body").html(data.error)\n' +
         '   } else {\n' +
         /*
         '      if (this.connected) {\n' +// && !this.archives) {\n' +
         '         $("#chatbox_footer").css("display", "block");\n' +
         '         $("#chatbox_messenger_form").css("display", "block");\n' +
         '         $("#chatbox_messenger_form").css("visibility", "visible")\n' +
         '      } else {\n' +
         '         $("#chatbox_footer").css("display", "none");\n' +
         '         $("#chatbox_messenger_form").css("display", "none");\n' +
         '         $("#chatbox_messenger_form").css("visibility", "hidden")\n' +
         '      }\n' +
         */
         '      if (this.connected) {\n' +
         '         $("#chatbox_footer").css("display", "block");\n' +
         '         $("#chatbox_messenger_form").css("display", "block");\n' +
         '         $("#chatbox_messenger_form").css("visibility", "visible")\n' +
         '         \n' +
         '         $("#chatbox_display_archives").show();\n' +
         '         $("#chatbox_option_co").hide();\n' +
         '         $("#chatbox_option_disco, #chatbox_footer").show();\n' +
         '         $(".format-message").each(function() {\n' +
         '            var name = $(this).attr("name");\n' +
         '            var value = my_getcookie("CB_" + name);\n' +
         '            $(this).prop("checked", parseInt(value) ? true : false)\n' +
         '         });\n' +
         '         this.format();\n' +
         '         if (data.lastModified) {\n' +
         '            this.listenParams.lastModified = data.lastModified\n' +
         '         }\n' +
         '      } else {\n' +
         '         $("#chatbox_footer").css("display", "none");\n' +
         '         $("#chatbox_messenger_form").css("display", "none");\n' +
         '         $("#chatbox_messenger_form").css("visibility", "hidden")\n' +
         '         \n' +
         '         $("#chatbox_option_co").show();\n' +
         '         $("#chatbox_option_disco, #chatbox_footer").hide()\n' +
         '         $("#chatbox_display_archives").hide()\n' +
         '      }\n' +
         '      if (data.users) {\n' +
         '         this.users = [];\n' +
         '         $(".online-users, .away-users").empty();\n' +
         '         $(".member-title").hide();\n' +
         '         for (var i in data.users) {\n' +
         '            var user = data.users[i];\n' +
         '            this.users[user.id] = user;\n' +
         //'            var username = "<span style=\'color:" + user.color + "\'>" + (user.admin ? " " : "") + "<span class=\'chatbox-username chatbox-user-username\' data-user=\'" + user.id + "\' >" + user.username + "</span></span>";\n' +
         '            var username = "";\n' +
         '            for (var j in data.messages) {\n' +
         '               var message = data.messages[j];\n' +
         '               if (message.userId == user.id) {\n' +
         '                  if (message.user.avatar) {\n' +
         '                     username = "<span class=\'cb-avatar\'><img src=\'" + message.user.avatar + "\' style=\'height: 24px; width: 24px; margin-right: 4px;\'/></span>";\n' +
         '                  }\n' +
         '               }\n' +
         '            }\n' +
         '            username += "<span style=\'color:" + user.color + "\'>" + (user.admin ? " " : "") + "<span class=\'chatbox-username chatbox-user-username\' data-user=\'" + user.id + "\' >" + user.username + "</span></span>";\n' +
         '            var list = user.online ? ".online-users" : ".away-users";\n' +
         '            $(list).append("<li>" + username + "</li>")\n' +
         '         }\n' +
         '         if (!$(".online-users").is(":empty")) {\n' +
         '            $(".member-title.online").show()\n' +
         '         }\n' +
         '         if (!$(".away-users").is(":empty")) {\n' +
         '            $(".member-title.away").show()\n' +
         '         }\n' +
         '      }\n' +
         '      if (data.messages) {\n' +
         '         var scroll = !this.messages || this.messages.length != data.messages.length;\n' +
         '         this.messages = data.messages;\n' +
         '         $("#chatbox").empty();\n' +
         '         if (this.messages) {\n' +
         '            var cb_content = "",\n' +
         '               message = "",\n' +
         '               html = "",\n' +
         '               msg = "";\n' +
         '            for (var j = 0, len = this.messages.length; j < len; j++) {\n' +
         '               message = this.messages[j];\n' +
         '               html = "<p class=\'chatbox_row_" + (j % 2 == 1 ? 2 : 1) + " clearfix\'><span class=\'right desc\'><span class=\'date-and-time\' title=\'" + message.date + "\'>(" + message.datetime + ")</span></span>";\n' +
         '               if (message.userId == -10) {\n' +
         '                  html += "<span class=\'msg\'><span style=\'color:" + message.msgColor + "\'><strong> " + message.msg + "</strong></span></span>"\n' +
         '               } else {\n' +
         '                  html +=\n' +
         '                     "<span class=\'user-msg\'>";\n' +
         '                        if (this.avatar) {\n' +
         '                           html += "   <span class=\'cb-avatar\'><img src=\'" + message.user.avatar + "\' /></span>";\n' +
         '                        }\n' +
         '                     html +=\n' +
         '                        "<span class=\'user\' style=\'color:" + message.user.color + "\'>" +\n' +
         '                           "<strong> " + (message.user.admin ? " " : "") +\n' +
         '                              "<span class=\'chatbox-username chatbox-message-username\' data-user=\'" + message.userId + "\' >" + message.username + "</span> :&nbsp;" +\n' +
         '                           "</strong>" +\n' +
         '                        "</span>" +\n' +
         '                        "<span class=\'msg\'>" + message.msg + "</span>" +\n' +
         '                     "</span>";\n' +
         '               }\n' +
         '               html += "</p>";\n' +
         '               cb_content += html;\n' +
         '            }\n' +
         '            $("#chatbox").append(cb_content);\n' +
         '            if (scroll) {\n' +
         '               $("#chatbox")[0].scrollTop = $("#chatbox").prop("scrollHeight") * 2\n' +
         '            }\n' +
         '         }\n' +
         '      }\n' +
         '   }\n' +
         '};';
      oIframe.document.getElementsByTagName("head")[0].appendChild(script);
   });
}
This is the code I'm using , Thanks in advance
FrOsTyXi
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chatbox Modding

Post by FrOsTyXi April 15th 2015, 3:11 pm

help? Bump.
FrOsTyXi
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chatbox Modding

Post by FrOsTyXi April 16th 2015, 2:49 pm

Any help with this would be greatly appreciated @Ange
FrOsTyXi
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chatbox Modding

Post by Ange Tuteur April 16th 2015, 3:07 pm

Shh.. the fallen @Ange is sleeping... Shocked

You shouldn't need that code to display the avatar in the chatbox, as an option was added for it in the AP. ( link ) Unless you're using a non-forumotion chatbox, in which case I'm not sure. blackeye

As for the default chat, simply use the group color to add content onto usergroups. For example :
Code:
span.user[style="color:#00A86A"]:before, span.user[style="color:#00A86A"]::before {
  content:"text"
}

If you want an image instead of text, change "text" to url(src) where src is the URL of your image.. Wink
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chatbox Modding

Post by FrOsTyXi April 16th 2015, 3:29 pm

ok thank you now how can i move the image down abit? i made the code like this but the image never moved @Ange
Chatbox Modding Angete10

here is the code
Code:
span.user[style="color:#000000"]:before, span.user[style="color:#000000"]::before {
  content:url(http://i39.servimg.com/u/f39/18/83/30/50/psnbla11.png);padding-top:5px
}

Added top padding but no result.
FrOsTyXi
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chatbox Modding

Post by Ange Tuteur April 16th 2015, 4:16 pm

Adjusting the vertical alignment should work. Wink
Code:
span.user[style="color:#00A86A"]:before, span.user[style="color:#00A86A"]::before {
  content:url(http://i39.servimg.com/u/f39/18/83/30/50/psnbla11.png);
  vertical-align:top;
}
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chatbox Modding

Post by FrOsTyXi April 16th 2015, 4:25 pm

@Ange silly thing didn't move lol

And thank you for taking the time to assist!
FrOsTyXi
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chatbox Modding

Post by FrOsTyXi April 17th 2015, 1:45 pm

@Ange I tried everything I knew to get this image to move down but to no avail.

This is where i am tried"middle" but still nothing.

Code:
span.user[style="color:#000000"]:before, span.user[style="color:#000000"]::before {
  content:url(http://i39.servimg.com/u/f39/18/83/30/50/psnbla11.png);vertical-align:middle
}
FrOsTyXi
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chatbox Modding

Post by Ange Tuteur April 17th 2015, 1:53 pm

If that did not work, you can try adjusting the position.
Code:
span.user[style="color:#000000"]:before, span.user[style="color:#000000"]::before {
  content:url(http://i39.servimg.com/u/f39/18/83/30/50/psnbla11.png);
  position:relative;
  top:5px;
}
Adjust the 5px of top. You can use negative number to move it up. Wink
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chatbox Modding

Post by FrOsTyXi April 17th 2015, 1:57 pm

@Ange that was perfect!! thank you sir!!
FrOsTyXi
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chatbox Modding

Post by Ange Tuteur April 17th 2015, 2:54 pm

You're welcome ^^

Topic archived
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

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