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

avatar
SLGray
Administrator
Administrator

Male Posts : 40461
Reputation : 2730
Language : English
Location : United States

https://fmthemes.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.

avatar
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.
avatar
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)') });
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2879
Language : EN10, FR5
Location : Macungie, PA

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.
avatar
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
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2879
Language : EN10, FR5
Location : Macungie, PA

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.

avatar
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
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2879
Language : EN10, FR5
Location : Macungie, PA

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!
avatar
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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2879
Language : EN10, FR5
Location : Macungie, PA

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
avatar
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.

avatar
SLGray
Administrator
Administrator

Male Posts : 40461
Reputation : 2730
Language : English
Location : United States

https://fmthemes.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