E: info@yoursite.comT: + (009) 123 4567

Drive Responsive Template Documentation v 1.1

Updated : Jan 10 2013
Created : Dec 6 2012
By: Falcon Creative Studio

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via user page contact form here. Thank You so much and Please Rate this Template.

Important Info

We used three Webfont from Font Spring. All three web fonts are free, but not allowed distributed commercially. Please download it from below link and choose below mentioned fonts only. Others are costly and not used in this template.

Nexa Bold (Used in headings):
http://www.fontspring.com/fonts/fontfabric/nexa

Museo Sans 500 & Museo Sans 500 Italic (Used in body texts):
http://www.fontspring.com/fonts/exljbris/museo-sans

Update on 27 Jun 2013

Update Files list

  • HTML FILES: Since Twitter Api has updated, please remove twitter api v1 code show below (you will found this code above </body> tag in all pages):
            
    		
            
  • CSS FILES: css/bootstrap.css, css/font-awesome.css
  • Js FILES: js/plugins.js
  • Newly Added FILES: get-tweets.php, twitteroauth/OAuth.php, twitteroauth/twitteroauth.php
  • Update on 10 Jan 2013

    Setting up the search box

    You need to change your site url in script.js in 74 line in order to make work the search box

             document.getElementById('topSearchForm').onsubmit = function() {
                // Change yoursitename.com to you site url (eg: falconcreativestudio.com) from below line (which is in script.js in 74 line )
                window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
                return false;
            }
          

    Setting up Gallery page:

    This page is fully responsive, you need to save a image in 5 different sizes. I know its diffcult but trust me this is best way currently available in the internet for responsive gallery. If you open img/gallery folders, you will find 5 folder (xlarge, large, medium, small, xsmall). Save the images in noted size into its corresponding folder. (resize the image with constrain proportions)

    You need to save: ( no need to worry about height)

    If you unsure, save the same size as dummny images in that folder. No need to touch scripts in footer.

    Important:You need to set the large image size in data-max-width data-max-height which helps to avoid stretching the image
    eg: data-max-width="1000" data-max-height="1285"

    Gallery page HTML Structure

          	

    How to add fancy box / light box

    Adding fancy box is pretty simple. Simply add fancybox class in a tag and add image location / src in href

              
               
          

    1. Installing Template

    After you downloaded and unzip the template. Open Template folder and open Clean_White or Noise_Grey and open fonts. We already create two folders (museo_sans and nexa). You have to download the fonts from above link and extract both fonts in respective folders. Check image below, you will understand. (Note: Both Museo Sans 500 & Museo Sans 500 Italic goes inside museo_sans folder).

    2. Theme Features

    Drive have lots of features. Some of them are listed below.

    3. Color Scheme

    Drive come 20 different color scheme. All colors styles css files are in color-css folder. To change the theme color first pick a color from color css name in below section or from our demo site. And search for below code in <head> tag and replace default.css with the color you pick (eg: surfie-green.css) in all pages. We also include less folder. If you know how to use less then open less folder and open variables.less. Adjust color variables and compile color.less and style.less files to get your own color.

          	 
          	
            
            
            
          

    4. List of Pages

    Drive comes with 15 different pages as follows.

    1. Home Page 1
    2. Home Page 2
    3. About
    4. Services 1
    5. Services 2
    6. Contact
    7. Two Column Portfolio
    8. Three Column Portfolio
    9. Four Column Portfolio
    10. Single Portfolio
    11. Columns
    12. Shortcodes
    13. Pricing Table
    14. Blog
    15. Single Post

    5. List of CSS, JS & PHP Files


    5.1 CSS Files: All css files are in css folder. Color css are in folder color-css folder.

    CSS Files are Well Commented. You can easily find and edit the rules. But in our demo site, we used compress version to load quickly. A part of its screenshot below.

    1. style.css - All template styles present in this file
    2. bootstrap.css - default unedited bootstrap css file
    3. font-awesome.css - The iconic font designed for use with Twitter Bootstrap (Font Awesome url)
    4. fonts.css - @Fontface syntax found in this css
    5. jquery-ui-1.9.1.custom.min.css - Custom jQuery ui css
    6. responsive.css - All responsive Styles found here.
    7. sequence.css - Slider Css

     5.1.1. Color CSS: css name is in braces.

    orange (default): #ed5f30
    (default.css)
    Blue Bell :
    #8D95C3
    (blue-bell.css)
    Blumine Blue : #1C4A72
    (blumine-blue.css)
    Boston Blue : #3d82b1
    (boston-blue.css)
    San Marino Blue : #426195
    (marino-blue.css)
    Tapestry (pink) : #b15596
    (tapestry-pink.css)
    Viola :
    #CF87C1
    (viola.css)
    Crimson red : #D61646
    (crimson-red.css)
    Persian Red : #CC3333
    (persian-red.css)
    Copper Brown: #B07838
    (copper-brown.css)
    Surfie Green: #118D78
    (surfie-green.css)
    Viridian Green: #3B8F64
    (viridian-green.css)
    Forest Green: #397028
    (forest-green.css)
    Highland Green: #679367
    (highland-green.css)
    Deluge(voilet): #8062B1
    (deluge-voilet.css)
    Comet blue: #555682
    (comet-blue.css)
    Flame Pea:
    #E06338
    (flame-pea-orange .css)
    Jelly Bean magenta: #28778e
    (jelly-bean-magenta.css)
    Well Read(choco): #B1353C
    (well-read-choco.css)
    Havelock
    Blue:
    #468ACE
    (havelock-blue.css)
    Lavender
    Purple:
    #9D8CBA
    (lavender-purple.css)

    5.2. Js Files: All css files are in js folder.

    1. bootstrap.js - default and edited bootstrap js file. We added necessary codes only.
    2. jquery.quicksand - This plugin is used in filterable portfolio.
    3. plugins.js - This contain all other pugins used in this template. Which helps to cache and load you site quickly
    4. script.js - This file contain all custom jquery code necessary for this template.
    5. sequence.js - This is sequence slider plugin.
    6. modernizr - JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
    7. jQuery - JavaScript Library.
    Note: if you found same file name with .min in end of js or css, that files is same as original but it is a compressed version.

    6. HTML Structure


    6.1. General HTML Structure

           
    		<body>
            
            
            
            
            
            
    ....... ....... .......
    ....... ....... .......
    ....... ....... .......
    ....... ....... .......
    ....... ....... .......
     
    </body>

    7. Responsive Css

    7.1 Disable Responsive Design

    Drive is fully responsive template which mean it can scale from large monitor to small screen devices (1200px to 320px). May be some of you doesn't want reponsive then you can easily disable the responsive layout by simply deleting following code which is present in <head> tag.

           
          	
            
            
            
          

    7.1 Disable Responsive Design only for Large Monitor

    Some of you still may like to use 960gs or 940px centered layout in your site. In that case you can simple disable large monitor reponsive only. Its is very simple. Open responsive.css, search below css code and then delete that code block or add css comments (/* */) to disable it.

          	 
            /****
             Delete this code Block or Comment it to disable Large Monitor Responsive 
             ****/ 
             
            @media (min-width: 1200px) {
                .............
                .............
                .............
            }
            
          

    8. Setting up sliders

    It is complicated of the template. You don't have change any js or css. Just replace the image. We used 2 sliders.
    1.Sequence Slider (Used in home page).
    2.FCS Slider (Using in most of the places)

    1. Sequence Slider

    Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 -- no jQuery knowledge required! Check this link for more details and learn more about to set your own animation

    If you don't know how it works or how to edit, then simply replace images (in img/banners/) with the same size (and if your new images names are different, then change the image name correctly in home pages. After Changed images don't forget update preloader script in footer.

             
            var options = {
    				autoPlay: true,
    				nextButton: true,
    				prevButton: true,
    				animateStartingFrameIn: true,
    				autoPlayDelay: 3000,
    				transitionThreshold: 500,
    				preloader: true,
    				preloadTheseFrames: [1],
                    /* Update first li images name & loacation here otherwise slider may not work. */
    				preloadTheseImages: [
    					"img/banners/slide1.png", 
    					"img/banners/slide1-bg.png"
    				]
    			};
                
            

    2. fcs Slider

    Fcs slider is a jQuery Slider developed by Falcon Creative Stduio (FCS) especially for this template, you will not find this plugin anywhere in internet. This is a responsive slider and it slide images one by one (its also supports swipe) which is used in our clients, our team, featured works, other projects sections and so on.

    How to use this slider? Adding this slider is pretty simple.

             
            
            

    Columns

    1
    1
    1
    1
    1
    1
    1
    1
    1
    1
    1
    1
    4
    4
    4
    4
    8
    6
    6
    12
                    	  
              
    ...
    ...

    10. Less Files

    We created this template using less files. All the less files are in less folder. You don't have upload this in server. Styles.less is file contain all template styles and color.less is the files contains color styles. We also includes all the boostrap less files as well, so you update it easily yourself. To change color you have to edit variable.less and you have to adjust the three variable (@baseColor, @baseColorRGBA , @formFocusColor) to create your own color scheme.

    11. Font Awesome

    Font Awesome is the iconic font designed for use with Twitter Bootstrap. If you need and simply go to font awesome website and add icon name as class example below.
          	 
            /****
             You can add font awesome for any element. You can change color & adjust font size to increase or decrease icon size.
             ****/
             
             icon-camera-retro 
            
            
           

    11.1. Font Awesome Examples

    11.1.1. Simple icon with name.

    icon-fire

             
            

    icon-fire

    11.1.2. Icon in Button.

    Icon Heart in Button
             
            

    icon-fire

    11.1.2. Icon in List.

             
            
    • Efficiently plagiarize.
    • Monotonectally scale error-free.
    • Continually provide access.
    • Collaboratively parallel task.
    • Holisticly architect.

    11.1.3. Icon like Services Page.

    For icon with rounded background like in services pages, you have apply class icon50 (50px width & height) or icon80 (80px width & height) to a block level element like p tag. For color background add orange class with icon50 or icon80. Inside icon80 or icon50 you have use inline level element like <span> or <i> with font awesome icon class. For left alignment using left or right class with icon50 or icon80. Default is center.

             
            

    You can do lot more with Font Awesome. We this same method for icon through out the template (excerpt social icons)

    11. Editing Page Elements & Shortcodes

    11.1. Editing Logo

    You have to edit style.css to edit the logo. First upload or save your logo inside img folder. Then open style.css from css folder. Search for below code and adjust the value as per instruction below.

     
    /* Search for .pageHeader .logo a then you will find below code*/
    .pageHeader .logo a{
          font-family: "nexa_500", Tahoma, Geneva, sans-serif;
          font-size: 36px;
          color: #333333;
          text-decoration: none;
          background: url(../img/logo.png) no-repeat center center;    /* change logo.png name to your logo image name if its different */
          width: 120px;    /* change your logo width */
          height: 53px;    /* change your logo height */
          display: inline-block;
          text-indent: -1000em; /* if you doesn't have logo then delete this and background: rules. Then your site name will display instood of image */
    }
                
        	

    11.2. Editing Navigation

    Navigation Structure

     
    
        
       		

    11.3. Setting up Twitter Feed

    Twitter API v1 is now deprecated (https://dev.twitter.com/blog/api-v1-is-retired). So we updated Twitter API to new v1.1. You need to authenticate with Twitter OAuth in order to display tweets in your site. This guide helps to authenticate with Twitter OAuth and display tweets in your site.

    There are two steps to the OAuth authentication process.

    Step 1 – Setup a Twitter Application

    This process is straightforward and you should have a set of keys within a few minutes.

    1. Visit https://dev.twitter.com/apps/ and sign in using your Twitter username and password. This doesn’t have to be the username or password of the stream you need access to, just a Twitter account you control.
    2. Select "Create new application" and enter the application details.
      1. The name and description can be anything you like really, but you can’t use "Twitter" in the name.
      2. The website field can be your main website and doesn’t have to be the site where your Twitter feed or feeds are located.
      3. Callback URL can be left blank
    3. Enter the CAPTCHA info and click create
    4. On the next details screen, click "create my access token". You may need to refresh the page after a few seconds if it doesn’t appear automatically.
    5. Make a note of the Consumer key, Consumer secret, Access token and Access token secret as highlighted below.

    twitter-feed-authentication-step2

    Step 2 – Authenticate the Twitter Feed

    1. Open get-tweets.php from root directory
    2. Substituting the 4 keys (Consumer Key, Consumer Secret, Access Token, Access Token Secret), twitter username and number of tweets you want to display.
             
            
            
            $twitteruser = "twitter_username"; /*Twitter username*/
            $notweets = 30; /*No of tweets you want to display*/
            $consumerkey = "12345"; /*Consumer Key*/
            $consumersecret = "123456789"; /*Consumer Secret*/
            $accesstoken = "123456789"; /*Access Token*/
            $accesstokensecret = "12345"; /*Access Token Secret*/
    		
            

    11.4. Filterable Portfolio Structure

    Portfolio Structure as follows:

                 
                
                
                
                
    • [...]

    11.5. Changing Email address in Contact page

    Open Contact Page. You will see your@emailaddress.com in line 2. Please change it to your email address

              
             
             $yourEmailAddress = 'your@emailaddress.com'; //Put your own email address here instead of your@emailaddress.com
             
             

    11.6. Adding Button

    Creating or adding a button is really simple. First create normal link with <a> Tag and class btn and respective button class. Examples as follows.

    Button Primary

    Button Primary

             
            

    Button Primary

    Button Primary

    Button Secondary

    Button Secondary

             
            

    Button Secondary

    >Button Secondary

    Bootstraps Default Buttos

    Button Default

             
            

    Button Default

    Button Primary

             
            

    Button Primary

    Button Info

             
            

    Button Info

    Button Success

             
            

    Button Success

    Button Warning

             
            

    Button Warning

    Button Danger

             
            

    Button Danger

    Button Inverse

             
            

    Button Inverse

    11.6.1. Large, Default and Small Button

    You have to add some class to make default button to large or small. For large button add btn-large class and for small button add btn-small class. You can use these classes to any buttons

    Large Theme Primary Button

    Default Theme Primary Button

    Small Theme Primary Button

             
            
            

    Large Theme Primary Button

    Default Theme Primary Button

    Small Theme Primary Button

    11.6.2. Adding Icon to the Button

    You can easily add icons to the button using font awesome. You have simply add font awesome icon class in <i> inside button. Check the example below:

    Download Now

             
            

    Download Now

    11.7. Hover Effects

    We added three hover effects. For all these three has similar html structure. Only you have to change change class name (which is hover-effect1 or hover-effect2 or hover-effects3) to change hover effects.

    Hover Effect 1

    DRIVE THEME
    ILLUSTRATION

    on Illustration

    click here for more details

             
            
            

    DRIVE THEME
    ILLUSTRATION

    on Illustration

    click here for more details

    Hover Effect 2

    DRIVE THEME
    ILLUSTRATION

    on Illustration

    click here for more details

             
            
            

    DRIVE THEME
    ILLUSTRATION

    on Illustration

    click here for more details

    Hover Effect 3

    DRIVE THEME
    ILLUSTRATION

    on Illustration

    click here for more details

             
            
            

    DRIVE THEME
    ILLUSTRATION

    on Illustration

    click here for more details

    11.8. Progress bars For loading, redirecting, or action status

    We designed and coded unique style progress bar and we also keep bootstraps default progress bars.

    Theme Progress bars

    Web Design - 60%

    Default Bootstrap Progress bars

    Web Design - 80%

    Web Design - 40%

             
            

    Theme Progress bars

    Web Design - 60%

    Default Bootstrap Progress bars

    Web Design - 80%

    Web Design - 40%

    12. Credits

    Special thanks below peoples who allow used their images in demo site.

    Images By

    Scripts Used

    13. Thank you

    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 about this theme. No guarantees, but I'll do my best to assist. If you have a more general question about the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

    Please sure your toughts suggestion with us using this contact page. If like to add more feature, feel free to contact us. We will try to do it for you thanks.