Thanks for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to submit your request to support forum. Also you can find a lot of useful information right there. Thanks so much!
This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template.
Requirements
You will need the following sofwares to customize this template.
Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
Web Browser for testing (eg: Google Chrome, Safari or Mozilla Firefox)
FTP Tool to upload files to Server (eg: FileZilla)
Be careful while editing the template. If not edited properly, the design layout may break completely.
No support is provided for faulty customization.
How to change the logo
You can do that very easily, simply replace the current logo image with your own one.
The current logo image is located in img folder. There are two logo versions dark and white, the color depends on the header type you plan to use. The required size is 96 x 50 (px).
How to change Menu
To change the menu section, please open index.html file and find lines 93-197 <ul class="main-nav__list">.
Under the line you will find all required menu items. You can easily change the menu names, sub-menus, add/edit or delete them from the code.
Let's check some parts in details. The code indicated below is the one that provides social icons. These are the Font Awesome ones. Please use href="#" field to link it to your social network:
The main fields with the phone number, telephone number and email address are located below the social icons. Here you go:
There are 2 blog types in the Smart Education Template. You can find 4 pages that come with this template in blog style. Please check some of them presented below.
Fullwidth Blog
You can find all required code in blog_fullwidth.html file.
Please open the page in any code editor to change cover images, links to posts and add short description to style it according your needs.
Blog with sidebar
We present ready-made blog layouts with the sidebar.
There are several pages with different left or righ sidebars: blog_with_right_sidebar.html and blog_with_left_sidebar.html. Please open one of them to edit the content.
We want to show a code example of the simple blog listing, please see it below.
To be an enthusiast had become her social vocation and, sometimes even when she did not feel like it, she became enthusiastic in order not to disappoint the expectations of those who knew her. The subdued smile which, though it did not suit
her faded features, always playedround her lips expressed, as in a spoiled child.
src="img/blog_post/blog_post_01.jpg" is the path to an image.
<a href="blog_post_right_sidebar.html"is the path of a post item.
Our Students Love Studying - is a blog post item title.
How to add/manage Events Calendar
The template provides the Calendar for scheduling any events and single event post. Please open events.html and events_calendar.html files to manage the data. Lets check the Events calendar page, please open events_calendar.html and find the lines 221-327:
src="img/product_list/product_img-01.jpg" is the path to an image.
<a href="single_course.html"is the path of a post item.
<a class="product-list__category" href="#">Economy</a> the category title and path.
<p class="product-list__price">$ 150</p> is the course price.
Our Students Love Studying - is a course post item title.
How to add/manage modules
In case you need to use one of the existing builder elements on your page you should simply open any file where the required module located and copy the code. For example, you want to copy Icon Boxes. In this case please open process.html copy the code from lines 229-293 and then past it in your page where you need and then edit it.
1
Register
Now
Fill out the registration form and you will have access to all courses
2
Choose a
Course
Choose a suitable course for yourself and study when you are comfortable
3
Enjoy
Learning
Study the chosen course in full and become an expert in this field
Contact Form Setup
If you want to use the contacts page with the form where customer can send mail, simply open contacts.html file.
You can setup your contact form in 2 clicks, please open mail.php file and find yourname@yourdomain.com on line 3, simply replace to your email address. All the requests will be sent to the adress you indicated in the field. That's all.
How to setup Map
You can notice the Google Maps is located on contact page contacts.html. If you will open the file you can find a code line <div id="map-canvas"></div> . The map details are located in main.js file the line 537 var myLatlng = new google.maps.LatLng(40.714353, -74.005973);. How to add the latitude and longitude details you can find here.
if ($('#map-canvas').size() > 0) {
function initialize() {
var styleArray = [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"},{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.attraction","elementType":"all","stylers":[{"visibility":"off"},{"hue":"#ff00ff"},{"lightness":"31"},{"saturation":"100"}]},{"featureType":"poi.park","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"saturation":"-36"},{"color":"#cce3a4"}]},{"featureType":"poi.sports_complex","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","elementType":"geometry","stylers":[{"visibility":"off"},{"color":"#ff0000"}]},{"featureType":"poi.sports_complex","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45},{"visibility":"on"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"labels.icon","stylers":[{"visibility":"on"}]},{"featureType":"transit.station.rail","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"transit.station.rail","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#ffffff"},{"visibility":"on"}]}];
var myLatlng = new google.maps.LatLng(40.714353, -74.005973);
var mapOptions = {
zoom: 15,
scrollwheel: false,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styleArray
};
var map = new google.maps.Map(doc.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'New York!',
icon: 'img/map_icon.png'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
Files & Sources
Included Stylesheets
These are the primary CSS files used for general front-end styling. Use these to customize your theme even further. All files are included under smartedu/css/
1. style.css - Primary stylesheet
2. bootstrap.min.css - Bootstrap stylesheet
3. font-awesome.min.css - the Font Awesome icons stylesheet
4. owl.carousel.min.css - carousel stylesheet
Included JavaScript
These are the various attribution inks to the Javascript files included or modified to work with in this theme. All included JavaScript codes under smartedu/js/
