[TUTORIAL] TeamSpeak 3 themes on Linux

Tutorials and How-Tos
User avatar
p455w0rd
Site Admin
Site Admin
Posts: 283
Joined: Wed Sep 14, 2005 12:00 am
Contact:

[TUTORIAL] TeamSpeak 3 themes on Linux

Postby p455w0rd » Mon Nov 26, 2012 2:50 pm

Ok, so I'm planning to make a TS3 dFb theme as well as a similar ut99 theme for other clans to DL. One issue with TS3 theming cross-platform is the file system/directory structure from OS to OS. This results in images not displaying. Well, by peeking at the default theme, I think I've found a single cross-platform fix. all themes are installed to <TS3>/styles/. On windows this might be C:\Program Files x86\TeamSpeak 3\styles or C:\Users\<your>\AppData\blah blah blah, on MAC..i have no clue cuz fuck a mac and on linux it could likely be /usr/share/TeamSpeak 3/styles/ or even /home/<user>/.ts3client/styles/...Now, the TS3 devs did add functionality to load different css files depending on the OS. I believe this was a temp fix, because I looked in the default theme and found the /styles/ directory referenced as "styles:". I don't know if this works on MAC, but at least for Windows/Linux you can safely use "styles:" as a replacement for "<long>/

/<to>/styles"...Now let's look at an example to make things more clear. For this I am using the COD:MW3 theme located at http://addons.teamspeak.com/directory/s ... ition.html

If you load this theme on windows, it should load just fine...Linux is a different story. You'll get all the color theming but no images! (well the icons will work, but only because the path doesn't have to be defined by an end-user theme maker). Here's a little snippet from codmw3elite.qss:

Code: Select all

 QMenuBar {
   background-image: url('Styles/codmw3elite/TopTabBG.png');
   background-repeat:repeat-x;
   color: #000000;                                                   
   spacing: 4px;                                               
   font-size: 12px;
   font-family: Computerfont, Verdana, Geneva, sans-serif;
   padding-top: 2px; padding-bottom: 2px;
}

The first problem with this is the upper case "S" in "Styles". Windows is forgiving in this manner and will find the "styles" directory automagically if "Styles" doesn't exist. Linux is (imo) built for a more intelligent audience that understand the fundamental (bit-level) difference between upper-case and lower-case letters and therefore doesn't automatically look for other variants than the one supplied. So even if the paths were correct, the case isn't and this theme wouldn't work.

Solution? replace all instances of "Style/" with "style:".
"style:" (I believe) is a non-OS conforming variable for the "<installation>/styles/" directory.

So after converting that css block it would now become:

Code: Select all

 QMenuBar {
   background-image: url('styles:codmw3elite/TopTabBG.png');
   background-repeat:repeat-x;
   color: #000000;                                                   
   spacing: 4px;                                               
   font-size: 12px;
   font-family: Computerfont, Verdana, Geneva, sans-serif;
   padding-top: 2px; padding-bottom: 2px;
}


This works on Windows and Linux, and should work on MACs. Now I know the method for creating a multi-OS theme is (used to be?) to create another file appending _<OS> to the filename (excluding extension). So "codmw3elite.qss" would be the default theme file while "codemw3elite_linux.qss" would be a file only containing changes pertaining to directory structure on linux as these changes override the settings in the default theme file. Now looking at the TS3 default skin, there's "default.qss" and "default_linux.qss"...Thing is..."default_linux.qss" is essentially an empty file only containing a theme info block. So I'm not sure if this second file is really needed, but it doesn't hurt to throw it in there.

Recap:
-find your TS3 installation directory
-go to the styles directory
-find the <yourtheme>.qss file
-replace all instances of "style/" (or "Style/" - don't forget trailing forward slash!) with "style:" (no quotes)
-create blank qss file for your OS with the file name in the format of <default>_<OS>.qss (Example: codmw3elite_linux.qss)
-If TS is running, select the default theme just to be safe and restart TS3.
-Go to options and load your theme.

Dunno if it'll help anyone, but in case I ever run into this again...it's here..
Last edited by p455w0rd on Sun Feb 24, 2013 2:29 pm, edited 2 times in total.
Image
Image
User avatar
thepostman
Site Admin
Site Admin
Posts: 1133
Joined: Thu Aug 25, 2005 12:00 am
Location: Nahville tn
Contact:

Postby thepostman » Tue Nov 27, 2012 6:36 pm

Thats really cool........i am interested now......
Image

Return to “Tutorials”

Who is online

Users browsing this forum: No registered users and 1 guest