meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
section:section-layout [2026/07/22 12:41] – dorepssection:section-layout [2026/07/28 21:58] (current) – removed doreps
Line 1: Line 1:
-<WRAP hide>%%<!-- googleoff: index -->%%</WRAP> 
-<WRAP center notice centeralign> 
-**⚠️ v4.0 UI Transition Notice - In Process:** 
-//The release of Total Launcher v4.0 has introduced significant user interface changes. Please note that this  
-page does not yet reflect these updates. The new layout paths, folds, and visual maps are currently being  
-compiled and will be deployed shortly.// 
-</WRAP> 
-<WRAP hide>%%<!-- googleon: index -->%%</WRAP> 
  
- 
- 
----- 
- 
-====== Total Launcher Grid Layout Configuration: A Guide To Customizing Icons, Labels, and Backgrounds ====== 
- 
-====== Grid Layout Configuration ====== 
- 
-The Grid Layout Configuration dialog in Total Launcher provides comprehensive options for adjusting the visual presentation and interactive behavior of grid-based object groups. Modifying spatial arrangements, icon styling, typography, and background properties enables the creation of a highly functional and custom interface. This configuration menu dictates exactly how items align within a structured grid, ensuring precise control over the final design before moving into animation behaviors. 
- 
-===== The Grid Layout Option Dialog ===== 
- 
-For better viewing, **mobile users can select a tab below** 
-<WRAP tabs> 
-  * [[section:section-layout-mobile_general_sound|**Options - General & Sound**]] 
-  * [[section:section-layout-mobile_icon|Options - Icon]] 
-  * [[section:section-layout-mobile_label|Options - Label]] 
-  * [[section:section-layout-mobile_shadow|Options - Shadow]] 
-  * [[section:section-layout-mobile_background|Options - Background]] 
-</WRAP> 
-<WRAP center 80%> 
-The grid layout option dialog is long, but is shown below in 5 sequential images.  
- 
-^  For an expanded, easier view of this dialog, click below:  ^^^^^ 
-|  **1 of 5**\\ ++here  |  {{:ui:ui-layout-grid-dialog_1of5-v4.webp?direct&300}}++  |  **2 of 5**\\ ++here  |  {{:ui:ui-layout-grid-dialog_2of5-v4.webp?direct&300}}++  |  **3 of 5**\\ ++here  |  {{:ui:ui-layout-grid-dialog_3of5-v4.webp?direct&300}}++  |  **4 of 5**\\ ++here  |  {{:ui:ui-layout-grid-dialog_4of5-v4.webp?direct&300}}++  |  **5 of 5**\\ ++here  |  {{:ui:ui-layout-grid-dialog_5of5-v4.webp?direct&300}}++  |   
-</WRAP> 
- 
- 
-==== Configuration Procedure ==== 
-Follow the sequence to apply modifications to the layout grid: 
-  - Enter [[:section:section-basic_editing#to_enter_edit_mode|Edit Mode]]. Tap the ++''Edit Off'' icon|{{:ui:ui-icon_edit_mode-edit_off-v4.webp?direct&35}}++ in the lower right to change it to an ++''Edit On'' icon|{{:ui:ui-icon_edit_mode-edit_on-v4.webp?direct&35}}++ 
-    - Tap-hold the grid object to select it. 
-    - In the ++Object Design Menu (top)|{{:ui:ui-icon_object_design_menu_top-v4.webp?direct&200}}++ select the ++Option icon|{{:ui:ui-icon_option-25-v4.webp}}++. 
-  - Review the menu panels indicated at the bottom of the interface. 
-    - Select [[#options_-_general|''OPTIONS'']] to modify the static parameters. 
-    - Select [[#animation|''ANIMATION'']] to adjust dynamic behaviors. 
-  - Apply the desired variable changes within the respective menus. 
- 
-==== Options - General ==== 
-Configure the arrangement and behavior of the grid container. 
-  * **Columns:** - Define the number of vertical columns. 
-  * **Rows:** - Define the number of horizontal rows. 
-  * **Launch animation:** - Set the animation triggered upon launching an item. Note that this selection requires the ''PRO'' version upgrade. 
- 
-=== Options - Launch sound === 
-Assign specific device sounds to physical interactions when the grid is activated. 
-  * **Tap:** - Select the sound played upon a single tap. 
-  * **Swipe up:** - Select the sound played upon an upward swipe. 
-  * **Swipe down:** - Select the sound played upon a downward swipe. 
-  * **Swipe left:** - Select the sound played upon a leftward swipe. 
-  * **Swipe right:** - Select the sound played upon a rightward swipe. 
- 
-==== Options - Icon ==== 
-Modify the visual attributes of the icon images contained within the grid. 
-  * **Icon size:** - Adjust the overall size (scale) of the icons. 
-  * **Icon padding:** - Modify the internal space surrounding the icons. 
-  * **Icon opacity (%):** - Adjust the transparency level of the icons, utilizing values such as ''100%'' for solid visibility. 
-  * **Icon saturation (%):** - Modify the color intensity, where ''100%'' represents natural colors and reduced values approach grayscale. 
-  * **Icon color filter:** - Apply a specific color overlay or tint to all icons uniformly. 
- 
-==== Options - Label ==== 
-Control the display parameters and typography of the text associated with each grid item. 
-  * **Show label:** - Toggle the visibility state of the text labels to On or Off. 
-  * **Typeface:** - Select the specific font family applied to the label text. 
-  * **Label lines:** - Determine the maximum number of lines permitted for text wrapping, ranging from ''1'' to ''3''. 
-  * **Font size:** - Adjust the structural point size of the label text. 
-  * **Scale X (%):** - Stretch or compress the text width horizontally. 
-  * **Text color:** - Define the primary resting color of the text using the Launcher's [[:section:section-color_picker|Color Picker]] and apply a hexadecimal value such as ''#FFFFFFFF''.] 
-  * **Text color (pressed):** - Same as ''Text color'' above, but changes the text color as the object is 'pressed' or tapped. 
- 
-=== Options - Shadow === 
-Apply drop shadows to text labels for enhanced contrast against varied backgrounds. See [[:section:section-shadow|here]] for more detail on how to use Shadows. 
-  * **Shadow color:** - Select the hue of the underlying text shadow. 
-  * **Shadow radius:** - Control the blur, spread, or sharpness of the shadow effect. 
-  * **Shadow offset X:** - Shift the shadow position along the horizontal axis. 
-  * **Shadow offset Y:** - Shift the shadow position along the vertical axis. 
- 
-=== Options - Background === 
-Configure the container styling, individual item backgrounds, and spacing parameters. 
-  * **Background:** - Set the global color or image for the entire grid container. 
-  * **Margins:** - Define the external spacing outside the grid boundary, requiring specific integer values for ''left'', ''top'', ''right'', and ''bottom''. 
-  * **Item background:** - Set the resting background color or image for individual grid items. 
-  * **Item background (pressed):** - Set the background visual for individual grid items during a press interaction. 
-  * **Item background (focused):** - Set the background visual for individual grid items when navigated to via hardware controls or focus states. 
-  * **Item spacing:** - Adjust the internal gap distance between individual items placed within the grid structure. 
- 
-==== Animation ==== 
-  * <wrap em>To be completed</wrap> 
- 
-<WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>