> For the complete documentation index, see [llms.txt](https://zynoxdev.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zynoxdev.gitbook.io/docs/zynox-resources/zx_loading_screen/customization.md).

# Customization & Media

Step-by-step guide to customizing songs, wallpapers, videos, and themes for ZX Loading Screen

***

## 📑 Table of Contents

1. [Adding Custom Music Tracks](#1-adding-custom-music-tracks)
2. [Customizing Background Wallpapers (Slideshow)](#2-customizing-background-wallpapers-slideshow)
3. [Setting Up Looping Background Video](#3-setting-up-looping-background-video)
4. [Setting Up YouTube Video Background](#4-setting-up-youtube-video-background)
5. [Customizing HUD Color Themes](#5-customizing-hud-color-themes)
6. [Server Logo & Branding](#6-server-logo--branding)

***

## 1. Adding Custom Music Tracks

The built-in interactive music player supports multi-track audio playlists with song titles and artist names.

### Step 1: Place Your Audio Files

Drop your `.mp3` or `.ogg` audio files into the resource folder:

```
zx_loading_screen/html/assets/music/your_song.mp3
```

### Step 2: Update `config.js`

Open `html/config.js` and add your track to `Config.music.playlist`:

```javascript
music: {
    autoPlay: true,       // Start music automatically upon connection
    defaultVolume: 40,    // Initial volume percentage (0 - 100)
    playlist: [
        {
            name: "Song Title 1",
            artist: "Artist Name",
            file: "assets/music/your_song.mp3"
        },
        {
            name: "Nightcall (Synthwave)",
            artist: "Kavinsky",
            file: "assets/music/nightcall.mp3"
        }
    ]
}
```

> \[!TIP] Use `.ogg` or compressed `.mp3` (128kbps – 192kbps) to keep client download times ultra-fast!

***

## 2. Customizing Background Wallpapers (Slideshow)

The slideshow mode applies smooth Ken Burns pan, zoom, and crossfade transitions.

### Step 1: Add Images

Place your 1920x1080 or 4K `.jpg` / `.png` wallpapers into:

```
zx_loading_screen/html/assets/images/
```

### Step 2: Configure Slideshow in `config.js`

```javascript
background: {
    type: "images",             // Select images slideshow mode
    slideIntervalSeconds: 7,    // Time per slide in seconds
}
```

***

## 3. Setting Up Looping Background Video

For a dynamic cinematic video background:

### Step 1: Add Video File

Place a 1080p `.mp4` video (H.264 encoded) inside:

```
zx_loading_screen/html/assets/video/vidoe1.mp4
```

### Step 2: Set Mode in `config.js`

```javascript
background: {
    type: "video",
    videoFile: "assets/video/vidoe1.mp4",
    videoMuted: true, // Keep muted so background music plays clearly
}
```

> \[!NOTE] For best performance and minimal client download lag, keep video files under **25MB - 50MB**.

***

## 4. Setting Up YouTube Video Background

You can stream a YouTube video directly without hosting large video files locally:

```javascript
background: {
    type: "youtube",
    youtubeId: "https://youtu.be/VLkOQJoeGPE", // Full link or 11-char ID
}
```

***

## 5. Customizing HUD Color Themes

Adapt the entire UI color scheme to match your server's brand identity:

```javascript
colors: {
    primaryColor: "#00a2ff", // Main glowing accent (Clock dial, badges, progress bar)
    accentColor: "#00d2ff",  // Secondary gradient highlight
    textWhite: "#ffffff"     // Crisp text typography
}
```

### Popular Hex Color Presets:

* 🔴 **Crimson / Red**: `primaryColor: "#ff2a4b"`, `accentColor: "#ff5e7e"`
* 🟣 **Cyber Violet**: `primaryColor: "#9d00ff"`, `accentColor: "#c74bff"`
* 🟢 **Emerald / Acid**: `primaryColor: "#00e676"`, `accentColor: "#69f0ae"`
* 🟡 **Gold / Amber**: `primaryColor: "#ffb700"`, `accentColor: "#ffd54f"`

***

## 6. Server Logo & Branding

Place your transparent `.png` logo inside:

```
zx_loading_screen/html/assets/images/logo.png
```

Then in `html/config.js`:

```javascript
serverNameFirst: "ZYNOX",
serverNameSecond: "DEV",
serverTagline: "THE ULTIMATE FIVE M ROLEPLAY EXPERIENCE.",
serverLogo: "assets/images/logo.png",
showLogo: true,
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://zynoxdev.gitbook.io/docs/zynox-resources/zx_loading_screen/customization.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.