SwiftlyS2
Guides

Chat & CenterHTML Styling

Learn how to use Chat colors and CenterHTML styling to customize text elements in SwiftlyS2

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);

Use [default] or [/] to reset text back to the default color.

Available Chat Colors

whitedarkredgreenlightyellowlightblueolivelimeredlightpurplepurplegreyyellowgoldsilverbluedarkbluebluegreymagentalightredorange

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.PlayerName]);

// 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]);
{
    "chat.welcome": "[green]Welcome to the server!",
    "chat.player_joined": "[gold]Player [lime]{0}[gold] has joined!",
    "chat.error": "[red]ERROR: [/]{0}",
    "chat.team_scores": "[blue]CT Team: [yellow]{0} [default]- [orange]T Team: [yellow]{1}"
}

CenterHTML Styling

Syntax

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

Browse all available Panorama UI stylings in the CS2 data tracking repository .css files.

Supported HTML Tags

Panorama UI supports most standard HTML tags:

divspanpaimgbrhrh1-h6strongembiupre

Inline Properties

// ✅ Correct - Direct property attributes
var element = "<span color=\"red\">Red Text</span>";
<!-- ❌ Doesn't work in Panorama UI -->
<span style="color:red;">Red Text</span>

Use property names directly as attributes instead of wrapping them in a style attribute.

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.

The same color names from Chat Colors work in HTML:

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

HTML elements also support hex color codes for custom colors:

var ctBlue = "<span color=\"#5E98D9\">CT Blue</span>";
var tOrange = "<span color=\"#FFB800\">T Orange</span>";
var custom = "<span color=\"#FF5733\">Custom Color</span>";

Custom Color Picker

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

Custom Color Picker

Preview

Usage & Preview
Sample colored text
<span color="#5E98D9">Text</span>

Font Size Classes

ClassSize
fontSize-xsExtra Small
fontSize-smSmall
fontSize-mMedium
fontSize-lLarge
fontSize-xlExtra Large
fontSize-xxlExtra Extra Large

Font Style Classes

ClassEffect
fontStyle-mMedium font style
fontWeight-boldBold text
CriticalTextCritical/warning styling

Practical Examples

Basic Usage

Simple Color Text

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

Combining Properties

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);
{
    "centerhtml.ready_status": "[<span color=\"red\">{0}</span>/<span color=\"green\">{1}</span>]<br><span class=\"fontSize-sm\">Match starts when <span color=\"green\">{1}</span> players are ready!</span>"
}

Multi-line Formatted Messages

Create structured messages with titles and lists:

Core.PlayerManager.SendCenterHTML(
    Core.Localizer["centerhtml.server_rules"], 15);
{
    "centerhtml.server_rules": "<span color=\"yellow\" class=\"fontSize-l\">Server Rules</span><br><br><span>• Be respectful to other players</span><br><span>• No cheating or exploiting</span><br><span>• Have fun!</span>"
}

Dynamic Status Indicators

var player = Core.PlayerManager.GetPlayerBySlot(1);
var status = "ready";
var statusColor = status == "ready" ? "green" : "red";

player.SendCenterHTML(
    Core.Localizer["centerhtml.player_status", player.PlayerName, statusColor, status], 5);
{
    "centerhtml.player_status": "<span>{0}</span> is <span color=\"{1}\">{2}</span>"
}

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);
{
    "centerhtml.loading_bar": "<span color=\"cyan\">Loading:</span> <span color=\"green\">{0}</span> <span>{1}%</span>"
}

Countdown Timer

var timeLeft = 30;
var color = timeLeft <= 5 ? "red" : timeLeft <= 10 ? "yellow" : "green";

Core.PlayerManager.SendCenterHTML(
    Core.Localizer["centerhtml.countdown", color, timeLeft], 1);
{
    "centerhtml.countdown": "<span class=\"fontSize-xl\">Round starts in</span><br><span color=\"{0}\" class=\"fontSize-xxl\">{1}</span>"
}

Team Score Display

var ctScore = 8;
var tScore = 6;

Core.PlayerManager.SendCenterHTML(
    Core.Localizer["centerhtml.team_scores", ctScore, tScore], 5);
{
    "centerhtml.team_scores": "<span color=\"#5E98D9\" class=\"fontSize-l\">CT: {0}</span> - <span color=\"#FFB800\" class=\"fontSize-l\">T: {1}</span>"
}

Best Practices

Remember: Panorama UI's HTML parsing has limitations. Always test complex layouts in-game to ensure they render correctly.

  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

Explore the CS2 Panorama styles to discover additional classes and styling options. New classes are added with CS2 updates.

Language

Previous Page

Dependency Injection

Next Page

On this page

Chat Colors
Syntax
Available Chat Colors
Chat Color Examples
CenterHTML Styling
Syntax
Supported HTML Tags
Inline Properties
CSS Classes
Common Styling Options
Colors
Custom Color Picker
Font Size Classes
Font Style Classes
Practical Examples
Basic Usage
Simple Color Text
Combining Properties
Player Status Display
Multi-line Formatted Messages
Dynamic Status Indicators
Progress Bar with Characters
Countdown Timer
Team Score Display
Best Practices
Reference
Common Inline Properties
Finding More Classes