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
section:section-layout-grid-orig [2026/07/24 13:43] – removed - external edit (Unknown date) 127.0.0.1section:section-layout-grid-orig [2026/07/24 13:43] (current) – ↷ Page name changed from section:section-layout-grid to section:section-layout-grid-orig doreps
Line 1: Line 1:
 +====== Total Launcher Grid Layout Configuration: A Guide To Customizing Icons, Labels, and Backgrounds ======
  
 +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.
 +<WRAP hscroll_box>
 +<WRAP 50%>
 +To place the grid layout on the page:
 +  * Enter [[:section:section-basic_editing#to_enter_edit_mode|Edit Mode]] (Long press an empty area -> Toggle Edit Mode icon) > Tap the ++''Edit Off'' icon|{{:ui:ui-icon_edit_mode-edit_off-v4.webp?direct&100}}++ in the lower right to change it to an ++''Edit On'' icon|{{:ui:ui-icon_edit_mode-edit_on-v4.webp?direct&35}}++
 +  * 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}}++ to open the ++Add dialog|{{:ui:ui-object_add-selection-v4.webp?direct&150}}++. Select ''Layout'' > ''Grid''
 +  * The grid object with its default 6 elements is on the page, selected.
 +==== Configuration Procedure ====
 +Follow the sequence to apply modifications to the layout grid that is now on the page:
 +  * If not currently selected, 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. 
 +</WRAP>
 +<WRAP>
 +{{:ui:ui-layout-grid-v4.webp?direct&200}}
 +</WRAP>
 +</WRAP>
 +<WRAP hscroll_box>
 +<WRAP>
 +{{:ui:ui-layout-grid-dialog_full-v4.webp?direct&175}}
 +</WRAP>
 +<WRAP>
 +===== The Grid Layout Option Dialog =====
 +==== 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.
 +</WRAP>
 +</WRAP>
 +==== Animation ====
 +  * <wrap em>To be completed</wrap>
 +
 +<WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>