Reply
World Tour
Marco
Posts: 1,509
Registered: ‎26-10-2012

How to change the Spotify skin / theme [Tutorial]

[ Edited ]

Update (January 2014): To make it clear: Those skin packages do not work anymore for the newest versions (reason below). They only work with the old versions 0.8.5 and 0.8.8.

 

While I can't change the skin for the desktop player anymore, it's possible to skin the Web Player almost 100%. You can check out my darker skin for the WebPlayer here.

 

 

Update (April 2013): I kinda gave up on updating my skins since the new version is out (0.9.0). It once again introduced more elements that can sadly not be changed with my method here. So this project is on hold for me until I (or someone else) find a way to alter these web-based UI elements. Before that happens, I don't see that much sense in continuing here. Thanks for all the downloads of my custom skins until now!

 

Note: The new white artist/album pages in version 0.8.8+ can not be changed with that method because they are web-based and not native UI elements. I'm still trying to figure out a way to do so, but so far to no avail. If you find a way, let me know please! :)

 

In this tutorial I will show you how to install already made skin packs and also how to create your very own skin.
Since Spotify is missing an official skin changer feature, this here is only a simple but effective workaround. The skin files are stored in a .zip file, which means they are open to view/change for everyone – and that’s what we do.
The process is not complicated, yet I’ve made this tutorial very detailed. Most of the time it will be enough to just read the bold points. If you are unsure about something, read the description/examples.
This tutorial is for Windows only, though I’m sure there are also related ways for Apple, Linux, etc.

 

 

How to install already made skin packs:  (Tutorial on Youtube)

(Download links of my skin packs are at the bottom of this post)

 

 

1. Make sure you have the correct version of Spotify

 

The Spotify version has to match with the version of the downloaded files, otherwise some descriptions (for example in the sidebar) might be wrong. The latest version of Spotify can differ in each country.
You can check your Spotify version like this: Go to the Spotify Menu at the top left corner  -> Help -> About Spotify

1.jpg
If you have the matching version you can continue with step 2.
If your version is different, do not just copy the files. You need to update the files manually (replacing steps in the instruction of download folder) or wait for a new version of this skin package.

 

2. Locate the resources.zip file in the Spotify data folder

 

Normally the resources.zip file is located here: %APPDATA%\Spotify\Data

Copy and paste this code into a new window and press enter.

Unbenannt.jpg

If it’s not located at this path, use the windows search function.

 

3. Replace the original resources.zip file with the resources.zip (inside the downloaded folder) while Spotify is closed

 

Make sure Spotify is closed (also in the task bar), otherwise you will encounter an error message.

Unzip the downloaded skin package so you can access the "resources.zip" inside the downloaded folder.
Drag the downloaded resources.zip file with the right mouse button to the Spotify data folder and choose copy and replace the original file.

 

4. Restart Spotify

 

After a restart the new skin should be applied.
If you choose to keep it you’re done here. Have fun and enjoy!

If you want the original skin back, go to the downloaded folder. I’ve put an original skin file of this version in it. By repeating step 3 with this file, you can go back to the original skin in seconds. If you can’t find the downloaded folder anymore - I posted download links for the original resources.zip here too.

 

Existing Skins:

Almost all changed bitmaps are based on the Spotify bitmaps. I’ve just changed color/contrast/etc.

Full screen pictures can be seen at this topic.

 

 

Spotify Client Version 0.8.5.1333:

(works for 0.8.5.1356 too)


Light & Bright:

Version 0.8.5.1333 Download

Artist View.jpg

 

Dark Blue:

Version 0.8.5.1333: Download

Artist View.jpg

 

True Green:

Version 0.8.5.1333: Download

Artist View.jpg

 

Noble Black:

Version 0.8.5.1333: Download

Artist View black.jpg

 

Original backup file (to go back to default skin):

Version 0.8.5.1333 Download

 

 

