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.

Chatbox Modding

View previous topic View next topic Go down

Solved Chatbox Modding

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

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

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
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 on April 15th 2015, 3:11 pm

help? Bump.

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 on April 16th 2015, 2:49 pm

Any help with this would be greatly appreciated @Ange

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 on 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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chatbox Modding

Post by FrOsTyXi on 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


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
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 on 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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chatbox Modding

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

@Ange silly thing didn't move lol

And thank you for taking the time to assist!

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 on 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
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 on 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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chatbox Modding

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

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

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 on April 17th 2015, 2:54 pm

You're welcome ^^

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
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