Jump to content

Customizer: Difference between revisions

That1Dev (talk | contribs)
No edit summary
No edit summary
 
(12 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<div style="max-width: 1000px; margin: 0 auto; font-family: 'Segoe UI', Roboto, sans-serif; color: #e0e0e0;">
{{Stub}}


<!-- STUB NOTIFICATION -->
[[File:CustomizerBrush.png|thumb|alt=The customizer brush in-game|The customizer brush in-game]]
<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;">
[[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]]
    <span style="font-size: 20px; margin-right: 15px;">🚧</span>
    <span>'''Stub:''' This page is a work in progress. Feel free to contribute!</span>
</div>


<!-- HEADER SECTION -->
The Customizer in Leaf is a tool that allows you to create a lot of things that have been added by Leaf.
<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>


<!-- TOOLS GRID -->
== A list of what you can make with Customizer ==
<h2 style="text-align: center; color: #58a6ff; border: none; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px;">What can you create?</h2>


<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px;">
* [[Folders & Boxes]]
    <!-- 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>


<!-- FOOTER BRANDING -->
* [[Action Form]]
<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;">
    [[File:3DBrushCompressed.png|120px]]
    <div>
        <h4 style="margin: 0; color: #58a6ff;">4 Year Anniversary Edition</h4>
        <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>
    </div>
</div>


</div>
* [[Modal Form]]
 
* [[Chest UI]]
 
* [[Sidebar]]
 
* [[Toasts|Toast (Custom notifications)]]
 
* [[Functions]]
 
* [[Invite System]]
 
* [[Event Triggers]]
 
* [[Script]]
 
* [[Warps]]
 
* [[Zones|Zone]]
 
* [[Chat Channels]]
 
* [[Custom Commands]]
 
* [[Formatting]]
 
* [[Actions]]
 
== Bonus Content/Graphics ==
* [[Pride Customizer Brushes]]
 
== Accessibility Note ==
 
Customizer is made to pander towards power users, some things may not be as easy to understand for others, but will in turn give you tons of customization over everything, and should be relatively user friendly, and we do try to make it as easy to use as possible for what it is.
 
If you have any issues with Customizer in terms of usability, feel free to DM [[User:Ashy|Ashy]] on Discord