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

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.

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:

• 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

• 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

• [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

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

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:

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

<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

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

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

<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>

Accordion

<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

Place each tab content on  inside the <span> tag which the class name of acc_content  on <dd>  tag

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

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

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

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

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

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

Thanks,
Mani, FMedia