INSTRUCTIONS

This loading screen can be a bit tought to get set-up but hopefully this page will help you. The instructions are split up into various sections so as to make it easy for to find out what you want to do.

CONFIGURING THE LOADING SCREEN

The loading screen is coded using a server side language known as PHP. This means that the file has to be running off a server for it to work. Before we can test it we firstly need to configure it.

1. GET A STEAM API KEY
We need to acquire a Steam API Key, to do this simply visit: http://steamcommunity.com/dev/apikey
Just sign in with your steam account and generate an API Key.

2. ADD STEAM API KEY TO CODE
We now need to add the key to the main code. To do this simply open up index.php using your favourite code editor, I recommend using Notepad++ as it is free and will nicely highlight the code so you can read it better. Right at the top of the code you will see a piece of code that looks like this.

	$SteamAPIKey = "INSERT YOUR STEAM API KEY HERE";

Simply replace the words INSERT YOUR STEAM API KEY HERE, with your newly generated key. You also need to make sure that the key is inside of the quotation marks otherwise the script won't work. Below is an example of what it should look like with a key (please note that the key is invalid)

	$SteamAPIKey = "0000000000";

3. UPLOAD TO YOUR WEB HOST
This loading screen uses PHP to dynamically insert a steam avatar, name and ID. To do this it has been coded in a server side language known as PHP and will only work properly when it is accessed from web server. Simply upload the files onto your web host, if you don't have one then I highly recommend HostGator as they are very cheap, once you have done this you can then move onto the next step. (Please note that your host must support PHP or else the loading screen will not work)

4. TEST BY ADDING ?steamid=76561198000430367 TO END OF ADDRESS
We can now test the loading screen but for the code to work we need to have a valid steam community id.

Garry's mod can give us this easily but when testing in a web browser we can type in any old steam community id just to test that it all works. You can change the steam community id with your one as well to test it. Below is an example url of what you should roughly have in your web browser address bar to see if it all works fine. (Please note that it is the steam community id which is a longer version of the steam id's you may be used to seeing)

	http://domainnameexample.com/index.php?steamid=76561198000430367

5. CREATE CORRECT SV_LOADINGURL FOR GARRY'S MOD SERVER
If the test went through all ok then we can move onto the next part which is to configure our sv_loadingurl, this is the really important bit, as you need to do this otherwise it won't work in garry's mod. For this to work you need to add ?steamid=%s to the end of the URL. Below is an example which shows this.

	sv_loadingurl "http://domainnameexample.com/index.php?steamid=%s"

%s tells garrys mod to give us the players steam community id and that's how we can display their avatar and name. Without this it simply won't work, if it's set up wrong you will get an error message.

CONFIGURING SV_LOADINGURL

For this loading screen to work we need to get the users steam id. Garry's mod can give this to us by adding ?steamid=%s to the end of the url. Below is an example showing you what your sv_loadingurl should look like.

	sv_loadingurl "http://domainnameexample.com/index.php?steamid=%s"

CONFIGURING MUSIC SCRIPT

To be able to get music working with the loading screen there are a couple of things we need to do. Below are some instructions on how to get the music script up and running.

1. Convert Audio File to .OGG
The steam browser which loads up our loading screen can only read .OGG files, this means we have to convert our audio file. To do this simply use an online audio converter such as: http://audio.online-convert.com/convert-to-ogg

Drop the bitrate to 128kbps and don't worry about changing anything else. By using a lower bitrate the song will be a smaller filesize and will allow the page to load up faster.

2. ACTIVATE MUSIC SCRIPT
By default the music script is commented out. All you have to do is scroll to the bottom of the code in index.php and remove the comment code. Below are two examples which show what it looks like with the comment code and what it should look like without the comment code.

CODE WITH COMMENT TAGS
	<!--
	<audio class="audio" autoplay autobuffer="autobuffer">
	<source src="music.ogg" type="audio/ogg">
	</audio>
	-->
CODE WITHOUT COMMENT TAGS
	
	<audio class="audio" autoplay autobuffer="autobuffer">
	<source src="music.ogg" type="audio/ogg">
	</audio>
	

3. SET PATH TO MUSIC FILE
Now we just need to replace music.ogg with the path to the sound file. This can either be relative to it's position in the folder structure or a direct html. If it is in the same folder as index.php then just add the name followed by the .ogg extension, if not simply use a direct url.

RELATIVE FILE PATH [PATH IS CASE-SENSITIVE]
	<audio class="audio" autoplay autobuffer="autobuffer">
	<source src="RELATIVE_PATH.ogg" type="audio/ogg">
	</audio>
