INTRODUCTION


Hello and Thank you for choosing Strider.


Strider 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:

  • 10 fully functional HTML templates divided into Light and Dark styles with 5 variants each;

  • 404 Page included with every template;

  • FontAwesome icon pack included;

Created: 24/02/2018
Author: Atypical Themes

FILE STRUCTURE


The main template folder contains the following:

StriderLight and StriderDark folders each contain 5 templates: Particles, Slider, Video, Static and Animated.

Each template folder contains and index.html file and a 404.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, isotope, and template custom javascript file Strider.js

  • Php - Php scripts for contact and newsletter forms.

Dobucmentation is where you found this help file.


SETTING UP THE TEMPLATES


Adding 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=" ">
                       

Setting up the hero slider:

By default the hero slider cycles through 3 images automatically when the bar below the slider fills up.

To change the speed of the slider modify the interval value in slide-bar.js


Adding more slides:

Adding slides is a simple two step process


STEP ONE

Open index.html with a text editor and go to the hero section. There you will see this line of code:

                    
<li data-target="#hero-slider" data-slide-to="2"></li>
                    

Duplicate this bit of text (copy and paste it on the next line) and change data-slide-to= font 2 to 3. This adds a 4th slide to the backend of the slider.


STEP TWO

In the same file copy the following text inside the "carousel-inner" div above the "Carousel Controlls" text in the hero section.


<div class="carousel-item active"><!-- slide --> 
    <div class="hero-overlay"></div>
    <img class="img-fluid" src="imgages/yourimage.jpg" alt="hero-image">
    <div class="carousel-caption single">
        <h1 class="tagline">YOUR <span class="colored">COLORED</span> TEXT HERE</h1><!-- Tagline -->
    </div>
</div><!-- end of slide -->
                    

The above code contains the image and text of the slide so make sure to link the image and add your own tagline for the slide.

Repeat these two steps for each new slide you wish to add.


Animated text:

The hero text in the animated template has different ways it can animate.

How the text will animate is controlled by the "animation: fadeInDown" parameter of the HERO TEXT ANIMATION section inside the strider.js file.

In order to change the desired animation simply replace "fadeInDown" with your desired animation paramater.

You can find all the available animation parameters on this website

The hero slider in the animated template works in the same way as the slider template, the stepts for adding images and slides are exactly the same.

Important: Please keep in mind that the slider on the animated tempalte will always start on the second slide.

To change the interval at wich animations and slider will cycle refer to the "speed:" parameter inside the HERO TEXT ANIMATION section of strider.js


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.


Contact & Newsletter Forms

To reviece emails from the contact form change the line $EmailTo = "youremail@domain.com" to your desired email adress in the form-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, Strider.js, form-process.php

Using The Custom 404 Page

Strider comes with a custom 404 page. Depending on your hosting service provider you may or may not be able to use custom 404 pages.

Here is a handy TUTORIAL on setting up a custom 404 page courtesy of DigitalOcean.

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>
                    

Header

The header code looks like this:

    
<!-- //// HEADER //// -->
    <header id="main-header">
        <nav class="navbar fixed-top navbar-expand-lg navbar-dark">
            <div class="container">
                <!-- Site Logo -->
                <a id="logo" class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.svg" alt="site logo"></a>
                <!-- Dropdown Button -->
                <button id="hamburger" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                </button>
                <!-- Navigation Links -->
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#games">Games</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#team">Team</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#careers">Careers</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header><!-- Header End -->
                    

Footer

The footer code looks like this:

                    
    <!-- /// FOOTER /// -->
    <footer id="main-footer">
        <div id="footer"> 
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <p id="copyright">&copy; Atypical Themes <script type="text/javascript">
  document.write(new Date().getFullYear());
</script></p><!-- Copyright Text -->
                        <ul class="social-links">
                            <li><a href="#"><i class="fa fa-facebook fa-lg icon-social"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter  fa-lg icon-social"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus fa-lg icon-social"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin fa-lg icon-social"></i></a>
                            <li><a href="#"><i class="fa fa-pinterest fa-lg icon-social"></i></a>
                            <li><a href="#"><i class="fa fa-instagram fa-lg icon-social"></i></a>
                        </ul>
                    </div>
                </div>
            </div><!-- Container End -->
        </div>
    </footer><!-- Footer End -->
                    

SECTIONS


Each template is divided into the following sections and subsections:

  • Hero Section

  • About Section

  • Games Section

  • Team Section

  • - Studio

  • Careers Section

  • - Newsletter

  • Contact Section


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, three margin classes can be used to modify the bottom margin of each section:

  • tiny-margin - 1.5em (24px)
  • small-margin - 3em (48px)
  • medium-margin - 6em (96px)
  • large-margin - 12em (192px)

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

Changing the main color of the template is an easy process:

  1. Open style.css with your prefered text editor;

  2. Press Ctrl+F (Cmd + F on mac) on your keyboard;

  3. Type the color codes below into the search box and replace the values with your custom color;

  4. For the light version: #E84118;

  5. For the dark version: #E48632;


Adding Games

