• JAM3 - HD and 4K

  • KOTAK 3 Icon Pack

  • JAM2 HD - v2.8.3

Thursday, March 30, 2017

How to skin foobar2000 - Part 5

Read other parts:

Elements Relative Position and Size

A by FlipOut69

If you already using my Jam, you can easily see on Collection interface that album browser (center panel) starts from 3 columns on default size (1200px x 600px) 
and goes up to 7 columns on 1920px x 1080px. Also the ELPlaylist (right panel) goes from 373px (1200px x 600x) to 493px (1920px x 1080px). 
With this tutorial you can also use codes to distribute additional width and height of your current window size to your liking.

Components Required
Columns UI 
Panels Stack Splitter 
UI Hacks

1. First of all, install foobar on portable mode, select Columns UI when you open foobar2000. 

1 by FlipOut69

Then go to preferences -> Display -> Main Window -> set minimum size to 500px x 500px (It's important to set the minimum size of the window) -> apply
Resize your current window size to 500px x 500px . You can also configure frame style from Main Window, I prefer to hide it (No Border).

B by FlipOut69

2. Go to Preferences -> Display -> Columns UI-> Layout tab -> remove Vertical Splitter and NG Playlist then add Panel Stack Splitter. Click Apply

C by FlipOut69

Remove all panels on top (Playback buttons, menu, etc) and bottom (status pane) so there's no panels left.

D by FlipOut69

3. Let's start with creating 4 rectangles, Right-click on any area -> Splitter Settings -> Script tab -> copy-paste these codes:
E by FlipOut69

With these codes, each rectangle has 250x width and 250px height, but if you stretch the window wider on higher, those rectangles didn't get additional width and height, 
that's normal because they are on fixed size.

4. Delete codes in step 3 and replace it with these:

*%_width% and %_height% are variables to measure the width and height of foobar2000 window. Right now (on default size) it has value of 500.
F by FlipOut69

With these codes, the green and grey rectangles gets wider if you widening the window, also the blue and grey rectangles gets more height if you drag the window higher, 
but the red rectangle size remains the same.

5. The idea of this tutorial is that, when you drag the window wider and/or higher, you can distribute the additional width and height to your elements (at least 2 elements and e.g. rectangles on this tutorial)
Let's create 2 variables to measure the additional width and height of your window size, then divided them by two :

*RelPos stands for relative position

Delete codes in step 4 and replace it with these:
G by FlipOut69

With these codes, ALL rectangles gets more width and height if you resize the window to a wider or higher size. RelPos (X & Y) measures additional width and height and distribute it to our rectangles.
On default size (500px x 500px), '$add($get(RelPos_X),250)'and '$add($get(RelPos_Y),250)' equals 250px, but when you resize your window, say 1000px x 1000px, those 2 variables has value of 500px (250 + width/height - 250 then divided by 2)

6. Now that you already distributed addditional width & height by two, you can for example, distribute it by six (1 element gets 5/6 of additional width or height and the other element gets 1/6).
Just add another two RelPos:

Then replace these codes:


*The red rectangle gets 5/6 of additional width, and the green rectangle gets 1/6 of additional width)
H by FlipOut69

You can change rectangles on this tutorial to any elements (i.e. panels) of your skin, the theory is same.
Hope this helps!

How to skin foobar2000 - Part 4

Read other parts:

Avoiding Truncated Panels

This is another trick I learned when creating JAM. The idea is, if you drag the foobar2000 window higher or wider, panels' row and/or column doesn't get truncated because lacks of space. For example if you use ELPlaylist and it has 560px of height, and you set each row to 50px, the panel will display 11 rows instead of 12 rows but the lowest row gets truncated. This trick is taking advantage of foobar2000 incapabilities of counting math down to decimals.

Components required :
Columns UI 
Panels Stack Splitter 
UI Hacks 
*copy the dll files to components folder

1. Install foobar on portable mode, select Columns UI when you open foobar2000.

1 by FlipOut69

2. Go to Preferences -> Display -> Columns UI-> Layout tab -> remove Vertical Splitter and NG Playlist, add Panel Stack Splitter then insert ELPlaylist under Panels Stack Splitter. Click apply.

