Loading Screen V1 Configuration

This guide explains how to correctly install and configure C7 Loading Screen V1 on your FiveM server. Follow each step carefully to ensure the framework loads and functions as intended.

01. Installing the Resource

1

Download the latest release of the C7 Lux HUD;

This folder should contain the folder: c7-scripts-loading-v1

2

Extract the .zip file's

3

Place the folders into your server's resource directory

Your resources folder should look like the following:

resources/
└── [c7-scripts]
    └── c7-scripts-loading-v1

02. Adding to 'server.cfg'

Add the following line to your server.cfg, preferably after your MySQL and connection resources:

ensure c7-scripts-loading-v1

03. Script Configuration

Altering the script to your preferred configuration has been made easy with our configuration file. To get started, you need to open the file: c7-scripts-loading-v1/config.lua

1

Configuring the Basics

To change the basics of the script, you need to change the following configuration lines:

Config.ServerName = "C7 Scripts" -- Replaces the text in the top left.

Config.Accent = {
    enabled = true,
    color = "#ffd45c"
}

2

Configuring the Buttons

You must change the following lines:

Config.Buttons = {
    buttonOne   = { icon = "fa-solid fa-globe",         link = "https://docs.c7scripts.com",            title = "Docs"}, -- 1st to the left
    buttonTwo   = { icon = "fa-brands fa-discord",      link = "https://discord.c7scripts.com",         title = "Support" }, -- 2nd to the left
    buttonThree = { icon = "fa-solid fa-store",         link = "https://shop.c7scripts.com",            title = "Shop" }, -- 3rd to the left
    buttonFour  = { icon = "fa-solid fa-book",          link = "https://shop.c7scripts.com/tos",        title = "Terms of Service" }, -- 4th to the left
    buttonFive  = { icon = "fa-brands fa-youtube",      link = "https://www.youtube.com/@c7scripts",    title = "YouTube" } -- 5th to the left.
}

Font Awesome is used for the button icons. https://fontawesome.com/search?ic=free-collection

3

Configuring the Logo Image

You must change the following lines:

Config.LogoImage = {
    useFilePath = true, -- If true, use a file from /html/assets/[image.png] Must set 'useLinkPath' to 'false'
    filePath = "logo.png",

    useLinkPath = false, -- If true, use a link instead of file. Must set 'useFilePath' to 'false'
    imageLink = "https://image.png"
}

4

Configuring the Background Images

You must change the following lines:

Config.BackgroundImage = {
    enabled = true,

    defaultBackground = "back1.png", -- If 'slideshow' is 'false', this image will be used. Also used as a fallback.

    slideshow = true, -- If true, "slideshowImages" will be used. If false, only "defaultBackground" will be shown.
    slideshowShuffle = true, -- If true, should the images in the slideshow shuffle randomly?
    slideshowDuration = 3, -- How long should each image stay for before switching? (seconds)
    slideshowAnimation = "fade", -- Options: "fade", "fade-left", "fade-right", "zoom-out-in"

    slideshowImages = {
        image_1 = { imageURL = "back1.png" }, -- Image 1
        image_2 = { imageURL = "back2.png" }, -- Image 2
        image_3 = { imageURL = "back3.png" }, -- Image 3
        -- image_4 = { imageURL = "back4.png" }, -- Image 4
        -- image_5 = { imageURL = "back5.png" }, -- Image 5
        -- and more...
    }
}

5

Configuring the Background Video

Configuring the background can be finicky with how FiveM processes video files. Below is a full demonstration of how you can install a video on your loading screen.

You must first set Config.BackgroundImage = { Enabled = false }

Locate the following code block and enable background videos:

Config.BackgroundVideo = {
    enabled = true, -- Set to enabled
    backgroundVideoFile = "file_name.mp4" -- use a file from /html/assets/[file.mp4/.mov/.webm]
}

It is recommended that you use a .mp4 or .webm file as FiveM processes these better.

Common Issue: Video Not Playing

If your video is not playing or displaying, follow the steps below to ensure that FiveM is supporting your file:

1. Download 'FFMPEG', click here to download it.

