chat_body.html

Post Reply
User avatar
clight77
Donor
Donor
Posts: 25
Joined: Mon Mar 11, 2013 10:09 pm
Flag: Canada

chat_body.html

Post by clight77 » Tue Mar 12, 2013 9:11 pm

Hi space
Could you send me a copy of your chat_body.html ?

Please and thanks

Having trouble keeping the spacing between Name Date and message on different resolutions.

Mark

User avatar
spaceace
Site Owner
Site Owner
Posts: 901
Joined: Wed Dec 16, 2009 8:30 pm
Location: Ontario, Canada
Flag: Canada
Contact:

Re: chat_body.html

Post by spaceace » Fri Mar 15, 2013 9:41 am

here's one of the chat body's that i use here... so many to pick from and not sure if they will work on your setup ;)

i also have all my styles set up for profiles on left and adjusted all my chats for that as well so you might have alignment issues.
Code: Select all
<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_GET_CHAT -->
	<!-- IF S_READ or S_ADD -->
		<!-- BEGIN chatrow -->
			<div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
				<div class="inner">
					<span class="corners-top"><span></span></span>
						<div class="postbody">
							<div class="content"><!-- IF U_ACP or U_MCP --><ul class="profile-icons" style="float: left" ><li class="delete-icon"><a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><span>{L_DELETE_POST}</span>&nbsp;</a></li></ul><!-- ENDIF -->{chatrow.MESSAGE}</div>
						</div>
						<dl class="postprofile" id="profile{chatrow.POST_ID}">
							<p class="author">&nbsp;{chatrow.USERNAME_FULL}<b style="float: right">{chatrow.TIME}&nbsp;</b></p>
						</dl>
					<span class="corners-bottom"><span></span></span>
				</div>
			</div>
		<!-- END chatrow -->--!--{LAST_ID}--!--
			<!-- BEGIN soundrow -->{soundrow.SOUND}<!-- END soundrow -->
				<!-- IF S_WHOISONLINE -->
					<!-- BEGIN whoisrow -->
						<div>
							<div class="inner">
								<div class="user"><img style="vertical-align: middle" src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" alt="" />&nbsp;{whoisrow.USERNAME_FULL}</div>
							</div>
						</div>
					<!-- END whoisrow -->--!--{LAST_TIME}--!--{DELAY}--!--{LAST_POST}
				<!-- ENDIF -->
	<!-- ENDIF -->
<!-- ELSE -->
	<!-- IF S_CHAT -->
		<!-- INCLUDE overall_header.html -->
