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 *)

What happens when you add the chatbox to the top?

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.

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.

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 :

Code:

$(function() { $('.forumline:has(#chatbox_top)').css('margin','6px 0').appendTo('table:has(.mainmenu)') });

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.

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 :

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.

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.

Oooh I can't believe I forgot about the announcements, in that case open the overall_header again.

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.

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!

Display > Template > General > overall_header

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.

That worked seamlessly! Thank you very much for replying and taking the time to assist me with this.

Topic Solved