Changing the loading screen in QBCore involves modifying the resources that handle the loading screen. Here’s a step-by-step guide:
Step-by-Step Guide to Changing the QBCore Loading Screen
- Locate the Loading Screen Resource: Find the loading screen resource within your server’s resource files. This is often named something like
qb-loadingor similar. - Backup the Original Files: Before making any changes, it’s a good idea to backup the original loading screen files in case you need to revert back.
- Edit the HTML, CSS, and JavaScript Files: The loading screen is typically made up of HTML, CSS, and JavaScript files. You can edit these files to customize the appearance and behavior of the loading screen.
- Replace Images and Media: If you want to change images or add new media (e.g., background images, logos), place your new files in the appropriate directory and update the paths in the HTML/CSS files accordingly.
- Update
fxmanifest.lua: Ensure that all the necessary files are listed in thefxmanifest.luafile of the loading screen resource.
Here’s an example structure of a typical loading screen resource:
- qb-loading
- html
- index.html
- style.css
- script.js
- images
- logo.png
- fxmanifest.lua
Example: Customizing index.html
- Open
index.htmland make changes to the HTML structure as needed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Custom Loading Screen</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loading-screen">
<img src="images/logo.png" alt="Logo">
<div class="loading-text">Loading...</div>
</div>
<script src="script.js"></script>
</body>
</html>
- Edit
style.cssto change styles, such as background color, font, and other visual elements.
body {
background-color: #282c34;
color: white;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.loading-screen {
text-align: center;
}
.loading-screen img {
width: 200px;
margin-bottom: 20px;
}
.loading-text {
font-size: 24px;
}
- Edit
script.jsto add any custom JavaScript behavior.
// Add custom JavaScript if needed
document.addEventListener('DOMContentLoaded', function() {
console.log('Loading screen is displayed');
});
- Update
fxmanifest.luato ensure all files are included.
fx_version 'cerulean'
game 'gta5'
author 'Your Name'
description 'Custom Loading Screen'
version '1.0.0'
files {
'html/index.html',
'html/style.css',
'html/script.js',
'html/images/logo.png'
}
loadscreen 'html/index.html'
- Restart the Server: After making changes, restart your FiveM server to see the new loading screen in action.