> For the complete documentation index, see [llms.txt](https://lt-studios.gitbook.io/lt-studios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lt-studios.gitbook.io/lt-studios/loading-screen/user-guide/how-to-customize-the-loading-screen.md).

# How to customize the loading screen

In order to customize the loading screen, you’ll work almost entirely in **`html/js/config.js`**, which exposes a single global object, **`LTConfig`** - with every setting you need. Below is a breakdown of each section in that file:

```javascript
const LTConfig = {
  branding: { … },
  socials: [ … ],
  wallpapers: [ … ],
  wallpaperDelay: 3000,
  music: {
    defaultVolume: 0.05,
    songs: [ … ]
  }
};
```

#### 1. `branding`

Controls your logo and header text.

<table><thead><tr><th width="198">Property</th><th width="89">Type</th><th>Description</th><th>Example</th></tr></thead><tbody><tr><td><code>branding.logo</code></td><td><code>String</code></td><td>Path to your logo image (relative to <code>html/</code>)</td><td><code>"res/logo.png"</code></td></tr><tr><td><code>branding.title</code></td><td><code>String</code></td><td>Main title text (usually your server name)</td><td><code>"LT-Loading"</code></td></tr><tr><td><code>branding.description</code></td><td><code>String</code></td><td>Subtitle or welcome message below the title</td><td><code>"Please wait while we connect you"</code></td></tr></tbody></table>

#### 2. `socials`

An array of objects defining your social links and icons.

Each entry has:

* `icon` → the [FontAwesome](https://fontawesome.com/icons) class (just the part after `fa-brands`).
* `url` → the link players will open when they hover & click.
* `text` → the tooltip text that appears on hover.

```javascript
LTConfig.socials = [
  { icon: 'fa-discord',   url: 'https://discord.gg/xyz',     text: 'Join our Discord' },
  { icon: 'fa-twitter',   url: 'https://twitter.com/lt',     text: '@LT_Studios'     },
  { icon: 'fa-youtube',   url: 'https://youtube.com/lt',     text: 'Subscribe on YouTube' }
];
```

#### 3. `wallpapers`

A simple array of background-image paths.

* Order matters: the slideshow will cycle in the array’s order.
* Paths are relative to your `html/` folder.

```javascript
LTConfig.wallpapers = [
  './images/skyline-r34.jpg',
  './images/nfs-smoke.jpg',
  './images/miata-nfs.jpg',
  './images/mazda-mx5.jpg'
];
```

#### 4. `wallpaperDelay`

Controls how long (in milliseconds) each wallpaper stays visible before fading to the next.

```javascript
LTConfig.wallpaperDelay = 5000; // 5 seconds per image
```

#### 5. `music`

All your audio settings live here.

<table><thead><tr><th width="191">Property</th><th width="92">Type</th><th width="297">Description</th><th>Default Example</th></tr></thead><tbody><tr><td><code>music.defaultVolume</code></td><td><code>Number</code></td><td>Initial volume (0.0 to 1.0)</td><td><code>0.05</code></td></tr><tr><td><code>music.songs</code></td><td><code>Array</code></td><td>List of track objects (see below)</td><td>—</td></tr></tbody></table>

```javascript
LTConfig.music = {
  defaultVolume: 0.1,
  songs: [
    { name: 'Sigue',            author: 'Beny Jr, Morad',     src: 'audio/1.ogg' },
    { name: 'Latest Trends',    author: 'A1 x J1',           src: 'audio/2.ogg' },
    { name: 'Brilliant Mind II',author: 'Blanco, Nemzzz',     src: 'audio/3.ogg' }
  ]
};
```

### Quick Customization Steps

1. **Change text & logo**\
   Edit `branding.logo`, `branding.title`, and `branding.description` to match your server.
2. **Add/remove social links**\
   Modify the `socials` array. Use any FontAwesome *brands* icon.
3. **Swap wallpapers**\
   Drop new images into `html/images/` and update the `wallpapers` list.
4. **Adjust slideshow speed**\
   Tweak `wallpaperDelay` (e.g. `10000` for 10 s per slide).
5. **Manage your playlist**
   * Add `.ogg` or `.mp3` to `html/audio/`
   * Append a new entry in `music.songs` with name, author, and `src`.

Once you save `config.js`, simply restart/refresh the NUI in FiveM and your changes will take effect—no other code edits required.