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;
IMPORTANT NOTICE
1.There is an issue with the javascript plugin that displays the embedded videos, I am aware of the issue but currently am having difficulties pushing the update to fix the issue(I uploaded the files to envato but it seems to be stuck in the review process)
Here is the LINK to the updated version that solved the issue. Just copy the file into the js folder and override.
2.Sometimes the background video of the Strider Video template will not autoplay on IOS.
To fix this open the index.html file and inside the hero section locate this code <video autoplay loop muted poster="images/poster.jpg" id="bgvid" class="img-fluid">
Then replace it with this <video playsinline autoplay loop muted poster="images/poster.jpg" id="bgvid" class="img-fluid">
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">© 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:
Open style.css with your prefered text editor;
Press Ctrl+F (Cmd + F on mac) on your keyboard;
Type the color codes below into the search box and replace the values with your custom color;
For the light version: #E84118;
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">×</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.
Embeded 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 Card Videos
Strider 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.
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
RESOURCES USED
Fonts - Raleway, Open Sans and Anurati Free Font by Emmeran Richard
Icons - FontAwesome
Custom Maps - Snazzymaps
SUPPORT
For any support questions or suggestions please feel free to email us at support@atypicalthemes.com
Strider Game Stuio Template by AtypicalThemes