<!-- ENDIF -->
<script type="text/javascript">
// <![CDATA[
	var form_name = 'postform';
	var text_name = 'message';
	var fieldname = 'chat';
	var last_time = 0;
	var xmlHttp = http_object();
	var last_id = {LAST_ID};
	var type = 'receive';
	var post_time = {TIME};
	var read_interval = 15000;
	var interval = setInterval('handle_send("read", last_id);', read_interval);
	function handle_send(mode, f)
	{
		if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
		{
			indicator_switch('on');
			type = 'receive';
			param = 'mode=' + mode;
			param += '&last_id=' + last_id;
			param += '&last_time=' + last_time;
			param += '&last_post=' + post_time;
			param += '&read_interval=' + read_interval;

			if (mode == 'add' && document.postform.message.value != '')
			{
				type = 'send';
				for(var i = 0; i < f.elements.length; i++)
				{
					elem = f.elements[i];
					param += '&' + elem.name + '=' + encodeURIComponent(elem.value);
				}
				document.postform.message.value = '';
			}
			else if (mode == 'delete')
			{
				type = 'delete';
				param += '&chat_id=' + f;
			}
			xmlHttp.open("POST", '{FILENAME}', true);
			xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xmlHttp.onreadystatechange = handle_return;
			xmlHttp.send(param);
		}
	}
	function handle_return()
	{
		if (xmlHttp.readyState == 4)
		{
			if (type != 'delete')
			{
				results = xmlHttp.responseText.split('--!--');
				if (results[1])
				{
					if (last_id == 0)
					{
						document.getElementById(fieldname).innerHTML = results[0];
					}
					else
					{
						document.getElementById(fieldname).innerHTML = results[0] + document.getElementById(fieldname).innerHTML;
					}
					last_id = results[1];
					if (results[2])
					{
						document.getElementById('whois_online').innerHTML = results[2];
						last_time = results[3];
						if (results[4] != read_interval * 1000)
						{
							window.clearInterval(interval);
							read_interval = results[4] * 1000;
							interval = setInterval('handle_send("read", last_id);', read_interval);
							document.getElementById('update_seconds').innerHTML = results[4];
						}
						post_time = results[5];
					}
				}
			}
			indicator_switch('off');
		}
	}
	function delete_post(chatid)
	{
		document.getElementById('p' + chatid).style.display = 'none';
		handle_send('delete', chatid);
	}
	function indicator_switch(mode)
	{
		if(document.getElementById("act_indicator"))
		{
			var img = document.getElementById("act_indicator");
			if(img.style.visibility == "hidden" && mode == 'on')
			{
				img.style.visibility = "visible";
			}
			else if (mode == 'off')
			{
				img.style.visibility = "hidden"
			}
		}
	}
	function http_object()
	{
		if (window.XMLHttpRequest)
		{
			return new XMLHttpRequest();
		}
		else if(window.ActiveXObject)
		{
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
		else
		{
			document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.';
		}
	}
	function addText(instext)
	{
		var mess = document.getElementById('message');
	//IE support
		if (document.selection)
		{
			mess.focus();
			sel = document.selection.createRange();
			sel.text = instext;
			document.message.focus();
		}
	//MOZILLA/NETSCAPE support
		else if (mess.selectionStart || mess.selectionStart == "0")
		{
			var startPos = mess.selectionStart;
			var endPos = mess.selectionEnd;
			var chaine = mess.value;
			mess.value = chaine.substring(0, startPos) + instext + chaine.substring(endPos, chaine.length);
			mess.selectionStart = startPos + instext.length;
			mess.selectionEnd = endPos + instext.length;
			mess.focus();
		}
		else
		{
			mess.value += instext;
			mess.focus();
		}
	}
// ]]>
-->
</script>
<style type="text/css">
<!--
#act_indicator {
	visibility:hidden;
}
.shouts {
	width: 84%;
	height:250px;
	overflow-x: hidden;
	overflow:auto;
	float:left;
}
.onlinelist {
	width: auto;
	overflow:auto;
	height:250px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
#chat {
	width: 98%;
	text-align:left;
}	
#chat * {
	margin:0px;
	padding:0px;
	min-height:0px;
}
.postprofile {
	min-height: 10px !important;
}
.chatform {
	width: 100%;
	text-align:center;
}
.users {
	width: 90%;
	text-align: left;
	margin-left:auto;
	margin-right:auto;
}
.user {
	width: 95%;
	font-size: 1.1em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.4em;
}
.chatinput {width: 640px !important;}
	.online_img {
}
-->
</style>
<!-- IF S_USER_LOGGED_IN -->
	<div class="forabg">
		<div class="inner">
			<span class="corners-top"><span></span></span>
				<div class="chatform" style="text-align: center">	
					<!-- IF $S_IN_PORTAL --><div style="text-align:center; color: #D69A4A; text-shadow: 0 0 8px #000000, 0 0 8px #000000, 0 0 8px #000000, 0 0 4px #000000;"><h4>{SITENAME}&nbsp;&nbsp;{L_CHAT}</h4></div><!-- ENDIF -->
						<form name="postform" id="postform" method="post" action="javascript:void(0);" onsubmit="handle_send('add', this)" autocomplete="off" style="color: #D69A4A; text-shadow: 0 0 8px #000000, 0 0 8px #000000, 0 0 8px #000000, 0 0 4px #000000;">
							<strong>{L_MESSAGE}:</strong> <input type="text" tabindex="1" name="message" id="message" class="inputbox chatinput" />
							<input type="submit" class="button1" value="{L_SUBMIT}" name="submit" tabindex="6" accesskey="s"/><br />
							<!-- IF not $S_IN_PORTAL -->
								<br />
								<!-- INCLUDE posting_buttons2.html --> &nbsp;
									<!-- IF S_SMILIES_ALLOWED and .smiley -->
										<!-- BEGIN smiley -->
											<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
										<!-- END smiley -->
									<!-- ENDIF -->
									<!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED-->
										<a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
									<!-- ENDIF -->
							<!-- ENDIF -->
						</form>
				</div>
			<span class="corners-bottom"><span></span></span>
		</div>
	</div>
