Ashley | Parallax One Page HTML5 Template

Documentation by “LITTLE NEKO“

• created: 07/10/2013
• latest update: 07/10/2013
• by: LITTLE NEKO
• http://little-neko.com

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please contact us via our support forum. Thanks so much!

You can view this template in any web browser from your desktop computer. Because the files are written in HTML, you do not need an internet connection in order to display or edit the template. However, some javascript scripts might be blocked by some browser for security reasons. In that case, you will need to use Firefox, or set up a local server.

Setting the base color scheme

1. Locate css folder, you have all the colors in there
2. Choose your color
3. Open the file, copy the content
4. Open “colors.css”, replace content with the content of your color file
5. Finally, open "custom.js" and erase the lines at the top (see comments in file), to remove the color switcher script

Getting the Template Online

1. It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.
2. The template folder will have several files with the extension labeled .html. This is where all your content will. It's very important to keep the css and js-plugin folders with the HTML or the HTML will not look how the design is meant to look. Along with the HTML files, you will also have four additional folders to upload: css, font-icons, bootstrap, js-plugin, images, and js.
3. Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
4. Locate the domain folder you wish to upload your template files to on your server. You are going to want to click and drag every file into your FTP client.
5. Once the files are done uploading, rename the file you want to be your home page as 'index.html'.

This theme has a responsive layout with a variation of column layouts depending on the page. This theme uses the TWITTER BOOTSTRAP (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the Bootstrap system, be sure to read about it here.

The main structure of this site is wrapped in a '.container' div and a '.row' div. Inside of that div you will find each major section of the site given an appropriate column size all equalling 12 columns in length. For example, if you want a two columns layout width the same width you would create two div's 'span6' . The total columns equals 12.

If you would like to edit the colors of any elements in one of these columns, you would do the following in color.css :

        #mainLogo {
                color: #someColor;
        } 

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

        header #mainLogo {
                color: #someColor;
        }

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

We are using a set of two main CSS files (layout.css and color.css) in this template which you are free to modify depending on the customization you require. The style sheets are:

color.css - The color scheme stylesheet you are encouraged to modify.
layout.css - The main stylesheet.

• bootstrap.min.css - This style sheet is required for the Bootstrap grid system. Read more about this system here.

The main CSS file contains all of the specific stylings for the page. The file is separated into sections using:

        /* #NAME OF THE SECTION
        ================================================== */

        /* Table of Content
        ================================================== */
        #Custom Reset
        #Typography
        #Boostrap customization
        #Site Styles
        #HomePage Styles
        #Page Styles
        #Shortcodes classes
        #Forms
        #Sliders Styles
        #Media Queries

The color.css file contains all colors and styles for the color scheme you choosed. This file is also where you would make any changes to the main look of the theme since it overrides all css rules found in layout.css.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

This template uses several javascript files, all of them are placed a folder called "js-plugin" and on googleapis servers. All javascript files are called in the bottom of the page to speed up the loading time. The custom.js file, which is located in the js folder, is where we have placed all plugin calls and custom functions such as flexslider "captions" custom animations.

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">...
        <script src="//maps.google.com/maps/api/js?sensor=false">...
        <script src="js-plugin/respond/respond.min.js">...
        <script src="js-plugin/jquery-ui/jquery-ui-1.8.23.custom.min.js">...
        <script src="js-plugin/isotope/jquery.isotope.min.js">...
        <script src="js-plugin/easing/jquery.easing.1.3.js">...
        <script src="js-plugin/pretty-photo/js/jquery.prettyPhoto.js">...
        <script src="js-plugin/flexslider/jquery.flexslider.js">...
        <script src="js-plugin/jquery-validation/jquery.validate.js">...
        <script src="js/custom.js">...

Here is a complete list of all plugins we've used to create The Ashley Template. All plugins are called in the custom.js file in the js folder

Animations

          <script src="js-plugin/appear/jquery.appear.js">
        

          <link rel="stylesheet" type="text/css" href="js-plugin/appear/nekoAnim.css">
        

• data-nekoanim defines the animation type
• data-nekodelay defines the delay before animation starts

          <img src="xxxx" data-nekoanim="fadeIn" data-nekodelay="10">
        

• fadeIn
• fadeInUp
• fadeInDown
• fadeInLeft
• fadeInRight
• fadeInUpBig
• fadeInDownBig
• fadeInLeftBig
• fadeInRightBig
• fadeInDownBig
• slideInDown
• slideInLeft
• slideInRight
• bounceIn
• bounceInUp
• bounceInDown
• bounceInLeft
• bounceInRight

FlexSlider

