Foobar2000:Layout Editing Mode - Revision history

185.234.233.150: Fixing a typo

2020-03-24T00:12:42Z

Fixing a typo

← Older revision		Revision as of 00:12, 24 March 2020
Line 21:		Line 21:
	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.		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 ~~did~~'nt 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.		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 UI elements ===

88.191.16.212: More info for adding

2020-01-03T09:48:20Z

More info for adding

← Older revision		Revision as of 09:48, 3 January 2020
Line 20:		Line 20:
	=== Adding UI elements ===		=== 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.		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 did'nt 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 UI elements ===

112.213.196.13: /* Removing UI elements */ This wasn't obvious to me

2013-01-21T21:26:34Z

Removing UI elements: This wasn't obvious to me

← Older revision		Revision as of 21:26, 21 January 2013
Line 31:		Line 31:
	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.		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 ==		== Available UI Elements ==

Yirkha: Created

2008-06-17T18:56:00Z

Created

New page

The Layout Editing Mode of [[Foobar2000:Components_0.9/Default_user_interface_(foo_ui_std)|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 [[Foobar2000:Default User Interface:Quick Appearance Setup|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.

=== Control ===
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.

=== 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.

== Available UI Elements ==
See the [[Foobar2000:Default_User_Interface:List_of_UI_Elements|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.