<!-- ENDIF -->
<div align="left">
	<div class="inner">
		<span class="corners-top"><span></span></span>
		<div class="shouts">
			<div id="chat">
				<!-- BEGIN chatrow -->
					<div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
						<div class="inner"><span class="corners-top"><span></span></span>
							<div class="postbody">
							<div class="content"><!-- IF U_ACP or U_MCP --><ul class="profile-icons" style="float: left" ><li class="delete-icon"><a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><span>{L_DELETE_POST}</span>&nbsp;</a></li></ul><!-- ENDIF -->{chatrow.MESSAGE}</div>
							</div>
							<dl class="postprofile" id="profile{postrow.POST_ID}">
								<p class="author">&nbsp;{chatrow.USERNAME_FULL}<b style="float: right">{chatrow.TIME}&nbsp;</b></p>
							</dl>
							<span class="corners-bottom"><span></span></span>
						</div>
					</div>
				<!-- END chatrow -->
			</div>
		</div>
		<div class="onlinelist bg1">
			&nbsp; &nbsp; &nbsp; &nbsp;<strong>Online List:</strong><br />
			<div class="users" id="whois_online">
				<!-- BEGIN whoisrow -->
					<div>
						<div class="inner">
							<div class="user"><img style="vertical-align: middle" src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" />&nbsp;{whoisrow.USERNAME_FULL}</div>
						</div>
					</div>
				<!-- END whoisrow -->
			</div>
		</div>
		<span class="corners-bottom"><span></span></span>
	</div>
</div>
<div class="navbar" style="text-align: center">
	<div class="inner">
		<span class="corners-top"><span></span></span>
			<div id="author">{L_DETAILS}
				<img src="{T_IMAGESET_PATH}/act_indicator.gif" id="act_indicator" />
				<strong>&nbsp;{L_UPDATES} <span id="update_seconds">{DELAY}</span> {L_UNIT}</strong>
			</div>
		<span class="corners-bottom"><span></span></span>
	</div>
</div>
<br />
<!-- IF S_CHAT -->
	<!-- INCLUDE overall_footer.html -->
<!-- ENDIF -->
<!-- ENDIF -->
<!-- ELSE -->
<div class="navbar" style="text-align: center">
	<div class="inner">
		<span class="corners-top"><span></span></span>
			<div id="author">{L_DETAILS}
				<strong>To view chat, you must be registered and logged in.</strong>
			</div>
		<span class="corners-bottom"><span></span></span>
	</div>
</div>
<br />
<!-- ENDIF -->
if you like my work and would like to contribute to my development of styles, please donate by using the donate button in the header.

Image

Image

User avatar
clight77
Donor
Donor
Posts: 25
Joined: Mon Mar 11, 2013 10:09 pm
Flag: Canada

Re: chat_body.html

Post by clight77 » Fri Mar 15, 2013 10:27 pm

Thanks space :)

Appreciated.. :)

User avatar
clight77
Donor
Donor
Posts: 25
Joined: Mon Mar 11, 2013 10:09 pm
Flag: Canada

Re: chat_body.html

Post by clight77 » Fri Mar 15, 2013 11:42 pm

This is the best i could come up with :)
Code: Select all
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
	<!-- IF S_GET_CHAT -->
		<!-- IF S_READ or S_ADD -->
			<!-- BEGIN chatrow -->
				<div id="p{chatrow.MESSAGE_ID}" class="post <!-- IF chatrow.S_ROW_COUNT is odd -->bg6<!-- ELSE -->bg7<!-- ENDIF -->">
					<div class="inner">
						
                        <div class="postbody">
                        
                            {chatrow.USERNAME_FULL}<dl class="postprofile"style="width: 85%" id="profile{postrow.POST_ID}">  								
                                
								<span class="content"><span style="font-size : 0.9em;"><span style="color: #0000FF;">{chatrow.MESSAGE}</span>
							</div>
							{chatrow.TIME}
                             <!-- IF U_ACP or U_MCP -->
                            <a href="javascript:delete_post('{chatrow.MESSAGE_ID}')" title="{L_DELETE_POST}">&nbsp;&nbsp;&nbsp;<input type="image" src="http://101warez.com/forum/images/redxsmall2.png">&nbsp;&nbsp;&nbsp;</a><!-- ENDIF -->
							</dl>
						<span class="corners-bottom"><span></span></span>
					</div>
				</div>
			<!-- END chatrow -->
            
            ---{LAST_ID}---
        <!-- BEGIN soundrow -->{soundrow.SOUND}<!-- END soundrow -->
				<!-- IF S_WHOISONLINE -->
					<!-- BEGIN whoisrow -->
						<div>
							<div class="inner">
								<div class="user"><img style="vertical-align: middle" src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" alt="" />&nbsp;{whoisrow.USERNAME_FULL}</div>
							</div>
						</div>
					<!-- END whoisrow -->
                    ---{LAST_TIME}---{DELAY}---{LAST_POST}
		<!-- ENDIF -->
	<!-- ENDIF -->
