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

# CR-Loading Screen Configuration

The **CR Loading Screen** configuration customizes the loading screen for your FiveM server, creating an engaging and branded experience for players. This guide details the `config.js` file, located in the root directory, and explains each setting to help you tailor the UI, media, and information cards effectively.

***

### Basic Configuration

Core settings for the loading screen’s appearance and behavior.

| **Setting**                      | **Type**       | **Description**                                                         |
| -------------------------------- | -------------- | ----------------------------------------------------------------------- |
| `gameTitle`                      | String         | The game or server title displayed in the UI (e.g., "Code Render").     |
| `video.format`                   | String         | Video format for the background (e.g., `webm`, `mp4`).                  |
| `audio.defaultVolume`            | Number (0–100) | Initial audio volume level.                                             |
| `audio.defaultMuted`             | Boolean        | If `true`, audio starts muted.                                          |
| `image`                          | String         | Path to the logo or branding image (e.g., `web/circle-coderender.png`). |
| `ui.primaryColor`                | String (Hex)   | Primary UI color (e.g., `#7EB2FF`).                                     |
| `ui.secondaryColor`              | String (Hex)   | Secondary UI color (e.g., `#B4A5FF`).                                   |
| `ui.tertiaryColor`               | String (Hex)   | Tertiary UI color (e.g., `#6E8EFF`).                                    |
| `ui.quaternaryColor`             | String (Hex)   | Fourth UI color (e.g., `#9B8EFF`).                                      |
| `ui.showControls`                | Boolean        | If `true`, displays video playback controls.                            |
| `loading.showProgressBar`        | Boolean        | If `true`, shows the loading progress bar.                              |
| `loading.showInfoCardsByDefault` | Boolean        | If `true`, displays info cards by default.                              |

> **Tip**: Use vibrant, complementary colors for `ui` settings to enhance visual appeal while maintaining readability.

***

### Card Configuration

The `cardInfo` array defines customizable cards to display server information, rules, or links. Each card can be one of three types: **Basic**, **List**, or **Button**.

#### Card Structure

```javascript
cardInfo: [
  {
    icon: "String", // Path to SVG icon (e.g., "web/icons/namaste.svg")
    title: "String", // Card title
    description: "String", // Description for basic cards
    listItems: ["String[]"], // Array of items for list-style cards
    footer: "String", // Optional footer text
    Buttons: [
      {
        label: "String", // Button text
        href: "String", // URL (e.g., "https://discord.com/...")
        icon: "String" // Path to button icon
      }
    ]
  }
]
```

#### Card Types

1. **Basic Card** (Single Description)

   ```javascript
   {
     icon: "web/icons/namaste.svg",
     title: "Welcome",
     description: "Get ready for an immersive RP experience. Please be respectful and follow the rules!"
   }
   ```

   Displays a simple message with an icon and title.
2. **List Card** (Bullet Points)

   ```javascript
   {
     icon: "web/icons/rules.svg",
     title: "Server Rules",
     listItems: [
       "• No RDM / VDM",
       "• Respect all players & staff",
       "• No cheating or exploiting",
       "• Use common sense"
     ],
     footer: "Type /rules in-game for more."
   }
   ```

   Shows a bulleted list, ideal for rules or jobs.
3. **Button Card** (Links)

   ```javascript
   {
     icon: "web/icons/social.svg",
     title: "Join the Community",
     Buttons: [
       {
         label: "Join our Discord",
         href: "https://discord.com/...",
         icon: "web/icons/discord.svg"
       },
       {
         label: "Follow on Twitter",
         href: "https://x.com/...",
         icon: "web/icons/twitter.svg"
       }
     ]
   }
   ```

   Provides clickable buttons for external links.

> **Note**: Store SVG icons in the `web/icons/` directory and reference them with relative paths.

***

### Complete Example Configuration

A full `config.js` example showcasing all options:

```javascript
config = {
  gameTitle: "Code Render",
  video: {
    format: "webm"
  },
  audio: {
    defaultVolume: 30,
    defaultMuted: true
  },
  image: "web/circle-coderender.png",
  ui: {
    primaryColor: "#7EB2FF",
    secondaryColor: "#B4A5FF",
    tertiaryColor: "#6E8EFF",
    quaternaryColor: "#9B8EFF",
    showControls: true
  },
  loading: {
    showProgressBar: true,
    showInfoCardsByDefault: false
  },
  cardInfo: [
    {
      icon: "web/icons/namaste.svg",
      title: "Welcome",
      description: "Get ready for an immersive RP experience. Please be respectful and follow the rules!"
    },
    {
      icon: "web/icons/rules.svg",
      title: "Server Rules",
      listItems: [
        "• No RDM / VDM",
        "• Respect all players & staff",
        "• No cheating or exploiting",
        "• Use common sense"
      ],
      footer: "Type /rules in-game for more."
    },
    {
      icon: "web/icons/badge.svg",
      title: "Available Jobs",
      listItems: [
        "👮‍♂️ Police Department",
        "🚑 Emergency Medical Services",
        "🚕 Taxi Service",
        "🔧 Mechanic Workshop",
        "🏦 Bank Employee",
        "🍽️ Restaurant Staff",
        "🏪 Shop Owner",
        "🚛 Delivery Driver"
      ],
      footer: "Apply for whitelisted jobs on our Discord!"
    },
    {
      icon: "web/icons/social.svg",
      title: "Join the Community",
      Buttons: [
        {
          label: "Join our Discord",
          href: "https://discord.com/...",
          icon: "web/icons/discord.svg"
        },
        {
          label: "Follow on Twitter",
          href: "https://x.com/...",
          icon: "web/icons/twitter.svg"
        }
      ]
    },
    {
      icon: "web/icons/info.svg",
      title: "Tips for New Players",
      listItems: [
        "• Use /help to learn commands",
        "• Press 'M' for menu",
        "• Need help? Ask staff or open a ticket on Discord"
      ]
    }
  ]
};
```

***

### Configuration Tips

* **Icons**: Use high-quality SVG icons for crisp visuals. Place them in web/icons/ and test paths before deployment.
* **Colors**: Choose a cohesive color palette for ui settings. Use tools like Coolors to generate hex codes.
* **Content**: Keep card descriptions and list items concise (under 100 characters each) for better readability.
* **Buttons**: Always include https\:// in href URLs to ensure links work correctly.
* **Video Formats**: Prefer webm for faster loading and broader browser compatibility.
* **Emojis**: Add emojis to listItems (e.g., 👮‍♂️) for visual flair, but use sparingly to avoid clutter.

> **Warning**: Test video and audio settings on multiple devices to ensure compatibility and performance.

***

### Notes

* **Branding**: Use gameTitle and image to reinforce your server’s identity.
* **User Experience**: Set audio.defaultMuted to true to avoid startling players with unexpected sound.
* **Performance**: Optimize video file sizes (under 10MB) to reduce loading times.
* **Testing**: Preview the loading screen in a staging environment to catch UI issues before going live.
* **Updates**: Regularly update cardInfo with new rules, jobs, or links to keep players informed.

> **Support**: For issues or further guidance, contact at discord.