Color & Styling

Master Unity Rich Text formatting to create beautiful, professional-looking UI elements in ZUI.

📋 Table of Contents

• Rich Text Overview
• Color Formatting
• Text Styling
• Size Control
• Combining Styles
• Pre-made Style Examples
• Best Practices
• Color Reference

Rich Text Overview

ZUI supports Unity Rich Text formatting, allowing you to style text with colors, sizes, bold, italic, and more - all within a single string.

Basic Syntax

Rich text uses XML-style tags:

Call("AddText", "<tag>formatted text</tag>");

Important rules:

• Tags must be lowercase
• Tags must be properly closed
• Tags can be nested
• Malformed tags will display as plain text

Color Formatting

Using Named Colors

Unity supports basic color names:

Call("AddText", "<color=red>Red Text</color>");
Call("AddText", "<color=blue>Blue Text</color>");
Call("AddText", "<color=green>Green Text</color>");
Call("AddText", "<color=yellow>Yellow Text</color>");
Call("AddText", "<color=white>White Text</color>");
Call("AddText", "<color=black>Black Text</color>");

Available named colors:

• red, blue, green, yellow
• white, black, gray, grey
• cyan, magenta
• orange, purple, brown

Using Hex Colors

For precise colors, use hex codes:

Call("AddText", "<color=#FF0000>Red</color>");
Call("AddText", "<color=#00FF00>Green</color>");
Call("AddText", "<color=#0000FF>Blue</color>");

Hex format: #RRGGBB

• RR = Red (00-FF)
• GG = Green (00-FF)
• BB = Blue (00-FF)

With Alpha Transparency

Add transparency using 8-digit hex:

Call("AddText", "<color=#FF000080>50% Transparent Red</color>");
Call("AddText", "<color=#0000FFCC>80% Opaque Blue</color>");

Hex format with alpha: #RRGGBBAA

• AA = Alpha (00=transparent, FF=opaque)

Common alpha values:

FF = 100% opaque (fully visible)
CC = 80% opaque
80 = 50% opaque
40 = 25% opaque
00 = 0% opaque (invisible)

Text Styling

Bold Text

Call("AddText", "<b>Bold Text</b>");
Call("AddText", "Normal and <b>Bold</b> mixed");

Italic Text

Call("AddText", "<i>Italic Text</i>");
Call("AddText", "Normal and <i>Italic</i> mixed");

Bold + Italic

Call("AddText", "<b><i>Bold and Italic</i></b>");

Size Control

Absolute Size

Set exact font size in pixels:

Call("AddText", "<size=20>Large Text</size>");
Call("AddText", "<size=14>Normal Text</size>");
Call("AddText", "<size=10>Small Text</size>");

Recommended sizes:

8-10  = Fine print, footnotes
12-14 = Body text, descriptions
16-18 = Headers, section titles
20-24 = Main titles, emphasis
26+   = Hero text, major headings

Relative Size

Size relative to default (percentage):

Call("AddText", "<size=150%>50% Larger</size>");
Call("AddText", "<size=200%>Double Size</size>");
Call("AddText", "<size=50%>Half Size</size>");

Combining Styles

Multiple Tags on Same Text

Nest tags to combine effects:

// Bold + Red
Call("AddText", "<b><color=red>Important!</color></b>");

// Large + Bold + Blue
Call("AddText", "<size=18><b><color=#3498DB>Title Text</color></b></size>");

// Small + Italic + Gray
Call("AddText", "<size=10><i><color=#888888>Subtitle</color></i></size>");

Mixed Formatting in One String

Call("AddText", "Normal <b>Bold</b> <color=red>Red</color> <i>Italic</i> Normal");

Call("AddText", 
     "<size=18><b>Title:</b></size> <color=#666666>Description text here</color>");

Pre-made Style Examples

Headers & Titles

// Main Header
Call("AddText", "<size=20><b><color=#4ECDC4>Main Title</color></b></size>");

// Section Header
Call("AddText", "<size=16><color=#FFE66D>Section Name</color></size>");

// Subsection Header
Call("AddText", "<size=14><b>Subsection</b></size>");

