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
uitlm-rewrite:phase_01 [2026/07/04 23:20] dorepsuitlm-rewrite:phase_01 [2026/07/26 13:05] (current) – [Backgrounds & Shapes] gjrichter364_gmail.com
Line 1: Line 1:
-<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> 
- 
- 
----- 
- 
- 
 ====== Phase 1: The Object (Visual Mastery) ====== ====== Phase 1: The Object (Visual Mastery) ======
  
Line 20: Line 9:
  
   * **Method 1 (Direct):** Long-press (tap and hold) to highlight the object and open the Object Design menu at the top of the screen.   * **Method 1 (Direct):** Long-press (tap and hold) to highlight the object and open the Object Design menu at the top of the screen.
-    * *Action:* Select ''Edit'' icon {{:ui:ui-icon_edit.webp?direct&25}} (pencil) in the center of the page to quickly resize or move the object or+    * *Action:* Select ''Edit'' icon {{ui:ui-icon_edit-v4.webp?direct&25}} (pencil) in the center of the page to quickly resize or move the object or
     * *Action:* Select the ''Options'' icon {{ui:ui-icon_option-v4.webp?direct&25}} (gear) in the Object Design menu to open the full attribute list.     * *Action:* Select the ''Options'' icon {{ui:ui-icon_option-v4.webp?direct&25}} (gear) in the Object Design menu to open the full attribute list.
-  * **Method 2 (The ''Edit Mode'' Toggle):** If long-press is disabled (common in finished themes), pinch-in on the screen to open the main menu and toggle ''Edit Mode'' which displays a current state of ''Edit off'' {{:ui:ui-icon_edit_off.webp?direct&25}} in the lower right corner. Tap it to turn it "On" {{:ui:ui-icon_edit_on.webp?direct&30}}.+  * **Method 2 (The ''Edit Mode'' Toggle):** If long-press is disabled (common in finished themes), pinch-in on the screen to open the main menu and toggle ''Edit Mode'' which displays a current state of ''Edit off'' {{ui:ui-icon_edit_off-v4.webp?direct&25}} in the lower right corner. Tap it to turn it "On" {{ui:ui-icon_edit_on-v4.webp?direct&30}}.
  
 ==== The "Geometry" (Size & Position) ==== ==== The "Geometry" (Size & Position) ====
Line 29: Line 18:
 ==== Geometry & Alignment ==== ==== Geometry & Alignment ====
   * **The Bounding Box (Clickable Area):**   * **The Bounding Box (Clickable Area):**
-  * **How to change:** Long-press the object to select it, then drag the blue handles or tap the ''Edit'' icon {{:ui:ui-icon_edit.webp?direct&25}} (pencil) and input specific **W (Width)** and **H (Height)** pixel values.+  * **How to change:** Long-press the object to select it, then drag the blue handles or tap the ''Edit'' icon {{ui:ui-icon_edit-v4.webp?direct&25}} (pencil) and input specific **W (Width)** and **H (Height)** pixel values.
   * **Visual Sizing (Content):**   * **Visual Sizing (Content):**
     * **For Text:** Use **Scale X (%)** in the Text Options to stretch or compress the font width.     * **For Text:** Use **Scale X (%)** in the Text Options to stretch or compress the font width.
Line 35: Line 24:
  
 === Rotation vs. Transformation === === Rotation vs. Transformation ===
-  * **Rotation** //or// **Transformation** {{:ui:ui-icon_rotate-transform.webp?30}}+  * **Rotation** //or// **Transformation** {{ui:ui-icon_rotate-transform-v4.webp?30}}
     * **Rotation:** Spins the object on a 2D plane (like a clock hand). Range is -180° to +180°.     * **Rotation:** Spins the object on a 2D plane (like a clock hand). Range is -180° to +180°.
     * **Transformation:** Tilts the object in 3D space (X and Y axes).     * **Transformation:** Tilts the object in 3D space (X and Y axes).
