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++
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.
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.
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">
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 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.
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.
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:
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.
<!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>
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>
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:
Hero Section
About Section
Services Section 1
Team Section
Skills Section
Services Section 2
Portfolio Section
Pricing Section
Testimonials Section
Contact Section
<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:
You can change the value of each margin class by going into the style.css file.
You can also change the color of any individual section by adding the color name to the section class, the available colors are:
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.
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.
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.
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.1 Opacity
0.5 Opacity
CSS Framework - Bootstrap
Icons - Pe-7-Stroke and FontAwesome
Tag Sorting - Isotope
Image Gallery - Lightbox
Fonts Used - Raleway, Droid Sans
Nixo Creative Onepage Template by AtypicalThemes