<!-- ELSE -->
	<!-- IF S_CHAT -->
		<!-- INCLUDE overall_header.html -->
<!-- ENDIF -->
<script type="text/javascript">
// <![CDATA[
	var form_name = 'postform';
	var text_name = 'message';
	var fieldname = 'chat';
	var last_time = 0;
	var xmlHttp = http_object();
	var last_id = {LAST_ID};
	var type = 'receive';
	var post_time = {TIME};
	var read_interval = 15000;
	var interval = setInterval('handle_send("read", last_id);', read_interval);
	function handle_send(mode, f)
	{
		if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
		{
			indicator_switch('on');
			type = 'receive';
			param = 'mode=' + mode;
			param += '&last_id=' + last_id;
			param += '&last_time=' + last_time;
			param += '&last_post=' + post_time;
			param += '&read_interval=' + read_interval;

			if (mode == 'add' && document.postform.message.value != '')
			{
				type = 'send';
				for(var i = 0; i < f.elements.length; i++)
				{
					elem = f.elements[i];
					param += '&' + elem.name + '=' + encodeURIComponent(elem.value);
				}
				document.postform.message.value = '';
			}
			else if (mode == 'delete')
			{
				type = 'delete';
				param += '&chat_id=' + f;
			}
			xmlHttp.open("POST", '{FILENAME}', true);
			xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xmlHttp.onreadystatechange = handle_return;
			xmlHttp.send(param);
		}
	}
	function handle_return()
	{
		if (xmlHttp.readyState == 4)
		{
			if (type != 'delete')
			{
				results = xmlHttp.responseText.split('---');
				if (results[1])
				{
					if (last_id == 0)
					{
						document.getElementById(fieldname).innerHTML = results[0];
					}
					else
					{
						document.getElementById(fieldname).innerHTML = results[0] + document.getElementById(fieldname).innerHTML;
					}
					last_id = results[1];
					if (results[2])
					{
						document.getElementById('whois_online').innerHTML = results[2];
						last_time = results[3];
						if (results[4] != read_interval * 1000)
						{
							window.clearInterval(interval);
							read_interval = results[4] * 1000;
							interval = setInterval('handle_send("read", last_id);', read_interval);
							document.getElementById('update_seconds').innerHTML = results[4];
						}
						post_time = results[5];
					}
				}
			}
			indicator_switch('off');
		}
	}
	function delete_post(chatid)
	{
		document.getElementById('p' + chatid).style.display = 'none';
		handle_send('delete', chatid);
	}
	function indicator_switch(mode)
	{
		if(document.getElementById("act_indicator"))
		{
			var img = document.getElementById("act_indicator");
			if(img.style.visibility == "hidden" && mode == 'on')
			{
				img.style.visibility = "visible";
			}
			else if (mode == 'off')
			{
				img.style.visibility = "hidden"
			}
		}
	}
	function http_object()
	{
		if (window.XMLHttpRequest)
		{
			return new XMLHttpRequest();
		}
		else if(window.ActiveXObject)
		{
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
		else
		{
			document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.';
		}
	}
	function addText(instext)
	{
		var mess = document.getElementById('message');
	//IE support
		if (document.selection)
		{
			mess.focus();
			sel = document.selection.createRange();
			sel.text = instext;
			document.message.focus();
		}
	//MOZILLA/NETSCAPE support
		else if (mess.selectionStart || mess.selectionStart == "0")
		{
			var startPos = mess.selectionStart;
			var endPos = mess.selectionEnd;
			var chaine = mess.value;
			mess.value = chaine.substring(0, startPos) + instext + chaine.substring(endPos, chaine.length);
			mess.selectionStart = startPos + instext.length;
			mess.selectionEnd = endPos + instext.length;
			mess.focus();
		}
		else
		{
			mess.value += instext;
			mess.focus();
		}
	}
// ]]>
-->
</script>
<style type="text/css">
	<!--
		#act_indicator {
			visibility:hidden;
		}
		.shouts {
			width: 83%;
			height:200px;
			overflow-x: hidden;
			overflow:auto;
			float:left;
		}
		.onlinelist {
			width: 17%;
			overflow:auto;
			height:200px;
		}
		#chat {
			width: 100%;
			text-align:left;
		}	
		#chat * {
			margin:0px;
			padding:0px;
			min-height:0px;
		}
		.postprofile {
			min-height: 5px !important;
		}
		.chatform {
			width: 95%;
			text-align:center;
		}
		.users {
			width: 90%;
			text-align: left;
			margin-left:auto;
			margin-right:auto;
		}
		.user {
			width: 95%;
			font-size: 1.1em;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			line-height: 1.4em;
		}
		#act_indicator {
			visibility: hidden;
		}
		.chatinput {width: 577px !important;}
			.online_img {
		}
		.message {
   font-size: 1.1em;
   color: #223F49;
}
	-->
