PDA

View Full Version : vBulletin CMS Widgets - Widget: Team Speak


Gleedo
01-01-2010, 10:00 PM
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 (http://www.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

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

<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
https://vborg.vbsupport.ru/external/2010/01/73.png - FTP to /images/cms/ in your forums folder

Sample Widget Screenshot
https://vborg.vbsupport.ru/external/2010/01/138.jpg

Please click Installed (https://vborg.vbsupport.ru/vborg_miscactions.php?do=installhack&threadid=231959) and also Rate it if you like it.

Andyucs
01-02-2010, 07:13 PM
thanks for that Gleedo

pjaco
01-02-2010, 07:27 PM
:D Thanks a lot

Gleedo
01-02-2010, 07:33 PM
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
01-02-2010, 11:09 PM
SWEET!!!

Thanks for this hack :D.

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
01-03-2010, 07:26 AM
SWEET!!!

Thanks for this hack :D.

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:
https://vborg.vbsupport.ru/external/2010/01/69.png

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/ventrilo-website-status-code.html

jaffaman
01-03-2010, 07:57 AM
We use this to make the code for Ventrilo http://vspy.info/?page=code
It works fine :)

Deviant K1
01-03-2010, 05:52 PM
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:
https://vborg.vbsupport.ru/external/2010/01/69.png

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/ventrilo-website-status-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
01-04-2010, 12:50 AM
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
01-04-2010, 09:04 PM
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? :o

CFodder
01-05-2010, 01:48 AM
<a href="http://www.tsviewer.com/index.php?page=codegenerator_iframe&ID=905520#generator" 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
01-06-2010, 04:40 PM
PMing Deviant K1 with instructions so as not to further derail this topic.

Deviant K1
01-07-2010, 05:14 AM
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 :D

Dr.osamA
01-07-2010, 08:36 AM
thanxxx

tagged
________
Body science (http://bodyscience.ws/)

THE__DRIFTER
01-12-2010, 03:59 AM
Quick question; Will this only work for version 2 or the new version 3? Or; will it work for either?

CFodder
01-13-2010, 07:18 AM
It will work with either, have had both working.

Thraxus
01-18-2010, 11:53 PM
Worked perfectly with Ventrilo using the code generated in the CP @ typefrag.com (my host).

Thanks a ton!

Xeyn
03-04-2010, 10:42 AM
pleaseeeeeeeeeeee make this for vent also.....would love it

MrShides
03-14-2010, 02:58 AM
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
05-10-2010, 11:49 PM
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

TheInsaneManiac
05-24-2010, 10:36 PM
3.8.x???

Kenjiwing
03-22-2011, 01:51 PM
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
03-22-2011, 01:57 PM
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
03-22-2011, 04:23 PM
I don't think they support (or generate) iFrame code any longer? :confused:

Regards,
Doug

suds42
06-15-2011, 02:05 AM
I can`t seem to get this work. The instructions are simple enough but no luck here.

Gleedo
06-15-2011, 06:03 AM
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
06-15-2011, 05:04 PM
Can't get this to work with 4.14

Gleedo
06-15-2011, 06:11 PM
Can't get this to work with 4.14

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

SkepticalGaming
02-14-2014, 06:23 PM
Hi is this compatible with 4.2.1?

K4GAP
02-14-2014, 07:20 PM
Hi is this compatible with 4.2.1?

If you Visit tsviewer.com (http://www.tsviewer.com) and you use the configurator there, it will be compatible with any version. If you follow the steps correctly.

SkepticalGaming
02-14-2014, 07:34 PM
If you Visit tsviewer.com (http://www.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.:confused:

K4GAP
02-14-2014, 09:52 PM
What do you need help with?