Shoutbox Not Working

[Alanna 🥀🖤]

I have modified the shoutbox on this theme: revolutiontheme.boards.net/
Posts are not appearing however. I would assume it thinks the form and messages are not within the shoutbox area since I separated them, however, I kept them both between the $[shoutbox_form.header] and $[shoutbox_form.footer] so I'm not sure what is wrong.

[Tumbleweed]

May 23, 2017 18:59:50 GMT -8 @khristian said:

I have modified the shoutbox on this theme: revolutiontheme.boards.net/
Posts are not appearing however. I would assume it thinks the form and messages are not within the shoutbox area since I separated them, however, I kept them both between the $[shoutbox_form.header] and $[shoutbox_form.footer] so I'm not sure what is wrong.

We can't see your shoutbox to see what you did but I fiddled with the shoutbox template separating the form area with a div with a random class in it and it didn't work for me. I got an error and of course nothing would show in the post area. But what did work was ending the two starting div's... (<div class="$[shoutbox_class] container full">
<div class="content"> after the message and then re-pasting that above the forms part.





Obviously, I'm just blowing in the wind since I have no clue what all you did and exactly how you separated them and I'm pretty clueless on the shoutbox template anyway as I never tried to modify it.

[Alanna 🥀🖤]

Tumbleweed, the shoutbox should be visible. Click on the "Chatbox" link in the navigation menu.

Here is the layout template however:

SPOILER: Click to show

<!-- CHATBOX.WS SHOUTBOX REMODEL BY TRINITY BLAIR, DO NOT STEAL! -->

$[shoutbox_form.header]
<td vAlign="top">
   <div class="shouts-container">
       <div class="shoutbox_container orientation-$[reply_box_position] {if !$[can.post]}no-post{/if}">
           <div class="$[shoutbox_posts_class]" style="height:223px!important;" aria-live="polite">
               {if $[shoutbox_posts]}
               $[shoutbox_posts]
               {else}
               <b>There are no posts here.{if $[can.post]} Start the conversation {if $[reply_box_position] == 'bottom'}below{else}above{/if}.{/if}</b>
               {/if}
           </div>
       </div>
   </div>
</td>
<td vAlign="top" width="25%">
   <div class="chatbox-rules" style="height:126px!important"></div>
   {if $[can.post]}
   <div class="shoutbox_form_container {if $[reply_box_position] == "top"}reply-box-top{else}reply-box-bottom{/if}">
       <div class="shoutbox_form content-box">
           <table width="100%" style="margin-bottom:1px">
               <tr>
                   <td>$[message_character_count]</td>
                   <td style="text-align:right!important">$[refresh_button]</td>
               </tr>
           </table>
           <table width="100%">
               <tr>
                   <td class="shout-input">
                       {if $[shoutbox_form.guest_name.input]}
                       $[shoutbox_form.guest_name.input]
                       {else}
                       $[current_user]
                       {/if}
                   </td>
               </tr>
               <tr><td height="2px"></td></tr>
               <tr>
                   <td>
                       <table width="100%">
                           <tr>
                               <td class="shout-textarea">$[shoutbox_form.message.input]</td>
                               {if $[post_button]}<td width="2px"></td><td class="shout-button">$[post_button]</td>{/if}
                           </tr>
                       </table>
                   </td>
               </tr>
           </table>
           <div class="shout-buttons">
               <a>$[reply_box_buttons.bold]</a> · <a>$[reply_box_buttons.italic]</a> · <a>$[reply_box_buttons.strikethrough]</a> · <a>$[reply_box_buttons.underline]</a> · <a>$[reply_box_buttons.link]</a> · <a>$[reply_box_buttons.smile]</a>
           </div>
       </div>
   </div>
   {/if}
</td>
$[shoutbox_form.footer]

<!-- END CHATBOX.WS SHOUTBOX REMODEL BY TRINITY BLAIR, DO NOT STEAL! -->

[Tumbleweed]

May 24, 2017 1:50:07 GMT -8 @khristian said:

Tumbleweed , the shoutbox should be visible. Click on the "Chatbox" link in the navigation menu.

Here is the layout template however:

SPOILER: Click to show

<!-- CHATBOX.WS SHOUTBOX REMODEL BY TRINITY BLAIR, DO NOT STEAL! -->

$[shoutbox_form.header]
<td vAlign="top">
   <div class="shouts-container">
       <div class="shoutbox_container orientation-$[reply_box_position] {if !$[can.post]}no-post{/if}">
           <div class="$[shoutbox_posts_class]" style="height:223px!important;" aria-live="polite">
               {if $[shoutbox_posts]}
               $[shoutbox_posts]
               {else}
               <b>There are no posts here.{if $[can.post]} Start the conversation {if $[reply_box_position] == 'bottom'}below{else}above{/if}.{/if}</b>
               {/if}
           </div>
       </div>
   </div>
</td>
<td vAlign="top" width="25%">
   <div class="chatbox-rules" style="height:126px!important"></div>
   {if $[can.post]}
   <div class="shoutbox_form_container {if $[reply_box_position] == "top"}reply-box-top{else}reply-box-bottom{/if}">
       <div class="shoutbox_form content-box">
           <table width="100%" style="margin-bottom:1px">
               <tr>
                   <td>$[message_character_count]</td>
                   <td style="text-align:right!important">$[refresh_button]</td>
               </tr>
           </table>
           <table width="100%">
               <tr>
                   <td class="shout-input">
                       {if $[shoutbox_form.guest_name.input]}
                       $[shoutbox_form.guest_name.input]
                       {else}
                       $[current_user]
                       {/if}
                   </td>
               </tr>
               <tr><td height="2px"></td></tr>
               <tr>
                   <td>
                       <table width="100%">
                           <tr>
                               <td class="shout-textarea">$[shoutbox_form.message.input]</td>
                               {if $[post_button]}<td width="2px"></td><td class="shout-button">$[post_button]</td>{/if}
                           </tr>
                       </table>
                   </td>
               </tr>
           </table>
           <div class="shout-buttons">
               <a>$[reply_box_buttons.bold]</a> · <a>$[reply_box_buttons.italic]</a> · <a>$[reply_box_buttons.strikethrough]</a> · <a>$[reply_box_buttons.underline]</a> · <a>$[reply_box_buttons.link]</a> · <a>$[reply_box_buttons.smile]</a>
           </div>
       </div>
   </div>
   {/if}
</td>
$[shoutbox_form.footer]

<!-- END CHATBOX.WS SHOUTBOX REMODEL BY TRINITY BLAIR, DO NOT STEAL! -->

 I should have known the shoutbox wouldn't be out in the open, considering your unique templates. Yes it shows and I see now what you did but I have no time to mess with anything tonight (it's 5:00AM and I go to work in a few hours  ..stupid me for staying up this late). I'm not sure if I can help anyway but if no one else jumps in I'll take a look. Thanks for the coding.

[Brian]

I would recommend moving $[shoutbox_form.header] so that it comes immediately after {if $[can.post]} as well as moving $[shoutbox_form.footer] before the closing {/if} of that statement. Those variables generate opening and closing <form> tags which are closing early since they've been placed in the middle of a table.

The only other thing left to do is add the shoutbox class to whichever element surrounds the shoutbox table. Adding the class to <div id="chatbox"> should work.

[Alanna 🥀🖤]

Thank you! <3