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.

[SkepticalGaming]

Originally Posted by GaryT

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

im already lost, lol. looks like this will be a long day.

[K4GAP]

What do you need help with?