2. Extract the .zip file to anywhere of your choosing.

3. Open the folder ffmpeg/bin/ - You'll see:

   1. ffmpeg.exe

   2. ffprobe.exe

4. Put your video file (i.e. video.mp4) in that same bin folder.

5. You are then to open a command terminal inside that same bin folder.

   1. Click the address bar at the top of your file explorer;

   2. Type: cmd

   3. Press enter.

6. Run the following command inside the terminal:

   1. ffmpeg -i video.mp4 -c copy -movflags +faststart video_fixed.mp4

   2. Ensure that you replace all occurances of "video" with your file name.

7. You should then use "video_fixed.mp4" as the loading screen video.

8. If you are still encountering issues, please join our support discord.

6

Configuring the Music

Notice: If your custom song does not play, it's likely that the file is corrupt or has not been properly converted. You can use .ogg and .mp3. If the song is not playing, try convert it again with a different converter or try a different song. If this is still not working, please open a ticket in our support discord.

You must change the following lines:

Config.SongVolume = 0.35 -- The default volume upon opening/joining. (0.0 - 1.0)

Config.SongList = {

    shuffleMusic = true, -- If true, should the song list shuffle in a random order each time?

    song2 = {
        enabled = true, -- Should this song be enabled?
        artistName = "Zara Larsson", -- The artist of the song
        songName = "Midnight Sun", -- The title of the song
        songOrder = 1, -- In which order should this song play? 1 means it will always play first
        albumImage = {
            useFilePath = true, -- If true, use a file from /html/assets/[image.png] Must set 'useLinkPath' to 'false'
            filePath = "MidnightSun.jpg",

            useLinkPath = false, -- If true, use a link instead of file. Must set 'useFilePath' to 'false'
            imageLink = "https://image.png"
        },
        musicMeta = {
            useStaticFile = true, -- Keep true
            musicFile = "MidnightSun.ogg" -- The file path to your song from /html/assets/[song.ogg] !!! MUST BE A .MP3 OR .OGG FILE !!!
        }
    }

}

Creating Additional Songs:

You firstly want to duplicate "song2" (the default song) and paste it below (as demonstrated) ensuring that there is a comma at the end bracket of your song as shown below.

Config.SongList = {

    shuffleMusic = true, -- If true, should the song list shuffle in a random order each time?

    song2 = {
        enabled = true, -- Should this song be enabled?
        artistName = "Zara Larsson", -- The artist of the song
        songName = "Midnight Sun", -- The title of the song
        songOrder = 1, -- In which order should this song play? 1 means it will always play first
        albumImage = {
            useFilePath = true, -- If true, use a file from /html/assets/[image.png] Must set 'useLinkPath' to 'false'
            filePath = "MidnightSun.jpg",

            useLinkPath = false, -- If true, use a link instead of file. Must set 'useFilePath' to 'false'
            imageLink = "https://image.png"
        },
        musicMeta = {
            useStaticFile = true, -- Keep true
            musicFile = "MidnightSun.ogg" -- The file path to your song from /html/assets/[song.ogg] !!! MUST BE A .MP3 OR .OGG FILE !!!
        }
    }, -- <-------- END BRACKET FOR NEW SONGS
    
    song3 = {
        enabled = true, -- Should this song be enabled?
        artistName = "New Song Artist", -- The artist of the song
        songName = "New Song Title", -- The title of the song
        songOrder = 2, -- In which order should this song play? 1 means it will always play first
        albumImage = {
            useFilePath = true, -- If true, use a file from /html/assets/[image.png] Must set 'useLinkPath' to 'false'
            filePath = "SongAlbumImage.jpg",

            useLinkPath = false, -- If true, use a link instead of file. Must set 'useFilePath' to 'false'
            imageLink = "https://image.png"
        },
        musicMeta = {
            useStaticFile = true, -- Keep true
            musicFile = "SongMusicFile.ogg" -- The file path to your song from /html/assets/[song.ogg] !!! MUST BE A .MP3 OR .OGG FILE !!!
        }
    }-- <-------- NO END BRACKET REQUIRED FOR END OF SONGS

}