2 by FlipOut69
3. Still on Columns UI page, go to status bar tab and uncheck 'show status pane'.

3 by FlipOut69
4. Remove all toolbar panels (menu, buttons, etc). Set the minimum window size to 500px x 500px from Prefs -> Display -> Main Window -> minimum size. Click OK. resize window to 500px x 500px.

4 by FlipOut69

5. Download ELPlaylist configuration file from : 1drv.ms/u/s!Av2zK_6HFiBKuECaqS…
Import it by right-clicking on ELP panel -> Settings -> Import -> ELP.elp. Drag and drop at least 1 album of your songs to foobar2000 window.

5 by FlipOut69
7. Right-click on empty area -> Splitter settings -> PanelList tab -> Rename ELPlaylist caption to 'ELP', check 'forced layout' and click apply. 

6 by FlipOut69

From this screenshot you can easily see that the songs at the bottom ('Space Bound') gets truncated because lack of space.
8. Still on Splitter settings, go to Script tab -> Copy-paste these code :

7 by FlipOut69
The first variable will measure the current height of the window and divide it by 50 (row's height in pixel).
The second variable will multiplying it back to 50px. 

9. You can also use the math (dividing and multiplying) for panel's width, the theory is same.

Good Luck!

How to skin foobar2000 - Part 3

Untitled-3 by FlipOut69

A lot of awesome foobar2000 skins here in DA will let you switch between multiple panels. It means you can put many panels in the same place, on top of each other, and then assign a set of buttons to trigger which panel should be shown, whilst the rest of it remains hidden. 

Lux by Markkoenig and my Jam would be a perfect examples. As you can see on the screenshot below, Lux and Jam use set of buttons to show the selected panel. By the way, Lux is using text buttons while Jam is using image buttons.
1 by FlipOut69

With this tutorial, you can also create similar feature for your skin.


This is the third part of our ongoing tutorials, make sure you already read the first and second part before we begin. There are things that I won't explain too much because they are pretty much already covered in the earlier parts. 


1. We're gonna build this from the scratch, so let's build it on a new portable installation of foobar2000 instead of what you're using right now. You also need to download these components that will be used in this tutorial :

    - Columns UI
    - ELPlaylist
    - Library Tree

Just extract them and copy the *.dll files to the components folder.

2. Run foobar2000. User interface option will appear, choose Columns UI. First, resize foobar window to a more compact size.

1 by FlipOut69

3. Go to Columns UI layout setting page (File -> Preferences -> Display -> Columns UI -> 'Layout' tab) and create new preset, name it anyway you like. You will see there's 'NG Playlist' listed there. Change it to Horizontal Splitter.
2 by FlipOut69

4. Right-click on the Horizontal Splitter, now choose Insert Panel -> Splitters -> Panel Stack Splitter. To make it shorter to type, from now on we'll call Panel Stack Splitter as "PSS".

3 by FlipOut69

5. We need to decide how much switchable panels we want to create. To avoid unnecessary complexity we'll start by creating 2 switchable panels. I want the first panel to display library tree and the other one is for ELPlaylist. Let's add them into the PSS panel we created earlier (right-click on PSS -> Insert panel -> Panels -> Library Tree, then Insert panel -> Playlist Views -> ELPlaylist). Click OK to close preferences window. Now foobar will display these two panels, but still positioned side-by-side. 
4 by FlipOut69

6. Right-click on PSS caption -> splitter settings. Splitter Settings window will pop up and in PanelList tab you can see our two new panels listed there. Now we have to set their position and size, let's start to make them identical and place them around the bottom area of the window. Insert these values on both panels :
Left : 0
Top : 250
Width : %_width%
Height : $sub(%_height%,300)
5 by FlipOut69

And don't forget to check the 'forced layout' option. Now with this code, these panels will be positioned 250px from the top and 50px from the bottom, and if you resize your foobar window to make it taller, these panels will also get more height, but the top and bottom margins remain intact. We can use these blank spaces to add other elements, and in this tutorial, we will use the space at the bottom for switcher buttons.

7. Still in the splitter settings window, now we move on to script tab. There are 2 additional tab called PerTrack and Per Second, but now we limit our tutorial to PerTrack only. We'll tell foobar that we want to create 2 switchable panels, with this code :
Let's jump to Global Variables tab and choose reload. If 'showpanel' listed there, we can turn back to script tab and delete the code, so the PerTrack page will blank once again. 

6 by FlipOut69

8. Now we can start creating buttons! First, let's try with a much simpler text buttons. Copy these code to PerTrack page :
$textbutton(0,$sub(%_height%,50),100,50,Library,Library,SETGLOBAL:showpanel:1;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(105,$sub(%_height%,50),100,50,Playlist,Playlist,SETGLOBAL:showpanel:2;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)
RGB color note :
255-255-255 : White
100-100-100 : Dark Grey
105-210-231 : Light Blue
Click apply, you'll see these buttons at the bottom of the window. 
7 by FlipOut69

9. We'll continue writing codes, this time we will tell foobar what we want to see when we click these buttons. Of course, the first button is to show library panel, and the second is for ELPlaylist. We will use $ifequal, $get_ps_global and $showpanel_c functions for this one.

$showpanel_c(Library Tree,1),
$showpanel_c(Library Tree,0))

The above code, combined with $textbutton we created earlier, is our way to tell foobar "If we want to see then show it, otherwise hide it". The first 3 lines will tell foobar if we click the 'library' button, the library panel will be shown, and if we don't (because we clicked another button), then the library panel will be hidden. The next 3 lines also have the same function, but it's for ELPlaylist. Now click OK to close splitter settings window. Try to click each button to test our code. Up until this point, ELPlaylist will show nothing but a blank white page, it's because we haven't loaded any music to foobar, try to drag n drop one of your music folder to ELPlaylist.

8 by FlipOut69

10. How about we add another panel? Channel Spectrum Panel to show nice visualization of your playing track? We can add it via right-clicking on the empty area -> add panel -> visualisation -> channel spectrum panel. Now this panel placement will take the whole area. Don't worry, Right-click on the PSS caption -> Splitter settings. And we're gonna put the same position and size from step #6 for channel spectrum panel. 

"Channel Spectrum Panel" is surely a long name, why don't we change it to a shorter word, "Viz" maybe?

9 by FlipOut69

11. We'll create an additional text button for this panel, copy this code and paste it in script tab, just below the two buttons we created earlier :
$textbutton(210,$sub(%_height%,50),100,50,Viz,Viz,SETGLOBAL:showpanel:3;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)
Then add similar code described in step #9 for this panel :
Please notice that we don't use "channel spectrum panel" on $showpanel, but "Viz". It's because we already changed its caption on step #10. Renaming panels is necessary when you have 2 or more panels from the same component, and might come in handy if the panel's name just too long.

Up until this point, this is your code in the PerTrack page :
$textbutton(0,$sub(%_height%,50),100,50,Library,Library,SETGLOBAL:showpanel:1;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(105,$sub(%_height%,50),100,50,Playlist,Playlist,SETGLOBAL:showpanel:2;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(210,$sub(%_height%,50),100,50,Viz,Viz,SETGLOBAL:showpanel:3;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)
$showpanel_c(Library Tree,1),
$showpanel_c(Library Tree,0))
Now click 'OK' to close splitter settings window and try playing one of your songs and switch between panels using those buttons. Awesome isn't it?

10 by FlipOut69

12. You will see that the buttons background color will change to light blue when we mouseover to it. We can use the same color to indicate which panel is currently active by assigning new variables. First, we have to open splitter settings again and edit the placements of our codes. Now, those 3 $textbutton codes will be placed right below the $ifequal codes, We'll use a couple of $puts function in between the $ifequal, and $get to replace the "100-100-100" in our textbuttons 'brushcolor' value, particularly with a different color that'll indicate which panel is currently active/shown. To make it simple, let's just replace your current code with this one :

$showpanel_c(Library Tree,1)
$showpanel_c(Library Tree,0)
$textbutton(0,$sub(%_height%,50),100,50,Library,Library,SETGLOBAL:showpanel:1;REFRESH,fontcolor:255-255-255 brushcolor:$get(LibButton),fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(105,$sub(%_height%,50),100,50,Playlist,Playlist,SETGLOBAL:showpanel:2;REFRESH,fontcolor:255-255-255 brushcolor:$get(PlsButton),fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(210,$sub(%_height%,50),100,50,Viz,Viz,SETGLOBAL:showpanel:3;REFRESH,fontcolor:255-255-255 brushcolor:$get(VizButton),fontcolor:255-255-255 brushcolor:105-210-231)
Bolded Text : our new code from this step.

Now let's take a look at "$get(LibButton)". We already set what "LibButton" means by assigning the variable value on earlier codes, in fact, we have variables with 2 different colors (Light Blue & Dark Grey) for "LibButton". Either color will be used depending on which panel currently active. If it's Library Tree, then "LibButton" means "105-210-231" or Light Blue, if it's not, then "LibButton" means "100-100-100" or Dark Grey. Same thing can be said about $get(PlsButton) and $get(VizButton).
11 by FlipOut69

13. You can try to move both panels and buttons around, you want to change the text buttons position to the top of your skin? sure you can, just change the "y" value on each $textbutton to "0" (remember that "0" means "on top" and a higher value means a lower position). Now you can use blank space at the bottom to make each panel taller. Go to PanelList and change each panel's height to "$sub(%_height%,250)". 

12 by FlipOut69

14. Now, instead of text buttons, we're gonna use image-based buttons. Download my sample icons first, extract the skins folder to your foobar installation folder. We will set the PSS background to a darker color to provide better contrast for our icons. Go to splitter settings -> "Behaviour" tab -> check "custom background color" -> click "change colour". Let's start with a darker grey (50-50-50).

Sample Icons :
Sample by FlipOut69
13 by FlipOut69

Next, access script tab and replace all of the $textbutton with $imagebutton, also we also need change the $puts value from RGB color to each icon's location and filename.
Use this :
$showpanel_c(Library Tree,1)
$showpanel_c(Library Tree,0)
14 by FlipOut69

15. Let's add cover artwork and strings for title, artist and album info for the playing song just below our current code.
/////////////////////////////////////////// COVER & TEXTS
$font(Segoe UI,20)
$font(Segoe UI,17)
$drawstring(%album% by %artist%,10,215,%_width%,36,230-230-230,elipchar)
15 by FlipOut69

We'll continue this later with a more complex schemes, including show/hide multiple panels and move some elements around at once, and then create a second set of switcher buttons. Our goal is pretty much like these screenshots below :

1 by FlipOut692 by FlipOut693 by FlipOut69

How to skin foobar2000 - Part 2

F2ktuto by slowboyfast

This is the re-uploaded version of "How to Skin foobar2000 Part 2" projects. All credits belongs to slowboyfast (the original poster).

Read other parts:

  • :iconmarkkoenig: Part 1 Basics
  • :iconslowboyfast: Part 2 - Composition & Graphics
  • :iconflipout69: Part 3 - Panel Switchers
  • :iconflipout69: Part 4 - Avoiding truncated Panels
  • :iconflipout69: Part 5 - Elements Relative Position and Size

Composition & Graphics

   In this part, you'll learn the basics of foobar graphic coding. You may think "graphic coding" sounds like something serious and hard, but once you've learned it, it'll be as easy as writing a DA Journal.
This part will focus mainly on using CUI (ColumnsUI), PSS (Panel Stack Splitter) and ELP (ELPlaylist).


  • Maths - most drawing functions use coordinates, lengths, widths and other scary stuff. It's mandatory to have at least basic knowledge of maths (adding, substracting, dividing).
  • Full set of components - your theme is what you want it to be. Make sure you have all addons you want to use.
  • Graphic editing software - it's completely optional but handy when there's no other possibility to draw an element.
  • Large amount of free time - draw it, test it, correct it, repeat!

Ready, set, theme!

1. Compose

   Your project should start like any other big thing. You may want to hop right in into skinning but what if all of your work will go into something that won't work. It's always good to start drawing your idea on paper. Try to make a mockup in Photoshop or Gimp. Experiment with colors and layouts. Make something that is good looking and easy to use.
I'm always starting with a messy sketch:Brainstorm by slowboyfast

And it helps me with achieving results like this:
Wip by slowboyfast

2. Draw

   Ok, so you've got your plan clear in your head, sketched and prepared. I'm also assuming that you're familiar with Markkoenig's tutorial part 1. Now it's time to draw stuff. There are some basic functions you need to know:
  1. $drawrect - draws rectangles and lines
  2. $drawroundrect - draws rounded rectangles (my favorite for making buttons)
  3. $gradientrect - draws gradients
  4. $drawblurrect - draws blurry rectangles (useful for making shadows/glows)
  5. $drawellipse - draws ellipses
  6. $drawtriangle - draws triangles
//NoticeIt's worth noting that each function consists of coordinates, height & width values, color values and special arguments. They work in both ELPlaylist and PSS.

1. $drawrect
As I stated earlier, it's used for drawing rectangles and lines. It's pretty much the most essential function.
String for $drawrect looks like this:
In example, if we want to draw horizontal line, we should write:

And it will draw a red line on coords 50(X), 50(Y), which will be 300px long and 1px wide.Redline by slowboyfast

If we want to draw a rectangle, we can just modify the width of our first line and move it a little to the bottom.

It will draw a rectangle on coords 50(X), 70(Y). It'll be 300px long and 10px wide.

Redrect by slowboyfast
Ok, let's draw vertical line this time. We should change the X coord to, let's say, 360(X). This way our new line will stay visible. We should also change the color for good measure.

And look, our blue line is here!
Blueline by slowboyfast

2. $drawroundrect
Well, it should be obvious, it's used for drawing rectangles with rounded corners :) (Smile)
String for this function looks like this:
Now, we need some math. Degree of roundness is defined by R1 and R2. To achieve nice looking rounded corners you should remember that WIDTH should always be greater than 4*R1 and HEIGHT should always be greater than 4*R2.

Okay, enough with maths, let's draw ourselves a nice roundrect.

And here it is, a small rounded rectangle. Notice that our width (100) is greater than R1 (3*4=12). Same thing goes for height (20) which is greater than R2 (3*4=12).
Roundrect by slowboyfast

3. $gradientrect
Next thing is gradientrect. And it draws, guess what, gradients!

Now lets draw two of them, just to show people how amazing gradients are.
First gradient will be a horizontal one. To achieve this, we gonna write our string like this (with "horizontal" argument):
Second one should be vetical. Small modification of X and Y coords, maybe a slight change in the color. We should also add "vertical" as an argument.

Amazing gradients!
Gradients by slowboyfast

4. $drawblurrect
Nothing much to say about this one. Draws blurred rectangles. Ideal for glowing stuff or shadows.
We can control amount of blur by modifying BLUR STRENGTH argument (1 - weak blur, 7 - strong blur)

Let's draw some blurry things, shall we? First one will be level 1 blurred rectangle, second will get level 7 blur.
Few small changes in coords and color and here they are. Blurrects!
Blur by slowboyfast

5. $drawellpise
Another self explanatory function which draws ellipses :) (Smile) String looks like this:

Let's play with this one. By modifying WIDTH and HEIGHT we can make perfect circles or stretched ellipses.
First one will be a perfect circle. Move it a little to the bottom and make sure WIDTH and HEIGHT are equal.
Second one will be stretched vertically. Move it to the left and increase its height.
Last one will be stretched horizontally. Move it again and increase its width.

And we made it. Three little dots!
Ellipses by slowboyfast

6. $drawtriangle
It's a tricky one. Draws triangles. String looks like this:

It has 3 coords for X and 3 for Y. Each one represents a corner of a triangle. Let's draw one.

Here it is, a triangle.
Triangle by slowboyfast

3. Write

    Yeah, that's right. Making text strings is another essential thing for f2k themer. They're found nearly everywhere. On playlists, panels and buttons.

There are four functions that are capable of drawing text:
  1. $drawtext - which is capable of alpha blending, glowing and other shiny stuff
  2. $drawtextex - which can't do transparency but is faster than $drawtext (it's better for spamming and creating crispy, strong shadows)
  3. $textbutton - which draws buttons made entirely of letters
  4. $drawstring - can do magics! (gonna describe it later)
1. $drawtext
String looks like this:
Arguments for $drawtext:
  • left - aligns text to the left
  • right - aligns text to the right
  • hcenter - centers text horizontally
  • vcenter - centers text vertically
  • top - aligns text to the top
  • bottom - aligns text to the bottom
2. $drawtextex
String looks like this:
Arguments for $drawtextex:
  • left - aligns text to the left
  • right - aligns text to the right
  • hcenter - centers text horizontally
  • vcenter - centers text vertically
  • top - aligns text to the top
  • bottom - aligns text to the bottom
  • end_ellipsis - if your text is too long, this arg. resolves clipping issues by ending text with (...)
Right, now we should test our functions. Let's make two strings, one made in $drawtext and second made in $drawtextex
$drawtext(THIS TEXT WAS WRITTEN BY '$DRAWTEXT' FUNCTION,50,50,300,20,0-0-0,)
$drawtextex(THIS TEXT WAS WRITTEN BY '$DRAWTEXTEX' FUNCTION,50,70,300,20,0-0-0,)

Textstrings by slowboyfast

As you may noticed, both strings look similar, so here's my advice. If you can, go for $drawtextex. It's faster, can solve clipping errors and is good for making nice little effects on buttons and playlists.

3. $textbutton
One of the most versatile functions out there. It can show/hide panels, minimize, maximize, change layouts. It can do nearly everything we want it to do.
It's string consists of:

In example, if we want to make a button that opens up preferences, we can write a string like this:

When we move our mouse over this button, it will change color to red. And of course clicking on it, will open up prefs.

We can control font size, type and face with one simple string.
FACE - is a name of our font e.g. Calibri Bold Caps
SIZE - controls size :) (Smile)
TYPE - controls if our font is normal, bold or italic.

And again, it's visible here:
Textstrings by slowboyfast

4. Combine

    To make some decent looking themes, we need to combine those drawing functions. It's similar to using layers in graphic apps, only instead of "WYSIWYG" interface we're on our own with lines of code. 
Combining, or as I like to call it - layering, occurs when we put a shape over other shape. In foobar, it may be a little awkward since topmost layer is always closer to the bottom. Everything we write last will be put on top of other things. Look at this two rectangles below.
L1 by slowboyfast

In this case, cyan rectangle (layer 2) is our top layer. Look what happens when we switch layer 2 (cyan) with layer 1 (magenta).

L2 by slowboyfast

Since magenta rectangle is now closer to the bottom, foobar will treat it as topmost layer. This technique can be used to achieve pretty nice effects. Let's say we want to make a simple looking art viewer for our skin. We should start with drawing a rectangle:


Albart1 by slowboyfast

Then, we wan't to put a smaller and a bit darker rectangle over it. It will create a thick border.:


Albart2 by slowboyfast

Next, we should use artreader function to display our artwork:

$imageabs(44,9,162,162,%path%,artreader nokeepaspect,)
Albart3 by slowboyfast

Looks ok, but it's a little bland. Let's make our cover a bit lighter on top:


Albart4 by slowboyfast

Looks even better. We should add a little shiny effect in top left corner for good measure:


Albart5 by slowboyfast

There's still something missing here. We should add a shadow to make it complete. To do this, we have to move all our code a notch to the bottom and write a $drawblurrect function:


Albart6 by slowboyfast

And that's it. That's how we draw stuff in foobar (or at least in PSS). 

This part is still incomplete (mostly because of my work, I don't have much time lately) but I'll add more. I just want to share this little starter guide. Hope it helps all those people who are new to f2k. Cheers! ;) (Wink)

To do:
  • describe $drawstring
  • control height and width with %_width% & %_height%
  • insert images with %imageabs
  • make some efficient global settings with $puts
  • $add, $sub and $div or simply add, substract and divide
  • floating panels (POP-UPS!)
  • retractable panels