Customization

Make ChatNet truly yours with extensive customization options. This section covers visual customization through the admin panel including color schemes and themes, adding custom CSS for advanced styling, managing multi-language translations, setting custom room backgrounds, and placing banner advertisements. No coding knowledge is required for most customizations - everything can be done through the admin interface.

Changing Colors & Themes via Admin

Navigate to Appearance > Theme

All colors can be customized without editing code:

SettingAffects
Primary ColorButtons, links, accents
Secondary ColorSecondary elements
Sidebar BackgroundLeft sidebar color
Chat BackgroundMain chat area
Message BackgroundChat bubbles

Custom CSS Additions

For advanced styling beyond what the admin panel offers, you can add custom CSS by editing the theme files directly:

Edit src/assets/css/custom.css to add your own styles:

/* Example: Custom message styling */ .chat-message { border-radius: 12px; } /* Example: Hide specific elements */ .sidebar-ads { display: none; }

Note: Custom CSS changes may be overwritten during updates. Keep a backup of your customizations.

Language/Translation Files

ChatNet supports multiple languages.

Adding a New Language

  1. Navigate to Language
  2. Click "Add New Language"
  3. Set language code (e.g., "es" for Spanish)
  4. Translate strings in the translation editor

Translation Files Location

Language files are stored in src/lang/ as serialized PHP arrays.

Room Backgrounds

Each room can have a custom background:

  1. Navigate to Chat Rooms > Chat Rooms
  2. Edit the desired room
  3. Upload a background image
  4. Adjust opacity as needed

Add advertisements or announcements:

PositionCode Location
Sidebar TopAppearance > Banners
Sidebar BottomAppearance > Banners
Main TopAppearance > Banners
Main BottomAppearance > Banners

Supports HTML, JavaScript ad codes, and images.