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.

[TheInsaneManiac]

3.8.x???

[Kenjiwing]

Just want to greatly thank the owner for this.. you solved 2 of my problems without even knowing it!

How to make custom header images for widgets and a easy way to display my vent on my main page!

Thanks!

[Kenjiwing]

Originally Posted by MrShides

Thraxus, i'm also on typefrag. Where did you find that code?

How do I display the status of my Ventrilo Server on my website?
We offer a Ventrilo Status Tool on our site that will allow you to create a status block on your website for your server. To take advantage of this tool, first click on the "Ventrilo Status Tool" link under the Services option at the top of our site. From there, you will need to enter your server hostname, port number, and the website?s address this tool will be used on. Then, simply press the Generate button below. This will result in a block of code that you can then insert into your site?s HTML in the proper spot. You should then be able to see the status of your server including any channels and users that are currently on your server.

this is from the typefrag FAQ

[BadgerDog]

I don't think they support (or generate) iFrame code any longer?

Regards,
Doug

[suds42]

I can`t seem to get this work. The instructions are simple enough but no luck here.

[Gleedo]

Mine is still working using iframes in the cms widget. Here is my code that I add via the 'configure' option under static html widget:

<div class="cms_widget_content widget_content"><div id="ts3viewer_953844" style="width:; background-color:;"> </div>

<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>

<script type="text/javascript">
<!--
var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=953844&text=000000&text_size=10&text_family=1&js=1&text_s_color=545454&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=545454&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_color=545454&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=545454&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_color=545454&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=545454&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_color=545454&text_u_weight=normal&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=545454&text_u_weight_h=normal&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 953844, 100);
-->
</script></div>

[suds42]

Can't get this to work with 4.14

[Gleedo]

Originally Posted by suds42

Can't get this to work with 4.14

I will try it when I upgrade in a day or so.

[SkepticalGaming]

Hi is this compatible with 4.2.1?

[K4GAP]

Originally Posted by SkepticalGaming

Hi is this compatible with 4.2.1?

If you Visit tsviewer.com and you use the configurator there, it will be compatible with any version. If you follow the steps correctly.