IPS4-Tutorial AltisLife Server Statistic (Replica)

[ADMIN 322]

Hi,

Earlier i saw some people was asking how AltisLife created their Server Statistic at the top of their website. This guide will help you make exactly the same.

1. Go to Admin CP -> Customization -> Themes -> Your Theme -> Edit HTML and CSS -> CSS -> custom.css and open the css file.
2. Paste the following CSS code onto the custom.css:

   .infoTab {
   	float: left;
       line-height: 42px;
       font-family: 'Montserrat', sans-serif;
       font-size: 130%;
       padding-left: 75px; 
   }
   
   .msg {
     float:right;
     line-height:42px;
     font-family:'Montserrat', sans-serif;
     font-size:140%;
   }
   
   .serverBar li {
     padding-left:10px;
   }
   
   .playerCount {
     color:#536e41;
   }
   
   .msgText {
     margin-right:15px;
   }
   
   .serverOnline {
     color:#536e41;
   }
   
   .serverOffline {
     color:#972E33;
   }

    

3. Go to Templates -> core -> front -> global -> globalTemplate and open it.
4. Paste the following HTML code into the globalTemplate:

   <div class="ipsLayout_container ipsClearfix" style="margin-bottom: 4px;">
               <div id="navBar" class="ipsClearfix">
                 <ul style="font-size: 1.4rem;" class="infoTab ipsList_inline cSignedIn ipsClearfix ipsResponsive_showDesktop serverBar">
                   <li class="serverName" data-ipstooltip="" data-ipstooltip-label="Tooltiphere">TEAMSPEAK</li>
                   {block="ts_slot_check"}
                   <li class="serverName" data-ipstooltip="" data-ipstooltip-label="Tooltiphere">SOME</li>
                   <li class="playerCount" data-ipstooltip="" data-ipstooltip-label="Tooltiphere"><span id="server_0" class="serverOnline">ONLINE</span></li>
                   <li class="serverName" data-ipstooltip="" data-ipstooltip-label="Tooltiphere">CONTENT</li>
                   <li class="playerCount" data-ipstooltip="" data-ipstooltip-label="Tooltiphere"><span id="server_1" class="serverOnline">ONLINE</span></li>
                   <li class="serverName" data-ipstooltip="" data-ipstooltip-label="Tooltiphere">HERE</li>
                   <li class="playerCount" data-ipstooltip="" data-ipstooltip-label="Tooltiphere"><span id="server_3" class="serverOnline">ONLINE</span></li>
                   <li style="font-size: 1.4rem;" class="msg" data-ipstooltip="" data-ipstooltip-label="Tooltiphere">Your Website Name</li>
                 </ul>
               </div>
             </div>

    

5. Now you need to create a php block that can display real time server status. In this example i will show you how to do it with the Teamspeak, for others you have to write your own script or get one from internet.
6. Go to Pages -> Block -> Create New Block -> Custom -> Manual PHP -> Next
7. Name: Anything you want
   Template Key: ts_slot_check
   Content: 

   require_once("misc/libraries/TeamSpeak3/TeamSpeak3.php"); try {$ts3 = TeamSpeak3::factory("serverquery://SERVERQUERYUSERNAMEHERE:SERVERQUERYPASSWORDHERE@SERVERIPORDNSHERE:10011/?server_port=9987"); echo "<li class='playerCount' data-ipstooltip='' data-ipstooltip-label='Tooltiphere'><span id='server_2' class='serverOnline'>" . $ts3->virtualserver_clientsonline . " / " . $ts3->virtualserver_maxclients . "</span></li>";} catch(Exception $e){echo "<li class='playerCount' data-ipstooltip='' data-ipstooltip-label='Tooltiphere'><span id='server_2' class='serverOffline'>OFFLINE</span></li>";}

    

8. And now you just have to download PlanetTeamSpeak Framework from HERE
9. Then copy the libraries folder and all of its content to your webserver /misc/ folder. It should looks like /misc/libraries/TeamSpeak3/TeamSpeak3.php
10. The script is working now, and your website will display the user number on your teamspeak.

Please note that this guide is only makes possible to display Teamspeak status. The other 3 column is just a static content that you can make dynamic with a script.

Enjoy