Line 54: Line 43:
 === The Two Types of Text === === The Two Types of Text ===
   * **Static Text:** Plain labels like "Home" or "Apps."   * **Static Text:** Plain labels like "Home" or "Apps."
-  * **Dynamic Text:** Total Launcher can display system data. When adding text, you can choose standard formats like **Date** (e.g., M/d/yyyy) or **Time** (e.g., hh:mm), or use **Text Tags** for battery, RAM, or unread counts. See the dialog ++++here.|+  * **Dynamic Text:** Total Launcher can display system data. When adding text, you can choose standard formats like **Date** (e.g., M/d/yyyy) or **Time** (e.g., hh:mm), or use **Text Tags** for battery, RAM, or unread counts. See the dialog  
 +++++here.| 
 +<WRAP group>
 <WRAP column 200px> <WRAP column 200px>
 +<WRAP centeralign>Text Type Dialog 1 of 5</WRAP>
 {{:ui:ui-graphic-text-dynamic-dialog-1of5-v4.webp?200}} {{:ui:ui-graphic-text-dynamic-dialog-1of5-v4.webp?200}}
 </WRAP> </WRAP>
 <WRAP column 200px> <WRAP column 200px>
 +<WRAP centeralign>Text Type Dialog 2 of 5</WRAP>
 {{:ui:ui-graphic-text-dynamic-dialog-2of5-v4.webp?200}} {{:ui:ui-graphic-text-dynamic-dialog-2of5-v4.webp?200}}
 </WRAP> </WRAP>
 +<WRAP column 200px>
 +<WRAP centeralign>Text Type Dialog 3 of 5</WRAP>
 {{:ui:ui-graphic-text-dynamic-dialog-3of5-v4.webp?200}} {{:ui:ui-graphic-text-dynamic-dialog-3of5-v4.webp?200}}
 </WRAP> </WRAP>
 +</WRAP>
 +<WRAP group>
 <WRAP column 200px> <WRAP column 200px>
 +<WRAP centeralign>Text Type Dialog 4 of 5</WRAP>
 {{:ui:ui-graphic-text-dynamic-dialog-4of5-v4.webp?200}} {{:ui:ui-graphic-text-dynamic-dialog-4of5-v4.webp?200}}
 </WRAP> </WRAP>
 <WRAP column 200px> <WRAP column 200px>
 +<WRAP centeralign>Text Type Dialog 5 of 5</WRAP>
 {{:ui:ui-graphic-text-dynamic-dialog-5of5-v4.webp?200}} {{:ui:ui-graphic-text-dynamic-dialog-5of5-v4.webp?200}}
 </WRAP> </WRAP>
 +</WRAP>
 +<WRAP clear/>
 ++++ ++++
 +
 === Text Formatting Options === === Text Formatting Options ===
 Found under the selected (highlighted) object's ''Options'' > ''Text'' as shown in the dialog ++++here.| Found under the selected (highlighted) object's ''Options'' > ''Text'' as shown in the dialog ++++here.|
Line 96: Line 98:
   * **Color Filters:** A powerful tool to silhouette an icon.   * **Color Filters:** A powerful tool to silhouette an icon.
     * *How it works:* Apply a solid color (e.g., White) over a colorful icon. This flattens it into a minimal shape.     * *How it works:* Apply a solid color (e.g., White) over a colorful icon. This flattens it into a minimal shape.
-  * **Settings:** Set White color to 50% transparent (slider) and Saturation to **0%** to make for grayscale (Black & White) or to **100%** for full color.+  * **Settings:** Set White color to 50% transparent (slider) and Saturation to **0%** to make it grayscale (Black & White) or to **100%** for full color.
  
 <WRAP GROUP> <WRAP GROUP>
Line 112: Line 114:
 === The Gradient Trick === === The Gradient Trick ===
   * **Solid Color:** Select a single color in the option ''color'' of the launcher's Color Picker (supports transparency/alpha).   * **Solid Color:** Select a single color in the option ''color'' of the launcher's Color Picker (supports transparency/alpha).
