Ultimate Shoutbox

[gtaheavenmembers]

im having the same problem. i just dont know where in the index.template.php file to add the shoutbox code to

[Col]

Hi,

This is what I did. It works, but it may be technically wrong. I had to use html sinse that's what I understand.

I use the default template, and changed this:

Code Select Expand

function template_main_below()
{
   global $context, $settings, $options, $scripturl, $txt;

   echo '</td>
   </tr></table>';

   // Show the "Powered by" and "Valid" logos, as well as the copyright.  Remember, the copyright must be somewhere!


To this, to place the shoutbox to the right:

Code Select Expand

function template_main_below()
{
   global $context, $settings, $options, $scripturl, $txt;

   echo '</td>
         <td height="21" valign="top" bgcolor="#D4D4D4"></td></tr>
         <tr>
          <td valign="top" bgcolor="#D4D4D4" width="100">
           <table bgcolor="#828181" cellpadding="1" cellspacing="0">
            <tr>
             <td>
              <table width="100%" cellpadding="3" cellspacing="0">
               <tr><td bgcolor="#6B8EAE"><font color="#FFFFFF">Shoutbox</font></td>
               </tr>
               <tr><td valign="top" bgcolor="#F0F0F0">', smfshout(), '</td>
              </table>
             </td>
            </tr>
           </table>
          </td>
   </tr></table>';

   // Show the "Powered by" and "Valid" logos, as well as the copyright.  Remember, the copyright must be somewhere!


And, change this:

Code Select Expand

   <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
      <td id="bodyarea" style="padding: 1ex 20px 2ex 20px;">';
}


To this:

Code Select Expand

   <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
      <td id="bodyarea" style="padding: 1ex 20px 2ex 20px;" rowspan="2">';
}



The only slight thing is the height of the shoutbox moves up and down a little depending on what part of the forum you are on. I think that it is something else causing that to happen.

If you want the shoutbox to the left, change this:

Code Select Expand

   // The main content should go here.  A table is used because IE 6 just can't handle a div.
   echo '
   <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
      <td id="bodyarea" style="padding: 1ex 20px 2ex 20px;">';
}

function template_main_below()
{


To this:

Code Select Expand

   // The main content should go here.  A table is used because IE 6 just can't handle a div.
   echo '
   <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
      <td valign="top" bgcolor="#D4D4D4" width="140" align="right">
      <table>
      <tr><td height="10"><td></tr>
      <tr>
      <td valign="top" bgcolor="#F0F0F0" cellpadding="0">', smfshout(), '</td>
      </tr>
      </table>
      </td>
      <td id="bodyarea" style="padding: 1ex 20px 2ex 20px;">';
}

