mChat display problem

[opi]

Hi,

I'am running a phpBB3 forum with phpBB3 Portal installed. Now I had just installed MChat and I managed to add the chat box to the right navigation bar.
The mChatBodyFix with the textbox and the buttons are fitting fine to the 360px width nav bar. But the text rows are displaced to the right. (see the attachment)
Has anyone an idea how to fix this?

phpBB3 3.0.7-PL1
phpBB3-Portal 1.2.2
mChat 1.2.17

[Steve]

in the mchat folder you have two css files one for prosilver and other subsilver2

find:

Code: Select all

div.mChatRowLimit {
	overflow: auto;
	width: 100%;
	height: 200px;
}

and replace the width:100% with width:360px for example. see if that works

Code: Select all

div.mChatRowLimit {
	overflow: auto;
	width: 360px;
	height: 200px;
}

[opi]

Thanks for your answer.

But the mChatRowLimit width does not seem to be the main problem. The left end of the row remain displaced to the right. With the fix row width I only blow up my site's design.

[Steve]

Ok ,so can i have a
link too your site?
link to the style ?
link to the instructions to put the mChat on the portal page?

cant test with out these.

[opi]

The whole thing is still in my dev environment. I temporarily published it here: http://opi.kicks-ass.net/phpBB3
Note that mChat is only visible for registerd users. If you don't recive your registration email, post it here, I will activate your user account manually.
My style can be downloaded here.

Here are the instructions for install:
Install the Portal to your phpBB3. It should work with the prosilver style.
Then install the m9orange style. Copy the folder /styles/prosilver/template/portal to /styles/m9orange/template

Edit: /styles/m9orange/template/overall_header.html

Find:

Code: Select all

	<div id="logodesc">
		<table width="100%" cellspacing="0">
		<tr>
			<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
			<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
		</tr>
		</table>
	</div>

Replace with:

Code: Select all

	<div id="logodesc">
		<table hight=177 width="100%" cellspacing="0">
		<tr>
			<td><a href="{U_INDEX}">{SITE_LOGO_IMG}<br /><div align="center"><h1>Forum</h1></div></a></td>
			<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
			<td><a href="{U_PORTAL}">{SITE_LOGO_IMG}<br /><div align="center"><h1>Home</h1></div></a></td>
		</tr>
		</table>
	</div>

You should now have basic functionality, within the portal.
Next install mChat. Copy the /styles/prosilver/template/mchat_body.html to /styles/m9orange/template/
Edit the files /styles/m9orange/template/editor.js and index_body.html as described in the install.xml.

Edit: /styles/m9orange/template/overall_header.html

Find:

Code: Select all

 </head>

Add before:

Code: Select all

 <!-- IF S_MCHAT_ENABLE -->
<script type="text/javascript" src="{ROOT_PATH}mchat/jquery_core_mini.js"></script>
<script type="text/javascript" src="{ROOT_PATH}mchat/jquery_cookie_mini.js"></script>
<link rel="stylesheet" href="{ROOT_PATH}mchat/mchat_prosilver.css" type="text/css" />
<!-- ENDIF -->

Find:

Code: Select all

<a href="{U_FAQ}">{L_FAQ}</a>

Add after:

Code: Select all

<!-- IF S_MCHAT_ENABLE and U_MCHAT -->&nbsp; &nbsp;<a href="{U_MCHAT}" title="{L_MCHAT}">{L_MCHAT}</a><!-- ENDIF -->

Edit: /styles/m9orange/template/portal_body.html

Find:

Code: Select all

 
<!-- IF S_DISPLAY_ADVANCED_STAT -->
		<!-- INCLUDE portal/block/statistics.html -->
		<!-- ENDIF -->

Add after:

Code: Select all

<!-- IF S_MCHAT_ENABLE and S_MCHAT_ON_INDEX and S_MCHAT_LOCATION --><!-- INCLUDE mchat_body.html --><!-- ENDIF -->

Edit: portal.php

Find:

Code: Select all

 
// output page
page_header($user->lang['PORTAL']);

Add befor:

Code: Select all

// BEGIN mChat Mod
if(!defined('MCHAT_INCLUDE') && $config['mchat_on_index'] && $config['mchat_enable'] && $auth->acl_get('u_mchat_view'))
{
	define('MCHAT_INCLUDE', true);
	$mchat_include_index = true;
	include($phpbb_root_path.'mchat.'.$phpEx);
}
// END mChat Mod

You should now have added mChat to the right side menu. The width of the side menus can be configured via acp.
Hope I didn't forget anything

[Steve]

Just tryed this on localhost and got

Code: Select all

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 10607 bytes) in C:\xampp\htdocs\xxxxxxxx\phpBB3\includes\functions_template.php  on line 103

i did try on my live site and got an internal server error 500 ,
might be server problem my end but for xxamp to spit its dummy out dont know.
keep playing with the html and css is about my best bet.

[opi]

Just tryed this on localhost and got

Code: Select all

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 10607 bytes) in C:\xampp\htdocs\xxxxxxxx\phpBB3\includes\functions_template.php  on line 103

It looks like a issue with your php memory configuration to me.

[opi]

I got it, after hours of fumble with the css.

[Steve]

and the answer was please share others may also benefit from it

[opi]

here are the relevant parts of the mchat_prosilver.css

Code: Select all

div.mChatBG1 {
	background-color: #222222;
	padding: 5px 5px 5px 15px;
	border-bottom: 1px dotted #DDDDDD;
	overflow: visible;
	left:5px;
	top:10px;
	height:auto;
	position:relative;
	
}

div.mChatBG2 {
	background-color: #111111;
	padding: 5px 5px 5px 15px;
	border-bottom: 1px dotted #DDDDDD;
	overflow: visible;
	left:5px;
	top:10px;
	height:auto;
	position:relative;
}

div.mChatRowLimit {
	overflow: visible;
	width: 340px;
	left:5px;
	top:4px;
	height:auto;	
    position:relative;	
}

div.mChatRowLimitCustom {
	overflow: visible;
	width: 340px;
	height:auto;
	left:5px;
	top:4px;
	position:relative;	
}

div.mChatPanel {
	text-align: center;
	padding: 15px;
	}

I also added a line break after the timestamp in the message row, because of the restriced width.

Edit: /styles/m9orange/template/mchat_body.html

Find:

Code: Select all

<div id="mess{mchatrow.MCHAT_MESSAGE_ID}" class="mChatBG{mchatrow.MCHAT_CLASS} mChatHover">

In line find:

Code: Select all

{mchatrow.MCHAT_TIME}</span>

In line add after:

Code: Select all

<br />