Spotify Client Version 0.8.8.3xx & 0.8.8.4xx:

Note: A lot of web-based elements got updated which can not be changed e.g. Artist/Album view, playlist header.

(Versions 0.8.8.295, 0.8.8.347, 0.8.8.348, 0.8.8.349, 0.8.8.450, 0.8.8.454)

 

Light & Bright:

Version 0.8.8.4xx: Download

Version 0.8.8.3xx: Download

Playlist View.jpg

 

Noble Black:

Version 0.8.8.3xx: Download
Playlist View.jpg

 

 

Original backup file (to go back to default skin):

Version 0.8.8.450: Download

Version 0.8.8.3xx: Download

 

 

Enjoy!

 

World Tour
Marco
Posts: 1,509
Registered: ‎26-10-2012

Re: How to change the Spotify skin / theme [Tutorial]

[ Edited ]

How to create your own skin:


Creating your own skin takes some time but is definitely worth it. With this tutorial you can change almost 100% of the elements in the 3 main views (Version 0.8.5.1333): Artist view, Top lists, Playlist view. Some elements (e.g. in profile view) can’t be changed (see “Missing elements” below) but most  are neglectable in my opinion.

The newest version (0.8.8.295) has a lot more web-based elements which can not be changed (e.g. artist/album view, playlist header).
This tutorial is again very detailed, also providing some examples to make it easier for beginners.

 

 

1. Unzip the resources.zip file into a new folder and make a backup of original resources.zip

 

Locate the resources.zip file the way I showed you before and extract the files into a new folder. With this folder you will work from now on for changing bitmaps, etc.
Don’t forget to make a copy from your original resources.zip file for backup. If something goes wrong you can easily and fast get back to the original state.

 

2. Changing files in the resources folder

 

After you extracted the files into a folder you can start changing elements.

 

There are 3 main elements you can change:
- Bitmaps: Icons and backgrounds
- Color ci: Color of backgrounds
- Font: Color, size, shadow, etc. of fonts

 

But how do you know what you have to change? Don’t worry – it took me a while but I worked that out for you.
I have created charts where you can see which element is which bitmap/code line.
The charts can be downloaded here (Version 0.8.5) and here (Version 0.8.8).

 

For changing bitmaps you can use any image editing program you prefer.
If you got photoshop – nice! If not – that’s okay: I also used only freeware programs like MS paint and MagiX Photo Designer.
Bitmaps are located mainly in the resources folder itself but also in a couple of sub folders.

 

For changing color ci and fonts you need a program that can open .xml files.
Color ci and fonts can be found in the skin.xml file in the main folder and also in some .xml files of the resources\views folder (if you just see a code in the element charts it means the skin.xml file).
I used the normal “Editor” program that is installed on every Windows.


Some useful shortcuts in this editor (these functions can also be accessed through menu):
ctrl + c = copy a marked text
ctrl + v
= paste a copied text
ctrl + s
= saves your changes
ctrl + f
= opens search window (really useful, if you don’t find anything – check if the search goes up or down)

 

If you want to change an element that has its code in a .xml file, open this file and use the search (ctrl+f).
Search for the name you see in the charts I’ve made. For example:  <color ci="SidebarBg" for the background of the sidebar. Afterwards save your changes (ctrl+s).

 

Colors of backgrounds or fonts are shown in hex code: for example #000000 = black, #ffffff = white.

This website is a good site for finding the color you need. If you want to know the hex-colorname of an element in your skin, there is a useful freeware tool: ColorPix . Saved me a lot of time.

 

At fonts you can change different things: size, color, shadow, style.
Different styles: style=”bold”, “underline”, etc.
If you want to combine them, do not use space between it: e.g. stlye=”bold,underline”

 

