INTRODUCTION

Hello and Thank you for choosing A R S N L.

A R S N L is the perfect template for independed developers and studios to showcase their games in a sleek, professional and eye-catching manner.

Built for efficinecy and smoothness with HTML5, CSS3, PHP and Javascript on the Bootstrap 4 framework.

You can edit the template CSS files using any text editor but for the best experience we recommend Brackets or Notepad++

What's Included:

8 fully functional HTML templates;
Terms & Conditions and Privacy Policy Pages included in every template;
FontAwesome icon pack included;

Created: 11/07/2019

Author: Atypical Themes

FILE STRUCTURE

The main template folder contains the following:

A R S N L Mobile and A R S N L General folders each contain 2 template Styles with Video variants for a total of 4 templates each;

Each template folder contains and index.html file, Privacy Policy html file and Terms & Conditions html file along with the following folders:

CSS - Bootstrap, the main template stylesheet and other css files.
Fonts - FontAwesome Icon font.
Images - Image files and favicons.
Js - Javascript files for bootstrap, smoothscroll, contact-form, animations, lightbox and template custom javascript file arsnl.js
Php - Php scripts for contact and newsletter forms.

Dobucmentation is where you found this help file.

SETTING UP THE TEMPLATE

Adding Images:

The template contains two types of images: Embeded and imported with CSS

For embeded images copy your custom images into the images folder and add them to the tempalte by editing the img link inside the template.

An image link looks like this in the code:

                       
<img src="imgages/yourimage.jpg" class="img-fluid" alt=" ">

There are also background images imported with CSS like this:

                       
background-image: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0) 100%), url(../images/bg1.jpg);

For those images you simply have to copy your custom image inside the "images" folder and change "url(../images/bg1.jpg)" to your image name.

As you can see the image has a gradient applied to it that you can change the color [rgba(0,0,0)], angle (90deg) or opacity (0.9, 0.7 etc) of as you wish.

Setting up the fullscreen video:

The video included in the template is an mp4 video with 1280x720 resolution at 29fps. The supported video formats are mp4 , WebM and ogg.

When using video, loading times are very important so try to find a ballance between quality and size and limit your video to under 30mb in size.

Place your video file inside the images folder. Open index.html with a text editor and navigate to the hero section, here you will find the following lines of code:

                    
<video autoplay loop poster="images/poster.jpg" id="bgvid" class="img-fluid">
    <source src="images/bgvid.mp4" type="video/mp4">
</video>

Now replace bgvid.mp4 with the name of your video file and also change "mp4" in the line type="video/mp4" with ogg or webm if you are using one of those formats.

If the video cannot be loaded the template will load a poster image instead. So create a .jpg image file and name it poster.jpg and paste it in the images folder.

By default the video will autoplay and loop, defined by the autoplay and loop parameters inside the video tag.

Newsletter & Privacy Policy Forms

To reviece emails from the privacy form change the line $EmailTo = "youremail@domain.com" to your desired email adress in the privacyform-process.php file.

In order to recieve emails from the newsletter form simply repeat the process inside the newsletter-process.php file this time.

If you want to change the input filed names you will have to update them in the following files:

index.html, arsnl.js, form-process.php

HTML STRUCTURE

The index.html file looks like this:

                    
<!DOCTYPE html>
    <html>
    <head>
      ...
    </head>
        <body>
            <!-- Loading Screen -->
            <div id="loader-wrapper">
                <div id="loader"></div>
            </div>
            <!-- HEADER -->
            <header id="main-header">            
              ...
            </header>
            <section id="...section">         
              ...
            </section>
            <!-- FOOTER -->
            <footer id="main-footer">       
              ...
            </footer>
        </body>
    </html>

SECTIONS

Each template is divided into the following sections and subsections:

Hero Section
About Section
Media Section
Features Section
CTA Section
- Newsletter

A section looks like this:

                        
    <div id="about-section" class="large-margin">
        ...
        ...
        ...
    </div>

The "large-margin" class sets the bottom margin of the section.

You can customize section margins individualy, these margin classes can be used to modify the bottom margin of each section:

tiny-margin
small-margin
medium-margin
large-margin

The value for each class varies by tempalte and you can change the value of each margin class by going into the style.css file.

!Note that the em and rem values in this template are calculated for a 16px base font-size!

You can change the base font-size of the template by opening style.css and navigating to the "body" class.

CUSTOMIZATION

Changing Colors

The easiest way to change the main color of the template is this:

Open style.css with your prefered text editor;
Press Ctrl+F (Cmd + F on mac) on your keyboard to bring up the search bar;

Type "colored" into the search bar, it sould take you to a line with a color code like so:

                            
    .colored {
        color: #d71414;
        }

Copy the color code (in this case #d71414;), press Ctrl+F once again to bring up the search bar and paste the color code in there;
This should highlight all the instances of that color inside the style.css file.
Now you can just replace the color codes with your prefered hex color.

Alternatively in some text editor programs you can press Ctrl+H to bring up a search & replace bar in which you can paste and replace the hex color codes.

Cookie Notification Popup

The template features a notification pop up that informs users if your site uses cookies.

The pop-up is enabled by default in every template.

In order to disable the notification we simply need to open the arsnl.js file inside the js folder and look for the following lines:

Now simply delete or comment out the code (by adding // in fornt of each line).

Embeded Videos

A R S N L features embeded videos such as trailers in different parts of the template

First we need to get the video id by clicking the share button on the video we want to embed and copying the link ID likes so:

Now we need to paste the video ID into our video element inside the index.html file:

Social Media

If you want to control the way the posts look like when you share the landing page on social media (Facebook, Google+ and LinkedIn especially) don't forget to update the OG Meta Tags

To add more social icons in the footer please the footer section in the index.html file accordingly and add your preferred icons from the FontAwesome library.

Image Overlays

Certain background images in every template (including the video) have an opacity filter over then to improve readability.

To change the value of this filter look for the backgroun-image property of each image in style.css and edit the linear gradient value (it can range from 0.1 to 1)

                        
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../images/hero.jpg);

Example:

0.2 Opacity

0.8 Opacity

RESOURCES USED

Fonts - Montserrat, Nanum Gothic, Quicksand, Noto Sans and Anurati Free Font by Emmeran Richard

Icons - FontAwesome

bLazy load image script

Jquery Modal Video

JQuery 3.4.0

SUPPORT

For any support questions or suggestions please feel free to email us at support@atypicalthemes.com

A R S N L Game Stuio Template by AtypicalThemes