# Straightway - Coming soon unique creative Page - shared on weidea.net

- Created: February 2014
- latest Update: February 2014
- By: FMedia
- themeforest.net/user/FMedia

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

### Introduction

The Straightway - Coming soon unique creative Page is a simple, contrast, stylish and professional look. It suitable for Creative studio, visual portfolios, wedesign company, fashion, personal portfolio, Agencies and business type web site, It's a responsive template so it looks perfect in desktop, ipad and all mobile devices. Template comes with 4 module

###### They are

######

- 1. Home page with Animated Text
- 2. About us
- 3. Services
- 4. Conact us

### Files

The folder named Straightway html contains all the main files to be implemented on your project. There are 4 html files availiable. 1. index.html file, 2.index_light_version.html, 3.index_plain_dark_version.html and 4.index_plain_light_version.hmtl You can change the theme color easily by editing the single color-dark.css and color-light.css file. ###### Inside each folder you see the following files: 1. [CSS] folder - bootstrap.min.css bootstrap-responsive.min.css base.min.css main.min.css color-dark.css color-light.css supersized.min.css supersized.shutter.min.css magnific-popup.css jquery.mCustomScrollbar.css 2. [js] folder - jquery-1.8.2.min.js bootstrap.min.js jquery.jstwitter.js jflickrfeed.min.js jquery.flexslider.min.js jquery.mCustomScrollbar.concat.min.js jquery.mCustomScrollbar.min.js jquery.jscrollpane.min.js jquery.magnific-popup.min.js jquery.nicescroll.min.js supersized.3.2.7.min.js supersized.shutter.min.js jquery.comingsoon.min.js custom.min.js main-fm.min.js 3. [images] folder - [home_slider] - contain Home page supersized slideshow images [list] - contain custom list icon images [map] - contain google map images [portfolio] - contain Portfolio images [social] - contain Custom social icon images [supersized] - contain supersized plugin images and other required images 4. [php] folder - codebird.php grabtweets.php mailer.php mailer.joinus 4. [font] folder - contain required fonts 6. html files - Required html pages index.html index_light_version.html index_plain_dark_version.html index_plain_light_version.html

### HTML structure

This template is developed by Bootstrap frame work. See the complete reference structure

HTML code structure

###

### Header section

In <head> tag, all the CSS, Javascript files are linked and required jQuery plug-ins are initialized. The linked CSS and Javascript files are
    <!-- Included CSS files  ================================================== --> ;
    <link rel="stylesheet" type="text/css"  href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"  href="css/bootstrap-responsive.min.css">
    <link rel="stylesheet" type="text/css"  href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css"  href="css/main.min.css">
    <link rel="stylesheet" type="text/css"  href="css/base.min.css">
    <link rel="stylesheet" type="text/css"  href="css/color-dark.css">
    <link rel="stylesheet" type="text/css"  href="css/color-light.css">
    <link rel="stylesheet" type="text/css"  href="css/jquery.mCustomScrollbar.css" />
    <link rel="stylesheet" type="text/css"  href="css/magnific-popup.css" media="screen" />
    <link rel="stylesheet" type="text/css"  href="css/supersized.min.css" media="screen" />
    <link rel="stylesheet" type="text/css"  href="css/supersized.shutter.min.css" media="screen" />

    <!--  Included javascript files ========================================== -->
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.fitvids.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
    <script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
    <script type="text/javascript" src="js/supersized.shutter.min.js"></script>
    <script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
    <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
    <script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
    <script type="text/javascript" src="js/custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.comingsoon.min.js"></script>
    <script type="text/javascript" src="js/main-fm.min.js"></script>
    <script type="text/javascript" src="js/jquery.jstwitter.js"></script>
All source files are placed near the minified file ###### In Header the following plug-ins are initialized: - JQTWEET (Twitter initialize) - supersized(Fullscreen image slideshow ) - Join Us form email related code - Contact form email related code They are explain in respective section Other requierd plug-ins are initialize in custom.js file