function template_main_below()
{


They look slightly different as I decided to go with the right side option. You should be able to move the code around to change the appearence of one for the other.

I hope that helps, and if someone else would like to post the SMF way of doing these, I'd appreaciate that too!

[Col]

im having the same problem. i just dont know where in the index.template.php file to add the shoutbox code to

Just to say, you have to place the shoutbox code in the template yourself. There is no shoutbox code to alter until you place it there! I hope my post above helps.

[Grudge]

Hi there,

Sorry about not replying for the last 3+ pages, I've been extremely caught up in other things, and haven't had time to look at my mods. If you bump any replies from the past that still need answering I'll try to address them. Col, as far as I can see your HTML is OK. The reason it is probably moving is because of the valigns. I *think* that valign has to be put into a <tr> and not a <td>, but I may be wrong. For the shoutbox being to the right, I would change this line in template_above:

Code Select Expand


<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
      <td id="bodyarea" style="padding: 1ex 20px 2ex 20px;">';


To be this:

Code Select Expand


<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr valign="top">
      <td id="bodyarea" style="padding: 1ex 20px 2ex 20px;">';


From your HTML you seem to have the shoutbox nested in quite a few tables, but I assume this is because of the look you are going for more than anything?

I will admidt that documentation for the shoutbox is pretty thin, but for the most part there is no need for any coding knowledge, it's just a case of putting the function call in your template (And this is explained with the installation instructions I believe). It *does* require HTML knowledge though - because I obviously can't say where this call should be put. Some people want a shoutbox to the left, others the right, some above, some in info centre etc - everyone has a different preference. There are some good examples in this topic of placing it - but I guess this is now 20+ pages long - isn't easy for people to browse through

Cheers,
Grudge

[Col]

Hiya Grudge,

I'll look at my code and check it's OK.

I know that a lot mods here require more work than say with YaBB, which is what I'm used to. The templating system is far more powerful than I'm used to, and more complicated too. I understand though, from reading some posts here, that attempts will be made to make modifying the template more simple in the future, especially for modders and their mods. - I hope this does happen with the next siginificant version, 1.1 perhaps.

From your HTML you seem to have the shoutbox nested in quite a few tables, but I assume this is because of the look you are going for more than anything?

Necassary to get the grey border and a 'Shoutbox' title bar to match the forum.

Grudge, any help with porting the shouts so that can be auto refreshed, as per my earlier post, would be appreciated.

Thanks.

[gtaheavenmembers]

for the shoutbox to the right, it puts mine on the bottom.

also, is there a way of getting it in the top section, next to the new and key stats?

[Grudge]

Col,

What do you mean by auto-refresh? I looked at your earlier posts and couldn't quite put my finger on what you mean. IF you mean you want the shoutbox to refresh, say, every 5 seconds the only way I can see that working is by putting some kind of meta-refresh on the page- but that in itself would make the whole page reload every 5 seconds (Bad for replying to posts etc). What you *could* do is put the shoutbox in a iframe. This iframe has another page as the source which contains just a call to SSI.php, a call to ssi_shout(), and has a meta refresh every 5-10 seconds. This would mean just the shoutbox window would reload every 5 seconds. An alternative is to do some very clever stuff with javascript - but that's beyond my ability

gtaheavenmember, I think you want to remove this line from Cols code:

Code Select Expand


<td height="21" valign="top" bgcolor="#D4D4D4"></td></tr>
         <tr>

As that would be the cause of the issue I suspect

[Col]

Dunno what to say to that. Are you using the Default template? It may not work with other templates.

As for placing it in the header, that is somethign I'd like to do too. Still waiting for some replies to this thread myself.

It you are using the default template, it is what I use, and it does work.

Also, I've checked my code, and the 'valign' should go where I placed it.

[gtaheavenmembers]

wow grudge, thnx!
it works perfectly now!

[Col]

Col,

What do you mean by auto-refresh? I looked at your earlier posts and couldn't quite put my finger on what you mean. IF you mean you want the shoutbox to refresh, say, every 5 seconds the only way I can see that working is by putting some kind of meta-refresh on the page- but that in itself would make the whole page reload every 5 seconds (Bad for replying to posts etc). What you *could* do is put the shoutbox in a iframe. This iframe has another page as the source which contains just a call to SSI.php, a call to ssi_shout(), and has a meta refresh every 5-10 seconds. This would mean just the shoutbox window would reload every 5 seconds. An alternative is to do some very clever stuff with javascript - but that's beyond my ability

Yes, an iframe was my first thought, but after I decided that would be a bad idea as it would keep interupting the scolling shouts, and it would be better to refresh at the beginning or end of each scroll. Would the displayed shout still need to go in an iframe if this were possible?

gtaheavenmember, I think you want to remove this line from Cols code:

Code Select Expand


<td height="21" valign="top" bgcolor="#D4D4D4"></td></tr>
         <tr>

As that would be the cause of the issue I suspect

That is placed there act as a spacer. Without it the shoutbox goes to the very top, butting up against the header.

[Col]

for the shoutbox to the right, it puts mine on the bottom.

also, is there a way of getting it in the top section, next to the new and key stats?

Sorry, yes I forgot one other small edit. What I said is correct, but you need change this too:

Code Select Expand

   <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
      <td id="bodyarea" style="padding: 1ex 20px 2ex 20px;">';
}


To this:

Code Select Expand

   <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
      <td id="bodyarea" style="padding: 1ex 20px 2ex 20px;" rowspan="2">';
}


This used with earlier code will place a small gap above the shoutbox so that it fits in better with the forum.

Edit: I've now added this to my earlier post.

[Grudge]

I'm still a little confused why you need the shouts to refresh? The only reason I could see would be if someone was on the same page for a long period of time - but the shoutbox was never intended as a "chat box"- the only case when I think this would be likely?

