Tutorial Make your own 'Extended' Skin

[Kleberstoff]

This will be a small Tutorial and it will explain how you can get any Theme/Skin/etc.

Before you start, you should consider making a backup of the style you want to edit.

Spoiler: before

Spoiler: client

Spoiler: channel

Spoiler: server

Spoiler: after

Spoiler: client

Spoiler: channel

Spoiler: server

Note: The White Missing Symbol would be a Linux/Windows

Step 1:
- Get a Skin you want to use. I'll be using Battlefield 4 for this Tutorial but anything Theme/Skin should work.
Step 2:
Install it and open you'r Teamspeak 3 Folder, for me it would be %appdata%/TS3Client and then go to you'r Styles Folder

Spoiler

Step 3:
Edit the 'clientinfo.tpl', 'serverinfo.tpl' and 'channelinfo.tpl'. Recommand using something like Notepad++.

When editing those files, we see at the end of those files something like this

Spoiler: Example

<table id="container">
    <td><table id="info">
   
            <tr><td class="user"><table>
                    <tr><td class="infoheader">SERVER: <span class="greytext"> INFORMATION </span></td></tr> 
                    <tr><td class="infotext">Server Adress: <span class="bluetext"> %%SERVER_ADDRESS%%:%%SERVER_PORT%%</span></td></tr>
                    <tr><td class="infotext">Version: <span class="bluetext"> %%SERVER_VERSION%% on %%SERVER_PLATFORM%%</span></td></tr>
                    <tr><td class="infotext">Online since: <span class="bluetext"> %%SERVER_UPTIME%%</span></td></tr>
                    <tr><td class="infotext">Client connections: <span class="bluetext"> %%SERVER_CLIENTS_ONLINE%%] / [%%SERVER_CLIENT_CONNECTIONS%%] </span></td></tr>
                    <tr><td class="infotext">Query connections: <span class="bluetext"> [%%SERVER_QUERYCLIENTS_ONLINE%%] / [%%SERVER_QUERY_CLIENT_CONNECTIONS%%]</span></td></tr>
                    <tr><td class="infotext">Channel & Slots: <span class="bluetext"> [%%SERVER_CHANNELS_ONLINE%%]&nbsp;-&nbsp;
      [%%SERVER_MAXCLIENTS%%] %%?SERVER_NO_RESERVED_SLOTS%%
      [%%SERVER_MAXCLIENTS%%]&nbsp; (-%%?SERVER_RESERVED_SLOTS%% reserved)</span></td></tr>                    
            </table></td></tr>
            <tr><td>&nbsp;</td></tr>
 
    </tr>
       
    </table></td>        
</table></table>
<table><tr><td"></td></tr></table>

We gonna edit this Table in all of those three files.

ONLY EDIT THE TABLE 'INFO'

Spoiler: Code for the channelinfo.tpl

<table id="info">
  <tr title="Channel Order: %%CHANNEL_ORDER%%">
    <td class="label">Name:</td>
    <td dir="LTR">
      %%CHANNEL_NAME%%&nbsp;
      <span class="small" title="Channel ID">(%%CHANNEL_ID%%)</span>
    </td>
  </tr>
  <tr><td class="label">Topic:</td><td>%%?CHANNEL_TOPIC%%</td></tr>
  <tr>
    <td class="label">Codec:</td>
    <td>
      %%CHANNEL_CODEC%%
      &nbsp;<img src="styles:/default_extended/media/encrypted_12x12.png" alt="%%?CHANNEL_VOICE_DATA_ENCRYPTED_FLAG%%" />
    </td>
  </tr>
  <tr>
    <td class="label">Codec Quality:</td>
    <td>%%CHANNEL_CODEC_QUALITY%% (estimated bitrate: %%CHANNEL_CODEC_BITRATE%%/s)</td>
  </tr>
  <tr><td class="label">Type:</td><td class="blue">%%?CHANNEL_FLAGS%%</td></tr>
  <tr><td class="label">Current Clients:</td><td>%%?CHANNEL_CLIENTS_COUNT%% / %%CHANNEL_FLAG_MAXCLIENTS%%</td></tr>
  <tr><td class="label">Needed Talk Power:</td><td class="red"><img src="iconpath:MODERATED" height="16" width="16" alt="" title="Request Talk Power to be able to talk in this Channel." />&nbsp;&nbsp;%%?CHANNEL_NEEDED_TALK_POWER%%</td></tr>
  <tr>
    <td class="label">Subscription Status:</td>
    <td>%%CHANNEL_SUBSCRIPTION%%</td>
  </tr>
  <tr>
  <td class="label">Voice Data Encryption:</td><td>%%CHANNEL_VOICE_DATA_ENCRYPTED%%</td>
  </tr>
  %%?PLUGIN_INFO_DATA%%