</style>
	<!-- IF S_USER_LOGGED_IN -->
		<div class="forabg">
			<div class="inner">
				<span class="corners-top"><span></span></span>
					<div class="chatform" align="center">	
						<form>
 <div align="left">                       
<!-- INCLUDE posting_buttons.html --> 

							
								<!-- IF S_SMILIES_ALLOWED and .smiley -->
									<!-- BEGIN smiley -->
										<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
									<!-- END smiley -->
								<!-- ENDIF -->
								
								</form>
                                <form name="postform" id="postform" method="post" action="javascript:void(0);" onsubmit="handle_send('add', this)" autocomplete="off">

						<strong style="color: white;">{L_MESSAGE}:<!--*Feel free to join the chat.*--></strong> <input type="text" tabindex="1" name="message" id="message" class="inputbox chatinput" />

						<input type="submit" class="button1" value="{L_SUBMIT}" name="submit" tabindex="6" accesskey="s"/>
                        </div>
					
				
			</div>
		</div>
</form>
<br>
	<!-- ENDIF -->
	<div class="forabg" align="left">
		<div class="inner">
			<span class="corners-top"><span></span></span>
			<div class="shouts">
				<div id="chat">
					<!-- BEGIN chatrow -->
				<div id="p{chatrow.MESSAGE_ID}" class="post <!-- IF chatrow.S_ROW_COUNT is odd -->bg6<!-- ELSE -->bg7<!-- ENDIF -->">
					<div class="inner">
						
                        <div class="postbody">
                        
                            {chatrow.USERNAME_FULL}<dl class="postprofile"style="width: 85%" id="profile{postrow.POST_ID}">  								
                                
								<span class="content"><span style="font-size : 0.9em;"><span style="color: #0000FF;">{chatrow.MESSAGE}</span>
							</div>
							{chatrow.TIME}
                            <!-- IF U_ACP or U_MCP -->
                            <a href="javascript:delete_post('{chatrow.MESSAGE_ID}')" title="{L_DELETE_POST}">&nbsp;&nbsp;&nbsp;<input type="image" src="http://101warez.com/forum/images/redxsmall2.png">&nbsp;&nbsp;&nbsp;</a><!-- ENDIF --> 
							</dl>
						<span class="corners-bottom"><span></span></span>
					</div>
				</div>
			<!-- END chatrow -->
				</div>
			</div>
			<div class="onlinelist bg1">
				&nbsp; &nbsp;<img src="{T_THEME_PATH}/images/icon_members.gif" alt"" /> <strong>{L_ONLINE_LIST}</strong>
                   <div class="users" id="whois_online">
                   <!-- BEGIN whoisrow -->
						<div>
							<div class="inner">
								<div class="user"><img style="vertical-align: middle" src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" alt="" />&nbsp;{whoisrow.USERNAME_FULL}</div>
							</div>
						</div>
					<!-- END whoisrow -->
                   </div>
                </div>
                <span class="corners-bottom"><span></span></span>
             </div>
          </div>

          <div class="navbar">
             <div class="inner"><span class="corners-top"><span></span></span>
                <div class="chatform">
                <!--<img src="{T_THEME_PATH}/images/icon_chat.gif" id="chat_icon" alt="" />&nbsp;{L_DETAILS} <img src="{T_IMAGESET_PATH}/act_indicator.gif" id="act_indicator" alt="" /> <strong>{L_UPDATES} <span id="update_seconds">{DELAY}</span> {L_UNIT}</strong>-->  
             </div>
          </div>

       <!-- IF S_CHAT -->          
          <!-- INCLUDE overall_footer.html -->
	<!-- ENDIF -->
<!-- ENDIF -->
<!-- ENDIF -->
Last edited by clight77 on Fri Mar 15, 2013 11:45 pm, edited 2 times in total.

User avatar
spaceace
Site Owner
Site Owner
Posts: 901
Joined: Wed Dec 16, 2009 8:30 pm
Location: Ontario, Canada
Flag: Canada
Contact:

