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.

[CFodder]

<a href="http://www.tsviewer.com/index.php?page=codegenerator_iframe&ID=905520#gene rator" target="_blank">http://www.tsviewer.com/index.php?pa...5520#generator</a>

If it's not already done click on generate code at the bottom of the page (Preview & Code button), then go back towards the top and under your html code there's a button that says "OR try the new asynchronous code".

This will give you 2 sets of code, one you're supposed to put in your index.php, the other would go in the widget. I think my problem was I probably put the first code in the wrong place.

[Edrondol]

PMing Deviant K1 with instructions so as not to further derail this topic.

[Deviant K1]

Originally Posted by Edrondol

PMing Deviant K1 with instructions so as not to further derail this topic.

Thanks! I appreciate the PM.

Works fine ... just can't wait to get it to work on the CMS

[Dr.osamA]

thanxxx

tagged
________
Body science

[THE__DRIFTER]

Quick question; Will this only work for version 2 or the new version 3? Or; will it work for either?

[CFodder]

It will work with either, have had both working.

[Thraxus]

Worked perfectly with Ventrilo using the code generated in the CP @ typefrag.com (my host).

Thanks a ton!

[Xeyn]

pleaseeeeeeeeeeee make this for vent also.....would love it

[MrShides]

Originally Posted by Thraxus

Worked perfectly with Ventrilo using the code generated in the CP @ typefrag.com (my host).

Thanks a ton!

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

[Staffee]

Originally Posted by 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

Any chance of a heads up, as to how to put this mod in the forums side bar

many thanks in advance

Sorted worked it out, looks rather cool if i do say so myself,

many thanks for the steer