DIRECT URL INCLUDING HTTP [PATH IS CASE-SENSITIVE]
	<audio class="audio" autoplay autobuffer="autobuffer">
	<source src="http://domainnameexample.com/music.ogg" type="audio/ogg">
	</audio>

4. [OPTIONAL] ADJUST VOLUME
You can adjust the volume by looking for the following line of code.

	//Changes volume of song. 0.5=50% volume
	$('.audio').prop("volume", 0.5);

Simply change 0.5 to a value between 0 to 1 and this will change the volume.

5. [OPTIONAL] TEST
To test if the music will play whilst people are connecting to your server all you need to do is type in the URL into the in-game steam browser. If it works in this browser then it will be all ok. If not then you have probably done something wrong.

REMOVING BACKGROUNDS

Currently there are 6 customisable backgrounds, if there is too many then simply remove some of the background divs from index.php
Below are some code examples showing this

WITH ALL SIX ORIGINAL BACKGROUNDS
	<div id="bg1"></div><!-- BG 1 -->
        <div id="bg2"></div><!-- BG 2 -->
        <div id="bg3"></div><!-- BG 3 -->
        <div id="bg4"></div><!-- BG 4 -->
        <div id="bg5"></div><!-- BG 5 -->
        <div id="bg6"></div><!-- BG 6 -->
WITH 4 BACKGROUNDS
	<div id="bg1"></div><!-- BG 1 -->
        <div id="bg2"></div><!-- BG 2 -->
        <div id="bg3"></div><!-- BG 3 -->
        <div id="bg4"></div><!-- BG 4 -->

CHANGING BACKGROUND SPEED

Woah those images are fading pretty quickly aren't they?

You can change them by finding and editing the code shown below which can be found in index.php

$('#background-scroll').cycle({ 
		fx: 'fade',
		pause: 0, 
		speed: 1800, //Duration of Effect in milliseconds
		timeout: 3500  //Time spent on image in milliseconds
		});

Simply change the speed number to change the time it takes for the images to fade and change the timeout option to modify the amount of time spent admiring a background image.

ADDING EXTRA BACKGROUNDS

Adding extra backgrounds can be a bit of a pain. We need to modify 2 files. These are index.php and style.css.

1. Adding Extra Background Divs
I'm going to show you how to add two extra backgrounds, you can add as many as you like all you need to do is replicate this but with different numbers.

Firstly find the background div list in index.php and simply add some more in. Below is a before and after code view.

BEFORE ADDING EXTRAS
	<div id="bg1"></div><!-- BG 1 -->
        <div id="bg2"></div><!-- BG 2 -->
        <div id="bg3"></div><!-- BG 3 -->
        <div id="bg4"></div><!-- BG 4 -->
        <div id="bg5"></div><!-- BG 5 -->
        <div id="bg6"></div><!-- BG 6 -->
ADDING EXTRAS
	<div id="bg1"></div><!-- BG 1 -->
        <div id="bg2"></div><!-- BG 2 -->
        <div id="bg3"></div><!-- BG 3 -->
        <div id="bg4"></div><!-- BG 4 -->
        <div id="bg5"></div><!-- BG 5 -->
        <div id="bg6"></div><!-- BG 6 -->
        <div id="bg7"></div><!-- BG 7 -->
        <div id="bg8"></div><!-- BG 8 -->

2. Add extra id's into CSS
Now we just need to add some extra code into style.css, scroll to the bottom to find the following code and then just do the same thing where we copy and paste but just change up the numbers

BEFORE ADDING EXTRAS
	#bg1 {background: url('backgrounds/1.jpg'); 
    background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}
	#bg2 {background: url('backgrounds/2.jpg'); 
    background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}
	#bg3 {background: url('backgrounds/3.jpg'); 
    background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}
	#bg4 {background: url('backgrounds/4.jpg'); 
    background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}
	#bg5 {background: url('backgrounds/5.jpg'); 
    background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}
	#bg6 {background: url('backgrounds/6.jpg'); 
    background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}
AFTER ADDING EXTRAS
	#bg1 {background: url('backgrounds/1.jpg'); 
    background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}
	#bg2 {background: url('backgrounds/2.jpg'); 
    background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}
	#bg3 {background: url('backgrounds/3.jpg'); 
    background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}
	#bg4 {background: url('backgrounds/4.jpg'); 
    background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}
	#bg5 {background: url('backgrounds/5.jpg'); 
    background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}
	#bg6 {background: url('backgrounds/6.jpg'); 
    background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}
    #bg7 {background: url('backgrounds/7.jpg'); 
    background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}
    #bg8 {background: url('backgrounds/8.jpg'); 
    background-size: 100% auto; background-size: cover; width: 100%; height: 100%;}