</table>

Spoiler: Code for the clientinfo.tpl

<table id="info">
  <tr>
    <td class="label">Nickname:</td>
    <td dir="LTR">
      <img src="%%?CLIENT_COUNTRY_IMAGE%%" alt="" title="%%CLIENT_COUNTRY_TOOLTIP%%"/>&nbsp;&nbsp;
     <a href="client://%%CLIENT_ID%%/%%CLIENT_UNIQUE_ID%%~%%CLIENT_NAME_PERCENT_ENCODED%%" style="text-decoration: none; color: red;">%%CLIENT_NAME%%</a>&nbsp;
      <span class="blue" title="Custom Nickname">[%%?CLIENT_CUSTOM_NICK_NAME%%]</span>
     <span class="small" title="Client ID">(%%CLIENT_ID%%)</span>
    </td>
  </tr>
  <tr>
    <td class="label">Unique ID:</td>
    <td>%%CLIENT_UNIQUE_ID%%</td>
  </tr>
  <tr>
    <td class="label">Database ID:</td>
    <td>%%CLIENT_DATABASE_ID%%</td>
  </tr>
  <tr><td class="label">Description:</td><td>%%?CLIENT_DESCRIPTION%%</td></tr>
  <tr><td class="label">Volume Modifier:</td><td class="red">%%?CLIENT_VOLUME_MODIFIER%% dB</td></tr>
  <tr>
    <td class="label">Version:</td>
    <td>%%CLIENT_VERSION%% %%CLIENT_VERSION_STATE%% on <img src="styles:/default_extended/media/%%CLIENT_PLATFORM%%.png" alt="" title="%%CLIENT_PLATFORM%%" /></td>
  </tr>
  <tr>
    <td class="label">Connections:</td>
    <td>%%CLIENT_TOTALCONNECTIONS%%</td>
  </tr>
  <tr>
    <td class="label">First Connected:</td>
    <td>%%CLIENT_CREATED%%</td>
  </tr>
  <tr>
    <td class="label">Online Since:</td>
    <td>%%CLIENT_CONNECTED_SINCE%%</td>
  </tr>
</table>

Spoiler: Code for serverinfo.tpl

<table id="info">
  <tr>
    <td class="label">Name:</td>
    <td>%%SERVER_NAME%%</td>
  </tr>
  <tr>
    <td class="label">Address:</td>
    <td>%%SERVER_ADDRESS%%
        :%%?SERVER_PORT%%
    </td>
  </tr>
  <tr>
    <td class="label">Version:</td>
    <td>%%SERVER_VERSION%% on <img src="styles:/default_extended/media/%%SERVER_PLATFORM%%.png" alt="" title="%%SERVER_PLATFORM%%" /></td>
  </tr>
  <tr>
    <td class="label">License:</td>
    <td>%%SERVER_LICENSE%%</td>
  </tr>
  <tr>
    <td class="label">Uptime:</td>
    <td>%%SERVER_UPTIME%%</td>
  </tr>
  <tr>
    <td class="label">Current Channels:</td>
    <td>%%SERVER_CHANNELS_ONLINE%%</td>
  </tr>
  <tr title="Total Client Connections: %%SERVER_CLIENT_CONNECTIONS%%">
    <td class="label">Current Clients:</td>
    <td>%%SERVER_CLIENTS_ONLINE%% / %%SERVER_MAXCLIENTS%% %%?SERVER_NO_RESERVED_SLOTS%%</td>
    <td>%%SERVER_CLIENTS_ONLINE%% / %%SERVER_MAXCLIENTS%% (<span class="red">-%%?SERVER_RESERVED_SLOTS%% reserved</span>)</td>
  </tr>
  <tr title="Total ServerQuery Connections: %%SERVER_QUERY_CLIENT_CONNECTIONS%%">
    <td class="label">Current Queries:</td>
    <td>%%SERVER_QUERYCLIENTS_ONLINE%% / %%SERVER_MAXCLIENTS%%</td>
  </tr>
  %%?PLUGIN_INFO_DATA%%
</table>

4. Step:
Choose the Skin/Theme in you'r Client and if we did everything correct we should be able to see more information like we normally do.
See 'after' for images

Spoiler: Credits

@CanadiansEh for giving me the Idea for making this Thread

 

[CanadiansEh]

Great Job making the thread! It's nice of you to provide a tutorial for those who needed or wanted this