vBulletin CMS Widgets - Widget: Team Speak

Simply shows how to create a Team Speak widget using the your TS Servers code from www.tsviewer.com. This method can be used to create widgets for anything that display basic html code.

Generate your Team Speak code
Visit tsviewer.com, find your server and create your code using their code generator. Ours looks like this:

<iframe name="tsviewer" allowtransparency="true" width="200" height="300" frameborder="0" style="border:0px solid #;" scrolling="no" src="http://www.tsviewer.com/ts_viewer_pur.php?ID=93855&bg=transparent&type=5b8d22&type_size=10&type_family=1&info=0&channels=1&users=1&type_s_color=ffffff&type_s_weight=bold&type_s_style=normal&type_s_variant=normal&type_s_decoration=none&type_s_color_h=ffffff&type_s_weight_h=bold&type_s_style_h=normal&type_s_variant_h=normal&type_s_decoration_h=underline&type_i_color=5b8d22&type_i_weight=normal&type_i_style=normal&type_i_variant=normal&type_i_decoration=none&type_i_color_h=5b8d22&type_i_weight_h=normal&type_i_style_h=normal&type_i_variant_h=normal&type_i_decoration_h=underline&type_c_color=5b8d22&type_c_weight=normal&type_c_style=normal&type_c_variant=normal&type_c_decoration=none&type_c_color_h=5b8d22&type_c_weight_h=normal&type_c_style_h=normal&type_c_variant_h=normal&type_c_decoration_h=underline&type_u_color=86d42c&type_u_weight=normal&type_u_style=normal&type_u_variant=normal&type_u_decoration=none&type_u_color_h=86d42c&type_u_weight_h=normal&type_u_style_h=normal&type_u_variant_h=normal&type_u_decoration_h=none&skin=tsv_smile"></iframe>

Create the Widget

1. Goto AdminCP > VBulletin CMS > Widgets
2. Create New Widget
   • Widget Type = Static HTML
   • Title = Your Widget Display Name
   • Click Save
3. Now back on the Widgets screen, find your new Widget and click Configure
4. Paste your TS code you got from tsviewer.com into the box marked Enter Static HTML and click save.

Add Widget to Layout

1. Goto vBulletin CMS > Layout Manager
2. Find the layout you want to edit like Home and click Edit
3. Select your widget from the Widgets selection box and add it to the layout and place it in the column you want by dragging and dropping it.
4. Click Save and refresh the page you changed the layout for to see it appear.

NOTE: If you want an icon to display in the widget header, please perform the following

1. Upload the small TS image below to /images/cms/ in your forums folder using an ftp program
2. Goto Styles and Templates > Style Manager
3. For your style, select Add New Template from the drop down box
4. Add vbcms_widget_teamspeak as the Title
5. Add the following code in the Template box
   

   <div class="cms_widget">
   	<div class="block">
   		<div class="cms_widget_header">
   		<h3><img title="{vb:raw widget_title}" src="images/cms/ts.png" alt="" /> {vb:raw widget_title}</h3>
   		</div>
   		<div class="cms_widget_content" align="left">
   			{vb:raw static_html}
   		</div>
   	</div>
   </div>

6. Click Save
7. Now go back to vBulletin CMS > Widets
8. Find your widget and again click Configure
9. Change the Template Name to vbcms_widget_teamspeak
10. Click Save

That should be it

TS Widget Header Image
- FTP to /images/cms/ in your forums folder

Sample Widget Screenshot


Please click Installed and also Rate it if you like it.

[Andyucs]

thanks for that Gleedo

[pjaco]

Thanks a lot

[Gleedo]

Originally Posted by Andyucs

thanks for that Gleedo

No problem. You can apply the exact same technique for a forum block to make it appear in the forum sidebar too

Can post how to do that if need be

[Deviant K1]

SWEET!!!

Thanks for this hack .

Quick question... would you by chance know how to use the same hack using Ventrilo? I use both for my site and was wondering if you had plans on creating one for that VoIP as well.

[Gleedo]

Originally Posted by Deviant K1

SWEET!!!

Thanks for this hack .

Quick question... would you by chance know how to use the same hack using Ventrilo? I use both for my site and was wondering if you had plans on creating one for that VoIP as well.

Hi Deviant, I am not very familiar with ventrilo, but did a quick google and found that the gametracker network also monitor vent servers (global not just gameserver ones I think). Please look at the following link. You should be able to find your ventrilo server there.
http://www.gametracker.com/search/ventrilo/

If you find it, click on your server name, and then click the link called Image and HTML Server Banners - get code

You could then choose the server banner type you want, customize it if needed and then simply copy the Website/Blog Code and paste that like the TS codes you did earlier into it's own widget block.

I'm sure there are probably better Ventrilo monitors than the gametracker banners though. So If I come across one, I will update this thread.

Here is the image for your header if you create one with a title image:


You can also use the normal gametracker banners to show your game servers too using the same method.

See my site:
www.taskforce141st.com

HTH

EDIT: Just found this code generator for Vent like the TS viewer one. Perhaps you could also try that and see which is best for your site:
http://www.ventriloservers.biz/ventr...atus-code.html

[jaffaman]

We use this to make the code for Ventrilo http://vspy.info/?page=code
It works fine

[Deviant K1]

Originally Posted by Gleedo

Hi Deviant, I am not very familiar with ventrilo, but did a quick google and found that the gametracker network also monitor vent servers (global not just gameserver ones I think). Please look at the following link. You should be able to find your ventrilo server there.
http://www.gametracker.com/search/ventrilo/

If you find it, click on your server name, and then click the link called Image and HTML Server Banners - get code

You could then choose the server banner type you want, customize it if needed and then simply copy the Website/Blog Code and paste that like the TS codes you did earlier into it's own widget block.

I'm sure there are probably better Ventrilo monitors than the gametracker banners though. So If I come across one, I will update this thread.

Here is the image for your header if you create one with a title image:


You can also use the normal gametracker banners to show your game servers too using the same method.

See my site:
www.taskforce141st.com

HTH

EDIT: Just found this code generator for Vent like the TS viewer one. Perhaps you could also try that and see which is best for your site:
http://www.ventriloservers.biz/ventr...atus-code.html

Thanks for replying .

Unfortunately I can't get the widget to show on my home page. I'm pretty sure I did everything correctly but still no luck.

I use InstantVentrilo.com and even if I use their code, which doesn't use the <iframe> tags, (uses <span ID>) I couldn't get it to show up.

I did use this site --> http://www.ventriloservers.biz/ventr...atus-code.html to generate the code but that too didn't work.

I'll try again this evening and if I get it to work, I'll post it

[CFodder]

Excellent mod thanks Gleedo, one question tho, have you tried using the new asynchronous code (their standard one really slows down loading the cms page)? I did but only got the widget with the header and nothing in it.

[Gleedo]

Originally Posted by CFodder

Excellent mod thanks Gleedo, one question tho, have you tried using the new asynchronous code (their standard one really slows down loading the cms page)? I did but only got the widget with the header and nothing in it.

Havent heard the async one fodder. Do you have a linky please?