Chat Modifications - GCBOS Widget for vb Suite Gold!

I made this Widget Because I Want to Add Shout Box at the Main Page Side Bar of My Site.

THIS Instruction Assumes that You Already Installed the GCBOS Shout Box
Instructions:

Admin CP > Styles & Templates > Style Manager > YOUR TEMPLATE > Add New Template

<div class="cms_widget"><div class="block"><div class="cms_widget_header"><h3>ShoutBox</h3></div><div class="cms_widget_content"><!-- GCBOS --><div class="forumrowdata"><p class="subforumdescription" id="gcbos_notice"></p></div></div><ol id="c_gcbos" class="childforum"><li id="gcbos3" class="forumbit_post L2"><div class="forumrow table"><div  id="gcbos_console" style="height: 400px; overflow: auto;width:100%">Loading...</div><vb:if condition="$show['member']"><input type="text" id="gcbos_input" style="width: 92%; height: 19px; margin: 1px;float:left;" autocomplete="off" /><button type="button" onclick="gcbos.sendInput();" style="width: 0%; height: 0px; margin: 0px; float: right;"></button><vb:else /><center>You Need to <a href="register.php">Register</a> to be Able Shout</center></vb:if><script type="text/javascript">
gcbos = new gcbos_engine();
YAHOO.util.Event.onDOMReady(gcbos.init, gcbos, gcbos);
</script><!-- /GCBOS --></div></div></div>

then Go to Admin CP > vBulletin CMS > Widgets > Create New Widget






Click Save Add The Widget to Your Layout....

Live Screenshot:


You Can Improve this Tool If you Want

[osariase]

Newbie here! please give me a complete instruction on how to accomplish this. thank you

[N75]

Originally Posted by fahl

This is great,Any way of using it as Forum Sidebar widget??

This would be perfect - I'll mark as installed so I remember to check back - pleeeeease write some code to load this as a forum sidebar block? Thanks

[jaffaman]

I have installed on our test site will put on our live site when ready to go live

Up date

I have put it on a live site as a top center widget and it looks good i did have to edit the template again to put the submit button in

I have attached a screen shot to show that is works ok as a top widget.

[min0taur]

Originally Posted by N75

This would be perfect - I'll mark as installed so I remember to check back - pleeeeease write some code to load this as a forum sidebar block? Thanks

Simply add forum block Check this screenshot:

[SLY LS1]

Originally Posted by min0taur

Simply add forum block Check this screenshot:

But it needs to be JS like the widget.. not html or plain text etc

[SLY LS1]

Originally Posted by jaffaman

I have installed on our test site will put on our live site when ready to go live

Up date

I have put it on a live site as a top center widget and it looks good i did have to edit the template again to put the submit button in

I have attached a screen shot to show that is works ok as a top widget.

Can you please tell us the template edit to add the submit button

[jaffaman]

I am not a coder and i was just changing the sizes as i noticed a little clickable dot.

Heres the code i am useing and it works for me but as i said i am no coder so it might be wrong.
The just done the edit in the template mobnpc_shout i just changed the width and height a bit and had a play about to see what looked good.

<div class="cms_widget"><div class="block"><div class="cms_widget_header"><h3>ShoutBox</h3></div><div class="cms_widget_content"><!-- GCBOS --><div class="forumrowdata"><p class="subforumdescription" id="gcbos_notice"></p></div></div><ol id="c_gcbos" class="childforum"><li id="gcbos3" class="forumbit_post L2"><div class="forumrow table"><div  id="gcbos_console" style="height: 130px; overflow: auto;width:100%">Loading...</div><vb:if condition="$show['member']"><input type="text" id="gcbos_input" style="width: 90%; height: 19px; margin: 1px;float:left;" autocomplete="off" /><button type="button" onclick="gcbos.sendInput();" style="width: 9%; height: 22px; margin: 0px; float: right;">Submit!</button><vb:else /><center>You Need to <a href="register.php">Register</a> to be able Shout</center></vb:if><script type="text/javascript">
gcbos = new gcbos_engine();
YAHOO.util.Event.onDOMReady(gcbos.init, gcbos, gcbos);
</script><!-- /GCBOS --></div></div></div>

[SLY LS1]

Originally Posted by jaffaman

I am not a coder and i was just changing the sizes as i noticed a little clickable dot.

Heres the code i am useing and it works for me but as i said i am no coder so it might be wrong.
The just done the edit in the template mobnpc_shout i just changed the width and height a bit and had a play about to see what looked good.

<div class="cms_widget"><div class="block"><div class="cms_widget_header"><h3>ShoutBox</h3></div><div class="cms_widget_content"><!-- GCBOS --><div class="forumrowdata"><p class="subforumdescription" id="gcbos_notice"></p></div></div><ol id="c_gcbos" class="childforum"><li id="gcbos3" class="forumbit_post L2"><div class="forumrow table"><div  id="gcbos_console" style="height: 130px; overflow: auto;width:100%">Loading...</div><vb:if condition="$show['member']"><input type="text" id="gcbos_input" style="width: 90%; height: 19px; margin: 1px;float:left;" autocomplete="off" /><button type="button" onclick="gcbos.sendInput();" style="width: 9%; height: 22px; margin: 0px; float: right;">Submit!</button><vb:else /><center>You Need to <a href="register.php">Register</a> to be able Shout</center></vb:if><script type="text/javascript">
gcbos = new gcbos_engine();
YAHOO.util.Event.onDOMReady(gcbos.init, gcbos, gcbos);
</script><!-- /GCBOS --></div></div></div>

Perfect

Its also funny, you had made yours the same height i had mad mine 130px.. :up:

Cheers
Wayne

[jaffaman]

I hope it worked ok for you m8

[min0taur]

Originally Posted by SLY LS1

But it needs to be JS like the widget.. not html or plain text etc

No It Ignores that and only use the template I tested it and works