Widget: Team Speak

Widget: Team Speak

Mod Version: 1.00, by Gleedo

vB Version: 4.0.x	Rating: (1 vote - 5.00 average)	Installs: 35
Released: 02 Jan 2010	Last Update: Never	Downloads: 0
Not Supported Template Edits Additional Files Translations

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

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

Code:

<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

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

Add Widget to Layout

Goto vBulletin CMS > Layout Manager
Find the layout you want to edit like Home and click Edit
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.
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

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

Add the following code in the Template box

Code:

<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>

Click Save
Now go back to vBulletin CMS > Widets
Find your widget and again click Configure
Change the Template Name to vbcms_widget_teamspeak
Click Save

That should be it

TS Widget Header Image

- FTP to /images/cms/ in your forums folder

Sample Widget Screenshot

Please click and also Rate it if you like it.

Download

No files for download.

vBulletin LTS