Foobar2000:Layout Editing Mode

From Hydrogenaudio Knowledgebase
Jump to: navigation, search

The Layout Editing Mode of Default User Interface enables users to easily change the overall window layout, add or remove various UI elements and change their settings, all using simple and consistent WYSIWYG-based interface.

Layout Editing Mode can be activated either by choosing its option in "Main Menu > View > Layout", or by clicking the appropriate button on toolbar (if enabled). Additionally, a "Scratchbox" window can be created using the "Main Menu > View > Layout > Create Scratchbox" command. In a Scratchbox, it is possible to try out different themes without changing the currently used layout, and apply the changes to the main window only when needed.

Easy way to get started might be choosing one of the predefined layouts using the Quick Appearance Setup, then change some of the elements afterwards.

Basic operation

The whole layout consists of individual UI elements. They can be divided into two groups:

  • functional elements - like a playlist viewer, album list or a visualisation
  • container elements - splitters and tabs

The fundamental difference is that containers can contain additional child elements, including more containers, which makes them essential for creating a complex layout. Each simple left/right or top/bottom splitter divides its area to two parts; tabbed containers, for instance, can obviously have more pages with more children.


When in Layout Editing Mode, clicking anywhere inside the window with right mouse button selects the UI element underneath mouse cursor and shows a popup menu with its options. To select a splitter, it's necessary to click on the border between its children.

The popup menu shows the active UI element's name (if there is one), a few common actions to replace, cut, copy and paste the element, and any other options the element itself might provide.

Adding UI elements

To add a new element, choose the "Add New UI Element" item from the popup menu, or simply by click in an unused area with left mouse button. New UI element can be added to an empty space only, replacing the old one is needed otherwise.

If you didn't arrive, you need to replace existing element with a splitter (top/bottom or left/right). When you do this, you now have 2 spaces. You can then add more splitters into each blank space so you end up with exponentially more panels if you need them. there is also a tabs option should you want that instead.

Replacing UI elements

Replacing an element with a different one is possible using the "Replace UI Element" option in the popup menu. Another way is to copy or cut another UI element to put it into clipboard, then select the element to replace and paste it over.

When an UI element is replaced with an empty container, it automatically embraces the old element (or its children when it's a container) - e.g. replacing a horizontal splitter with a vertical one doesn't clear its contents.

Removing UI elements

To remove an UI element, choose the "Cut UI Element" command in its popup menu (note that this will also put it into clipboard).

When removing an element in a container, the above action will leave the splitted area intact. To replace the whole container element with only one of its children, either select the parent and replace it with the wanted element, or use the copy/paste function.

To select the parent, you need to right-click exactly on the splitter bar - the context menu will be different when you have right-clicked in the precise location.

Available UI Elements

See the List of UI Elements for information about the basic UI elements bundled with the official installer as well as any additional ones provided by others.

Colors and Fonts

Some additional settings affecting appearance of all UI elements, like colors and fonts, are available in the "Preferences > Display > Default User Interface > Colors and Fonts".

Theme Import/Export

The themes can be exported to a .fth file from the "Default User Interface" page in Preferences. It is possible to choose which parts of the theme (main layout, toolbar layout, colors, etc.), should actually be saved. Similarly, when importing, some parts can be prevented from overwritting the current values.

Themes can also be imported and exported in the Scratchbox.