Status Messages

// Success
Call("AddText", "<color=#2ECC71>✓ Operation successful!</color>");

// Warning
Call("AddText", "<color=#F39C12>⚠ Warning: Check your settings</color>");

// Error
Call("AddText", "<color=#E74C3C>✗ Error: Action failed</color>");

// Info
Call("AddText", "<color=#3498DB>ℹ Information: Server restarting</color>");

Emphasized Text

// Important Notice
Call("AddText", "<b><color=#E74C3C>IMPORTANT:</color></b> Read this carefully");

// Tip
Call("AddText", "<i><color=#2ECC71>Tip: Use shortcuts for faster access</color></i>");

// Note
Call("AddText", "<size=11><i><color=#7F8C8D>Note: This may take a moment</color></i></size>");

Data Display

// Label + Value
Call("AddText", "<b>Health:</b> <color=#2ECC71>100%</color>");
Call("AddText", "<b>Mana:</b> <color=#3498DB>75%</color>");
Call("AddText", "<b>Status:</b> <color=#F39C12>Active</color>");

// Key-Value Pairs
Call("AddText", "<color=#95A5A6>Server:</color> <b>Online</b>");
Call("AddText", "<color=#95A5A6>Players:</color> <b>5/10</b>");

Categories & Sections

// Category Title (matches ZUI style)
Call("AddCategory", "<color=#3498DB>Player Management</color>");

// Section Divider
Call("AddText", "<size=14><b>━━━ Settings ━━━</b></size>");

// Grouped Header
Call("AddText", "<size=16><b>[ Admin Tools ]</b></size>");

Best Practices

Visual Hierarchy

Use size and color to create clear hierarchy:

// Good: Clear visual hierarchy
Call("AddText", "<size=18><b>Main Feature</b></size>", 20f, 50f);
Call("AddText", "<size=14>Description of the feature</size>", 20f, 90f);
Call("AddText", "<size=10><i>Additional details</i></size>", 20f, 120f);

Color Meaning

Use consistent colors for meanings:

// Green = Success, Positive, Health
Call("AddText", "<color=#2ECC71>Connected</color>");

// Red = Error, Danger, Warning
Call("AddText", "<color=#E74C3C>Disconnected</color>");

// Blue = Information, Neutral, Mana
Call("AddText", "<color=#3498DB>Server Status</color>");

// Yellow/Orange = Warning, Attention
Call("AddText", "<color=#F39C12>Low Resources</color>");

// Gray = Disabled, Inactive, Secondary
Call("AddText", "<color=#7F8C8D>Feature disabled</color>");

Readability

✅ Good contrast:

// Light text on dark background
Call("AddText", "<color=#FFFFFF>Easy to read</color>");

// Dark text on light background
Call("AddText", "<color=#2C3E50>Also easy to read</color>");

❌ Poor contrast:

// Light on light
Call("AddText", "<color=#CCCCCC>Hard to read on white</color>");

// Dark on dark
Call("AddText", "<color=#333333>Hard to read on black</color>");

Consistency

Define styles once and reuse:

public class UIStyles
{
    public const string HEADER = "<size=18><b><color=#4ECDC4>{0}</color></b></size>";
    public const string SUBHEADER = "<size=14><b>{0}</b></size>";
    public const string ERROR = "<color=#E74C3C>{0}</color>";
    public const string SUCCESS = "<color=#2ECC71>{0}</color>";
    public const string INFO = "<color=#3498DB>{0}</color>";
}

// Usage
Call("AddText", string.Format(UIStyles.HEADER, "My Title"));
Call("AddText", string.Format(UIStyles.SUCCESS, "✓ Saved!"));

Color Reference

Modern UI Colors

Primary colors:

Turquoise:  #4ECDC4  - Headers, accent
Blue:       #3498DB  - Information, links
Green:      #2ECC71  - Success, positive
Yellow:     #FFE66D  - Highlights, attention
Red:        #E74C3C  - Errors, danger
Orange:     #F39C12  - Warnings

Neutral colors:

Dark:       #2C3E50  - Text, titles
Gray:       #7F8C8D  - Secondary text
Light Gray: #95A5A6  - Disabled, subtle
Very Light: #ECF0F1  - Backgrounds

Game-themed Colors

Health/Mana/Stamina:

Health:   #2ECC71  - Green
Mana:     #3498DB  - Blue
Stamina:  #F39C12  - Orange/Yellow

Rarity tiers:

Common:    #CCCCCC  - Light Gray
Uncommon:  #2ECC71  - Green
Rare:      #3498DB  - Blue
Epic:      #9B59B6  - Purple
Legendary: #F39C12  - Orange
Mythic:    #E74C3C  - Red

Status effects:

Buff:      #2ECC71  - Green
Debuff:    #E74C3C  - Red
Neutral:   #3498DB  - Blue

Complete Examples

Professional Admin Panel

Call("SetTitle", "<color=#E74C3C>Admin Control Panel</color>");

Call("AddText", 
     "<size=18><b><color=#4ECDC4>Server Management</color></b></size>", 
     20f, 50f);

Call("AddCategory", "<color=#3498DB>Player Tools</color>", 20f, 100f);
Call("AddButton", "Heal", ".heal", 20f, 140f);
Call("AddButton", "Kick", ".kick", 20f, 190f);

Call("AddCategory", "<color=#2ECC71>World Tools</color>", 20f, 260f);
Call("AddButton", "Save", ".save", 20f, 300f);
Call("AddButton", "Restart", ".restart", 20f, 350f);

Call("AddText", 
     "<size=10><i><color=#7F8C8D>Use with caution</color></i></size>", 
     20f, 420f);

Status Dashboard

Call("SetTitle", "Server Status");

Call("AddText", "<size=16><b>Live Statistics</b></size>", 20f, 50f);

Call("AddText", 
     "<color=#95A5A6>Status:</color> <color=#2ECC71><b>Online</b></color>", 
     20f, 100f);

Call("AddText", 
     "<color=#95A5A6>Players:</color> <b>15/50</b>", 
     20f, 140f);

Call("AddText", 
     "<color=#95A5A6>Uptime:</color> <color=#3498DB>4h 32m</color>", 
     20f, 180f);

Call("AddText", 
     "<color=#95A5A6>Performance:</color> <color=#2ECC71>Excellent</color>", 
     20f, 220f);

Call("AddButton", "Refresh", ".refresh", 20f, 280f);

Styled Category System

// Categories with icons and colors
Call("AddCategory", "⚔ <color=#E74C3C>Combat</color>", 20f, 50f);
Call("AddButton", "God Mode", ".god", 20f, 90f);
Call("AddButton", "Damage Boost", ".dmg", 20f, 140f);

Call("AddCategory", "🏃 <color=#F39C12>Movement</color>", 20f, 210f);
Call("AddButton", "Speed", ".speed", 20f, 250f);
Call("AddButton", "Fly", ".fly", 20f, 300f);

Call("AddCategory", "🛠 <color=#3498DB>Utilities</color>", 20f, 370f);
Call("AddButton", "Teleport", ".tp", 20f, 410f);
Call("AddButton", "Build", ".build", 20f, 460f);

Testing Your Styles

Preview Workflow

1. Add styled text to your UI
2. Build and test in-game
3. Adjust colors/sizes as needed
4. Repeat until satisfied

Common Issues

Issue: Tags display as plain text

// Wrong: Tags not recognized
Call("AddText", "<Color=red>Text</Color>");  // Capital C

// Correct: Lowercase tags
Call("AddText", "<color=red>Text</color>");

Issue: Colors look different in-game

- Designer preview may not match
- Test in actual game environment
- Adjust based on game's UI theme

Issue: Text cut off

// Size too large for window
Call("AddText", "<size=30>Huge Text</size>");  // May overflow

// Better: Appropriate sizing
Call("AddText", "<size=16>Readable Text</size>");

Related Pages

• Examples & Tutorials - See styling in action
• API Reference - Text and category methods
• Visual Designer - Design with visual preview
• Best Practices - Design guidelines

With rich text styling, your ZUI interfaces can look professional and polished!