Re: chat_body.html

Post by spaceace » Sat Mar 16, 2013 6:42 am

ok, here's what i need to know. when you board got the issue, what was it that you added? and, what is it, if anything, do you want to add/change in the chat? even better, you can zip your complete style and pm it to me and i can find where the problem is ;)
if you like my work and would like to contribute to my development of styles, please donate by using the donate button in the header.

Image

Image

User avatar
clight77
Donor
Donor
Posts: 25
Joined: Mon Mar 11, 2013 10:09 pm
Flag: Canada

Re: chat_body.html

Post by clight77 » Sat Mar 16, 2013 10:52 pm

Got the corners fixed just need to get Date/Time between username and message that keeps spacing.
Code: Select all
<!-- IF S_GET_CHAT -->

   <!-- IF S_READ or S_ADD -->
      <!-- BEGIN chatrow -->
     <div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
				<!--<div id="p{chatrow.MESSAGE_ID}" class="post <!-- IF chatrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF -->">-->
					<div class="inner">
						<span class="corners-top"><span></span></span>
                        <div class="postbody">
                        
                           <div {chatrow.USERNAME_FULL}<dl class="postprofile"style="width: 85%" id="profile{postrow.POST_ID}">  								
                                
								<span class="content"><span style="font-size : 0.9em;"><span style="color: #0000FF;">{chatrow.MESSAGE}</span>
							</div></div>
							{chatrow.TIME}
                             <!-- IF U_ACP or U_MCP -->
                            <a href="javascript:delete_post('{chatrow.MESSAGE_ID}')" title="{L_DELETE_POST}">&nbsp;&nbsp;&nbsp;<input type="image" src="http://101warez.com/forum/images/redxsmall2.png">&nbsp;&nbsp;&nbsp;</a><!-- ENDIF -->
							</dl>
						<span class="corners-bottom"><span></span></span>
					</div>
				</div>
			<!-- END chatrow -->--!--{LAST_ID}--!--
			<!-- BEGIN soundrow -->{soundrow.SOUND}<!-- END soundrow -->
      <!-- IF S_WHOISONLINE -->
         <!-- BEGIN whoisrow -->
            <div>
               <div class="inner">
                  <div class="user"><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> <span  nowrap="nowrap">{whoisrow.USERNAME_FULL}</span></div>
               </div>
            </div>
         <!-- END whoisrow -->--!--{LAST_TIME}--!--{DELAY}--!--{LAST_POST}
      <!-- ENDIF -->
   <!-- ENDIF -->
<!-- ELSE -->
   <!-- IF S_CHAT -->
   
      <!-- INCLUDE overall_header.html -->
<!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
<ul class="forumlinklist">
   <!-- IF S_DISPLAY_SEARCH -->
      <li><img src="{T_THEME_PATH}/images/icon_pages.gif" alt="" /> <a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a><!-- IF S_USER_LOGGED_IN --> &bull; <img src="{T_THEME_PATH}/images/icon_pages.gif" alt="" /> <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><!-- ENDIF --> &bull; <img src="{T_THEME_PATH}/images/icon_topics.gif" alt="" /> <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
   <!-- ENDIF -->