In the code lines there are often numerous lines for 1 element. For example the lines below:
1. <font ci="TopListRowNameBig" sel="!playing,selected,focused" size="13" color="#ffffff" style="bold"/>
2. <font ci="TopListRowNameBig" sel="playing,selected,focused" size="13" color="#ffffff" style="bold" />
The only difference here is the ! before playing. “!” can be translated as no or not.
1. Line: The font style of the big name (artist) in top lists while you clicked with the mouse on it and it’s not playing.
2. Line: The font style of the big name (artist) in top lists while you clicked with the mouse on it and it is playing.


sel=”focused” = If you click with the mouse on a song it gets highlighted/focused
sel=”selected”= If you click with the mouse on it, but doesn’t have to be focused (click with mouse on another program - it is still selected in Spotify but not focused)
sel=”notavail”= Song is not available
There are some more that can be guessed by name. You will see the different “modes” for 1 element in the code.
It’s not always necessary to change all modes. You can see in my skin instructions which ones I changed or just try out yourself.

 

3. After you changed a file, try it out in Spotify

 

After you changed a bitmap or an .xml file you want to know if it brought the hoped-for effect.

If Spotify is open, close it – also in task bar. Afterwards drag the changed file with the left mouse button to the resources.zip file of the Spotify\data folder. The old file in resources.zip gets overwritten with your new file.


Be aware: the folder structure has to be the same! Means if you change a bitmap/xml file inside a folder, you have to save it in that extracted folder and drag the whole folder to resources.zip.
Example: You change the bitmap “bg” in resources\Tab bar folder. You have to drag the whole Tab bar folder (inside is your new bitmap) to the resources.zip => Whole Tab bar folder gets replaced and folder structure stays same. Restart Spotify and if you’ve done it right you should see the change already.

 

If you like what you see and want to keep it like that: Write down what you just did!
If it was a codeline, copy the line in a new text file that documents your changes. Also write down in which .xml file!
If it was a bitmap write down the name and path to it. Also copy the changed bitmap in an extra folder!
This might be annoying but it’s really important and will save you so much time later on.


After a Spotify update, the whole resources.zip file in Spotify\data folder gets rewritten (make a backup of the new original resources.zip again!). Means if you didn’t save your files somewhere else, you have to start from scratch. If you saved them separately and have it well documented, you can get your skin back in a few minutes. While I’m writing this, I have used my skin for over 1 month without any update. So yes, it’s annoying to redo it again after each update but you can use it for a while before you have to do that. If you saved and wrote down everything it’s a matter of 5 minutes. Worth it!

 

I advise you to only change 1 element at a time and check if you like it right away.
If you change a lot of code at once and you’ve made a mistake it’s harder to track it back. Also you might lose the overview on what you’ve actually changed in this step. So 1 at a time works best!

 

Open 2 windows next to each other: 1 window with your extracted resource.zip and the other with the data folder.
This way you can work with the extracted folder and easily drag the changed files to resources.zip of the data folder.

 

4. After you’re finished with your skin create a resources.zip file of your changed files

 

Once you think that you’re happy with your skin changes:
Mark all files in your extracted resources folder and create a resources.zip file with them.
I’m using WinRAR for it: Mark all files, right click, extract to archive – now make sure you create a .zip file and that the name is resources.zip. After that it should be in your folder and you can share it if you like. Or just keep it so you can easily switch back and forth between skins.

 

Troubleshooting:

 

- You’re getting an error message like this when you want to drag files to resources.zip

3.JPG
=> You didn’t close Spotify properly. Check also in the task bar if it’s still open and close it then.

 

- Spotify gives you weird error messages

4.JPG
=> You messed up in a code line. Check your latest changes if you forgot a space before /> , # or whatever else is not correct.

 

- Nothing changes after you replaced a file:

=> Make sure you changed the right file (element charts). Also remember the folder structure (step 3).

 

- You get strange descriptions e.g. in the sidebar:
=> You’ve replaced a resource.zip file of a different version than you have. Go back to the previous version or replace it with the original resources.zip backup file.

 

Missing Elements:

 

