Megacourse - Learning and Courses HTML5 Template

Version 1.0

Thank 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

  1. Using a text editor
  2. The robots tag
  3. File structure

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.

Download Notepad++
Download TextWrangler

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

  1. Open the HTML file with a text editor (for example blog-list.html).
  2. 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>
  3. Save the file and view it in your browser to see the result.

How to change the font

  1. Open the style.css file in the css folder with a text editor.
  2. Search for the following text:
    font-family: 'Open Sans', sans-serif;
  3. Enter the fontname you wish to use. For example:
    font-family: Georgia, Times, serif;
  4. 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.)

google font 1

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.

google font 2

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.

Credits

Fonts

Fonts icon

Codes & Plugins