The problem with interrupting the scrolling is there would be no way I know of to interrupt the scrolling when it's reached the end of the scroll - so as you say the refresh may come mid scroll. The only really clean way to do this would be through javascript - but it would be a load of work to code. It would basically involve getting the shoutbox to auto refresh the content every few seconds by making http requests to the script - very effective but tricky. I'd love to have a go at writing it myself but fear time is something of a scarce resource for me at the moment.

[Col]

With reference to my posts #301 and #310, I've altered the code to make the shout box render reliably at the same relative height no matter which forum page you are on.

If removed the rowspan attribute, but introduced another nested table level. - However, it does seem to work better.

Change this:

Code Select Expand

function template_main_below()
{
  global $context, $settings, $options, $scripturl, $txt;

  echo '</td>
  </tr></table>';

  // Show the "Powered by" and "Valid" logos, as well as the copyright.  Remember, the copyright must be somewhere!
  echo '



To this:

Code Select Expand

  <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
     <td id="bodyarea" style="padding: 1ex 20px 2ex 20px;">';
}

function template_main_below()
{
  global $context, $settings, $options, $scripturl, $txt;

  echo '</td>
        <td bgcolor="#D4D4D4" valign="top" width="100">
        <table valign="top" cellpadding="0" cellspacing="0" align="right">
         <tr valign="top"><td height="29"></td></tr>
        <tr>
         <td valign="top" bgcolor="#D4D4D4" width="100">
          <table bgcolor="#828181" cellpadding="1" cellspacing="0">
           <tr>
            <td>
             <table width="100%" cellpadding="3" cellspacing="0">
              <tr><td bgcolor="#6B8EAE"><font color="#FFFFFF">Shoutbox</font></td>
              </tr>
              <tr><td valign="top" bgcolor="#F0F0F0">', smfshout(), '</td>
             </table>
            </td>
           </tr>
          </table>
         </td>
        </tr>
        </table>
        </td>
  </tr></table>';

  // Show the "Powered by" and "Valid" logos, as well as the copyright.  Remember, the copyright must be somewhere!
  echo '



There may be the odd redundant tag attribute, but it should work fine. This will place the Shoutbox to the right. It should be easy enough to change it to the left. Post #301 should help if you need to place it to the left.

[Col]

I'm still a little confused why you need the shouts to refresh? The only reason I could see would be if someone was on the same page for a long period of time - but the shoutbox was never intended as a "chat box"- the only case when I think this would be likely?

The problem with interrupting the scrolling is there would be no way I know of to interrupt the scrolling when it's reached the end of the scroll - so as you say the refresh may come mid scroll. The only really clean way to do this would be through javascript - but it would be a load of work to code. It would basically involve getting the shoutbox to auto refresh the content every few seconds by making http requests to the script - very effective but tricky. I'd love to have a go at writing it myself but fear time is something of a scarce resource for me at the moment.

As you said, more of a 'chatbox', and that's how my old one was used largely. I run a medical support forum, and it is useful to be able have this function, especially for newbies. I had to give up my old YaBB shoutbox as I had server load problems with my YaBB forum, so stripped everything out I could.

One thing I will do is place the shoutbox in an iframe, as it makes no sense for the whole page to be refreshed when you make a shout.

As an alternative, how about adding a refresh button to the shoutbox? That would be acceptable with the shoutbox in an iframe.

If you ever could sort it so that shouts are refreshed at the end of each cycle, that would be really great.

[edchapman]

Hi,

This is what I did. It works, but it may be technically wrong. I had to use html sinse that's what I understand.

I use the default template, and changed this:

Code Select Expand

function template_main_below()
{
   global $context, $settings, $options, $scripturl, $txt;

   echo '</td>
   </tr></table>';

   // Show the "Powered by" and "Valid" logos, as well as the copyright.  Remember, the copyright must be somewhere!


To this, to place the shoutbox to the right:

Code Select Expand

function template_main_below()
{
   global $context, $settings, $options, $scripturl, $txt;

   echo '</td>
         <td height="21" valign="top" bgcolor="#D4D4D4"></td></tr>
         <tr>
          <td valign="top" bgcolor="#D4D4D4" width="100">
           <table bgcolor="#828181" cellpadding="1" cellspacing="0">
            <tr>
             <td>
              <table width="100%" cellpadding="3" cellspacing="0">
               <tr><td bgcolor="#6B8EAE"><font color="#FFFFFF">Shoutbox</font></td>
               </tr>
               <tr><td valign="top" bgcolor="#F0F0F0">', smfshout(), '</td>
              </table>
             </td>
            </tr>
           </table>
          </td>
   </tr></table>';

   // Show the "Powered by" and "Valid" logos, as well as the copyright.  Remember, the copyright must be somewhere!


And, change this:

Code Select Expand

   <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
      <td id="bodyarea" style="padding: 1ex 20px 2ex 20px;">';
}


To this:

Code Select Expand

   <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
      <td id="bodyarea" style="padding: 1ex 20px 2ex 20px;" rowspan="2">';
}



The only slight thing is the height of the shoutbox moves up and down a little depending on what part of the forum you are on. I think that it is something else causing that to happen.

If you want the shoutbox to the left, change this:

Code Select Expand

   // The main content should go here.  A table is used because IE 6 just can't handle a div.
   echo '
   <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
      <td id="bodyarea" style="padding: 1ex 20px 2ex 20px;">';
}