Sad but true: Apparently not all elements of the desktop client can be changed. Here is a list with missing elements that are not found/not changeable (yet):

 

- Profile: background
- Album view: background (seriously… that gotta be changed somehow but can’t find it)
- Local files/Library: some lines in the list and the background of cover art
- Radio: completely unchangeable
- What’s new page
- Apps
- search/filter Text field

 New version 0.8.8.295:

- Artist/Album view

- Playlist header

 

I hope I could help you with this tutorial! If you got any questions about it, feel free to post here.
If you want to share any of your self-made skins you are more than welcome too!

 

Have fun and enjoy the new possibilities!

Peter
Posts: 40,688
Kudos: 11,205
Solutions: 3,127
Registered: ‎03-07-2012

Re: How to change the Spotify skin / theme [Tutorial]

Fantastic =D 

I will have to have a play around with this when I have some spare time!

 

Peter

Peter
Spotify Community Yoda and Bug Whisperer

Spotify Last.FM Twitter spoti.fi/meetpeter


If this post was helpful, please add kudos below!

Concert Regular
Late77
Posts: 5
Registered: ‎28-11-2012

Re: How to change the Spotify skin / theme [Tutorial]

For some reason the Noble Black didn't work. I have win7 desktop version 0.8.5.1333.g822e0de8 (latest). When I tried to start the desktop app with new resources.zip it stated that it is not able to load the skin.

World Tour
Marco
Posts: 1,509
Registered: ‎26-10-2012

Re: How to change the Spotify skin / theme [Tutorial]

[ Edited ]

Hmm that's weird. The version is already correct.

I've tested this on 4 different pcs and it always worked (win xp, win 7 starter, 2x win 7 premium).

Do you get any error message? If yes could you please post a screenshot of it?

 

EDIT: Just read your other topic that spotify didn't work properly before already. Perform a clean reinstall of Spotify and make sure it works. After that try to apply the skin again, should work without a problem then! ;)

Concert Regular
Late77
Posts: 5
Registered: ‎28-11-2012

Re: How to change the Spotify skin / theme [Tutorial]

Here is the picture about it:

Spotify_Skin_Change.jpg

Concert Regular
Late77
Posts: 5
Registered: ‎28-11-2012

Re: How to change the Spotify skin / theme [Tutorial]

I did not unzip the package :( I thought that I should rename it to resource.zip.

Sorry about this, now it is working..

World Tour
Marco
Posts: 1,509
Registered: ‎26-10-2012

Re: How to change the Spotify skin / theme [Tutorial]

[ Edited ]

Oh yea that makes sense haha. Glad it's working now! :)

Haven't thought people would get that wrong, thanks for the tip - I will make it clearer in the tutorial!

 

The second part of the tutorial: "How to make your own skin!" is updated. Check the 2nd post.

Music Fan
nbogan1
Posts: 3
Registered: ‎28-11-2012

Re: How to change the Spotify skin / theme [Tutorial]

"I did not unzip the package :( I thought that I should rename it to resource.zip.

Sorry about this, now it is working.."

 

This. It should be noted to unzip the green or black .zip file and inside there is the resources zip file. I thought you were supposed to rename Noble Black Spotify 0.8.5.1333.zip to resources.zip but that is incorrect

World Tour
Marco
Posts: 1,509
Registered: ‎26-10-2012

Re: How to change the Spotify skin / theme [Tutorial]

Yes, thanks for the feedback. Like I've said, I didn't think people would understand it that way.

I've added this step in the tutorial - should be clear now! Sorry about that.

Announcements



Want to be a Rock Star?
Read about our Rock Star Program.
If you'd like to join, please make sure you read the attached pdf file and fill out this form:
Please log in (or register) to see the link.

Did you know?


More

Please bear in mind that the Community is not an official Spotify support service. It's a place where we all help each other, whether we work for Spotify or not. So please use your discretion when using the forum.