Ashoka Logo Big

Welcome To Ashoka Theme Documentation

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to create a support thread on our support forum. Thanks so much!

Live Demo Purchase Now Contact Us

Ashoka - A Responsive Minimal Multipurpose Theme


Ashoka is a responsive minimal multipurpose one page theme built using latest Bootstrap v3.1.1 and HTML5/CSS3 features and suitable for creative agencies and any kind of freelancers, photographers or small business which need a fast way to showcase their work.

Full screen video background, menu and portfolio make this theme very uniqu and lavish.

Ashoka is a fully responsive and retina ready so it works nicely on smartphones, tablet PCs and desktops.

  • HTML5 & CSS3
  • Ultra Responsive Design
  • Bootstrap v3.1.1
  • Full Screen Video Background
  • Awesome parallax effects
  • Retina Ready
  • 15 Color Skins
  • Ajax Contact Form
  • Pricing Tables
  • Browser Compatibility
  • Clean Code

Using Theme

After unzip Theme Files, you will found HTML Folder have 2 Theme styles Full screen background image and background slider.

You can view this Theme 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 Theme.

Open index.html file, left hend side you can see floating setting icon. Click on it will open option panel. You can customize theme color & style from there.

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.

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.

Locate the domain folder you wish to upload your Theme files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .js into your FTP client.

Once the files are done uploading, rename the file you want to be your home page as 'index.html'.


GRID STRACTURE

This Theme has a Responsive layout with a variation of column layouts depending on the page. This theme uses Bootstrap 3 Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

Grid options

more info...
Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Max column width Auto 60px 78px 95px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets N/A Yes
Column ordering N/A Yes

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.

  1. <div class="row">
  2. <div class="col-md-1">.col-md-1</div>
  3. <div class="col-md-1">.col-md-1</div>
  4. <div class="col-md-1">.col-md-1</div>
  5. <div class="col-md-1">.col-md-1</div>
  6. <div class="col-md-1">.col-md-1</div>
  7. <div class="col-md-1">.col-md-1</div>
  8. <div class="col-md-1">.col-md-1</div>
  9. <div class="col-md-1">.col-md-1</div>
  10. <div class="col-md-1">.col-md-1</div>
  11. <div class="col-md-1">.col-md-1</div>
  12. <div class="col-md-1">.col-md-1</div>
  13. <div class="col-md-1">.col-md-1</div>
  14. </div>
  15. <div class="row">
  16. <div class="col-md-8">.col-md-8</div>
  17. <div class="col-md-4">.col-md-4</div>
  18. </div>
  19. <div class="row">
  20. <div class="col-md-4">.col-md-4</div>
  21. <div class="col-md-4">.col-md-4</div>
  22. <div class="col-md-4">.col-md-4</div>
  23. </div>
  24. <div class="row">
  25. <div class="col-md-6">.col-md-6</div>
  26. <div class="col-md-6">.col-md-6</div>
  27. </div>

Theme HTML Structure

  1. <!-- about -->
  2. <section id="about" class="row section">
  3. <div class="row">
  4. <h2 class="section-title text-center">
  5. <span class="section-title-border wow pulse" data-wow-duration="1s" data-wow-delay="1s">ABOUT</span>
  6. </h2>
  7. <h3 class="section-info col-md-10 col-md-offset-1 text-center wow fadeInDown">We create stunning identities for our clients that people fall in love with. <br>We'll work hard until you can't say <strong>"WOW!"</strong>.</h3>
  8. </div>
  9. <div id="about-listing" class="row">
  10. <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 listing-wrapper wow fadeInLeft animated" data-wow-delay="0.5s">
  11. <div class="post-list post-thinkers">
  12. <h2 class="single-title"><i class="icon_lightbulb_alt"></i> THINKERS.</h2>
  13. <p>Pecorino rubber cheese cheese triangles. Cheesy grin halloumi port-salut cheesy feet the big cheese cauliflower cheese smelly cheese smelly cheese.</p>
  14. </div>
  15. </div>
  16. <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 listing-wrapper wow fadeInLeft animated" data-wow-delay="1s">
  17. <div class="post-list post-dremers">
  18. <h2 class="single-title"><i class="icon_chat_alt"></i> DREAMERS.</h2>
  19. <p>Pecorino rubber cheese cheese triangles. Cheesy grin halloumi port-salut cheesy feet the big cheese cauliflower cheese smelly cheese smelly cheese.</p>
  20. </div>
  21. </div>
  22. <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 listing-wrapper wow fadeInLeft animated" data-wow-delay="1.5s">
  23. <div class="post-list post-researchers">
  24. <h2 class="single-title"><i class="icon_piechart"></i> RESEARCHERS.</h2>
  25. <p>Pecorino rubber cheese cheese triangles. Cheesy grin halloumi port-salut cheesy feet the big cheese cauliflower cheese smelly cheese smelly cheese.</p>
  26. </div>
  27. </div>
  28. </div>
  29. </section> <!-- /about -->

