Megacourse - Learning and Courses HTML5 Template
Version 1.0Thank you very much for purchasing our template. This document will guide you through the setup process of this template. If you have questions about anything about this template that isn't covered in this documentation, please post your question here.
Getting started
Using a text editor
First of all, you might want to use a text-editor like Notepad++
(Windows) or TextWrangler
(Mac OS) for editing the files so you're more able to see what kind of code you're editing.
The robots tag
Please always make sure to check the robots tag in your HTML files. If you want to learn more about the robots tag, read this guide at Yoast.com.
MegaDrupal is not responsible for your site not being indexed by search engines.
File structure
This is file tructure in the package.
css/ images/ js/ index.html ccount-assignment.html account-inbox.html account-learning.html account-profile-guest-view.html account-profile-owner-view.html account-teaching.html asignment-after-submit.html asignment-list.html asignment-marking.html asignment-received.html asignment-submit.html become-teacher.html blog-list.html blog-single.html categories.html course-intro.html course-learn.html create-basic-information.html create-design-course.html create-publish-course.html learning.html login.html quizz-1.html quizz-2.html quizz-20.html quizz-3.html quizz-5.html quizz-finish.html quizz-intro.html register.html request-teacher.html search-result-found.html search-result-not-found.html setting.html
HTML Structure
Regular layout, structure
The template is based on Bootstrap 3 Framework - http://getbootstrap.com
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Basic HTML Markup
<div class="row"> <div class="col-md-12"> Level 1 column <div class="row"> <div class="col-md-6">Level 2</div> <div class="col-md-6">Level 2</div> </div> </div> </div>
If you need more information, please visit this site: http://getbootstrap.com/css/#grid
CSS Structure
The organization of the CSS is one of our priorities.
These are the CSS file we're using in the template:
- style.css - (The basic layout structure styles, elements such as boxes, titles, etc) - lib/ - (css library) - fonts/ - (font files)
Javascript
jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/
The initialization of the elements, libs and features is made by the file scripts.js, in the JS folder.
Slider
We use Owl-carousel js for header slider. You can add new slide by copy HTML:
<div class="slide-item"> <div class="item-inner"> {HTML code} </div> </div>
You can check plugin homepage for more information
Button
There're 3 style of buttons (color) and 3 sizes. You can use by add class to a
or input
tag
class="mc-btn mc-btn-1" class="mc-btn mc-btn-2" class="mc-btn mc-btn-3" class="mc-btn mc-btn-1 btn-style-1" class="mc-btn mc-btn-2 btn-style-2" class="mc-btn mc-btn-3 btn-style-3" class="mc-btn mc-btn-1 btn-style-4" class="mc-btn mc-btn-2 btn-style-5" class="mc-btn mc-btn-3 btn-style-6" class="mc-btn mc-btn-1 btn-style-7"
Typography
How to change text
- Open the HTML file with a text editor (for example blog-list.html).
- Find the text that you want to edit, for example:
How to Create Course in this theme?
, you will see
<a href="blog-single.html">How to Create Course in this theme?</a>
change it to
<a href="blog-single.html">My awesome articles</a>
- Save the file and view it in your browser to see the result.
How to change the font
- Open the style.css file in the css folder with a text editor.
- Search for the following text:
font-family: 'Open Sans', sans-serif;
- Enter the fontname you wish to use. For example:
font-family: Georgia, Times, serif;
- 4. Save the file and view the result in your browser.
For more information about font families, visit w3schools.com.
Make sure to delete the @import code from the fonts.css file if you're not planning on using the Viga font. See also the Using Google Webfonts how to.
Using Google Webfonts
1. Visit https://www.google.com/fonts/.
2. Choose your favourite font, for example 'Droid Sans'.
3. Click the 'Quick use' button. (This is the grey button in the middle. You'll find it at the left of the blue 'Add to Collection' button.)

4. Select the styles of the font you wish to use, for example Normal 400 and Bold 700.
5. Copy the code you'll find at the thrid point and the second tab (the @import function) of the Google Webfonts page.

Example given:
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
6. Open your style.css file and add this code on the first line of the document.
7. Copy the font-family
code given at point 4 of the Google Fonts instructions. Don't forget to add a fallback font after the Google Font:
font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
8. Follow the instructions given in How to change the font.
General information
Need help?
If you need help with setting up the template, please post your question here. There are a few notes:
- Before you ask a question please make sure to scan the menu and read the specific section of your question.
- If it's a specific HTML question, Google (or any other search engine) is your friend and probably a hundred times faster in replying.
- If it's possible, please provide a link to your (demo) website so our stuff are able to quickly scan for possible issues.
Report a bug
If you found a bug, please send us an e-mail with a (small) description of the issue. Your help is always apreciated.