Configuration
Configuration
The loading screen is fully customizable through the config.json file located in the resource's main directory. Below is a detailed explanation of all configuration options.
General Settings
"general": {
"serverName": "Your Server Name",
"serverTitle": "YOUR-SERVER",
"serverSubtitle": "ROLEPLAY",
"serverDescription": "Experience a unique roleplay adventure in our meticulously crafted city. Join our community and become part of a living, breathing world with endless possibilities.",
"welcomeTitle": "WELCOME TO",
"joinText": "JOINING SERVER",
"maxPlayers": 128,
"serverLogo": "assets/images/logo.png",
"brandingSection": {
"title": "YOUR-SERVER",
"subtitle": "Premium RP Experience"
}
}serverName
The name displayed in the browser tab
serverTitle
Main title displayed on the welcome screen
serverSubtitle
Subtitle displayed below the main title
serverDescription
Short description of your server
welcomeTitle
Text displayed above the server title
joinText
Text in the joining notification box
maxPlayers
Maximum number of players on your server
serverLogo
Path to your server logo image
brandingSection
Configure the branding in the top-left corner
Appearance Settings
"appearance": {
"background": {
"backgroundType": "videoOnly",
"videoSource": "assets/video/background.webm",
"imageSource": "assets/images/background.jpg"
}
}backgroundType
Choose between: videoOnly, imageOnly, imageAndVideo (togglable), or blank
videoSource
Path to the background video file
imageSource
Path to the background image file
Features Settings
The features section allows you to enable/disable and customize various componen
"features": {
"mainPage": {
"enabled": true,
"featureBoxes": [
{
"title": "CUSTOM ECONOMY",
"description": "Our server features a balanced and realistic economy with unique jobs and business opportunities.",
"icon": "check",
"highlight": true
},
{
"title": "ACTIVE COMMUNITY",
"description": "Join our growing community of friendly players and helpful staff members.",
"icon": "users",
"highlight": false
}
]
}
}enabled
Enable/disable the main page
featureBoxes
Array of feature highlights to display
title
Feature box title
description
Feature description text
icon
Icon to display (check or users)
highlight
Whether to highlight this box with special styling
Team Section
"teamSection": {
"enabled": true,
"sectionTitle": "OUR TEAM",
"sectionSubtitle": "Meet the people behind our server",
"teamMembers": [
{
"name": "Username",
"role": "Owner & Developer",
"description": "Founded the server in 2022 and handles all technical aspects of development.",
"avatar": "assets/images/team/user1.jpg"
}
]
}enabled
Enable/disable the team section
sectionTitle
Title for the team section
sectionSubtitle
Subtitle for the team section
teamMembers
Array of team members to display
name
Team member's name
role
Team member's role/position
description
Short bio for the team member
avatar
Path to team member's profile image
Gallery Section
"gallerySection": {
"enabled": true,
"sectionTitle": "Server Gallery",
"sectionSubtitle": "Preview our beautiful world",
"autoSlide": true,
"autoSlideInterval": 5000,
"images": [
{
"url": "assets/images/gallery/image1.jpg",
"thumbnail": "assets/images/gallery/thumb1.jpg",
"title": "Downtown at Night"
}
]
}enabled
Enable/disable the gallery section
sectionTitle
Title for the gallery section
sectionSubtitle
Subtitle for the gallery section
autoSlide
Whether to automatically cycle through images
autoSlideInterval
Time in milliseconds between slides
images
Array of images to display
url
Path to full-size image
thumbnail
Path to thumbnail image (optional, will use url if not provided)
title
Caption for the image
Keyboard Section
"keyboardSection": {
"enabled": true,
"sectionTitle": "Keyboard Controls",
"sectionSubtitle": "Learn the essential controls for our server",
"highlightedKeys": {
"f1": "Toggle player HUD",
"e": "Interact with objects and NPCs",
"i": "Open inventory",
"m": "Open map",
"l": "Lock/unlock vehicle",
"space": "Jump / Skip dialog"
}
}enabled
Enable/disable the keyboard section
sectionTitle
Title for the keyboard section
sectionSubtitle
Subtitle for the keyboard section
highlightedKeys
Object mapping key names to their descriptions
Snake Game
"snakeGame": {
"enabled": true,
"sectionTitle": "Snake Game",
"sectionSubtitle": "Play while you wait!",
"gridSize": 20,
"speed": 150,
"snakeColor": "#e60000",
"foodColor": "#ff7b00"
}enabled
Enable/disable the snake game
sectionTitle
Title for the game section
sectionSubtitle
Subtitle for the game section
gridSize
Size of the game grid (20x20 default)
speed
Game speed (lower = faster)
snakeColor
Color of the snake head
foodColor
Color of the food items
Social Media Integration
"socialMedia": {
"enabled": true,
"links": [
{
"platform": "discord",
"url": "https://discord.gg/yourserver"
},
{
"platform": "website",
"url": "https://yourserver.com"
}
]
}enabled
Enable/disable social media buttons
links
Array of social media links
platform
Platform name (discord, twitter, facebook, instagram, youtube, tiktok, twitch, github, website)
url
URL to the social media page
Loading Bar
"loadingBar": {
"enabled": true,
"loadingMessages": [
"Loading server resources...",
"Initializing game world...",
"Loading map data...",
"Synchronizing with server...",
"Preparing character data...",
"Almost there..."
]
}enabled
Enable/disable the loading bar
loadingMessages
Array of messages to display as loading progresses
Music Player
"musicPlayer": {
"enabled": true,
"autoplay": true,
"volume": 50,
"showInAllTabs": true,
"playlist": [
{
"title": "Server Theme",
"file": "assets/audio/theme.mp3"
},
{
"title": "Ambient Music",
"file": "assets/audio/ambient.mp3"
}
]
}enabled
Enable/disable the music player
autoplay
Whether to start playing music automatically
volume
Default volume level (0-100)
showInAllTabs
Show player in all tabs or only on main page
playlist
Array of audio tracks
title
Track title to display
file
Path to the audio file
Advanced Customization
CSS Variables
The loading screen uses CSS variables for easy styling customization. You can modify these in the style.css file:
:root {
/* Brand Colors */
--primary-color: #e60000;
--primary-color-dark: #990000;
--primary-color-light: rgba(230, 0, 0, 0.6);
--primary-color-lighter: rgba(230, 0, 0, 0.2);
--secondary-color: #ff7b00;
/* Text Colors */
--text-color: #ffffff;
--text-color-muted: rgba(255, 255, 255, 0.7);
--text-color-faded: rgba(255, 255, 255, 0.5);
/* Background Colors */
--bg-color-dark: #0a0000;
--bg-color-light: #1a0505;
--bg-overlay: rgba(10, 0, 0, 0.5);
--bg-overlay-light: rgba(10, 0, 0, 0.3);
}Changing these variables will update colors throughout the entire loading screen, making it easy to match your server's branding.
Help and Support
If you encounter any issues or need assistance with customization, please join our Discord server for support:
Last updated