### Menu The menu is placed in header calss div. see the complete header code
     <div class="header " >
        <div class="header_content" >

           <ul class="nav">
              <!--  Add require site page navigation -->
              <li data-displayTime="100"><a href="!aboutus">About Us</a></li>
              <li data-displayTime="101"><a href="!services">Services</a></li>
              <li data-displayTime="104"><a href="!contactus" class="last">Contact Us</a></li>
          </ul>

       </div>
    </div>
The menu is placed inside the div with class name of nav. You can add the menu using below code
        <li><a href="#!aboutus" > HOME</a></li>
In each section you must set the page name(id) in data-id attribute, this data-id is used to link on site menu. see the below example.
        <div data-id="!aboutus" class="contentWrapper" ></div>
The data-id (!home) is assign in href (#!aboutus) value in menu tag. ###### ###### Changing Menu color: To change the menu color for dark version, edit color-dark.css file. To change the light menu, edit the color-light.css file. You can see the below style that can be used to change the menu color. Dark Menu : color-dark.css file
    /* menu color */

    	.home_page.right_content{  }

    	.header_content ul li a{ color: #ffffff; }

    	.header_content ul li a:hover{
    		text-shadow: 0px 0px 10px #ffffff;
    		background:none !important;}

    	.header_content ul li a.active, .header_content ul li ul li a.active_sub{ color: #00CC66; background:none; }

    	.header_content ul li a.active:hover, .header_content ul li ul li a.active_sub:hover { color: #00CC66;  background:none !important;}
###### Light Menu: color-light.css file
    /* menu color */

    	.white_version .header_content ul li a {
    		color: #000000 !important; text-shadow: none !important;
    		}
    	.white_version .header_content ul li a:hover{
    		color: #00CC66 !important;
    		}

    	.white_version .header_content ul li{
    		text-shadow: none !important;
    		}

    	.white_version .header_content ul li a.active, .white_version .header_content ul li ul li a.active_sub{ color: #00CC66 !important; background:none !important; }

    	.white_version .header_content ul li a.active:hover, .white_version .header_content ul li ul li a.active_sub:hover { color: #00CC66 !important;  background:none !important;}

    	.white_version .header_content ul li a:hover{
    		text-shadow: 0px 0px 10px #00CC66 !important;
    		background:none !important;}
###### ###### ###### Changing Menu style: To change the menu style just edit the styles that are placed below the comment /* Menu */ in main.css file. You also need to edit this styles properties on @media only screen on main.css file

### Logo - Font

##### LOGO Logo image is placed inside the . logo class in header_content class div. 1. Normal size (logo.png) 2. Retinal support size for (logo@2x.png) data-retina="yes"in img tag, than the script will load the retina size logo
    <div class="logo" >
     <a href="#!home"><img src="images/logo.png" data-retina="yes" alt="logo text"></a>
    </div>
##### Font In this template the google font PT Sans Caption, and ralewayextralight are used . You can see the font link in header tag
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:200,100' rel='stylesheet' type='text/css'>
##### Page Color/Style: The most important class to change the style of the page is darkStyle and lightStyle. It used to assign the dark style and light style to the particular div. You can combine both the style on same page. The background, font color, arrow and all other graphic items are change as per the style that you assign to the div. ##### Change Background color: You can change the background color easily through color-dark.css and color-light.css file Just change the background color style that placed near /* Background */ comment line. If you choose dark version just edit color-dark.css file, if you choose light version edit color-light.css file For Plain version the style placed near /* Plain version background */ comment line will be used

### Background Supersized Image Gallery

The full screen gallery is develop by the plug-in Supersized www.buildinternet.com/project/supersized The plug-in is initialize in header section near the comment line /* Create fullscreen slideshow function */ . See the below initialize code
    /* Create fullscreen slideshow function */
    function  superGalleryInit (){

        /* Initialize supersized fullscreen image gallery */
        jQuery(function($){
            $.supersized({
                slideshow               :   1,    // Slideshow on/off
                autoplay	            :   1,    // Slideshow starts playing automatically
                slide_interval          :   9000, // Length between transitions

                slides 	:  	[
    			// Slideshow Images, image_small attribute is used to load the mobile version image,
    			main_title attribute is used to add the image tile div
                                { image : 'images/home_slider/banner_image1.jpg',
                                	image_small : 'images/home_slider/banner_image1_s.jpg', slide_interval: 9200 },
                                { image : 'images/home_slider/banner_image2.jpg',
                                	image_small : 'images/home_slider/banner_image2_s.jpg', slide_interval: 9400},
                                { image : 'images/home_slider/banner_image2.jpg',
                                	image_small : 'images/home_slider/banner_image2_s.jpg', slide_interval: 9000},
                                { image : 'images/home_slider/banner_image3.jpg',
                                	image_small : 'images/home_slider/banner_image3_s.jpg', slide_interval: 9500},
                                { image : 'images/home_slider/banner_image3.jpg',
                                	image_small : 'images/home_slider/banner_image3_s.jpg', slide_interval: 9800}
                            ]
            });
        });
    }
#### Adding images: You can add the both low and High resolution image in this slideshow. The image attribute is used to load the High resolution image for desktop and image_small attribute is used to load the low resolution image for mobile device. This option is additionally added in this plugin #### Add Slideshow delay time for each slide: The each slide you can add the delay time by using slide_interval parameter

### Magnific Popup

In custom.js file you see the belwo code neat the /* magnificPopup plugin Initialization */ comment line. see the below javascript code. ##### Initialize Image
    $('.magnificPopup').each(function(){
      var mc = $(this);
      mc.magnificPopup({
        items: {
            src: mc.attr("href"),
            title: mc.attr("data-title") !== undefined ? mc.attr("data-title") : mc.attr("title"),
            type:'image'
        },
        mainClass: 'mfp-with-zoom',
        removalDelay: 300
       });
    });
##### Initialize video
    $('.magnificPopup-video').each(function(){
      var mc = $(this);
      mc.magnificPopup({
        items: {
            src: mc.attr("href"),
            title: mc.attr("data-title") !== undefined ? mc.attr("data-title") : mc.attr("title"),
            type:'iframe',
        },
        mainClass: 'mfp-with-zoom',
        removalDelay: 300
       });
    });
##### Initialize Magnific popup in portfolio page The portfolio Magnific popup plugin is intialize in portfolio.detail.min.js file near the comment line // Initialize Magnific popup plugin if required you can customize the plugin as per you need. Please see the complete document of Magnific plugin http://dimsemenov.com/plugins/magnific-popup/documentation.html
## Countdown Timer The count down timer is placed inside the counter_time class div The jQuery The Final Countdown plugin is used to set the timer. You can see the code in jquery.comingsoon.min.js file To set the time just open the custom.min.js file and scroll down near /* set the Final date in YYYY/MM/DD HH:SEC:MIN formate */ comment line. The variable countdown_value is used to set the time and countdown_finish vaiable is used to display the text after the count down is finished

### Tab / Graph / Accordion

###### Tab You see the tab example in Team page, Just add the nav nav-tabs class in ul tag. The each tab content is linked on li tag using href attribute. The class active is used to visible that tab content. Example:
    <ul class="nav nav-tabs">
      <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
      <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="tab1">
          <!-- Tab Content  -->
      </div>
      <div class="tab-pane" id="tab2">
        <!-- Tab Content  -->
      </div>
    </div>
###### Graph You can see the graph example in about us page. To add the graph object simply add graph_container class to the div that hold the ul tag. Set the graph level of the each content using the data-level attribute. The graph animation is activate by graph_display function in main-fm.js file Example:
    <div class="graph_container">
        <ul>
          <li data-level="80%" ><a></a> <span>WEB DESIGN </span></li>
          <li data-level="60%"><a></a> <span>jquery</span></li>
           <li data-level="70%"><a></a> <span>Layout Design</span></li>
          <li data-level="50%" class="last"><a></a> <span>SEO</span></li>
        </ul>
    </div>
Don't delete the <a></a> tag on each li tag, it used to show the graph level. The design of the graph is control by color.css file. see the color.css file to edit the graph color ###### Accordion You can see the accordion in features page. All styles are placed in base.css near the /* Accordion comment and jQuery coding are placed in custom.js The below coding is the sample body code
    <div class="accordion" data-autoHide="true" data-openFirstElement="true" >
         <!-- Accordion tab -->
         <dt>
              <a href="" class="normal"><span class="acc_heading">
              <!-- Heading -->
              <strong>Heading Text panel 1</strong>
              </span></a>
          </dt>

               <dd>
                    <span class="acc_content">
                    <!-- Tab content -->
                    Lorem ipsum dolor sit a m et, consectetuer adipiscing elit, dolore magna aliquam erat volutpat.
                    </span>
                </dd>
    </div>
##### The below attributes are used to make the accordion autoHide and open the first tag element automatically when the accordion load data-autoHide="true" - Make accordion Toggle/autohide data-openFirstElement="true" - Open the first tag when the accordion load Place the each tag Heading inside the <span> tag which the class name of acc_heading on <dt> tag Place each tab content on inside the <span> tag which the class name of acc_content on <dd> tag

### Contact Form / PHP / Google Map

In page header you see all coding for Email submit action and validation. The contact us email and joinus email are post by mailer.php and mailer.joinus.php file. You can see mailer.php and mailer.joinus.php inside the php folder In mailer.php file the receiver email id is added by $email_to variable and email subject is set in $email_subject variable You can see the following code in mailer.php file
    // EDIT THE BELOW TWO LINES AS REQUIRED
        $email_to = "your@mailid.com";
        $email_subject = "Your email subject";
In mailer.joinus.php file the receiver email id is added by $email_to variable and email subject is set in $email_subject variable You can see the following code in mailer.php file
    // EDIT THE BELOW TWO LINES AS REQUIRED
        $email_to = "your@mailid.com";
        $email_subject = "Your email subject - Join us";
The email submit action placed in index.html file near // Email submit action in <head> tag see the below code
    // Email submit action

    $("#email_submit").click(function() {

    $('#reply_message').removeClass();
    $('#reply_message').html('')
    var regEx = "";

    // validate Name
    var name = $("input#name").val();
    regEx=/^[A-Za-z .'-]+$/;
    if (name == "" || name == "Name"  || !regEx.test(name)) {
    $("input#name").val('');
    $("input#name").focus();
    return false;
    }

    // validate Email
    var email = $("input#email").val();
    regEx=/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+[A-Za-z]{2,4}$/;

    if (email == "" || email == "Email" || !regEx.test(email)) {
    $("input#email").val('');
    $("input#email").focus();
    return false;
    }

    // validate comment
    var comments = $("textarea#comments").val();
    if (comments == "" || comments == "Comments..." || comments.length < 2) {
    $("textarea#comments").val('');
    $("textarea#comments").focus();
    return false;
    }

    var dataString = 'name='+ $("input#name").val() + '&email=' + $("input#email").val() +
    '&comments=' + $("textarea#comments").val();
    $('#reply_message').addClass('email_loading');

    // Send form data to mailer.php
    $.ajax({
    type: "POST",
    url: "mailer.php",
    data: dataString,
    success: function() {
    $('#reply_message').removeClass('email_loading');
    $('#reply_message').addClass('list3');
    $('#reply_message').html("Mail sent sucessfully")
    .hide()
    .fadeIn(1500);
    }
    });
    return false;

    });
The joinus email submit action placed in index.html file near // Joinus Email submit action in <head> tag see the below code
    // Joinus Email submit action
    $("#joinus_submit").click(function() {

        $('#reply_joinus_message').removeClass();
        $('#reply_joinus_message').html('');
        var regEx = "";

        // validate Email
        var email = $("input#joinus_email").val();
        regEx=/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
        if (email == "" || email == "JOIN OUR NEWS LETTER" || !regEx.test(email)) {
            $("input#joinus_email").val('');
            $("input#joinus_email").focus();
            return false;
        }

        var dataString = 'joinus_email=' + $("input#joinus_email").val();
        $('#reply_joinus_message').addClass('email_loading');

        // Send form data to mailer.php
        $.ajax({
            type: "POST",
            url: "php/mailer.joinus.php",
            data: dataString,
            success: function() {
                $('#reply_joinus_message').removeClass('email_loading');
                $('#reply_joinus_message').addClass('list3');
                $('#reply_joinus_message').html("Added sucessfully")
                .hide()
                .fadeIn(1500);
                    }
                });
        return false;
    });
#### Google Map The Google map is palced inside the map_canvas id div. The map custom code is placed in custom.min.js near the comment line // Google map Code To add the location, just add the Latitude and Longitudes value to the variable mapPos = new google.maps.LatLng(34.05223, -118.24368); The Logo is palced inside the map folder that placed inside the images folder. The pop box content is define in var contentString varaible

### Twitter Feed

##### Twitter You can see the Twitter feed in Home page left area. Just use the below code to add the Twitter feed inside any div
    <div id="jstwitter" class="slideshow_tweet alignRight">
The cycle plugin is used to activate as a tweeter slideshow. The cycle slider is initialize in jquery.jstwitter.js file near the comment line // initilize the cycle plugin The twitter is initialize on the header of the page, near the comment line /* Twitter initilize */ see the below code
    $(function () {
        // start jqtweet!
        JQTWEET.loadTweets();
    });
The following files is used for Twitter feed 1. codebird.php 2. grabtweets.php 3. jquery.jstwitter.js Set the Twitter account: To se the twitter account, just add the username in jquery.jstwitter.js file on 10th line Make sure you must set your twitter CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN and ACCESS_TOKEN_SECRET on grabtweets.php file. For more information see the https://github.com/mynetx/codebird-php page

### CSS

There are six css files used in this template. They are 1. main.css = The template structure is design in this file 2. base.css = All basic style is written in this file 3. color-dark.css, color-light.css= This file is used to set the template object color. if you need to change color of any object, just edit this file 4. bootstrap.css = Bootstrap style 5. bootstrap-responsive.css = Bootstrap responsive 6. magnific-popup.css = magnific popup 7. supersized.css = Supersized gallery style 8. supersized.shutter.css = Supersized gallery extra style 9. query.mCustomScrollbar.css = Scrollbar style 10. font-awesome.min.css = Font Awesome style All source files are placed near respective file

### Js

Below js files used in this template. They are 1. jquery-1.7.1.min.js jquery file 2. custom.min.js It contains a. Define required varaible, Initialize mainFm plugin b. Initialize magnific-popup plugin, c. Some style change usign Modernizr, d. Tabs, e. Graph, f. Accordion, g.Modernizr, h. jQuery Easing code i. Google Map. 3. bootstrap.js Botstrap jquery file 4. main-fm.min.js It's a main file which control whole web site. I gave explanation about the functionality of this file by adding comments in this file. I hope you understand the code. 5. jquery.magnific-popup.min.js Magnific popup coding 6. supersized.3.2.7.js and supersized.shutter.min.js Home page fullscreen gallery slideshow plug-in coding 7. jquery.jstwitter.js Twitter jquery file 8. jquery.nicescroll.min.js Nice scrollbar 9. jquery.comingsoon.min.js Countdown Timer All source files are placed near respective file

### PSD

Inside PSD folder you can see the following files 1. Layout.psd- 2. loading.psd - Site main loading bar 3. loading_white.psd - Site main loading bar white In Layout psd files all pages of the website are show on separate layer folder, you can view the page by hide/show the layer. see the below screen shot

### Sources and Credits

The following Plug-ins are used in this file bootstrap - http://twitter.github.io/bootstrap/index.html jQuery Cycle - http://jquery.malsup.com/cycle/ Mouse wheel - http://brandonaaron.net/code/mousewheel/docs Supersized - www.buildinternet.com/project/supersized magnific-popup - http://dimsemenov.com/plugins/magnific-popup/documentation.html nicescroll - http://areaaperta.com/nicescroll/ custom-content-scroller - http://manos.malihu.gr/jquery-custom-content-scroller/ Twitter - codebird -https://github.com/mynetx/codebird-php Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section. ###### Thanks, Mani, FMedia