</ul>
<!-- ENDIF -->

   <!-- ENDIF -->
   <script type="text/javascript">
   <!--
   var fieldname = 'chat';
   var last_time = 0;
   var xmlHttp = http_object();
   var last_id = {LAST_ID};
   var type = 'receive';
   var post_time = {TIME};
   var read_interval = 15000;
   var interval = setInterval('handle_send("read", last_id);', read_interval);

   function handle_send(mode, f)
   {
      if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
      {
         indicator_switch('on');
         type = 'receive';
         param = 'mode=' + mode;
         param += '&last_id=' + last_id;
         param += '&last_time=' + last_time;
         param += '&last_post=' + post_time;
         param += '&read_interval=' + read_interval;

         if (mode == 'add' && document.text.message.value != '')
         {
            type = 'send';
            for(var i = 0; i < f.elements.length; i++)
            {
               elem = f.elements[i];
               param += '&' + elem.name + '=' + encodeURIComponent(elem.value);
            }
            document.text.message.value = '';
         }
         else if (mode == 'delete')
         {
            type = 'delete';
            param += '&chat_id=' + f;
         }
         xmlHttp.open("POST", '{FILENAME}', true);
         xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
         xmlHttp.onreadystatechange = handle_return;
         xmlHttp.send(param);
      }
   }

   function handle_return()
   {
      if (xmlHttp.readyState == 4)
      {
         if (type != 'delete')
         {
            results = xmlHttp.responseText.split('--!--');
            if (results[1])
            {
               if (last_id == 0)
               {
                  document.getElementById(fieldname).innerHTML = results[0];
               }
               else
               {
                  document.getElementById(fieldname).innerHTML = results[0] + document.getElementById(fieldname).innerHTML;
               }
               last_id = results[1];
               if (results[2])
               {
                  document.getElementById('whois_online').innerHTML = results[2];
                  last_time = results[3];
                  if (results[4] != read_interval * 1000)
                  {
                     window.clearInterval(interval);
                     read_interval = results[4] * 1000;
                     interval = setInterval('handle_send("read", last_id);', read_interval);
                     document.getElementById('update_seconds').innerHTML = results[4];
                  }
                  post_time = results[5];
               }
            }
         }
         indicator_switch('off');
      }
   }

   function delete_post(chatid)
   {
      document.getElementById('p' + chatid).style.display = 'none';
      handle_send('delete', chatid);
   }

   function indicator_switch(mode)
   {
      if(document.getElementById("act_indicator"))
      {
         var img = document.getElementById("act_indicator");
         if(img.style.visibility == "hidden" && mode == 'on')
         {
            img.style.visibility = "visible";
         }
         else if (mode == 'off')
         {
            img.style.visibility = "hidden"
         }
      }
   }

   function http_object()
   {
      if (window.XMLHttpRequest)
      {
         return new XMLHttpRequest();
      }
      else if(window.ActiveXObject)
      {
         return new ActiveXObject("Microsoft.XMLHTTP");
      }
      else
      {
         document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.';
      }
   }
   -->
   </script>
   <style type="text/css">
	<!--
		#act_indicator {
			visibility:hidden;
		}
		.shouts {
			width: 83%;
			height:200px;
			overflow-x: hidden;
			overflow:auto;
			float:left;
		}
		.onlinelist {
			width: 17%;
			overflow:auto;
			height:200px;
		}
		#chat {
			width: 100%;
			text-align:left;
		}	
		#chat * {
			margin:0px;
			padding:0px;
			min-height:0px;
		}
		.postprofile {
			min-height: 5px !important;
		}
		.chatform {
			width: 95%;
			text-align:center;
		}
		.users {
			width: 90%;
			text-align: left;
			margin-left:auto;
			margin-right:auto;
		}
		.user {
			width: 95%;
			font-size: 1.1em;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			line-height: 1.4em;
		}
		#act_indicator {
			visibility: hidden;
		}
		.chatinput {width: 577px !important;}
			.online_img {
		}
		.message {
   font-size: 1.1em;
   color: #223F49;
}
	-->
</style>

      <!-- IF S_USER_LOGGED_IN -->
      
	<div class="forabg">
		<div class="inner">
			<span class="corners-top"><span></span></span>
				<div class="chatform" align="center">
<div align="left">                
<form>                        
<!-- INCLUDE posting_buttons.html --> 

<!-- IF S_SMILIES_ALLOWED and .smiley -->
<!-- BEGIN smiley -->
<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
<!-- END smiley -->	</div>				

<!-- ENDIF -->
</form>

 <form name="text" id="postform" method="postform" action="javascript:void(0);" onsubmit="handle_send('add', this)" autocomplete="off"><div align="left">
						<strong style="color: black;">{L_MESSAGE}:</strong> <input type="text" tabindex="1" name="message" id="message" class="inputbox chatinput" />
						<input type="submit" class="button1" value="{L_SUBMIT}" name="submit" tabindex="6" accesskey="s"/> </div>               

   <!-- ENDIF -->
               </div>
            <span class="corners-bottom"><span></span></span>
         </div>
      </div>