function template_main_below()
{


To this:

Code Select Expand

   // The main content should go here.  A table is used because IE 6 just can't handle a div.
   echo '
   <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
      <td valign="top" bgcolor="#D4D4D4" width="140" align="right">
      <table>
      <tr><td height="10"><td></tr>
      <tr>
      <td valign="top" bgcolor="#F0F0F0" cellpadding="0">', smfshout(), '</td>
      </tr>
      </table>
      </td>
      <td id="bodyarea" style="padding: 1ex 20px 2ex 20px;">';
}

function template_main_below()
{


They look slightly different as I decided to go with the right side option. You should be able to move the code around to change the appearence of one for the other.

I hope that helps, and if someone else would like to post the SMF way of doing these, I'd appreaciate that too!

I did this and i still get the ole error.
I think I may have to give up on this option.

[Col]

You make the first two changes if you want the shoutbox on the right (but my later way of doing it in reply #312 is better); or you make the last change if you want the shoutbox on the left.

[Griffen]

Ok, Im still not getting this..

I add:

Code Select Expand

echo '
<table>
<tr>
<td>
', smfshout(), '
</td>
</tr>
</table>'

^^ That to where??

EDIT:

Ok, so i add it to the index.template.php in the themes folder (the default theme..which is Helios for my forum).

Now when i tried to add it somewhere i got the error:

Template Parse Error!
There was a problem loading the /Themes/HeliosRed/index.template.php template or language file. Please check the syntax and try again - remember, single quotes (') often have to be escaped with a slash (\). To see more specific error information from PHP, try accessing the file directly.

You may want to try to refresh this page or use the default theme.

I'm so lost here.  Which part of the index.template.php should i add the code to?

Another Edit:

http://www.knifey.branzone.com/Griffen/Help.txt [nofollow]

Someone want to tell me where I would add in the code?  That txt document is my index.template.php if you didnt guess.

ok..

So i read the posts on the last 2 pages.  I sorta get it now... but like Grudge said, it takes HTML knowledge.  I have none what so ever...

Would someone mind telling me exactly where to put the code to it shows up on the bottom under the..

New Posts      No New Posts

But above the info center?

The code for my index.template.php is in that .txt link.

Thanks.

[Col]

You'll have to be a bit more specific; I'm not sure that those ikons appear in the place on my forum.

[Griffen]

http://knifey.branzone.com/forums/index.php [nofollow]

I think you have to register a name to see them, but they are right at the bottom (under the last board).  I would take a screen capture but my MSpaint is being stupid right now...

[edchapman]

You make the first two changes if you want the shoutbox on the right (but my later way of doing it in reply #312 is better); or you make the last change if you want the shoutbox on the left.

When I do that I still get this error

"Template Parse Error!
There was a problem loading the /Themes/default/index.template.php template or language file. Please check the syntax and try again - remember, single quotes (') often have to be escaped with a slash (\). To see more specific error information from PHP, try accessing the file directly.

You may want to try to refresh this page or use the default theme."