Here section id is #about the target for About link in menu, when you click on about in menu it will move you to about section.

If you would like to edit the color, or font, or style of any elements in one of these columns, you would do the following:

#about .page-title {color: #someColor;}


Using Font-Icons


Font-Icons: This theme used The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web.

Usege : http://www.elegantthemes.com/blog/resources/elegant-icon-font

class="icon_camera_alt"
  1. <span class="icon_camera_alt"></span>

CSS Files and Structure

After unzip the Theme files you can see Ashoka/css folder. That css folder contains color,vendor,pre-load.css & style.css

I am using one main CSS file name is style.css in this theme which you are free to modify depending on the customization you require.
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.

  1. /*
  2. Name: Ashoka
  3. Version: 1.0
  4. Author: GeeksLabs
  5. Author URI: http://www.geekslabs.com
  6. */
  7. /*---------------------------------
  8. Table of Contents:
  9. 1. Basic Elements
  10. 2. Logo
  11. 3. Menu
  12. 4. Video background
  13. 5. Content
  14. 6. About Section
  15. 7. Work Section
  16. 8. Services Section
  17. 9. Separator- Text & Video
  18. 10. Portfolio Section
  19. 11. Separator- Stats
  20. 12. Clients Section
  21. 13. Testimonials Section
  22. 14. Team Section
  23. 15. Pricing Option
  24. 16. Separator - Get Connected
  25. 17. Contact Form
  26. 18. Google Map
  27. 19. Footer Section
  28. 20. Social icons
  29. 21. Media Queries
  30. ----------------------------------*/



The vendor folder contains Bootstrap core css file, 3rd party jQuery plugin css and other css.

  1. <!-- stylesheet -->
  2. <link rel="stylesheet" href="css/vendor/pace.css">
  3. <link rel="stylesheet" href="css/vendor/bootstrap.css">
  4. <link rel="stylesheet" href="css/style.css">
  5. <link rel="stylesheet" href="css/vendor/animate.css">
  6. <link rel="stylesheet" href="css/vendor/simpletextrotator.css">
  7. <link rel="stylesheet" href="css/vendor/owl.carousel.css">
  8. <link rel="stylesheet" href="css/vendor/elegant-font-icon.css">
  9. <link rel="stylesheet" href="css/vendor/style-switcher.css">



