CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-zebra-design-disabled vector-feature-custom-font-size-clientpref-disabled vector-feature-client-preferences-disabled vector-feature-typography-survey-disabled vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Foobar2000:Layout Editing Mode - Hydrogenaudio Knowledgebase</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-zebra-design-disabled vector-feature-custom-font-size-clientpref-disabled vector-feature-client-preferences-disabled vector-feature-typography-survey-disabled vector-toc-available";var cookie=document.cookie.match(/(?:^|; )wiki_2024mwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"Z@UZdpgwJbp4lZks0egn2gAAAUw","wgCanonicalNamespace":"Foobar2000","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":100,"wgPageName":"Foobar2000:Layout_Editing_Mode","wgTitle":"Layout Editing Mode","wgCurRevisionId":28916,"wgRevisionId":28916,"wgArticleId":3634,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":[],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Foobar2000:Layout_Editing_Mode","wgRelevantArticleId":3634,"wgIsProbablyEditable":false,"wgRelevantPageIsProbablyEditable":false,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgEditSubmitButtonLabelPublish":false};RLSTATE={ "skins.vector.user.styles":"ready","site.styles":"ready","user.styles":"ready","skins.vector.user":"ready","user":"ready","user.options":"loading","codex-search-styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready"};RLPAGEMODULES=["site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/load.php?lang=en&modules=codex-search-styles%7Cext.visualEditor.desktopArticleTarget.noscript%7Cskins.vector.icons%2Cstyles&only=styles&skin=vector-2022"> <script async="" src="/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.41.1"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1000"> <link rel="icon" href="https://www.hydrogenaud.io/forums/favicon.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch_desc.php" title="Hydrogenaudio Knowledgebase (en)"> <link rel="EditURI" type="application/rsd+xml" href="https://wiki.hydrogenaud.io/api.php?action=rsd"> <link rel="alternate" type="application/atom+xml" title="Hydrogenaudio Knowledgebase Atom feed" href="/index.php?title=Special:RecentChanges&feed=atom"> </head> <body class="skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-100 ns-subject page-Foobar2000_Layout_Editing_Mode rootpage-Foobar2000_Layout_Editing_Mode skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site" role="navigation"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-Main-Page" class="mw-list-item"><a href="/index.php?title=Hydrogenaudio_Knowledgebase:Main_Page"><span>Main Page</span></a></li><li id="n-topicindex" class="mw-list-item"><a href="/index.php?title=Topic_Index"><span>Topic Index</span></a></li><li id="n-portal" class="mw-list-item"><a href="/index.php?title=Hydrogenaudio_Knowledgebase:Community_portal" title="About the project, what you can do, where to find things"><span>HAK Community</span></a></li><li id="n-currentevents" class="mw-list-item"><a href="/index.php?title=Hydrogenaudio_Knowledgebase:Current_events" title="Find background information on current events"><span>Current events</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/index.php?title=Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/index.php?title=Special:Random" title="Load a random page [x]" accesskey="x"><span>Random page</span></a></li><li id="n-help" class="mw-list-item"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents" title="The place to find out"><span>Help</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/index.php?title=Hydrogenaudio_Knowledgebase:Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/ha_logo.png" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container"> <strong class="mw-logo-wordmark">Hydrogenaudio Knowledgebase</strong> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/index.php?title=Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" id="" title="Search Hydrogenaudio Knowledgebase [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Hydrogenaudio Knowledgebase" aria-label="Search Hydrogenaudio Knowledgebase" autocapitalize="sentences" title="Search Hydrogenaudio Knowledgebase [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links" aria-label="Personal tools" role="navigation" > <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet mw-portlet-vector-user-menu-overflow" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item"><a href="/index.php?title=Special:UserLogin&returnto=Foobar2000%3ALayout+Editing+Mode" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span>Log in</span></a></li> </ul> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/index.php?title=Special:UserLogin&returnto=Foobar2000%3ALayout+Editing+Mode" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site" role="navigation"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <input type="checkbox" id="vector-toc-collapsed-checkbox" class="vector-menu-checkbox"> <nav id="mw-panel-toc" role="navigation" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark vector-sticky-pinned-container"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Basic_operation" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Basic_operation"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span>Basic operation</div> </a> <button aria-controls="toc-Basic_operation-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span> <span>Toggle Basic operation subsection</span> </button> <ul id="toc-Basic_operation-sublist" class="vector-toc-list"> <li id="toc-Control" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Control"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1</span>Control</div> </a> <ul id="toc-Control-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Adding_UI_elements" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Adding_UI_elements"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2</span>Adding UI elements</div> </a> <ul id="toc-Adding_UI_elements-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Replacing_UI_elements" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Replacing_UI_elements"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.3</span>Replacing UI elements</div> </a> <ul id="toc-Replacing_UI_elements-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Removing_UI_elements" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Removing_UI_elements"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.4</span>Removing UI elements</div> </a> <ul id="toc-Removing_UI_elements-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Available_UI_Elements" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Available_UI_Elements"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span>Available UI Elements</div> </a> <ul id="toc-Available_UI_Elements-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Colors_and_Fonts" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Colors_and_Fonts"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span>Colors and Fonts</div> </a> <ul id="toc-Colors_and_Fonts-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Theme_Import/Export" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Theme_Import/Export"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span>Theme Import/Export</div> </a> <ul id="toc-Theme_Import/Export-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> <div class="mw-content-container"> <main id="content" class="mw-body" role="main"> <header class="mw-body-header vector-page-titlebar"> <label id="vector-toc-collapsed-button" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet vector-button-flush-left cdx-button--icon-only" for="vector-toc-collapsed-checkbox" role="button" aria-controls="vector-toc" tabindex="0" title="Table of Contents"> <span class="vector-icon mw-ui-icon-wikimedia-listBullet"></span> <span>Toggle the table of contents</span> </label> <nav role="navigation" aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-namespace">Foobar2000</span><span class="mw-page-title-separator">:</span><span class="mw-page-title-main">Layout Editing Mode</span></h1> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-foobar2000" class="selected vector-tab-noicon mw-list-item"><a href="/index.php?title=Foobar2000:Layout_Editing_Mode" title="View the subject page [c]" accesskey="c"><span>Foobar2000</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/index.php?title=Foobar2000_Talk:Layout_Editing_Mode" rel="discussion" title="Discussion about the content page [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="p-variants" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="p-variants-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-variants" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="p-variants-label" for="p-variants-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/index.php?title=Foobar2000:Layout_Editing_Mode"><span>Read</span></a></li><li id="ca-viewsource" class="vector-tab-noicon mw-list-item"><a href="/index.php?title=Foobar2000:Layout_Editing_Mode&action=edit" title="This page is protected.
You can view its source [e]" accesskey="e"><span>View source</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/index.php?title=Foobar2000:Layout_Editing_Mode&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/index.php?title=Foobar2000:Layout_Editing_Mode"><span>Read</span></a></li><li id="ca-more-viewsource" class="vector-more-collapsible-item mw-list-item"><a href="/index.php?title=Foobar2000:Layout_Editing_Mode&action=edit"><span>View source</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/index.php?title=Foobar2000:Layout_Editing_Mode&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/index.php?title=Special:WhatLinksHere/Foobar2000:Layout_Editing_Mode" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/index.php?title=Special:RecentChangesLinked/Foobar2000:Layout_Editing_Mode" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/index.php?title=Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-print" class="mw-list-item"><a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/index.php?title=Foobar2000:Layout_Editing_Mode&oldid=28916" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/index.php?title=Foobar2000:Layout_Editing_Mode&action=info" title="More information about this page"><span>Page information</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <nav class="vector-page-tools-landmark vector-sticky-pinned-container" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Hydrogenaudio Knowledgebase</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-parser-output"><p>The Layout Editing Mode of <a href="/index.php?title=Foobar2000:Components_0.9/Default_user_interface_(foo_ui_std)" class="mw-redirect" title="Foobar2000:Components 0.9/Default user interface (foo ui std)">Default User Interface</a> 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. </p><p>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. </p><p>Easy way to get started might be choosing one of the predefined layouts using the <a href="/index.php?title=Foobar2000:Default_User_Interface:Quick_Appearance_Setup" title="Foobar2000:Default User Interface:Quick Appearance Setup">Quick Appearance Setup</a>, then change some of the elements afterwards. </p><p><br /> </p> <meta property="mw:PageProp/toc" /> <h2><span class="mw-headline" id="Basic_operation">Basic operation</span></h2> <p>The whole layout consists of individual UI elements. They can be divided into two groups: </p> <ul><li>functional elements - like a playlist viewer, album list or a visualisation</li> <li>container elements - splitters and tabs</li></ul> <p>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. </p> <h3><span class="mw-headline" id="Control">Control</span></h3> <p>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. </p><p>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. </p> <h3><span class="mw-headline" id="Adding_UI_elements">Adding UI elements</span></h3> <p>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. </p><p>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. </p> <h3><span class="mw-headline" id="Replacing_UI_elements">Replacing UI elements</span></h3> <p>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. </p><p>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. </p> <h3><span class="mw-headline" id="Removing_UI_elements">Removing UI elements</span></h3> <p>To remove an UI element, choose the "Cut UI Element" command in its popup menu (note that this will also put it into clipboard). </p><p>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. </p><p>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. </p> <h2><span class="mw-headline" id="Available_UI_Elements">Available UI Elements</span></h2> <p>See the <a href="/index.php?title=Foobar2000:Default_User_Interface:List_of_UI_Elements" title="Foobar2000:Default User Interface:List of UI Elements">List of UI Elements</a> for information about the basic UI elements bundled with the official installer as well as any additional ones provided by others. </p><p><br /> </p> <h2><span class="mw-headline" id="Colors_and_Fonts">Colors and Fonts</span></h2> <p>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". </p><p><br /> </p> <h2><span id="Theme_Import.2FExport"></span><span class="mw-headline" id="Theme_Import/Export">Theme Import/Export</span></h2> <p>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. </p><p>Themes can also be imported and exported in the Scratchbox. </p>    </div> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://wiki.hydrogenaud.io/index.php?title=Foobar2000:Layout_Editing_Mode&oldid=28916">https://wiki.hydrogenaud.io/index.php?title=Foobar2000:Layout_Editing_Mode&oldid=28916</a>"</div></div> <div id="catlinks" class="catlinks catlinks-allhidden" data-mw="interface"></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" role="contentinfo" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 24 March 2020, at 00:12.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="/index.php?title=Hydrogenaudio_Knowledgebase:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/index.php?title=Hydrogenaudio_Knowledgebase:About">About Hydrogenaudio Knowledgebase</a></li> <li id="footer-places-disclaimers"><a href="/index.php?title=Hydrogenaudio_Knowledgebase:General_disclaimer">Disclaimers</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/"><img src="/resources/assets/poweredby_mediawiki_88x31.png" alt="Powered by MediaWiki" srcset="/resources/assets/poweredby_mediawiki_132x47.png 1.5x, /resources/assets/poweredby_mediawiki_176x62.png 2x" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul> <li> <button class="cdx-button cdx-button--icon-only vector-limited-width-toggle" id=""><span class="vector-icon mw-ui-icon-fullScreen mw-ui-icon-wikimedia-fullScreen"></span> <span>Toggle limited content width</span> </button> </li> </ul> </div> <script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgBackendResponseTime":105,"wgPageParseReport":{"limitreport":{"cputime":"0.006","walltime":"0.006","ppvisitednodes":{"value":27,"limit":1000000},"postexpandincludesize":{"value":0,"limit":2097152},"templateargumentsize":{"value":0,"limit":2097152},"expansiondepth":{"value":2,"limit":100},"expensivefunctioncount":{"value":0,"limit":100},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":0,"limit":5000000},"timingprofile":["100.00% 0.000 1 -total"]},"cachereport":{"timestamp":"20250327092510","ttl":86400,"transientcontent":false}}});});</script> </body> </html>