-  * **Shapes:** Choose Rectangle, Circleor Rounded Rectangle. +  * **Shapes:** Choose Rectangle, Oval, Rounded Rectangle, Arc, Squircle, or Polygon
-    * *Gradient Tip:* In the Shape menu, there is **Color 1** and **Color 2**. Set them to different color to creates a gradient, or set Color 2 to "Transparent" ''00000000'' to get a fade-out effect. Then select ''Fill'' to pick the effect desired.+    * *Gradient Tip:* In the Shape menu, there is **Color 1** and **Color 2**. Set them to different colors to create a gradient, or set Color 2 to "Transparent" ''100%'' to get a fade-out effect. Then select ''Fill'' to pick the desired effect.
  
-^  Color Picker: Round Rectangle\\ Color1 Red\\ Color2 Green  ^  Shape: Fill dialog\\ Color1 Red\\ Color2 Green  ^ ^  Color Picker: Rount Rectangle\\ Color1 Red\\ Color2 Transparent  ^  Shape:  Fill dialog\\ Color1 Red\\  Color2 Transparent +^  Color Picker: Round Rectangle\\ Color1 Red\\ Color2 Green  ^  Shape: Fill dialog\\ Color1 Red\\ Color2 Green  ^ ^  Color Picker: Round Rectangle\\ Color1 Red\\ Color2 Transparent  ^  Shape:  Fill dialog\\ Color1 Red\\  Color2 Transparent 
-|  {{:ui:ui-shape-fill-gradient-example-1of2.webp?direct&150}}  |{{:ui:ui-shape-fill-gradient-example-2of2.webp?direct&150}}| |  {{:ui:ui-shape-fill-fade_out-example-1of2.webp?direct&150}}  |{{:ui:ui-shape-fill-fade_out-example-2of2.webp?direct&150}}|+|  {{:ui:ui-shape-fill-gradient-example-1of2-v4.webp?direct&150}}  |{{:ui:ui-shape-fill-gradient-example-2of2-v4.webp?direct&150}}| |  {{:ui:ui-shape-fill-fade_out-example-1of2-v4.webp?direct&150}}  |{{:ui:ui-shape-fill-fade_out-example-2of2-v4.webp?direct&150}}|
  
 ==== Shadows & Depth ==== ==== Shadows & Depth ====
-Shadows are applied to the *content* (the text letters or icon shape), not the bounding box.+Shadows are applied to the **content** (the text letters or icon shape), not the bounding box.
  
   * **Radius:** Controls the blur. A high radius (e.g., 20px) looks like a soft glow; a low radius (1px) looks like a hard outline.   * **Radius:** Controls the blur. A high radius (e.g., 20px) looks like a soft glow; a low radius (1px) looks like a hard outline.
   * **Offset X/Y:** Controls the light source direction.   * **Offset X/Y:** Controls the light source direction.
-    * *Pro Tip:* Set Offset X and Y to **0** and use a bright shadow color to create a "Neon Glow" effect around your text.+    * *Pro Tip:* Set Offset X and Y to **0** and use a bright shadow color to create a "Neon Glow" effect around text.
  
 <WRAP GROUP> <WRAP GROUP>
Line 129: Line 131:
 <WRAP centeralign> <WRAP centeralign>
 Shadow & Depth\\ Plain\\ Offset X 5  Offset Y 5   Radius 20\\ Offsets 0  Radius 1\\   Shadow & Depth\\ Plain\\ Offset X 5  Offset Y 5   Radius 20\\ Offsets 0  Radius 1\\  
-{{:ui:phase1-text-shadow-outline.webp?direct&200}}+{{ui:phase1-text-shadow-outline-v4.webp?direct&200}}
 </WRAP> </WRAP>
 </WRAP> </WRAP>
 </WRAP> </WRAP>
 +
 +----
 +
 +<WRAP right>
 +[[:uitlm-rewrite:phase-02|Proceed to Phase 2]]
 +</WRAP>
 +
 +----
  
 <WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP> <WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>