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 and widget placement

View previous topic View next topic Go down

Solved Chatbox and widget placement

Post by FrOsTyXi on May 6th 2014, 4:50 pm

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

FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chatbox and widget placement

Post by SLGray on May 6th 2014, 9:49 pm

What happens when you add the chatbox to the top?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36705
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Chatbox and widget placement

Post by FrOsTyXi on May 6th 2014, 10:05 pm

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.


FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chatbox and widget placement

Post by Illest on May 6th 2014, 10:09 pm

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.

Illest
Forumember

Male Posts : 135
Reputation : 9
Language : English
Location : USA

http://mixedmedia.userboard.net

Back to top Go down

Solved Re: Chatbox and widget placement

Post by Ange Tuteur on May 6th 2014, 11:01 pm

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)') });

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 and widget placement

Post by FrOsTyXi on May 6th 2014, 11:11 pm

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.

FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chatbox and widget placement

Post by Ange Tuteur on May 6th 2014, 11:37 pm

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. 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 and widget placement

Post by FrOsTyXi on May 7th 2014, 1:13 am

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.


FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chatbox and widget placement

Post by Ange Tuteur on May 7th 2014, 2:24 am

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. Very good

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 and widget placement

Post by FrOsTyXi on May 7th 2014, 3:10 am

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!

FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chatbox and widget placement

Post by Ange Tuteur on May 7th 2014, 8:18 am

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.

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 and widget placement

Post by FrOsTyXi on May 7th 2014, 2:09 pm

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

Topic Solved

FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chatbox and widget placement

Post by SLGray on May 7th 2014, 8:27 pm

Problem solved & topic archived.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36705
Reputation : 2445
Language : English
Location : United States

http://ztwds.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