The documentation for this plugin can be found here The only specifics about this slider is that all caption animations are placed in the custom.js file in a function called "animateTxt" which takes two parameters (curSlide: the current slide the slider is on, state: the state of the animation). You can customize this function to fit your needs. To change the way the slider looks like, you would go in the js-plugin folder and look for the flexslider/themes folder.

OWL Carousel

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. The documentation for this plugin can be found here.

Isotope

This plugin is used to layout the portfolio section and animate each columns depending on the filter the user select. The documentation can be found here.

Easing

This plugin is used to add easing methods for jquery animation such as Bounce or Elastic animations. The documentation can be found here.

Magnific popup

Magnific Popup is a responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device (Zepto.js compatible). Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox. The documentation can be found here. We added an option for galleries, simply add a data-gallery tag with the list of the images you want inside your gallery:

data-gallery="images/portfolio/carousel-2.jpg,images/portfolio/carousel-3.jpg"

Neko Contact AJAX Form

This plugin allows you to easily place a self-contained Contact Form on any HTML or PHP page of your existing website.

Custom light-weight Jquery-ui

We have also included a light-weight version of jquery-ui. jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. The documentation can be found here.

Sharre plugin

Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook, Twitter, Google Plus (with PHP script) and more... See documentation here

Google map

Google map will let you easily include a dynamic map for your contact page.

Setting your address

The initializer code is in custom.js. Locate “function initialize( id )”. You will see an array of locations, put your infos there. If needed, you can put gps coordinates (optionnal) for more precision. Then remove the items you don't need from the array.

var locations = [
//point number 1
['Madison Square Garden', '4 Pennsylvania Plaza, New York, NY'],
//point number 2
['Best town ever', 'Santa Cruz', 36.986021, -122.02216399999998],

Replace the default icon with your own

Put the path to your custom icon in the intialize(id) function.

var image = 'images/icon-map.png';
     

Google Analytics

We include the Google Analytics code in every footer of the template dynamically. You need to create a google account to use it. Once you are done, open "custom.js" and locate "YOUR UA NUMBER" at the top of the file, and put your UA there. If you dont want to use Google Analytics, just remove the following line of code in custom.js :

window.onload = function () { gaSSDSLoad("YOUR UA NUMBER"); }; //load after page onload 

Twitter's decision to discontinue their unauthenticated v1.0 API means that javascripts widgets using it stopped working in 2013 -- Twitter wants your only option for on-page widgets to be their own Embedded Timelines and follow their display requirements ( https://dev.twitter.com/terms/display-requirements ) . That is why we decided to not include Twitter JS widget in our templates, knowing that it will break sooner or later and not follow the twitter guidelines.You may find alternatives (most using a php script) to display the tweets in a different way, breaking the Twitter rules, but we rather provide a safe solution for our buyers.

How to set up your twitter timeline?

We included our own Twitter timeline in this template

To create a timeline you must be signed in to twitter.com and visit the widgets section of your settings page. From this page you can see a list of the timelines you've configured and create new timelines. Click the “Create new” button to build a new timeline for your website, choose the type, and complete the fields in the form; most fields are optional. The configuration is stored on our server, so once you've saved the timeline a small piece of JavaScript is generated to paste into your page, which will load the timeline. Here's an example embed code:

<a class="twitter-timeline" width="300" height="500" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Twitter embed timeline comes with a set of option to customize the look and feel. See online documentation for more info about them. https://dev.twitter.com/docs/embedded-timelines

We have included all bootstrap shortcodes, classes and javascript plugins so that you can easly customize your theme. You can find a complete explanation of how it works here

Icons fonts

We have included Icon fonts so that your icon will always look great no matter which screen they are displayed on. We have included a custom icon font pack. Here is a example on how to use these icons fonts

<i class="icon-left-circle"></i>

Just change the class name to switch the icon inside you html element. Here is a link showing the complete custom pack included with your theme.

You can extend the icons with the Fontello library. To add more icons to the set:

1. Go to http://fontello.com/
2. Click on the settings and choose "import config.json"
3. Import the file from font-icons/custom-icons. This will highlight the icons of the set
4. Choose the icons you want, download, unzip and replace the files

Neko Framework

Along with all the Bootstraps components, we added some extra shortcode to help you customize your website. Most components classes can be mixed with colors classes

slice: Adds a padding-top and bottom on content.

mb15, mb30 and mb40: Adds a margin bottom to content (1.5em, 3em, or 4em).

mt15, mt30 and mt40: Adds a margin top to content (1.5em, 3em, or 4em).

color1 and color4: adds a background color on sections or components

iconBig, iconRounded: adds more option to style your icons

Demo images (NOT included in the package) http://www.shutterstock.com/

Once again, thank you so much for purchasing this template. As we said at the beginning, we'd be glad to help you if you have any questions relating to this template. Please contact us via our support forum. We'll do our best to assist you!