[HowTo] Create a TeamSpeak skin

[Brady_The]

---

Eine deutsche Version dieser Anleitung ist derzeit nicht verfügbar. Sollte genug Interesse bestehen wäre ich bereit eine deutsche Übersetzung anzubieten. Falls du daran interessiert wärest, würde ich darum bitten dich in diesem Thema lautbar zu machen.

---

Hello everybody,

every once in a while I stumble across somebody interested in creating a TeamSpeak design, but doesn't know where to start. Instead of responding to every person individually in a thread that may or may not be soon to be forgotten on page 2, I have been thinking about creating a general HowTo thread for a while now, having rather fresh memories and experiences in creating and maintaining a style. Here we go.

Creating your own skin is not too hard, but, depending on your knowledge about certain aspects of how TeamSpeak skins are created, it might take you a while to get satisfying results, especially if you want to create a skin that changes the whole look of TeamSpeak.

TeamSpeak is using Qt stylesheets to create skins. Qt stylesheets again use syntactic rules and a terminology that is comparable to CSS.

General Tips
1) Get Notepad++. This is going to make your life a lot easier. (Using different text/source code editors you are comfortable with are obviously okay too!)

2) After you installed Notepad++, navigate to the TeamSpeak data folder. With TeamSpeak 3.1 the default location for custom plugin has changed from the Installation Folder to '%AppData%\TS3Client'. Navigate there and open a sub-folder called styles. In there you will find several files with the file extension .qss.

If you don't see the file extension do the following: https://i.imgtc.com/bwTuiPa.png (File -> Change folder and search options -> View -> *untick* Hide extensions for known file types)

This screenshot was captured in Windows 10 and an English language profile. If you are using a different operation system the options might be accessible in a different fashion. Simply searching the internet should help you out. Relevant "Easy to translate" key word: file extension

3) Within the styles folder you should find a file called bluesky.qss. Copy and paste the file. Rename it into your desired style name. In this tutorial we will go with: MyAwesomeDesign.qss. Open this file with Notepad++.

Again you can make your life a little bit easier if you do the following: https://i.imgtc.com/WIJpJ5M.png (Language -> C -> CSS)

This is going to enable CSS-specific syntax highlighting, which is going to make reading the code easier.

If you have upgraded an existing installation of Teamspeak to version 3.1 Bluesky will still be part of the installation. If you are using a fresh copy of TeamSpeak 3.1 you might have to install Bluesky from MyTeamSpeak.

4) Within the styles folder you should find a folder called bluesky. Copy and paste the folder. Rename it into your desired style name. Example: MyAwesomeDesign. You will use this folder later to save TeamSpeak style-relevant images (backgrounds, gui elements, etc) and point to those from within the .qss file.

5) Start TeamSpeak. Open the options menu (Settings -> Options) and click on Design. There you change the TeamSpeak Theme (not Style!) from System default to MyAwesomeDesign. Hit Apply.

6) Head over to the Hotkeys settings. Click on Add and on Show Advanced Actions in the following window. Scroll down to Misc. Here you want to add two actions:

• Reload Skin, which is doing exactly that, refreshing the TeamSpeak window, thus reloading the skin and applying changes made to the style, which saves you from closing and re-starting the whole program. Choose a hotkey of your liking.
• Stylesheet Helper, which (again!) is going to make your life a lot easier. By pressing the chosen hotkey it will highlight the element you are hovering over with your mouse, and display certain information which are going to help you style said element. Example: https://i.imgtc.com/Hs9U32p.png
  

  (Note: If you look at the Stylesheet helper action and the screenshot you will probably notice that my action differs from your default action. That's because you can use certain syntax to personalise the tool tip. Give it a try!)

Additional (but recommended): 7) Host your own TeamSpeak server on your local computer. This will help tremendously in creating and testing your own design. Follow this tutorial. Note: You can skip the rest of the video after 7:55 because only you need to be able to connect to the server. I highly recommend this step because it gives you full access to the server with the option to test different user profiles, create as many channels as you want, and generally go wild without interfering with anyone's business (or be interfered).

---

Helpful resources:

• https://doc.qt.io/qt-5/stylesheet-reference.html - Everything you need to know about Qt Style Sheets
• http://devdocs.io/css/ - Everything you need to know about CSS.

  Note: Not every single CSS syntax found here is going to work in the Qt environment. Sticking to the variables used in qss files, and Trial and Error are going to be your friend.

Tools:

