Hello and Thank you for choosing Nixo.

Nixo is a one-page template designed to showcase your creativity and professionalism. It offers two design styles with 4 variations each (parallax, hero image, slider and video) and 8 colors to choose from.

Built for efficenty and smoothness with HTML5, CSS3, PHP and Javascript on the Bootstrap 3.3.6 framework.

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

What's Included

Nixo includes 2 design styles with 4 variations each for a total of 8 templates without the images from the demo page which are just for demonstration.

You also recieve 3 PSD layout files for the two design styles and the 404 page.

A 404 page is aslo included in each template.

Created: 26/11/2016

Author: Atypical Themes

Style 1 and Style 2 folders each contain 4 templates Parallax, Hero Image, Slider and Video.

Each template folder contains and index.html file and a 404.html file along with the following folders:

• CSS - Bootstrap, the main template stylesheet style.css, animations, colors, and the responsive styles.

• Fonts - FontAwesome and Pe-7-Stroke Icon fonts.

• Images - Image files and favicons.

• Js - Javascript files for bootstrap, smoothscroll, contact-form, animations, lightbox, isotope, and template custom javascript file nixo.js

• Php - Php scripts for contact and newsletter forms.

Dobucmentation is where you found this help file.

PSD contains the Photoshop layout files for the template.

SETTING UP THE TEMPLATE

---

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="image-responsive">
                       

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 slider.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="#carousel-hero" 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="item"><!-- nth slide --> 
    <div class="overlay"></div>
    <img src="imgages/yourimage.jpg" alt="hero-image" class="image-responsive">
    <div class="carousel-caption">
        <h1 class="tagline">YOUR <span class="colored">COLORED</span> TEXT HERE</h1><!-- Tagline -->
        <h5>Beautiful | Clean | Inspiring</h5>
    </div>
</div>
                    

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.

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-responsive">
    <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, nixo.js, form-process.php

Using The Custom 404 Page

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

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" class="turquoise">         
              ...
            </section>
            <!-- FOOTER -->
            <footer id="main-footer">       
              ...
            </footer>
        </body>
    </html>
                    

Header

The header code looks like this:

    
<header id="main-header">
    <nav id="main-navbar" class="navbar navbar-default navbar-fixed-top"><!-- Main Navbar -->
        <div class="container>
            <a href="#" class="navbar-brand" id="logo"><img src="images/logo.png" class="img-responsive" alt="logo"></a><!-- Site Logo -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"><!-- Mobile Menu Button -->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                     <li><a href="#about_us" class="hover-effect"><h5>About Us</h5></a><li>
                     <li><a href="#our_services" class="hover-effect"><h5>Services</h5></a><li>
                     <li><a href="#our_portfolio" class="hover-effect"><h5>Portfolio</h5></a><li>
                     <li><a href="#pricing" class="hover-effect"><h5>Pricing</h5></a><li>
                     <li><a href="#contact" class="hover-effect"><h5>Contact</h5></a><li>
                </ul>
            </div>
        </div>
    </nav>
</header>
                    

Footer

The footer code looks like this:

                    
<footer id="main-footer" class="turquoise">
    <div class="row" id="footer">
        <div class="container">
            <div class="col-md-6">
                <p id="copyright">© Atypical Themes 2016</p>
            </div>
            <div class="col-md-6">
                <ul class="team-social">
                     <li><a href="#"><i class="fa fa-facebook fa-lg"></i></a><li>
                     <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a><li>
                     <li><a href="#"><i class="fa fa-google-plus fa-lg"></i></a><li>
                </ul>
            </div>
        </div>
    </div>
</footer>
                    

Each template is divided into ten main sections:

1. Hero Section

2. About Section

3. Services Section 1

4. Team Section

5. Skills Section

6. Services Section 2

7. Portfolio Section

8. Pricing Section

9. Testimonials Section

10. Contact Section

A section looks like this:

                        
    <section id="about-section" class="turquoise medium-margin">
        ...
        ...
        ...
    </section>
                        

The "turquoise" class sets the color of the section and the "medium-margin" class sets the bottom margin of the section.

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

• small-margin - 2.25em (36px)
• medium-margin - 6.25em (100px)
• large-margin - 10.25em (160px)

You can change the value of each margin class by going into the style.css file.

CUSTOMIZATION

---

You can also change the color of any individual section by adding the color name to the section class, the available colors are:

• Turquoise
• Blue
• Red
• Green
• Gold
• Purple
• Indigo
• Default

Changing Icons

Nixo includes 2 icon packs:

FontAwesome and Stroke7

For FontAwesome Icons the code looks like this:

                        
     <i class="fa fa-facebook"></i>                  
                        

And for Stroke7 Icons the code looks like this:

                        
     <i class="pe-7s-diamond"></i>                   
                        

Lists of all the available icons can be found here and here.

In order to change an icon simply repalce the class name in the quotation marks with the one you picked from the lists above.

Lightbox Gallery Tags

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

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

    <!-- Tags -->                 
    <ul class="portfolio-tags">  
        <li><a href="#" data-filter="*">ALL</a></li>
        <li><a href="#" data-filter=".graphics">GRAPHICS</a></li>
        <li><a href="#" data-filter=".cards">BUSSINESS CARDS</a></li>
        <li><a href="#" data-filter=".logos">LOGOS</a></li>
        <li><a href="#" data-filter=".other">OTHER</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.

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

                        
   <div class="col-md-3 col-sm-6 grid-item graphics"><!-- Single Project -->
   ...
   ...                  
                        

As you can see this item has the class name of graphics which means its part of the "graphics" tag. In your case you would replace "graphics" 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.

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:

RESOURCES USED

---

CSS Framework - Bootstrap

Icons - Pe-7-Stroke and FontAwesome

Tag Sorting - Isotope

Image Gallery - Lightbox

Fonts Used - Raleway, Droid Sans