3. Get some more images into the background folder
Now we just need to add two more jpeg files into the background under the name 7 and 8. That's it, well done :D

CHANGING COLOUR OF THE BAR

Changing the colour of the bar is super easy, all you have to do is open up the colours folder and pick a colour that you like, then copy and paste the colour.css file into the folder of the loading screen you are working on.

It should over-write the colour.css file residing in your core loading screen folder.

CHANGING THE RULES

Changing the rules is fairly easy, by default there are 10 and this keeps everything perfectly in-line, however you can remove or add extra rules if you want to.

1. FINDING THE LIST
The rules are all in a big list, below shows the code which makes up the rules list.

<ul id="rules">
	<li><span>1</span> Do not bully or harass other players</li>
	<li><span>2</span> Do not be annoying</li>
	<li><span>3</span> Do not propkill</li>
	<li><span>4</span> Do not RDM</li>
	<li><span>5</span> Do not metagame</li>
	<li><span>6</span> Do not hack or exploit</li>
	<li><span>7</span> Do not micspam</li>
	<li><span>8</span> Do not kill players who are AFK</li>
	<li><span>9</span> Obey all staff orders</li>
	<li><span>10</span> Thanks, and have fun!</li>
</ul>;

2. CHANGING THE RULES
To change the rules simply modify the text after the span tags, it's that easy :)

Below is some example code showing the changed rules. (note that the text inside of the span tag will show up as the little number list)

<ul id="rules">
	<li><span>1</span> Rule Number 1</li>
	<li><span>2</span> Rule Number 2</li>
	<li><span>3</span> Rule Number 3</li>
	<li><span>4</span> Rule Number 4</li>
	<li><span>5</span> Rule Number 5</li>
	<li><span>6</span> Rule Number 6</li>
	<li><span>7</span> Rule Number 7</li>
	<li><span>8</span> Rule Number 8</li>
	<li><span>9</span> Rule Number 9</li>
	<li><span>10</span> Rule Number 10</li>
</ul>

CHANGING THE GAMEMODE NAME

The loading screen dynamically gets the name of the game mode you are running but it will be the name of the game mode which you set in your config file, not the full name. To get the full game mode name you will need to manually edit this yourself

1. EDITING INDEX.PHP
First thing we need to do is to find the bit of code which controls the game mode name in index.php, below is the code we are looking for.

<li><img src="images/server-mode.png" alt="Game Mode" /> <span id="s-mode">Game Mode</span></li>

2. REMOVE THE SPAN ID
The game mode name is insterted using javascript and it looks for the id of s-mode, all we need to do is remove the id tag from the span and then change the text to our liking, below is an example piece of code where I have removed the span ID and changed the game mode name to show up as being Trouble in Terrorist Town

<li><img src="images/server-mode.png" alt="Game Mode" /> <span>Trouble in Terrorist Town</span></li>

3. EDITING MAIN.JS
Now we need to edit a script called main.js, this is located inside the scripts folder, make sure you right click and then select the open with option otherwise your computer will try to run the script file instead of let you edit it.

Once open scroll down to the bottom of the file to find the following section of code.

function GameDetails( servername, serverurl, mapname, maxplayers, steamid, gamemode ) {
	document.getElementById( "s-name" ).innerHTML = servername;
	document.getElementById( "s-map" ).innerHTML = mapname;
	document.getElementById( "s-mode" ).innerHTML = gamemode;
}

You want to change this section of code to the one below.

function GameDetails( servername, serverurl, mapname, maxplayers, steamid, gamemode ) {
	document.getElementById( "s-name" ).innerHTML = servername;
	document.getElementById( "s-map" ).innerHTML = mapname;
}

And we're done, that's it :)

CHANGING THE LOGO

The logo is simply an image named logo.png which sits in the images folder. To change the logo simply over-write the image in this folder and it will update the image on the loading screen. Please note that the current dimensions for the logo are 960px x 120px

MAKING THE LOGO BIGGER

To make the logo bigger you firstly need to over-write logo.png in the images folder with your new logo image. You must make sure that the image is in the PNG format and is 960 pixels wide. Once this is done we then need to update index.php to resize the logo correctly, so find the piece of code below

	<img src="images/logo.png" width="960" height="120" alt="Your Logo" />

And simply change the height to the new height of your logo image, remembe the image must be 960 pixels wide. Below is an example showing me changing the height to be 200 pixels.

	<img src="images/logo.png" width="960" height="200" alt="Your Logo" />

TWO LINES PER RULE

some times you need a little extra space in the rules list and to do this we can easily double the size of the rule so that it will fit on two lines. All you have to do is look for the code below in index.php.

<ul id="rules">
	<li><span>1</span> Do not bully or harass other players</li>
	<li><span>2</span> Do not be annoying</li>
	<li><span>3</span> Do not propkill</li>
	<li><span>4</span> Do not RDM</li>
	<li><span>5</span> Do not metagame</li>
	<li><span>6</span> Do not hack or exploit</li>
	<li><span>7</span> Do not micspam</li>
	<li><span>8</span> Do not kill players who are AFK</li>
	<li><span>9</span> Obey all staff orders</li>
	<li><span>10</span> Thanks, and have fun!</li>
</ul>

This piece of code defines all the rules, to make one of them span along two lines all you need to do is add the class "double" to the list item in which you want to be bigger. Below is an example where I have added the class to the first rule which will make it fit on two lines rather than one.

<ul id="rules">
	<li class="double"><span>1</span> Do not bully or harass other players</li>
	<li><span>2</span> Do not be annoying</li>
	<li><span>3</span> Do not propkill</li>
	<li><span>4</span> Do not RDM</li>
	<li><span>5</span> Do not metagame</li>
	<li><span>6</span> Do not hack or exploit</li>
	<li><span>7</span> Do not micspam</li>
	<li><span>8</span> Do not kill players who are AFK</li>
	<li><span>9</span> Obey all staff orders</li>
	<li><span>10</span> Thanks, and have fun!</li>
</ul>

MOVE DOWNLOAD ITEM AND PERCENTAGE TEXT

At the bottom of Crystal Load is the download bar and underneath that are two pieces of text which show the download percentage of all the items overall and the current item that is being downloaded. By default these appear on the right hand side but it is possible to have them appear on the left hand side.

1. FIND THE PIECE OF CODE IN INDEX.PHP
Find the following piece of code which is shown in the box below. (please note that there might be some comment tags, you can safely ignore those)

	<div id="percentage">
		<p></p>
	</div>
        
	<div id="download-item">
		<p>Connecting...</p>
	</div>

2. REPLACE CODE
Replace the code you have just found with the code below, we are basically just flipping them round so that when we move onto the next step it will all display correctly

	<div id="download-item">
		<p>Connecting...</p>
	</div>
    
   	<div id="percentage">
		<p></p>
	</div>

3. REPLACE CODE IN STYLE.CSS
You now want to find the following code inside style.css

#percentage p {float: right; font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
            color: RGBA(0,0,0,0.7); font-weight: 400; font-size: 16pt; margin: 4px 0 0 0;}
#download-item p {float: right; font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
color: RGBA(0,0,0,0.7); font-weight: 400; font-size: 11pt; margin: 8px 10px 0 0;}

and replace it with the code below which will make them float to the left instead of to the right.

#percentage p {float: left; font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
            color: RGBA(0,0,0,0.7); font-weight: 400; font-size: 16pt; margin: 4px 0 0 0;}
#download-item p {float: left; font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
color: RGBA(0,0,0,0.7); font-weight: 400; font-size: 11pt; margin: 8px 10px 0 0;}

DISPLAY A TEXT BOX INSTEAD OF RULES LIST

To keep the folder structure easier to manage you will have to manually add the code for the text box but don't worry it's easy to do and most of it is all set up :D

1. REPLACE THE RULES CODE IN INDEX.PHP
Find the following piece of code which is shown in the box below. (please note that there might be some comment tags, you can safely ignore those)
This code basically renders the rules list so we can throw it out

<ul id="rules">
	<li><span>1</span> Do not bully or harass other players</li>
	<li><span>2</span> Do not be annoying</li>
	<li><span>3</span> Do not propkill</li>
	<li><span>4</span> Do not RDM</li>
	<li><span>5</span> Do not metagame</li>
	<li><span>6</span> Do not hack or exploit</li>
	<li><span>7</span> Do not micspam</li>
	<li><span>8</span> Do not kill players who are AFK</li>
    <li><span>9</span> Obey all staff orders</li>
	<li><span>10</span> Thanks, and have fun!</li>
</ul>

So all you need to do is replace the code above with the code below

	<div id="box">
		<p>Your text for you new fancy text box goes here</p>
	</div>

2. FIX TITLE
So it's still going to say OUR RULES above our next fancy text box so all we need to do is find the code below

	<div class="title">
		<h2>Our Rules</h2>
	</div>

and change the text inside the h2 tags to be our title, below is an example where I have changed it to say About Us
(please note that the text will automatically be put into capitals no matter how you typed it in)

	<div class="title">
		<h2>About Us</h2>
	</div>