In order to add more games to the portfolio you need to duplicate the "row game-card" div element shown here:

    <div class="row game-card pc"><!-- Game Card -->
        <div class="col-lg-12 col-xl-5 game-card-left">
            <a href="images/game1_large.jpg" data-lightbox="screenshots_aurora">
                <div class="overlay">
                    <i class="fa fa-picture-o fa-3x"></i>
                </div>
                <picture>
                    <source media="(min-width: 1200px)" srcset="images/game1.jpg">
                    <source media="(min-width: 768px)" srcset="images/game1_large.jpg">
                    <img src="images/game1.jpg" class="img-fluid" alt="aurora image">
                </picture>
            </a>
            <a href="images/game1.1.jpg" data-lightbox="screenshots_aurora"></a>
            <a href="images/game1.2.jpg" data-lightbox="screenshots_aurora"></a>
        </div>
        <div class="col-lg-12 col-xl-7 game-card-right">
            <h2>AURORA AWAKENING<br><span class="sub-text"><span class="colored">Action RPG</span> | PC</span></h2>
            <p>Lorem ipsum dolor sit amet, consectetur ... massa tincidunt. <span class="expand colored strong" data-toggle="modal" data-target="#game1">Read More</span></p>
            <a href="#" class="steam-btn">
                <i class="fa fa-steam fa-3x"></i>
                <p>GET IT ON <br><span class="spaced">STEAM</span></p>
            </a>
            <div class="reviews">
                <a href="#"><div class="score-card">
                    <p class="score colored">8.5</p>
                    <p>Gamespot</p>
                </div></a>
                <a href="#"><div class="score-card">
                    <p class="score colored">8.1</p>
                    <p>IGN</p>
                </div></a>
                <a href="#"><div class="score-card">
                    <p class="score colored">83</p>
                    <p>Metacritic</p>
                </div></a>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade game-modal" id="game1" tabindex="-1" role="dialog" aria-labelledby="aurora" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="modal-title" id="aurora">AURORA AWAKENING</h2>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                   <div class="modal-body">
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... Curabitur imperdiet dolor eget cursus efficitur.</p>
                       <br>
                       <h3 class="colored">EXPLORE AN EXPANSIVE WORLD</h3>
                       <p>Integer eget diam felis... quis convallis eros laoreet ac.</p>
                       <img class="img-fluid" src="images/game1.1.jpg">
                       <br>
                       <h3 class="colored">ADAPT AND DEVELOP YOUR CHARACTER</h3>
                       <p>Suspendisse... Donec condimentum magna sit amet viverra convallis. Fusce accumsan efficitur orci a commodo.</p>
                       <img class="img-fluid" src="images/game1.2.jpg">
                       <br>
                       <h3 class="colored">GET IMMERSED IN A DEEP STORY</h3>
                       <p>Mauris at sapien nibh. Integer... Proin eros massa, ullamcorper eget rutrum eu, feugiat id purus.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
         </div>
    </div><!-- Game Card End -->
                        

Make sure the modal id is the same as the data-target in the "read more" link in the game description like so:

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. luctus consectetur. <span class="expand colored strong" data-toggle="modal" data-target="#game1">Read More</span></p>
    ...
    <div class="modal fade game-modal" id="game1" tabindex="-1" role="dialog" aria-labelledby="aurora" aria-hidden="true">
                        

In this case notice how the modal id and the data-target are the same "game1".

Every new game added needs a unique id like "game2", "game3" etc.


Emveded Videos

To embed videos in the game description modals you need to copy the youtube embed link...

...and paste it inside the iframe of the game description modal.



Game Portfolio Tags

The games in the portfolio can be sorted by tags, changing the tag names is a simple process:

Navigate to the games section in the index.html file, here you will find this code:

    <ul class="game-tags">
        <li><a href="#" data-filter="*">ALL</a></li>
        <li><a href="#" data-filter=".pc">PC</a></li>
        <li><a href="#" data-filter=".mobile">ANDROID / IOS</a></li>
    </ul>
                        

As you can see the name of the tags is set inside the data-filter attribute so that is what you need to change.

To add a new tag just duplicate the last line of code and name your new tag, like so:

    <ul class="game-tags">
        <li><a href="#" data-filter="*">ALL</a></li>
        <li><a href="#" data-filter=".pc">PC</a></li>
        <li><a href="#" data-filter=".mobile">ANDROID / IOS</a></li>
        <li><a href="#" data-filter=".console">XBOX ONE / PS4</a></li>
    </ul>
                        

Next we need to change the class of the game to our tag name, to do this we locate this code in the games section:

                        
   <div class="row game-card mobile"><!-- Game Card -->
   ...
   ...                  
                        

As you can see this item has the class name of mobile which means its part of the "mobile" tag. In your case you would replace "mobile" with your tag name.


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.


Custom Particles

You can customize the particles in the hero section of the apropriate template with a simple three step process:

Step 1: Go to the particles.js website and use the options to create your custom particles template.

Step 2: When you are happy with your particles template download it by clicking the "download current config" button.

Step 3: Open the file you just downloaded and copy its contents into the "Strider.js" file of the template, under the "PARTICLES" section.

    //PARTICLES
    particlesJS("particles-web",  
    ---------- Paste your code under this line -----------
        {
          "particles": {
            "number": {
              "value": 120,
              "density": {
                "enable": true,
                "value_area": 800
              }
            },
            "color": {
              "value": "#e67e22"
            },
            "shape": {
              "type": "circle",
              "stroke": {
                "width": 0,
                "color": "#000000"
              }, ...

                        

Don't worry about overwriting the code, that's what we want.


Hero Image Overlay

The hero images in every template (including the video) have an opacity filter over then to improve readability. To change the value of this filter navigate to the hero section 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

SUPPORT


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


Strider Game Stuio Template by AtypicalThemes