Chat Colors

Chat colors provide a simple way to colorize text using bracket syntax. This works in chat messages and other text outputs.

Syntax

Use square brackets with color names to change text color:

var message = "[red]This is red [lime]This is lime [default]Back to default";
player.SendChat(message);

Available Chat Colors

Chat Color Examples

Using translations with placeholders for dynamic content:

// Simple colored message
player.SendChat(Core.Localizer["chat.welcome"]);
 
// Multiple colors with player name
player.SendChat(Core.Localizer["chat.player_joined", player.Name]);
 
// Error message with reset
player.SendChat(Core.Localizer["chat.error", "Something went wrong"]);
 
// Team score announcement
Core.PlayerManager.SendChat(Core.Localizer["chat.team_scores", ctScore, tScore]);

CenterHTML Styling

Syntax

Panorama UI uses a different syntax than standard HTML for styling elements.

Supported HTML Tags

Panorama UI supports most standard HTML tags:

Inline Properties

// ✅ Correct - Direct property attributes
var element = "<span color=\"red\">Red Text</span>";

CSS Classes

Apply built-in Panorama UI classes using the standard class attribute:

// Single class
var element = "<span class=\"fontStyle-m\">Medium Font</span>";
 
// Multiple classes
var element = "<span class=\"fontStyle-m CriticalText\">Critical text</span>";

Common Styling Options

Colors

For HTML elements, use the color attribute with color names or hex codes.

var message = "<span color=\"red\">Red Text</span>";

Custom Color Picker

Try out different colors and copy the hex code to use in your HTML:

Font Size Classes

Font Style Classes

Practical Examples

Basic Usage

var message = "<span color=\"red\">This text is red</span>";
Core.PlayerManager.SendCenterHTML(message, 5);

var message = "<span color=\"green\" class=\"fontSize-l\">Large Green Text</span>";
Core.PlayerManager.SendCenterHTML(message, 5);

Player Status Display

Show ready player counts with dynamic colors:

var readyPlayers = 5;
var playersToStart = 10;
 
Core.PlayerManager.SendCenterHTML(
    Core.Localizer["centerhtml.ready_status", readyPlayers, playersToStart], 10);

Multi-line Formatted Messages

Create structured messages with titles and lists:

Core.PlayerManager.SendCenterHTML(
    Core.Localizer["centerhtml.server_rules"], 15);

Dynamic Status Indicators

var player = Core.PlayerManager.GetPlayer(1);
var status = "ready";
var statusColor = status == "ready" ? "green" : "red";
 
player.SendCenterHTML(
    Core.Localizer["centerhtml.player_status", player.Name, statusColor, status], 5);

Progress Bar with Characters

var progress = 75; // 75%
var filled = progress / 10;
var empty = 10 - filled;
var bar = new string('█', filled) + new string('░', empty);
 
Core.PlayerManager.SendCenterHTML(
    Core.Localizer["centerhtml.loading_bar", bar, progress], 3);

Countdown Timer

var timeLeft = 30;
var color = timeLeft <= 5 ? "red" : timeLeft <= 10 ? "yellow" : "green";
 
Core.PlayerManager.SendCenterHTML(
    Core.Localizer["centerhtml.countdown", color, timeLeft], 1);

Team Score Display

var ctScore = 8;
var tScore = 6;
 
Core.PlayerManager.SendCenterHTML(
    Core.Localizer["centerhtml.team_scores", ctScore, tScore], 5);

Best Practices

1. Keep it Simple: Complex nested structures may not render as expected
2. Test Colors: Verify color visibility against different background themes
3. Use Classes: Prefer built-in classes over inline properties for consistency
4. Duration Matters: Set appropriate display durations for message complexity
5. String Interpolation: Use $"" for clean, readable message construction

Reference

Common Inline Properties

• color - Text color (color names or hex codes)
• font-size - Font size (prefer classes)
• font-weight - Font weight (prefer classes)

Finding More Classes