Chatbox and widget placement
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1 • Share •
Chatbox and widget placement
Hi, I was wondering if there was a way to make the chatbox go across the whole forum width and have the sidebar widgets start below it like in this picture below.

Thank you *)

Thank you *)
Re: Chatbox and widget placement
What happens when you add the chatbox to the top?

Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

Re: Chatbox and widget placement
the chatbox will shorten same width as the forum. the forum being that wide is ok to allow the sidebar to be there was just wondering if i could code something to force the chatbox to be full length here below is how it is right now.


Re: Chatbox and widget placement
Hi,
The widgets are preventing it from being the full size of the page. You can, of course, change the widget width by going to ACP => Modules => Forum widgets management => Forum widgets general options and changing the width from there.
The widgets are preventing it from being the full size of the page. You can, of course, change the widget width by going to ACP => Modules => Forum widgets management => Forum widgets general options and changing the width from there.
Re: Chatbox and widget placement
Hello FrOsTyXi,
Please try the following.
Modules > Javascript codes management > create a new script
Title : what you wish
Placement : in the homepage
Paste the code below and save :
Please try the following.
Modules > Javascript codes management > create a new script
Title : what you wish
Placement : in the homepage
Paste the code below and save :
- Code:
$(function() { $('.forumline:has(#chatbox_top)').css('margin','6px 0').appendTo('table:has(.mainmenu)') });
Re: Chatbox and widget placement
Wow that made their be 3 chatboxes one by the banner and two more from the original placement down.
That script looked to be moving the chatbox correct me if i'm wrong. Is it possible to make the sidebar start at the forum line letting the chatbox go full length over top of it, the placement of the chatbox is fine just looking to make it go full width and sidebar start from under it. Hope i'm not confusing you.
That script looked to be moving the chatbox correct me if i'm wrong. Is it possible to make the sidebar start at the forum line letting the chatbox go full length over top of it, the placement of the chatbox is fine just looking to make it go full width and sidebar start from under it. Hope i'm not confusing you.
Re: Chatbox and widget placement
Oh I did not notice that, you're right. I had forgotten about the footer table.
Try this instead.
Modules > chatbox > configuration
ChatBox display : do not display, and validate.
Next go to Display > templates > general > overall_header
Find :
Replace by :
Save and publish.
In the HTML I gave you there is a script at the bottom :
This removes the chatbox on pages that are NOT the index. If you change your homepage you must change :
to /forum :
If you want the chat to display on top of the forum everywhere just remove this script.
Try this instead.
Modules > chatbox > configuration
ChatBox display : do not display, and validate.
Next go to Display > templates > general > overall_header
Find :
- Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
Replace by :
- Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
<!-- BEGIN switch_user_logged_in -->
<table id="chatTable" class="forumline" style="width:100%;margin:6px 0;">
<tbody>
<tr>
<td>
<iframe id="chatFrame" src="/chatbox" style="border:none;width:100%;height:350px;"></iframe>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
if (location.pathname != '/') document.getElementById('chatTable').parentNode.removeChild(document.getElementById('chatTable'));
</script>
<!-- END switch_user_logged_in -->
Save and publish.
In the HTML I gave you there is a script at the bottom :
- Code:
<script type="text/javascript">
if (location.pathname != '/') document.getElementById('chatTable').parentNode.removeChild(document.getElementById('chatTable'));
</script>
This removes the chatbox on pages that are NOT the index. If you change your homepage you must change :
- Code:
if (location.pathname != '/')
to /forum :
- Code:
if (location.pathname != '/forum')
If you want the chat to display on top of the forum everywhere just remove this script.

Re: Chatbox and widget placement
Awesome that places the chatbox where i want it perfectly but now my announcement banner or scrolling text and the blue welcome text above the chatbox are now below can i move them up?
red announcement scrolling text up top below banner and blue welcome text with images right above the chatbox. picture below shows where they are placed since the code change.

red announcement scrolling text up top below banner and blue welcome text with images right above the chatbox. picture below shows where they are placed since the code change.

Re: Chatbox and widget placement
Oooh I can't believe I forgot about the announcements, in that case open the overall_header again.
Find and remove the chat :
Find :
and place the chatbox after it :
Save and publish, and it should be good.
Find and remove the chat :
- Code:
<!-- BEGIN switch_user_logged_in -->
<table id="chatTable" class="forumline" style="width:100%;margin:6px 0;">
<tbody>
<tr>
<td>
<iframe id="chatFrame" src="/chatbox" style="border:none;width:100%;height:350px;"></iframe>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
if (location.pathname != '/') document.getElementById('chatTable').parentNode.removeChild(document.getElementById('chatTable'));
</script>
<!-- END switch_user_logged_in -->
Find :
- Code:
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td align="left" class="row1">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker -->
and place the chatbox after it :
- Code:
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td align="left" class="row1">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker -->
<!-- BEGIN switch_user_logged_in -->
<table id="chatTable" class="forumline" style="width:100%;margin:6px 0;">
<tbody>
<tr>
<td>
<iframe id="chatFrame" src="/chatbox" style="border:none;width:100%;height:350px;"></iframe>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
if (location.pathname != '/') document.getElementById('chatTable').parentNode.removeChild(document.getElementById('chatTable'));
</script>
<!-- END switch_user_logged_in -->
Save and publish, and it should be good.

Re: Chatbox and widget placement
ok announcement is in the right place above the chatbox, now can we move that blue welcome to team-psn text to the exact top of the chatbox? thank you again all this is working great!
Re: Chatbox and widget placement
Display > Template > General > overall_header
Find and replace the chat by :
Save and publish.
Display > Templates > General > index_body
Find the home page message :
and replace it by :
Then save and publish.
With the div we wrapped around the chat we should be able to place the homepage message directly before the chat. This done by the small snippet we added below the homepage message.
Find and replace the chat by :
- Code:
<!-- BEGIN switch_user_logged_in -->
<div id="elemC">
<table id="chatTable" class="forumline" style="width:100%;margin:6px 0;">
<tbody>
<tr>
<td>
<iframe id="chatFrame" src="/chatbox" style="border:none;width:100%;height:350px;"></iframe>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
if (location.pathname != '/') document.getElementById('chatTable').parentNode.removeChild(document.getElementById('chatTable'));
</script>
</div>
<!-- END switch_user_logged_in -->
Save and publish.
Display > Templates > General > index_body
Find the home page message :
- Code:
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN message_admin_titre -->
<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>
<!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->
and replace it by :
- Code:
<!-- BEGIN message_admin_index -->
<table id="homepageMSG" class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN message_admin_titre -->
<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>
<!-- END message_admin_txt -->
</table>
<script type="text/javascript">
function moveHomeMessage() {
if (document.getElementById('elemC') === null) return;
document.getElementById('elemC').insertBefore(document.getElementById('homepageMSG'),document.getElementById('elemC').childNodes[0]);
}
moveHomeMessage()
</script>
<!-- END message_admin_index -->
Then save and publish.
With the div we wrapped around the chat we should be able to place the homepage message directly before the chat. This done by the small snippet we added below the homepage message.
Re: Chatbox and widget placement
That worked seamlessly! Thank you very much for replying and taking the time to assist me with this.
Topic Solved
Topic Solved
Re: Chatbox and widget placement
Problem solved & topic archived.

Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum