[TS5] [Theme Pack] Anime Theme for TeamSpeak 5

[Wargamer]

This little Theme Pack contains:

- changed backgrounds behind the Channels
- changed accent colors to fit to the background
(- with chat bubbles)
- changed the favorite icon

Some Examples:

Ichigo Shikai Theme

Anime: Bleach

Tsunade

Anime: Naruto

Morgania

Anime: Magi

Kenma

Anime: Haikyuu

Aizen Third Fusion

Anime: Bleach

Black Asta

Anime: Black Clover

Madara

Anime: Naruto

Rem

Anime: RE:Zero

One Punch Man (Saitama)

Anime: One Punch Man....

Jibril

Anime: No game no life

and more....

Overview

It could be that the Thumbnail of the Themes is diffrent then the background.

More Backgrounds will probably follow.

I try to make more animated Backgrounds like the Goku Theme, but with better resultions.

Download

How to install via Theme TS5 Manager (still Windows only)

- Donwload installer from here (Github Project)

- execute installer and follow installation, you can choose between multiple themes when installing

How to install manually

- Download the file here from GitHub

- put the "de.wargamer.anime.teamspeak" folder in

• Windows: %appdata%\TeamSpeak\Default\extensions

• Mac: ~/Library/Preferences/TeamSpeak/Default/extensions

• Linux: ~/.config/TeamSpeak/Default/extensions

- After successfully Downloading and Placing the folder in the Directroy go in TeamSpeak to
Settings > Apperance and activated the option User Themes

you could also shortcut the navigation to the folder by pressing the icon under User Theme.

Credits

Thanks to @LeonMarcelHD , i learned from his Theme the setup of the CSS Code.
His cool Theme : [Skin] Colorful TeamSpeak - A TeamSpeak 5 Extension.

[_ニャー_3]

Quite nice one, muat say.

Also, that [SFW] “tag” in every female theme name. Just as if you’ll try making NSFW ones ( ͡° ͜ʖ ͡°)

[Wargamer]

Thank You.

You have good eys sir , maybe is at some point a Download link in the folder ( ͡• ͜ʖ ͡• )

[Wargamer]

Update

______________________________________________________
Added New Pictures to the Dashboard and Settings
Changed "Show Current Channel Chat"

Changed in one theme the Group Icon (Madara theme)

[Wargamer]

Update

• Changed the Group Chat Icon from Madara Design to something more appropriate
• Added New Animation (on hover)

[PhoenixmitX]

could you add this css to the theme:

.ts-server-tree-item-background-no-image {
  background: linear-gradient(90deg,var(--tsv-shaded-bg) 50% 0,var(--tsv-contrast-bg) var(--tsv-padding-h) 5%,var(--tsv-shaded-bg) 0%,transparent);
  opacity: 75%;
}

Show Channel Banners - disabled (cant read all):	Show Channel Banners - enabled (looks bad):	Show Channel Banners - enabled with additional css:

[Wargamer]

Thanks for the suggestion @PhoenixmitX ,
i added this to all Themes as Default Value, looks much better when using a small window .

[Pixnit]

hello , i wanna make a picture like that on my server but i don’t how. would you show me?

[Wargamer]

Hey @Pixnit, you probably mean to make Theme too or ?
That is not something you can modify from the Server side.

If you want to create your own Theme, you can download mine or another theme, i have used Gamer92000 Theme as template because it is good documented.

Creation of a TeamSpeak 5 theme

You can debug the whole client when starting it with a specific argument. Execute this command in the ts clients folder: TeamSpeak.exe --remote-debugging-port=9988 Open Chrome type http://localhost:9988 and press on “Teamspeak client UI” after that you can search the dom and css using the chrome dev tools like a normal webpage. For more info: Qt WebEngine Debugging and Profiling | Qt WebEngine 5.15.14

For better Preview you can activated the dev consol for ts5, then you can see better what you changed
You can pm me, if you want to chat about it [email protected]

[PhoenixmitX]

On non 16:9 screen Images are stretching.

I fixed it in a small PR:

fixed stretching images on non 16:9 monitors

Before	After

[Wargamer]

Hi @PhoenixmitX, thanks for the fixes , i mergt it .

[PunchTrees]

off topic but you are the only person who actively maintaining ts5 theme. I want to start working on my custom theme but it looks like there no way to hot reload or reload on file change for extension/plugins/theme. Do you know a way to do that? Going to settings and clicking refresh button after every small change is painful.

[Wargamer]

Hey @PunchTrees,
there are some other actives members too like gamer9200 or LeonMarcelHD ,
but no problem i will help you.

In this thread they explained how to start TS5 in debuggin mode

Creation of a TeamSpeak 5 theme

You can debug the whole client when starting it with a specific argument. Execute this command in the ts clients folder: TeamSpeak.exe --remote-debugging-port=9988 Open Chrome type http://localhost:9988 and press on “Teamspeak client UI” after that you can search the dom and css using the chrome dev tools like a normal webpage. For more info: Qt WebEngine Debugging and Profiling | Qt WebEngine 5.15.14

When you change something in the Web IDE, it will instantly effect the client apperance.

When you need some help to get started, or i explained something wrong, dm me in the forum or dm me on ts5 wargamer@myteamspeak .

[PunchTrees]

Thanks, that def helps! I use sass and then compile it to css so it so it’s not ideal but at least something.

[Wargamer]

Update

for the Theme Manger:

• rewrote from PowerShell to Python
  
  

for AnimeSpeak:

• updated hex symbols at the top right corner to fit the color schema, example:
  
• mostly fixes for the themes

[Rie1337]

omg, 3 themes from high school dxd lololol

[Wargamer]

Update

- fixed scrollbar (for beta b71)
- changed mention bubbles