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 09:47] – dorepssection:section-layout [2026/07/24 13:43] (current) – ↷ Links adapted because of a move operation doreps
Line 12: Line 12:
 ---- ----
  
-====== Total Launcher Grid Layout Configuration: A Guide To Customizing Icons, Labels, and Backgrounds ======+====== Total Launcher Layout Guide: Choose Between List, Grid, Circle or Create Your Own ======
  
-====== 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 ===== +View the complete guides for [[:section:section-layout-list|List Layout]], [[section:section-layout-grid-orig|Grid Layout]], and [[section:section-layout-circle-orig|Circle Layout]].
-<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>+