Hilfe Webspell Teamspeak integrieren

[DerF4bi]

Hallo

Ich bin ein kompletter Frischling was das Programieren betrifft.
Ich habe mit Webspell eine Homepage erstellt. Jetzt hätte ich gerne das
mein TS als slider eingefügt wird. Habe dann das addon runtergeladen und alles so gemacht wie es in der Readme datei stand.
Jedoch wird mir der TS dauerhaft auf meiner linken seite angezeigt.
Kann mir jemand helfen wie ich das ändern kann?

Anleitung:

 Spoiler

2one-Designs.de - Webspell Templates, Addons und mehr!

		TS3-Viewer Slider

*********************************************************

Mit diesem Addon erscheint auf der Website auf der rechten Seite ein
TS3 Viewer Slider, der sich bei Klick öffnet.

*********************************************************

WICHTIG! MACHT VORHER VON ALLEN BETROFFENEN DATEIEN EIN BACKUP!!!

*********************************************************

Bitte folge der Readme, um eine reibungslose Installation zu erreichen.

Gehe in den Ordner "ts3_viewer" und lade den Ordner "images" auf deinen Webspace.

Öffne nun deine index.php und gehe VOR das schließende </head> Tag und füge folgendes ein

<!-- TS3-Viewer by 2One-Designs.de -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

    <script type="text/javascript">
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //class of the element that will become your tab
            pathToTabImage: 'images/ts_3.png', //path to the image for the tab //Optionally can be set using css
            imageHeight: '250px',                     //height of tab image           //Optionally can be set using css
            imageWidth: '60px',                       //width of tab image            //Optionally can be set using css
            tabLocation: 'right',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '50px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '10px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });

    });

    </script>
<style type="text/css">
.slide-out-div {
	padding: 0px;
	width: 250px;
	height: 80%;
	background: url(http://www.elitepvpers.com/forum/images/ts_3_bg.png) no-repeat #313131;
	border: 0px;
	position: absolute;
}      
</style>

<script type="text/javascript">
$(document).ready(function(){
    	$("#content").hide();

    $("a.open-close").click(function () {
      $("#content").slideToggle("slow");
    });

});
</script>

<!-- TS3-Viewer by 2One-Designs.de END -->

*********************************************************

Gehe nun ganz nach unten VOR das schließende </body> Tag und füge folgendes ein

<!-- TS3-Viewer by 2One-Designs.de -->

<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
	TEAMSPEAK 3 VIEWER CODE
</div>

<!-- TS3-Viewer by 2One-Designs.de END -->

Ersetze das "TEAMSPEAK 3 VIEWER CODE" mit eurem TS3 Viewer Code.

*********************************************************

Folgende Änderungen sind möglich:

pathToTabImage: 'images/ts_3.png',  			=> Ist das Bild zu eurem Button, benannt nach ts_3.png - kann beliebig geändert werden
imageHeight: '250px',		    			=> Ist die Höhe des Buttons
imageWidth: '60px', 		    			=> Ist die Breite des Buttons
tabLocation: 'right',               			=> Auf welcher Seite der Viewer angezeigt werden soll, bitte bedenkt dass standardmäßig
				      			   rechts eingestellt ist, da der Button auch so angepasst wurde.
background: url(http://www.elitepvpers.com/forum/images/ts_3_bg.png) no-repeat #313131;  => Hintergrundfarbe (#313131) des DIVs und Hintergrundbild namens ts_3_pg.png, kann ebenfalls
							   beliebig geändert werden.

Meine Index.php

 Spoiler

<?php
/*
##########################################################################
#                                                                        #
#           Version 4       /                        /   /               #
#          -----------__---/__---__------__----__---/---/-               #
#           | /| /  /___) /   ) (_ `   /   ) /___) /   /                 #
#          _|/_|/__(___ _(___/_(__)___/___/_(___ _/___/___               #
#                       Free Content / Management System                 #
#                                   /                                    #
#                                                                        #
#                                                                        #
#   Copyright 2005-2009 by webspell.org                                  #
#                                                                        #
#   visit webSPELL.org, webspell.info to get webSPELL for free           #
#   - Script runs under the GNU GENERAL PUBLIC LICENSE                   #
#   - It's NOT allowed to remove this copyright-tag                      #
#   -- http://www.fsf.org/licensing/licenses/gpl.html                    #
#                                                                        #
#   Code based on WebSPELL Clanpackage (Michael Gruber - webspell.at),   #
#   Far Development by Development Team - webspell.org                   #
#                                                                        #
#   visit webspell.org                                                   #
#                                                                        #
##########################################################################
*/

// important data include
include("_mysql.php");
include("_settings.php");
include("_functions.php");

$_language->read_module('index');
$index_language = $_language->module;
// end important data include
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Clanpage using webSPELL 4 CMS" />
<meta name="author" content="webspell.org" />
<meta name="keywords" content="webspell, webspell4, clan, cms" />
<meta name="copyright" content="Copyright &copy; 2005 - 2009 by webspell.org" />
<meta name="generator" content="webSPELL" />

<!-- Head & Title include -->
<title><?php echo PAGETITLE; ?></title>
<link href="_stylesheet.css" rel="stylesheet" type="text/css" />
<link href="_layout.css" rel="stylesheet" type="text/css" />
<link href="tmp/rss.xml" rel="alternate" type="application/rss+xml" title="<?php echo getinput($myclanname); ?> - RSS Feed" />
<script src="js/bbcode.js" language="jscript" type="text/javascript"></script>
<!-- end Head & Title include -->

<!--Java!-->
<script language="JavaScript" type="">
<!--
if(document.images) {
Bild0 = new Image();
Bild0.src = "http://www.elitepvpers.com/forum/images/design/navi/news_button.png";
Bild1 = new Image();
Bild1.src = "http://www.elitepvpers.com/forum/images/design/navi/news_button_hover.png";
Bild2 = new Image();
Bild2.src = "http://www.elitepvpers.com/forum/images/design/navi/archive_button.png";
Bild3 = new Image();
Bild3.src = "http://www.elitepvpers.com/forum/images/design/navi/archive_button_hover.png";
Bild4 = new Image();
Bild4.src = "http://www.elitepvpers.com/forum/images/design/navi/articles_button.png";
Bild5 = new Image();
Bild5.src = "http://www.elitepvpers.com/forum/images/design/navi/articles_button_hover.png";
Bild6 = new Image();
Bild6.src = "http://www.elitepvpers.com/forum/images/design/navi/members_button.png";
Bild7 = new Image();
Bild7.src = "http://www.elitepvpers.com/forum/images/design/navi/members_button_hover.png";
Bild8 = new Image();
Bild8.src = "http://www.elitepvpers.com/forum/images/design/navi/forum_button.png";
Bild9 = new Image();
Bild9.src = "http://www.elitepvpers.com/forum/images/design/navi/forum_button_hover.png";
Bild10 = new Image();
Bild10.src = "http://www.elitepvpers.com/forum/images/design/navi/awards_button.png";
Bild11 = new Image();
Bild11.src = "http://www.elitepvpers.com/forum/images/design/navi/awards_button_hover.png";
Bild12 = new Image();
Bild12.src = "http://www.elitepvpers.com/forum/images/design/navi/clanwars_button.png";
Bild13 = new Image();
Bild13.src = "http://www.elitepvpers.com/forum/images/design/navi/clanwars_button_hover.png";
Bild14 = new Image();
Bild14.src = "http://www.elitepvpers.com/forum/images/design/navi/filebase_button.png";
Bild15 = new Image();
Bild15.src = "http://www.elitepvpers.com/forum/images/design/navi/filebase_button_hover.png";
Bild16 = new Image();
Bild16.src = "http://www.elitepvpers.com/forum/images/design/navi/rankings_button.png";
Bild17 = new Image();
Bild17.src = "http://www.elitepvpers.com/forum/images/design/navi/rankings_button_hover.png";
Bild18 = new Image();
Bild18.src = "http://www.elitepvpers.com/forum/images/design/navi/server_button.png";
Bild19 = new Image();
Bild19.src = "http://www.elitepvpers.com/forum/images/design/navi/server_button_hover.png";
Bild20 = new Image();
Bild20.src = "http://www.elitepvpers.com/forum/images/design/navi/userlist_button.png";
Bild21 = new Image();
Bild21.src = "http://www.elitepvpers.com/forum/images/design/navi/userlist_hover.png";
Bild22 = new Image();
Bild22.src = "http://www.elitepvpers.com/forum/images/design/login/register.png";
Bild23 = new Image();
Bild23.src = "http://www.elitepvpers.com/forum/images/design/login/lost_pw.png";
Bild24 = new Image();
Bild24.src = "http://www.elitepvpers.com/forum/images/design/login/lost_pw_hover.png";
}
-->
</script>
<!--Ende Java-->
<!-- TS3-Viewer by 2One-Designs.de -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

    <script type="text/javascript">
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //class of the element that will become your tab
            pathToTabImage: 'images/ts_3.png', //path to the image for the tab //Optionally can be set using css
            imageHeight: '250px',                     //height of tab image           //Optionally can be set using css
            imageWidth: '60px',                       //width of tab image            //Optionally can be set using css
            tabLocation: 'right',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'hover',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '50px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '10px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });

    });

    </script>
<style type="text/css">
.slide-out-div {
	padding: 0px;
	width: 250px;
	height: 80%;
	background: url(http://www.elitepvpers.com/forum/images/ts_3_bg.png) no-repeat #313131;
	border: 0px;
	position: absolute;
}      
</style>

<script type="text/javascript">
$(document).ready(function(){
    	$("#content").hide();

    $("a.open-close").click(function () {
      $("#content").slideToggle("slow");
    });

});
</script>

<!-- TS3-Viewer by 2One-Designs.de END -->
</head>
<body>
<!--Anfang Container!-->
<div id="container">
<!--Anfang Header_hold!-->
<div id="header_hold">
	<div class="header_1"></div>
	<div class="header_2"></div>
		<!--Anfang Scrolltext!-->
		<div id="scrolltext">
			<div class="scrolltext_header"></div>
			<div class="scrolltext_left"></div>
			<div class="scrolltext_main">
			<?php include("sc_scrolltext.php"); ?>
			</div>
			<div class="scrolltext_right"></div>
			<div class="scrolltext_bottom"></div>
		</div>
		<!--Ende Scrolltext!-->
</div>
<!--Ende Header_hold!-->

<!--Anfang Navi!-->
<div id="navigation">
	<div class="navi_left"></div>
	<div class="navi_main">
	<?php include("navigation.php"); ?>
	</div>
</div>
<!--Ende Navi!-->

<div id="container_inner" class="clearfix">

<!--Anfang Left_Container!-->
<div id="left_container">

	<!--Anfang Login!-->
	<div id="login">
		<div class="login_header"></div>
	<?php include("login.php"); ?>
	</div>
	<!--Ende Login!-->

	<!--Anfang Last_forum!-->
	<div id="last_forum">
		<div class="last_forum_header"></div>
		<div class="last_forum_main">
		<?php include("latesttopics.php"); ?>
		</div>
	</div>
	<!--Ende Last_forum!-->

	<!--Anfang Last_files!-->
	<div id="last_files">
		<div class="last_files_header"></div>
		<div class="last_files_main">
		<?php include("sc_files.php"); ?>
		</div>
	</div>
	<!--Ende Last_files!-->

	<!--Anfang Poll!-->
	<div id="poll">
		<div class="poll_header"></div>
		<div class="poll_main">
		<?php include("poll.php"); ?>
		</div>
	</div>
	<!--Ende Poll!-->

	<!--Anfang Random_image!-->
	<div id="random_image">
		<div class="random_image_header"></div>
		<div class="random_image_main">
		<?php include("sc_randompic.php"); ?>
		</div>
	</div>
	<!--Ende Random_image!-->

</div>
<!--Ende Left_Container!-->

<!--Anfang Main_Container!-->
<div id="main_container">

	<!--Anfang Last_news!-->
	<div id="last_news">
		<div class="last_news_header"></div>
		<div class="last_news_header2"></div>
		<div class="last_news_left"></div>
		<div class="last_news_main">
		<?php include("sc_headlines.php"); ?>
		</div>
		<div class="last_news_right"></div>
		<div class="last_news_bottom"></div>
	</div>
	<!--Eende Last_news!-->

	<!--Anfang Last_result!-->
	<div id="last_result">
		<div class="last_result_header"></div>
		<div class="last_result_header2"></div>
		<div class="last_result_left"></div>
		<div class="last_result_main">
		<?php include("sc_results.php"); ?>
		</div>
		<div class="last_result_right"></div>
		<div class="last_result_bottom"></div>
	</div>
	<!--Ende Last_result!-->

	<!--Anfang Content_header!-->
	<div id="content_top">
		<div class="content_header"></div>
		<div class="content_left"></div>
		<div class="content_main"></div>
		<div class="content_right"></div>
	</div>
	<!--Ende Content_header!-->

<!--Anfang php_content!-->
<div id="php_content">
	<?php
if(!isset($site)) $site="news";
$invalide = array('\\','/','/\/',':','.');
$site = str_replace($invalide,' ',$site);
if(!file_exists($site.".php")) $site = "news";
include($site.".php");
?>
</div>
<!--Ende php_content!-->

</div>
<!--Ende Main_Container!-->

<!--Anfang Right_Container!-->
<div id="right_container">

	<!--Anfang Sponsors!-->
	<div id="sponsors">
		<div class="sponsors_header"></div>
		<div class="sponsors_main">
		<?php include("sc_sponsors.php"); ?>
		</div>
		<div class="sponsors_bottom"></div>
	</div>
	<!--Ende Sponsors!-->

	<!--Anfang Partners!-->
	<div id="partners">
		<div class="partners_header"></div>
		<div class="partners_main">
		<?php include("partners.php"); ?>
		</div>
	</div>
	<!--Ende Partners!-->

	<!--Anfang Werbung!-->
	<div id="werbung">
		<div class="werbung_header"></div>
		<div class="werbung_main">
		<?php include("sc_bannerrotation.php"); ?>
		</div>
	</div>
	<!--Ende werbung!-->

	<!--Anfang Gameserver!-->
	<div id="gameserver">
		<div class="gameserver_header"></div>
		<div class="gameserver_main">
		<?php include("sc_servers.php"); ?>
		</div>
	</div>
	<!--Ende werbung!-->

</div>
<!--Ende Right_Container!-->
<div id="footer">
<!-- Start licence -->		
<!-- RESPECT THE WORK FROM THE DESIGNER -->		
<!-- CC - Attribution-Share Alike 3.0 Unported - Do not remove links here! -->
  <span class="design">Design by <a href="http://www.zenavio.com" target="_blank">Zenavio.com</a> | Adaption by <a href="http://xeno.spacequadrat.de/" target="_blank">xX-Viper-HunteR-Xx</a> | More free <a href="http://www.templates-royal.de" title="webSPELL Templates" target="_blank">webSPELL Templates</a></span></div>
<!-- RESPECT THE WORK FROM THE DESIGNER -->		
<!-- CC - Attribution-Share Alike 3.0 Unported - Do not remove links here! -->
<!-- End licence -->
</div>
</div>
<!--Ende Container_inner!-->
</div>
<!--Ende Container!-->
<!-- TS3-Viewer by 2One-Designs.de -->

<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
	<div id="ts3viewer_1089789" style=""> </div>

<script src="https://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script>
var ts3v_url_1 = "https://www.tsviewer.com/ts3viewer.php?ID=1089789&text=757575&text_size=12&text_family=1&text_s_color=000000&text_s_weight=normal&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_i_color=&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_c_color=&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_u_color=000000&text_u_weight=normal&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_s_color_h=&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=none&text_i_color_h=000000&text_i_weight_h=bold&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=none&text_c_color_h=&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=none&text_u_color_h=&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none&iconset=default";
ts3v_display.init(ts3v_url_1, 1089789, 100);
</script>
</div>

<!-- TS3-Viewer by 2One-Designs.de END -->
</body>
</html>

meine Website: *deleted*

[florian0]

Da fehlt ein JavaScript:


Ich hab hier die Datei gefunden, keine Ahnung ob das die Richtige ist:


Einfach die beiden Dateien auf deinem Webspace ablegen (am besten in den passenden Ordnern, sonst wirds chaotisch) und dann im Template die URL abändern.

[DerF4bi]

Originally Posted by florian0

Da fehlt ein JavaScript:


Ich hab hier die Datei gefunden, keine Ahnung ob das die Richtige ist:


Einfach die beiden Dateien auf deinem Webspace ablegen (am besten in den passenden Ordnern, sonst wirds chaotisch) und dann im Template die URL abändern.

Danke für deine Antwort.
Nur in welcher datei soll ich die Url abändern?

Edit: Habs gelöst Danke

#Closerequest

[Devsome]

#closed