Ashoka have predefine 15 Color Skins, You can use directly or updates theme default colors from color folder.

  1. <!-- Custom styles for this template -->
  2. <link rel="stylesheet" type="text/css" href="css/colors/blue.css" title="blue" media="screen"/>
  3. <link rel="stylesheet" type="text/css" href="css/colors/blue-2.css" title="blue-2" media="screen"/>
  4. <link rel="stylesheet" type="text/css" href="css/colors/purple.css" title="purple" media="screen"/>
  5. <link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green" media="screen"/>
  6. <link rel="stylesheet" type="text/css" href="css/colors/green-2.css" title="green-2" media="screen"/>
  7. <link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow" media="screen"/>
  8. <link rel="stylesheet" type="text/css" href="css/colors/orange.css" title="orange" media="screen"/>
  9. <link rel="stylesheet" type="text/css" href="css/colors/red.css" title="red" media="screen"/>
  10. <link rel="stylesheet" type="text/css" href="css/colors/red-2.css" title="red-2" media="screen"/>
  11. <link rel="stylesheet" type="text/css" href="css/colors/red-3.css" title="red-3" media="screen"/>
  12. <link rel="stylesheet" type="text/css" href="css/colors/pink.css" title="pink" media="screen"/>
  13. <link rel="stylesheet" type="text/css" href="css/colors/pink-2.css" title="pink-2" media="screen"/>
  14. <link rel="stylesheet" type="text/css" href="css/colors/beige.css" title="beige" media="screen"/>
  15. <link rel="stylesheet" type="text/css" href="css/colors/midnight.css" title="midnight" media="screen"/>
  16. <link rel="stylesheet" type="text/css" href="css/colors/black.css" title="black" media="screen"/>

JAVASCRIPT SETTINGS


After unzip the Theme files you can see Ashoka/js folder. That js folder contains main.js(custome javascript) & vendor folder contains jQuery, bootstrap and other jQuery plugins.

  1. <!-- scripts -->
  2. <script type="text/javascript" src="js/vendor/jquery-1.11.0.min.js"></script>
  3. <script type="text/javascript" src="js/vendor/modernizr.custom.js"></script>
  4. <script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>
  5. <script type="text/javascript" src="js/vendor/classie.js"></script>
  6. <script type="text/javascript" src="js/vendor/respond.js"></script>
  7. <script type="text/javascript" src="js/vendor/jquery.counterup.js"></script>
  8. <script type="text/javascript" src="js/vendor/smoothscroll.js"></script>
  9. <script type="text/javascript" src="js/vendor/jquery.backgroundvideo.min.js"></script>
  10. <script type="text/javascript" src="js/vendor/wow.js"></script>
  11. <script type="text/javascript" src="js/vendor/jquery.simple-text-rotator.min.js"></script>
  12. <script type="text/javascript" src="js/vendor/owl.carousel.min.js"></script>
  13. <script type="text/javascript" src="js/vendor/imagesloaded.pkgd.min.js"></script>
  14. <script type="text/javascript" src="js/vendor/masonry.pkgd.min.js"></script>
  15. <script type="text/javascript" src="js/vendor/cbpGridGallery.js"></script>
  16. <script type="text/javascript" src="js/vendor/styleswitch.js"></script>
  17. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAZnaZBXLqNBRXjd-82km_NO7GUItyKek&sensor=false"></script>
  18. <script type="text/javascript" src="js/script.js"></script>



