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 UsAshoka 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.
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'.
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.
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.
- <div class="row">
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- </div>
- <div class="row">
- <div class="col-md-8">.col-md-8</div>
- <div class="col-md-4">.col-md-4</div>
- </div>
- <div class="row">
- <div class="col-md-4">.col-md-4</div>
- <div class="col-md-4">.col-md-4</div>
- <div class="col-md-4">.col-md-4</div>
- </div>
- <div class="row">
- <div class="col-md-6">.col-md-6</div>
- <div class="col-md-6">.col-md-6</div>
- </div>
- <!-- about -->
- <section id="about" class="row section">
- <div class="row">
- <h2 class="section-title text-center">
- <span class="section-title-border wow pulse" data-wow-duration="1s" data-wow-delay="1s">ABOUT</span>
- </h2>
- <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>
- </div>
- <div id="about-listing" class="row">
- <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 listing-wrapper wow fadeInLeft animated" data-wow-delay="0.5s">
- <div class="post-list post-thinkers">
- <h2 class="single-title"><i class="icon_lightbulb_alt"></i> THINKERS.</h2>
- <p>Pecorino rubber cheese cheese triangles. Cheesy grin halloumi port-salut cheesy feet the big cheese cauliflower cheese smelly cheese smelly cheese.</p>
- </div>
- </div>
- <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 listing-wrapper wow fadeInLeft animated" data-wow-delay="1s">
- <div class="post-list post-dremers">
- <h2 class="single-title"><i class="icon_chat_alt"></i> DREAMERS.</h2>
- <p>Pecorino rubber cheese cheese triangles. Cheesy grin halloumi port-salut cheesy feet the big cheese cauliflower cheese smelly cheese smelly cheese.</p>
- </div>
- </div>
- <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 listing-wrapper wow fadeInLeft animated" data-wow-delay="1.5s">
- <div class="post-list post-researchers">
- <h2 class="single-title"><i class="icon_piechart"></i> RESEARCHERS.</h2>
- <p>Pecorino rubber cheese cheese triangles. Cheesy grin halloumi port-salut cheesy feet the big cheese cauliflower cheese smelly cheese smelly cheese.</p>
- </div>
- </div>
- </div>
- </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;}
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"
- <span class="icon_camera_alt"></span>
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.
- /*
- Name: Ashoka
- Version: 1.0
- Author: GeeksLabs
- Author URI: http://www.geekslabs.com
- */
- /*---------------------------------
- Table of Contents:
- 1. Basic Elements
- 2. Logo
- 3. Menu
- 4. Video background
- 5. Content
- 6. About Section
- 7. Work Section
- 8. Services Section
- 9. Separator- Text & Video
- 10. Portfolio Section
- 11. Separator- Stats
- 12. Clients Section
- 13. Testimonials Section
- 14. Team Section
- 15. Pricing Option
- 16. Separator - Get Connected
- 17. Contact Form
- 18. Google Map
- 19. Footer Section
- 20. Social icons
- 21. Media Queries
- ----------------------------------*/
The vendor
folder contains Bootstrap core css file, 3rd party jQuery plugin css and other css.
- <!-- stylesheet -->
- <link rel="stylesheet" href="css/vendor/pace.css">
- <link rel="stylesheet" href="css/vendor/bootstrap.css">
- <link rel="stylesheet" href="css/style.css">
- <link rel="stylesheet" href="css/vendor/animate.css">
- <link rel="stylesheet" href="css/vendor/simpletextrotator.css">
- <link rel="stylesheet" href="css/vendor/owl.carousel.css">
- <link rel="stylesheet" href="css/vendor/elegant-font-icon.css">
- <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.
- <!-- Custom styles for this template -->
- <link rel="stylesheet" type="text/css" href="css/colors/blue.css" title="blue" media="screen"/>
- <link rel="stylesheet" type="text/css" href="css/colors/blue-2.css" title="blue-2" media="screen"/>
- <link rel="stylesheet" type="text/css" href="css/colors/purple.css" title="purple" media="screen"/>
- <link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green" media="screen"/>
- <link rel="stylesheet" type="text/css" href="css/colors/green-2.css" title="green-2" media="screen"/>
- <link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow" media="screen"/>
- <link rel="stylesheet" type="text/css" href="css/colors/orange.css" title="orange" media="screen"/>
- <link rel="stylesheet" type="text/css" href="css/colors/red.css" title="red" media="screen"/>
- <link rel="stylesheet" type="text/css" href="css/colors/red-2.css" title="red-2" media="screen"/>
- <link rel="stylesheet" type="text/css" href="css/colors/red-3.css" title="red-3" media="screen"/>
- <link rel="stylesheet" type="text/css" href="css/colors/pink.css" title="pink" media="screen"/>
- <link rel="stylesheet" type="text/css" href="css/colors/pink-2.css" title="pink-2" media="screen"/>
- <link rel="stylesheet" type="text/css" href="css/colors/beige.css" title="beige" media="screen"/>
- <link rel="stylesheet" type="text/css" href="css/colors/midnight.css" title="midnight" media="screen"/>
- <link rel="stylesheet" type="text/css" href="css/colors/black.css" title="black" media="screen"/>
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.
- <!-- scripts -->
- <script type="text/javascript" src="js/vendor/jquery-1.11.0.min.js"></script>
- <script type="text/javascript" src="js/vendor/modernizr.custom.js"></script>
- <script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>
- <script type="text/javascript" src="js/vendor/classie.js"></script>
- <script type="text/javascript" src="js/vendor/respond.js"></script>
- <script type="text/javascript" src="js/vendor/jquery.counterup.js"></script>
- <script type="text/javascript" src="js/vendor/smoothscroll.js"></script>
- <script type="text/javascript" src="js/vendor/jquery.backgroundvideo.min.js"></script>
- <script type="text/javascript" src="js/vendor/wow.js"></script>
- <script type="text/javascript" src="js/vendor/jquery.simple-text-rotator.min.js"></script>
- <script type="text/javascript" src="js/vendor/owl.carousel.min.js"></script>
- <script type="text/javascript" src="js/vendor/imagesloaded.pkgd.min.js"></script>
- <script type="text/javascript" src="js/vendor/masonry.pkgd.min.js"></script>
- <script type="text/javascript" src="js/vendor/cbpGridGallery.js"></script>
- <script type="text/javascript" src="js/vendor/styleswitch.js"></script>
- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAZnaZBXLqNBRXjd-82km_NO7GUItyKek&sensor=false"></script>
- <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.
- $(function(){
- //Logo fadeIn fadeOut on
- $(window).scroll(function(){
- if($(this).scrollTop() > $(window).height()/2.2) $('.logo-wrapper').fadeOut('slow');
- if($(this).scrollTop() < $(window).height()/2.2) $('.logo-wrapper').fadeIn('slow');
- });
- //Using the smooth scroll for smooth navigation
- smoothScroll.init();
- smoothScroll.init({
- speed: 500, // Integer. How fast to complete the scroll in milliseconds
- easing: 'easeInOutCubic', // Easing pattern to use
- updateURL: false, // Boolean. Whether or not to update the URL with the anchor hash on scroll
- offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
- callbackBefore: function ( toggle, anchor ) {}, // Function to run before scrolling
- callbackAfter: function ( toggle, anchor ) {} // Function to run after scrolling
- });
- //wow animation by using with animate css
- if($(window).width() > 480) {
- var wow = new WOW(
- {
- boxClass: 'wow',
- animateClass: 'animated',
- offset: 0,
- mobile: true
- }
- );
- wow.init();
- }
- // Full screen navigations
- var triggerBttn = document.getElementById( 'trigger-navbar' ),
- navbar = document.querySelector( 'section.navbar' ),
- closeBttn = navbar.querySelector( 'a.navbar-close' );
- navClick = navbar.querySelector( 'section.navbar nav ul li a' );
- transEndEventNames = {
- 'WebkitTransition': 'webkitTransitionEnd',
- 'MozTransition': 'transitionend',
- 'OTransition': 'oTransitionEnd',
- 'msTransition': 'MSTransitionEnd',
- 'transition': 'transitionend'
- },
- transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
- support = { transitions : Modernizr.csstransitions };
- function toggleOverlay() {
- if( classie.has( navbar, 'open' ) ) {
- classie.remove( navbar, 'open' );
- classie.add( navbar, 'close' );
- var onEndTransitionFn = function( ev ) {
- if( support.transitions ) {
- if( ev.propertyName !== 'visibility' ) return;
- this.removeEventListener( transEndEventName, onEndTransitionFn );
- }
- classie.remove( navbar, 'close' );
- };
- if( support.transitions ) {
- navbar.addEventListener( transEndEventName, onEndTransitionFn );
- }
- else {
- onEndTransitionFn();
- }
- }
- else if( !classie.has( navbar, 'close' ) ) {
- classie.add( navbar, 'open' );
- }
- }
- triggerBttn.addEventListener( 'click', toggleOverlay );
- closeBttn.addEventListener( 'click', toggleOverlay );
- // navClick.addEventListener( 'click', toggleOverlay );
- $('section.navbar nav ul li a').click(function(){
- toggleOverlay();
- });
- //prepare video
- $('.video').height($(window).height());
- $('.home-text').css('top',$(window).height()/3.5+'px');
- $(window).resize(function() {
- $('.video').height($(window).height());
- $('.home-text').css('top',$(window).height()/3.5+'px');
- });
- $('.video .cont').addClass('visible');
- setTimeout(function() {
- $('.video .sdf, .video .suys, .video .arrow').addClass('visible');
- }, 2000);
- //bg video
- $.backgroundVideo($('#bg-video'), {
- "align": "centerXY",
- "width": 846,
- "height": 476,
- "path": "media/",
- "filename": "business-discussion-converted", // You can change video name from here you want to use
- "types": ["mp4", "ogg", "webm"]
- });
- //play video
- $('.video .play').click(function() {
- //stop the video
- if (!window.isMobile){
- $('body').addClass('noscroll').append('<div class="previewer"><div><iframe src="//player.vimeo.com/video/81676731?title=0&byline=0&portrait=0&color=ffffff&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><div class="close"></div></div>');
- //pause video
- $('body').addClass('paused');
- $('.previewer').click(function() {
- $('body').removeClass('noscroll');
- $(this).remove();
- //play video back
- $('body').removeClass('paused');
- });
- return false;
- }
- });
- //rotate text
- $(".rotate-fade").textrotator({
- animation: "fade",
- speed: 1000
- });
- $(".rotate-flip").textrotator({
- animation: "flip",
- speed: 1250
- });
- $(".rotate-flipCube").textrotator({
- animation: "flipCube",
- speed: 1500
- });
- $(".rotate-flipUp").textrotator({
- animation: "flipUp",
- speed: 1750
- });
- $(".rotate-spin").textrotator({
- animation: "spin",
- speed: 2000
- });
- // grid gallery (Portfolio)
- new CBPGridGallery( document.getElementById( 'grid-gallery' ) );
- // Carousel
- $("#work-slider").owlCarousel({
- navigation : true, // Show next and prev buttons
- slideSpeed : 300,
- paginationSpeed : 400,
- singleItem:true
- });
- $("#testimonial-slider").owlCarousel({
- navigation : true, // Show next and prev buttons
- slideSpeed : 300,
- paginationSpeed : 400,
- singleItem:true
- });
- //Counter Up
- $('.counter').counterUp({
- delay: 5,
- time: 800
- });
- //theme style switcher
- $('#theme-customizer .cog').click(function(){
- $('#theme-options').slideToggle("slow")
- });
- // Ajax working contact form
- $("#submit").click(function() {
- //get input field values
- var user_name = $('input[name=name]').val();
- var user_email = $('input[name=email]').val();
- var user_phone = $('input[name=phone]').val();
- var user_message = $('textarea[name=message]').val();
- //simple validation at client's end
- //we simply change border color to red if empty field using .css()
- var proceed = true;
- if(user_name==""){
- $('input[name=name]').css('border-color','red');
- proceed = false;
- }
- if(user_email==""){
- $('input[name=email]').css('border-color','red');
- proceed = false;
- }
- if(user_phone=="") {
- $('input[name=phone]').css('border-color','red');
- proceed = false;
- }
- if(user_message=="") {
- $('textarea[name=message]').css('border-color','red');
- proceed = false;
- }
- //everything looks good! lets proceed
- if(proceed)
- {
- //data to be sent to server
- post_data = {'userName':user_name, 'userEmail':user_email, 'userPhone':user_phone, 'userMessage':user_message};
- //Ajax post data to server
- $.post('include/contact.php', post_data, function(response){
- //load json data from server and output message
- if(response.type == 'error')
- {
- output = '<div class="error">'+response.text+'</div>';
- }else{
- output = '<div class="success">'+response.text+'</div>';
- //reset values in all input fields
- $('#contact_form input').val('');
- $('#contact_form textarea').val('');
- }
- $("#form_result").hide().html(output).slideDown();
- }, 'json');
- }
- });
- //reset previously set border colors and hide all message on .keyup()
- $("#contact_form input, #contact_form textarea").keyup(function() {
- $("#contact_form input, #contact_form textarea").css('border-color','');
- $("#form_result").slideUp();
- });
- });
- // Google Maps
- google.maps.event.addDomListener(window, 'load', showmap);
- function showmap() {
- var myLatlng = new google.maps.LatLng(40.6700, -73.9400); // New York
- var mapOptions = {
- // How zoomed in you want the map to start at (always required)
- zoom: 12,
- // The latitude and longitude to center the map (always required)
- center: myLatlng, // New York
- // How you would like to style the map.
- styles: [{featureType:'all',stylers:[{saturation:-100},{gamma:0.50}]}]
- };
- // We are using a div with id="map" seen below in the <body>
- var map = new google.maps.Map(document.getElementById('map'), mapOptions);
- var image = {
- url: 'http://demo.geekslabs.com/ashoka/images/map-marker.png',
- origin: new google.maps.Point(0, 0),
- anchor: new google.maps.Point(12, 59)
- };
- var marker = new google.maps.Marker({
- position: myLatlng,
- map: map,
- icon: image,
- });
- }
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.
- $to_Email = "myemail@gmail.com"; //Replace with recipient email address
- $subject = 'You have new inquiry from '.$_POST["userName"]; //Subject line for emails