Revision as of 10:16, 30 April 2026

   🚧 
   Stub: This page is a work in progress. Feel free to contribute!

The Customizer

The Customizer is the powerhouse of Leaf Essentials. It's a versatile tool designed to bridge the gap between imagination and implementation, allowing you to craft everything from UI elements to complex logic scripts.

The Customizer Brush in-game

What can you create?

       Action Form

       Chest UI

       Formatting

       Modal Form

       Sidebar

       Toast

       Script

       Function

       Command

       Zone

       Warp

       Event

       Folder

Box

       Invite

       Channel

4 Year Anniversary Edition

Celebrate the history of Leaf with the limited edition 3D branding brush.

@@ Line 1: / Line 1: @@
-{{Stub}}
+<div style="max-width: 1000px; margin: 0 auto; font-family: 'Segoe UI', Roboto, sans-serif; color: #e0e0e0;">
-[[File:CustomizerBrush.png|thumb|alt=The customizer brush in-game|The customizer brush in-game]]
+<!-- STUB NOTIFICATION -->
+<div style="background: rgba(255, 165, 0, 0.1); border-left: 5px solid #ffa500; padding: 15px; margin-bottom: 20px; border-radius: 4px; display: flex; align-items: center;">
+    <span style="font-size: 20px; margin-right: 15px;">🚧</span>
+    <span>'''Stub:''' This page is a work in progress. Feel free to contribute!</span>
+</div>
-[[File:3DBrushCompressed.png|thumb|alt=The 3D brush used for the 4 year birthday branding :3|The 3D brush used for the 4 year birthday branding :3]]
+<!-- HEADER SECTION -->
+<div style="display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-bottom: 40px;">
+    <div style="flex: 2; min-width: 300px;">
+        <h1 style="color: #fff; font-size: 2.5em; border: none; margin-bottom: 10px;">The Customizer</h1>
+        <p style="font-size: 1.2em; line-height: 1.6; color: #b0b0b0;">
+            The Customizer is the powerhouse of Leaf Essentials. It's a versatile tool designed to bridge the gap between imagination and implementation, allowing you to craft everything from UI elements to complex logic scripts.
+        </p>
+    </div>
+    <div style="flex: 1; min-width: 250px; text-align: center;">
+        [[File:CustomizerBrush.png|300px|alt=Customizer Brush]]
+        <div style="font-size: 0.8em; color: #666; margin-top: 8px;">The Customizer Brush in-game</div>
+    </div>
+</div>
-The Customizer in Leaf is a tool that allows you to create a lot of things that have been added by Leaf.
+<!-- TOOLS GRID -->
+<h2 style="text-align: center; color: #58a6ff; border: none; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px;">What can you create?</h2>
-A list of what you can make with Customizer:
+<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px;">
+    <!-- CATEGORY: UI -->
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center; transition: 0.3s;">
+        <span style="color: #58a6ff; font-weight: bold;">[[Action Form]]</span>
+    </div>
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #58a6ff; font-weight: bold;">[[Chest UI]]</span>
+    </div>
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #58a6ff; font-weight: bold;">[[Formatting]]</span>
+    </div>
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #fff;">Modal Form</span>
+    </div>
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #fff;">Sidebar</span>
+    </div>
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #fff;">Toast</span>
+    </div>
+    <!-- CATEGORY: LOGIC -->
+    <div style="background: rgba(88, 166, 255, 0.1); border: 1px solid #58a6ff; padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #58a6ff; font-weight: bold;">[[Script]]</span>
+    </div>
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #fff;">Function</span>
+    </div>
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #fff;">Command</span>
+    </div>
+    <!-- CATEGORY: WORLD -->
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #58a6ff; font-weight: bold;">[[Zones|Zone]]</span>
+    </div>
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #fff;">Warp</span>
+    </div>
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #fff;">Event</span>
+    </div>
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #fff;">Folder</span>
+    </div>
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #fff;">Box</span>
+    </div>
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #fff;">Invite</span>
+    </div>
+    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
+        <span style="color: #fff;">Channel</span>
+    </div>
+</div>
-* Folder
+<!-- FOOTER BRANDING -->
-* Box
+<div style="margin-top: 50px; padding: 30px; background: linear-gradient(90deg, rgba(88,166,255,0.1) 0%, rgba(0,0,0,0) 100%); border-radius: 15px; display: flex; align-items: center; gap: 20px;">
-* [[Action Form]]
+    [[File:3DBrushCompressed.png|120px]]
-* Modal Form
+    <div>
-* [[Chest UI]]
+        <h4 style="margin: 0; color: #58a6ff;">4 Year Anniversary Edition</h4>
-* Sidebar
+        <p style="margin: 5px 0 0; font-size: 0.9em; opacity: 0.7;">Celebrate the history of Leaf with the limited edition 3D branding brush.</p>
-* Toast (Custom notifications)
+    </div>
-* Function
+</div>
-* Invite
-* Event
+</div>
-* [[Script]]
-* Warp
-* [[Zones|Zone]]
-* Channel
-* Command
-* [[Formatting]]