</form>

         <div class="shouts">
            <div id="chat">
               <!-- BEGIN chatrow -->
				<div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
                <!--<div id="p{chatrow.MESSAGE_ID}" class="post <!-- IF chatrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF -->">-->
					<div class="inner">
						<span class="corners-top"><span></span></span>
                        <div class="postbody">
                        
                           <div {chatrow.USERNAME_FULL}<dl class="postprofile"style="width: 85%" id="profile{postrow.POST_ID}">  								
                                
								<span class="content"><span style="font-size : 0.9em;"><span style="color: #0000FF;">{chatrow.MESSAGE}</span>
							</div></div>
							{chatrow.TIME}
                             <!-- IF U_ACP or U_MCP -->
                            <a href="javascript:delete_post('{chatrow.MESSAGE_ID}')" title="{L_DELETE_POST}">&nbsp;&nbsp;&nbsp;<input type="image" src="http://101warez.com/forum/images/redxsmall2.png">&nbsp;&nbsp;&nbsp;</a><!-- ENDIF -->
							</dl>
						<span class="corners-bottom"><span></span></span>
					</div>
				</div>
			<!-- END chatrow -->
            
            
            </div>
         </div>
         <h4>&nbsp; {L_ONLINE_LIST}:</h4>
         <div class="onlinelist">
            <div class="users" id="whois_online">
               <!-- BEGIN whoisrow -->
                  <div>
                     <div class="inner">
                        <div class="user"><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> <span  nowrap="nowrap">{whoisrow.USERNAME_FULL}</span></div>
                     </div>
                  </div>
               <!-- END whoisrow -->
            </div>
         </div>
   </div>
      <div class="forabg">
         <div class="inner">
            <span class="corners-top"><span></span></span>
            <div class="chatform" align="center">
            					

								
               <!--{L_DETAILS} <img src="{T_IMAGESET_PATH}/act_indicator.gif" id="act_indicator" alt="" /> <strong>{L_UPDATES} <span id="update_seconds">{DELAY}</span> {L_UNIT}</strong>-->
            </div>
            <span class="corners-bottom"><span></span></span>
         </div>
      </div>

   <!-- IF S_CHAT -->
<!-- IF S_DISPLAY_ONLINE_LIST -->
   <div style="float: left;"><img src="{T_THEME_PATH}/images/whosonline.gif" alt="" /> &nbsp; </div><!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
   <p style="margin-bottom:4px;">{TOTAL_USERS_ONLINE}<br />{LOGGED_IN_USER_LIST}
   <!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- ENDIF -->

<!-- INCLUDE overall_footer.html -->
<!-- ENDIF -->
<!-- ENDIF -->

You will have to edit your delete image,i used my own....

<!-- IF U_ACP or U_MCP -->
<a href="javascript:delete_post('{chatrow.MESSAGE_ID}')" title="{L_DELETE_POST}">&nbsp;&nbsp;&nbsp;<input type="image" src="http://101warez.com/forum/images/redxsmall2.png">&nbsp;&nbsp;&nbsp;</a><!-- ENDIF -->
Last edited by clight77 on Tue Mar 19, 2013 12:09 am, edited 6 times in total.

User avatar
clight77
Donor
Donor
Posts: 25
Joined: Mon Mar 11, 2013 10:09 pm
Flag: Canada

Re: chat_body.html

Post by clight77 » Sat Mar 16, 2013 11:17 pm

Problem was with bbcode and smillies not being <div </div>

User avatar
clight77
Donor
Donor
Posts: 25
Joined: Mon Mar 11, 2013 10:09 pm
Flag: Canada

Re: chat_body.html

Post by clight77 » Wed Mar 20, 2013 9:13 pm

Spaceace?
Is there a way to remove the space between chat messages so there is NO SPACE at all ?


Thanks
Mark

User avatar
spaceace
Site Owner
Site Owner
Posts: 901
Joined: Wed Dec 16, 2009 8:30 pm
Location: Ontario, Canada
Flag: Canada
Contact:

Re: chat_body.html

Post by spaceace » Thu Mar 21, 2013 3:56 pm

ok, to make the spacing tighter...

one thing you could do is remove the <span class="corners-top"> as well as <span class="corners-bottom">

but you will need to adjust some of the spacing after as this will cause the backgrounds to run into each other a little ;)
if you like my work and would like to contribute to my development of styles, please donate by using the donate button in the header.

Image

Image

User avatar
clight77
Donor
Donor
Posts: 25
Joined: Mon Mar 11, 2013 10:09 pm
Flag: Canada

Re: chat_body.html

Post by clight77 » Thu Mar 21, 2013 11:05 pm

spaceace wrote:ok, to make the spacing tighter...

one thing you could do is remove the <span class="corners-top"> as well as <span class="corners-bottom">

but you will need to adjust some of the spacing after as this will cause the backgrounds to run into each other a little ;)
Yep that made a big difference :)

EDIT:
Had to use in 2 places <div class="inner">
<div class="corners-top"><div></div></div>
<div class="postbody">
Instead of <span this caused no rounded corners at the top but does not break the page.

Still need to do more trial and error :)
Last edited by clight77 on Fri Mar 22, 2013 12:39 pm, edited 1 time in total.

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest