[Den TSViewer per CSS anpassen] Teil 1 - Grundlagen

Als erstes möchte ich sagen, das meine Anleitung auf dem Script von Daniel aufbaut.


API Beispiel: Teamspeak 3 Viewer abrufen und einbinden (PHP/cURL)


Ich beginne mit Teil 1 , den Grundlagen,

Beispiele werden dann im 2. Teil näher erklährt.


Die API liefert in einem Array eine vorgefertigten HTML-String. Dieser besteht aus mehreren Tabellen und kann zb mit dem PHP echo Befehl ausgegeben werden. Siehe Daniel's script.


In der Deklaration der Tabellen, Zeilen und Spalten sind Klassen und Id's eingefügt, über die man das ganze anpassen kann.

Es sind immer mindestens 2 Klassen angegeben. Eine Globale Klasse und eine Klasse für die Jeweilige Spalte der Zelle und eventuell eine Klasse für die Ausrichtung (bezieht sich auf festgelegte [cspacer0])

Zum Beispiel:

Code
  1. <table id='ts3_h_s1' class='ts3_viewer server'summary='1'>


Nun kurz zum Aufbau:

Für den Server und für Jeden Channel bzw Spacer wird ein <table> angelegt. So das man das Grob vereinfacht so darstellen kann.

Als erstes der Servername:

Code
  1. <table id=??? class='ts3viewer server'>
  2. <tr class='row1'>
  3. <td class='prefix server'></td>
  4. <td class='corpus server'>???</td>
  5. <td class='suffix server'></td>
  6. </tr>
  7. </table>


und dann die Spacer und Channels

Code
  1. <table id='ts3_h_s1_ch47' class='ts3_viewer spacer'summary='47'>
  2. <tr class='row2'>
  3. <td class='prefix spacer'><img src='tree_mid.gif' title='' alt='' align='top' /></td>
  4. <td class='corpus spacer center' title=''> Spacer Name</td>
  5. <td class='suffix spacer'></td>
  6. </tr>
  7. </table>

wobei zu beachten ist das bei Channel "spacer" zu "channel" wird.


Logischerweise werden die Client's und Query's nach den jeweiligen Channels angegeben.


Code
  1. <table id='ts3_h_s2_cl42' class='ts3_viewer client' summary='42'>
  2. <tr class='row2'>
  3. <td class='prefix client'></td>
  4. <td class='corpus client' title='ID: 42 | Version: 3.1.8 | Platform: Windows'> Steve </td>
  5. <td class='suffix client'></td>
  6. </tr>
  7. </table>




Es gibt noch eine Besonderheit.

Wie ihr ja vielleicht schon bemerkt habt kommt als Row Klasse noch "Row1" und "Row2" zum Einsatz und nur diese Beiden sind immer abwechselnd.

Also: 1. Table = Row1; 2. Table=Row2, 3.Table = Row1, 4.Table = Row2, usw...



Die Klassen:



Klasse

Kommt vor


Global



ts3_viewer

<table>

Kommt in jeder Table Deklaration vor, somit kann global zugwiesen werden

Servertable



server

<table>;<td>

Globale Table Klasse der Serverinfo

Server Inhaltstable



spacer

<table>;<td>

Gloale Klasse für Platzhalter

channel

<table>;<td>

Globale Klasse für Channel

query

<table>;<td>

Globale Klasse für Querys

client

<table>;<td>

Globale Klasse für Clients

Unterklassen



prefix

<td>

1.Feld einer Zeile, die Symbole für Channels, Server, Clients...

corpus

<td>

2. Feld der Zeile, Namen für Channels, Clients, Server, ...

suffix

<td>

3. Feld der Zeile, Üblicherweise für die Symbole genutzt

Ausrichtungsklassen



center

<td>

Spacer Zentrierungsklasse

left

<td>

Spacer Klasse für Linksausrichtung

right

<td>

Spacer Klasse für Rechtausrichtung



IDs:

Die IDs gibt es auch noch, da wird es aber schon ein wenig umfangreicher.

Beispiele

"ts3_h_s1" ist die ID für den Servertable

"ts3_h_s1_c13" für einen Client oder Query Table

"ts3_h_s1_ch32" als ID für einen Spacer oder Channel.


Wobei man jetzt beachten sollte dass:

"ts3_h_" allgemein ist.

"s1" steht für Virtuellen Server mit der ID 1, der ID2 würde also "s2" heißen.

"c13" hier habe ich nicht wirklich eine sinnvolle Zuordnung rausfinden können.

"ch32" hier wiederum steht die Zahl für die ID wie der Channel oder Spacer in der Datenbank hinterlegt ist


Für ein globales Layout, brauchen wir das aber erstmal nicht. Also dazu später mehr.



Ich denke mal ab hier läßt sich alles andere ableiten.

Im Teil 2. "praktische Anwendung" werden wir das ganze mal Testen.

    Kommentare