Open script.js, From here you can modify any settings for Slides, Responsive Headings, Parallax Effects, Section & text Animations, Testimonial slider, Contact Form Validation & Submition, Google Map UI and Integration.

  1. $(function(){
  2. //Logo fadeIn fadeOut on
  3. $(window).scroll(function(){
  4. if($(this).scrollTop() > $(window).height()/2.2) $('.logo-wrapper').fadeOut('slow');
  5. if($(this).scrollTop() < $(window).height()/2.2) $('.logo-wrapper').fadeIn('slow');
  6. });
  7. //Using the smooth scroll for smooth navigation
  8. smoothScroll.init();
  9. smoothScroll.init({
  10. speed: 500, // Integer. How fast to complete the scroll in milliseconds
  11. easing: 'easeInOutCubic', // Easing pattern to use
  12. updateURL: false, // Boolean. Whether or not to update the URL with the anchor hash on scroll
  13. offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
  14. callbackBefore: function ( toggle, anchor ) {}, // Function to run before scrolling
  15. callbackAfter: function ( toggle, anchor ) {} // Function to run after scrolling
  16. });
  17. //wow animation by using with animate css
  18. if($(window).width() > 480) {
  19. var wow = new WOW(
  20. {
  21. boxClass: 'wow',
  22. animateClass: 'animated',
  23. offset: 0,
  24. mobile: true
  25. }
  26. );
  27. wow.init();
  28. }
  29. // Full screen navigations
  30. var triggerBttn = document.getElementById( 'trigger-navbar' ),
  31. navbar = document.querySelector( 'section.navbar' ),
  32. closeBttn = navbar.querySelector( 'a.navbar-close' );
  33. navClick = navbar.querySelector( 'section.navbar nav ul li a' );
  34. transEndEventNames = {
  35. 'WebkitTransition': 'webkitTransitionEnd',
  36. 'MozTransition': 'transitionend',
  37. 'OTransition': 'oTransitionEnd',
  38. 'msTransition': 'MSTransitionEnd',
  39. 'transition': 'transitionend'
  40. },
  41. transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
  42. support = { transitions : Modernizr.csstransitions };
  43. function toggleOverlay() {
  44. if( classie.has( navbar, 'open' ) ) {
  45. classie.remove( navbar, 'open' );
  46. classie.add( navbar, 'close' );
  47. var onEndTransitionFn = function( ev ) {
  48. if( support.transitions ) {
  49. if( ev.propertyName !== 'visibility' ) return;
  50. this.removeEventListener( transEndEventName, onEndTransitionFn );
  51. }
  52. classie.remove( navbar, 'close' );
  53. };
  54. if( support.transitions ) {
  55. navbar.addEventListener( transEndEventName, onEndTransitionFn );
  56. }
  57. else {
  58. onEndTransitionFn();
  59. }
  60. }
  61. else if( !classie.has( navbar, 'close' ) ) {
  62. classie.add( navbar, 'open' );
  63. }
  64. }
  65. triggerBttn.addEventListener( 'click', toggleOverlay );
  66. closeBttn.addEventListener( 'click', toggleOverlay );
  67. // navClick.addEventListener( 'click', toggleOverlay );
  68. $('section.navbar nav ul li a').click(function(){
  69. toggleOverlay();
  70. });
  71. //prepare video
  72. $('.video').height($(window).height());
  73. $('.home-text').css('top',$(window).height()/3.5+'px');
  74. $(window).resize(function() {
  75. $('.video').height($(window).height());
  76. $('.home-text').css('top',$(window).height()/3.5+'px');
  77. });
  78. $('.video .cont').addClass('visible');
  79. setTimeout(function() {
  80. $('.video .sdf, .video .suys, .video .arrow').addClass('visible');
  81. }, 2000);
  82. //bg video
  83. $.backgroundVideo($('#bg-video'), {
  84. "align": "centerXY",
  85. "width": 846,
  86. "height": 476,
  87. "path": "media/",
  88. "filename": "business-discussion-converted", // You can change video name from here you want to use
  89. "types": ["mp4", "ogg", "webm"]
  90. });
  91. //play video
  92. $('.video .play').click(function() {
  93. //stop the video
  94. if (!window.isMobile){
  95. $('body').addClass('noscroll').append('<div class="previewer"><div><iframe src="//player.vimeo.com/video/81676731?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><div class="close"></div></div>');
  96. //pause video
  97. $('body').addClass('paused');
  98. $('.previewer').click(function() {
  99. $('body').removeClass('noscroll');
  100. $(this).remove();
  101. //play video back
  102. $('body').removeClass('paused');
  103. });
  104. return false;
  105. }
  106. });
  107. //rotate text
  108. $(".rotate-fade").textrotator({
  109. animation: "fade",
  110. speed: 1000
  111. });
  112. $(".rotate-flip").textrotator({
  113. animation: "flip",
  114. speed: 1250
  115. });
  116. $(".rotate-flipCube").textrotator({
  117. animation: "flipCube",
  118. speed: 1500
  119. });
  120. $(".rotate-flipUp").textrotator({
  121. animation: "flipUp",
  122. speed: 1750
  123. });
  124. $(".rotate-spin").textrotator({
  125. animation: "spin",
  126. speed: 2000
  127. });
  128. // grid gallery (Portfolio)
  129. new CBPGridGallery( document.getElementById( 'grid-gallery' ) );
  130. // Carousel
  131. $("#work-slider").owlCarousel({
  132. navigation : true, // Show next and prev buttons
  133. slideSpeed : 300,
  134. paginationSpeed : 400,
  135. singleItem:true
  136. });
  137. $("#testimonial-slider").owlCarousel({
  138. navigation : true, // Show next and prev buttons
  139. slideSpeed : 300,
  140. paginationSpeed : 400,
  141. singleItem:true
  142. });
  143. //Counter Up
  144. $('.counter').counterUp({
  145. delay: 5,
  146. time: 800
  147. });
  148. //theme style switcher
  149. $('#theme-customizer .cog').click(function(){
  150. $('#theme-options').slideToggle("slow")
  151. });
  152. // Ajax working contact form
  153. $("#submit").click(function() {
  154. //get input field values
  155. var user_name = $('input[name=name]').val();
  156. var user_email = $('input[name=email]').val();
  157. var user_phone = $('input[name=phone]').val();
  158. var user_message = $('textarea[name=message]').val();
  159. //simple validation at client's end
  160. //we simply change border color to red if empty field using .css()
  161. var proceed = true;
  162. if(user_name==""){
  163. $('input[name=name]').css('border-color','red');
  164. proceed = false;
  165. }
  166. if(user_email==""){
  167. $('input[name=email]').css('border-color','red');
  168. proceed = false;
  169. }
  170. if(user_phone=="") {
  171. $('input[name=phone]').css('border-color','red');
  172. proceed = false;
  173. }
  174. if(user_message=="") {
  175. $('textarea[name=message]').css('border-color','red');
  176. proceed = false;
  177. }
  178. //everything looks good! lets proceed
  179. if(proceed)
  180. {
  181. //data to be sent to server
  182. post_data = {'userName':user_name, 'userEmail':user_email, 'userPhone':user_phone, 'userMessage':user_message};
  183. //Ajax post data to server
  184. $.post('include/contact.php', post_data, function(response){
  185. //load json data from server and output message
  186. if(response.type == 'error')
  187. {
  188. output = '<div class="error">'+response.text+'</div>';
  189. }else{
  190. output = '<div class="success">'+response.text+'</div>';
  191. //reset values in all input fields
  192. $('#contact_form input').val('');
  193. $('#contact_form textarea').val('');
  194. }
  195. $("#form_result").hide().html(output).slideDown();
  196. }, 'json');
  197. }
  198. });
  199. //reset previously set border colors and hide all message on .keyup()
  200. $("#contact_form input, #contact_form textarea").keyup(function() {
  201. $("#contact_form input, #contact_form textarea").css('border-color','');
  202. $("#form_result").slideUp();
  203. });
  204. });
  205. // Google Maps
  206. google.maps.event.addDomListener(window, 'load', showmap);
  207. function showmap() {
  208. var myLatlng = new google.maps.LatLng(40.6700, -73.9400); // New York
  209. var mapOptions = {
  210. // How zoomed in you want the map to start at (always required)
  211. zoom: 12,
  212. // The latitude and longitude to center the map (always required)
  213. center: myLatlng, // New York
  214. // How you would like to style the map.
  215. styles: [{featureType:'all',stylers:[{saturation:-100},{gamma:0.50}]}]
  216. };
  217. // We are using a div with id="map" seen below in the <body>
  218. var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  219. var image = {
  220. url: 'http://demo.geekslabs.com/ashoka/images/map-marker.png',
  221. origin: new google.maps.Point(0, 0),
  222. anchor: new google.maps.Point(12, 59)
  223. };
  224. var marker = new google.maps.Marker({
  225. position: myLatlng,
  226. map: map,
  227. icon: image,
  228. });
  229. }

Contact.php


There is one php file in Ashoka folder Ashoka/include/contact.php that contains php email script to send the mail using the theme contact form, This PHP script also have server side validations and revert success or error message.

  1. $to_Email = "myemail@gmail.com"; //Replace with recipient email address
  2. $subject = 'You have new inquiry from '.$_POST["userName"]; //Subject line for emails

Credits