• Gradient generator + Qt support - The creation of radients can be a pain. These tools will make this process a whole lot easier.
• Developer tools by Bluscream - For advanced users. Good for developing your design with custom addons and potential future Teamspeak updates in mind.
• QT Language definition + auto completion - for Notepad++ (HowTo)
• QT Language definition + auto completion - for Sublime Text

---

Word of caution: I would not call myself a "professional" TeamSpeak skinner, nor do I have extraordinary CSS skills. Code found in my design might be unoptimised and could be done better. Proceed with caution and please do correct me if I am wrong, when I am missing something, or if something could be done better.

With those information and resources you should be able to create your own TeamSpeak design. Have fun, and don't be shy if you have questions or hit on problems!

[Brady_The]

Multiple Identities
Being able to join a server with multiple users with unique identities has a couple of advantages. One of them being able to test how different users with different permissions (Admin vs. Guest, for example) see certain parts of TeamSpeak that (depending on access privileges) display elements as disabled instead of accessible, etc.

Creating new identities is easy and done via the Identities option menu (Tools -> Identities, or Ctrl+I). In this menu you simply click on the "Create" button, give the newly created identity an expressive name. Example: https://i.imgtc.com/DxFy5aB.png

After you created all the identities you need your next stop is the Bookmarks menu (Bookmarks -> Manage Bookmarks, or Ctrl+B). If you followed General Tip No. 7 you most likely have already a bookmark for your local TeamSpeak server. If not, simply create one. Right-click the existing localhost bookmark, select 'Duplicate' from the context menu (which automatically selects the duplicated bookmark per default), choose the identity you created in the previous step, and click on the 'Apply' button. Example: https://i.imgtc.com/qB9ind1.png

Now you can join your local TeamSpeak server with a different user, and give them all the permissions you need them to have.

Tip: You can join more than one server at a time by right-clicking a bookmark and selecting 'Connect in new tab'.

The Chat tab
After you finished creating your TeamSpeak design you are theoretically done. The customisation options that TeamSpeak offers doesn't stop there, though. You can not only change the visual appearance of TeamSpeak itself, but also what kind of information the chat tab displays and how. No worries, this feature is optional and if a custom design is unavailable TeamSpeak will simply fall-back to the default display.

1) Navigate to the TeamSpeak data folder ('%AppData%\TS3Client') and open a sub-folder called styles. Similar to the main style we are looking for a .qss file again. Because the style 'bluesky' doesn't offer a chat customisation we are going to take 'default_chat.qss', copy and paste it, and rename it into 'MyAwesomeDesign_chat.qss'.

Now you can open this file with the text editor of your choice and customise the chat layout to your liking. The '_chat.qss' file itself offers a good documentation, which is why I will not go further into this topic.

Note: Changes to '_chat.qss' are not updated by reloading the skin. A restart of the program or dis- and reconnecting to the server is the easiest and fastest way to apply the changes.

Info Templates
Are we there yet? No, we are not. There is one last thing to make your TeamSpeak design the best design out there. The display of information about Server, Channel and User located in the right tab. Again, this is optional, nothing is going to break if you do not make use of this feature, TeamSpeak will simply fall back to the default.

1) Navigate to the TeamSpeak data folder ('%AppData%\TS3Client') and open a sub-folder called styles. This time we are looking for a folder. Because the style "bluesky" doesn't offer an Information customisation we open the folder "default", copy the files "channelinfo.tpl", "clientinfo.tpl" and "serverinfo.tpl", and paste it into our style folder "MyAwesomeDesign".

Now you can open these files with a text editor and customise the layout to your liking. Pre-knowledge of very basic HTML will make editing these files a little easier, but nothing in there is too complex to not be answered by a simple google search or a question in this thread.

Note: Changes to .tpl files are updated on "reselecting", which means that you simply have to select/highlight (not even enter) the server, a channel or user.

Pro Tip: You can make your life a whole lot easier and reduce data redundancy errors by separating the CSS style information found in the template files into a external file, and simply refer to it within the .tpl.

This can be done by changing

<style type="text/css">
  table#info {
    border-collapse: collapse;
    border-spacing: 0px;
  }
  table#list {
    border-collapse: collapse;
    border-spacing: 0px;
	margin-bottom: 10px;
  }
  td {
    padding: 0px 4px 0px 1px;
  }
  td.label {
    font-weight: bold;
	white-space: nowrap;
  }
  td.space {
    padding-top: 10px;
  }
  td.list {
    padding: 4px 1px 0px 8px;
  }
  .blue {
    color: blue;
  }
  .red {
    color: red;
  }
</style>

to

<style type="text/css">
  @import url('styles/MyAwesomeDesign/style.css');
</style>

Example style.css: http://pastebin.com/raw/VN4uFshD

Your folder MyAwesomeDesign should now look similar to this: https://i.imgtc.com/Hzwbkl6.png. Note the subfolder 'images'. I created this folder and moved all pictures we initially left in the main folder to achieve a cleaner overview. Don't forget to change the syntax inside your code if you decide to do the same!

Shout-outs to fonta for bringing this to my attention.

Custom Icon Packs
This is a whole topic on its own, and I personally will not go further into it, but if you are interested in creating your own Icon Pack I would recommend you to take a look at 'default_colored_2014.zip' or 'default_mono_2014.zip' in C:\Program Files (x86)\TeamSpeak 3 Client\gfx, and use those as blueprint. These packs have several advantages over the old "legacy" gfx pack, one of them having only to create images in one resolution, and leaving the down-scaling to TeamSpeak itself, instead of having to create the same icon in 3 or 4 different sizes.

If you do not want to create your own Icon Pack, but don't want to make use of the TeamSpeak default packs either, feel free to make this (for dark styles) or this (for light styles) Icon Pack available to your users via link (no re-release!) on your release page.

Unchangeable
Certain elements in TeamSpeak use either hard-coded values and cannot be changed by style creators, or simply don't accept style information.

• Hyperlinks (except for links in chat and channel description), friend/foe name colours, name colours in 3DSoundWidget, position of user avatars and status icons use hard-coded values.
• Addon "Browse Online" feature is pulling information straight from the web and cannot be styled.
• PreviewWidget cannot be styled.
• Private channels are using register.png instead of channel_private.png. (Only midly interesting if you are working on an icon pack based on TeamSpeak's 'default_x_2014' gfx packs.

Note: This list is self-compiled and most certainly has gaps. Help me fill those gaps with your findings!

Pre-Release Preparation
In order to make installing the style you just created easier for people, TeamSpeak offers the support of archives called package files. These package files guarantee a smooth and trouble-free one-click installation, without any manual Copy-and-Paste work from the end user, which greatly reduces the potential of user errors and negative feedback.

Here you can find a very detailed explanation and manual.

>> TL;DR Version
MyAwesomeDesign.ts3_style

├ package.ini

└ styles

├ MyAwesomeDesign.qss

├ MyAwesomeDesign_chat.qss

└ MyAwesomeDesign

├ channelinfo.tpl

├ clientinfo.tpl

└ ...

package.ini

Name        = MyAwesomeDesign
Type        = Style
Author      = JoeDoe
Version     = 1.0.0
Platforms   = win32, mac, linux_x86
Description = "This is my awesome design. My gratitude and first-born go to Brady for making awesome HowTo's."

Note: Platforms can be left empty if available for all operating systems.

Note: In cases on Non-plugin addons (Style, Soundpack, Translation, Iconpack) restricting available Platforms might lead to a rejection on myTeamSpeak. Source

License
Don't do the same mistake I did. My early decisions are still haunting me to this day. Inform yourself! There are many license models out there you can make use of. You can even create your own if you think nothing fits your ideas. And if you don't want to do any of that, you do not need to. Read this.

Release - Forum
After we are finally done with all of this (or most of it) your design is ready to be released into the wild. In this forum this can be done within this very category, Skins / Icon & Sound Packs.

Pretty much all you need is a meaningful title, preferably with a [Release] prefix so people know what to expect, some screenshots showcasing your style, and a short and meaningful description that tells a reader everything about your design they need to know.

Nothing sells worse than a one-sentence thread with nothing more but a download link.

Don't be afraid of negativity or critic from the community. Generally we are a helpful bunch. If you don't believe me and/or want to have a good chuckle at my expense just read through my DarkenTS release thread.

Release - MyTeamSpeak
Head over to https://www.myteamspeak.com/, create an account, and apply for developer status. This requires a phone number. After you have been approved as developer, click on Add Addon, fill out the form, attach your package installer, add some meaningful screenshots, save the progress and wait for approval.

As of April 26th, 2017 the first screenshot uploaded will be used as cover image. Dragging images is now supported as well. A resolution of 360x200px (or any value within the aspect ratio) for the cover image is recommended.

Due to technical reasons the release of collections on MyTS is currently not possible. Splitting up your creations into separate addons is required.

Again, please hit me up me if I am wrong, when I am missing something, or if something could be done or worded better.

Good luck, have fun, and hopefully we will meet again in this sub category!

[Bluscream]

Do you think people would enjoy this?

[Brady_The]

[Read only thread bump] Keep an eye on this place for a new thread or wiki entry on this topic.