college Documentation

HTML Template

A how-to guide and helpful informations
about options and features of the template.

Purchase it here

Introduction

You bought an HTML / CSS template, so you need some basic knowledge for those 2 languages.
The best way is to play around with the different elements, but you'll find some helpfull tips and explanations how this template is build up and works.

Please compare all the examples from this documentation with the original files to have a better understanding.

Support

Please read and search this documentation file before seeking support. If you have any questions that are beyond the scope of this document you can still contact me and open a support ticket here.

Do not use the comment section on the themeforest item page.
This will slow down the support process.

Basic HTML structure

amir follows a simple and basic coding structure.

<!doctype html>
<html lang="en">
<head>

 <!-- Including of Stylesheets, Fonts, Meta Tags & Title -->
 ...

</head>

<body>

  <!-- Main content wrapper -->
  <div class="wrapper">
  
    <!-- Header -->
    <header>
      ...
    </header>
  
    <!-- Main Inner Section -->	
    <main>
      ...
    </main>
  
    <!-- Footer -->	
    <footer>
      ...
    </footer>
	
  </div>
 
  <!-- Including of Scripts (Javascript) -->
  ...
 
</body>
</html>

This is the default html structure you need to respect in all your pages. You're not forced to use all of the section of course. If you don't want a footer or hero for example, just delete this section (example: in the maintenace page only hero is used). But if you do so, please use the structure like above with the right id's.

CSS

These 14 css files must be included in all of your html files

<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap-grid.min.css" type="text/css"/>
...
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="css/style-res.css" type="text/css"/>
                

All other css are only needed if you use the related script. (mixitup, owlcarousel, ...)



Customize CSS

If you want to customize some parts of the css, it's recommended to use a custom css file custom.css where you put all your customizations. This will make it much more easier if you need to update the template some day.

The custom.css already includes all font selectors & rules. So if you want to change the font, just replace the font name with yours.


Inline CSS

Sometimes you will see some inline css for some html elements (mostly for hero or fullwidth section).

<div style="background:url(image.jpg) center center;background-size:cover;">

In general, inline css is not the best way to go, and you should try to skip it if possible. (use classes and add to custom css)

But I decided to use it for some elements because it's just a minor change (usually background or color) which would be much more complicated for your understanding to add a custom classes to each element which need these changes.

Fonts

All fonts (except icon fonts) which are used by this template are comming from the Google font library.

<!-- FONTS -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

The template uses 2 different fonts:

  • nunito for main titles, menu items and some misc elements
  • roboto as main text font and all other elements


Customize fonts

You can of course change/use other fonts. The fonts.css file has a full list with all elements using which font.

Icon fonts

The template also includes icon fonts which are mandatory for all your pages. So make sure to have these icon fonts inlcuded in all of your html files.

<!-- CSS -->
...
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="css/materialize.css" type="text/css">
...

Javascript

All js scripts are inlcuded at the bottom of the html file just before the body closes. Make sure to include these 21 js files in all of your html files

<!-- SCRIPTS -->                
<script src="js/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
...
<script type="text/javascript" src="js/script.js"></script>
<!-- SCRIPTS -->

All other js are only needed if you use the related script. (mixitup, owlcarousel, ...)

Preloader

Every page has a preloader effect which displays a loading animation while the content it is loading.
Here's the markup you will find in all html files.
The code is and should be placed directly after the body opening.
loader by Vallée Antoine

<body>

<!-- PAGELOADER -->
<div class="cs-loader">
    <div class="spinner">
       <div class="ball-1"></div>
       <div class="ball-2"></div>
       <div class="ball-3"></div>
       <div class="ball-4"></div>
       <div class="ball-5"></div>
       <div class="ball-6"></div>
       <div class="ball-7"></div>
       <div class="ball-8"></div>
    </div>
</div>
<!-- PAGELOADER -->

This is of course not an obligation to use the pageloader.
If you don't want a preloader effect just delete the whole preloader markup from your html file.
and don't forget the loader consist of 8 balls and every ball has it's own color you can change the colors from (style.css) file

Header Options

You can choose between different Header appearence options while creating your Pages. Simply add the css class to the Header Element and your header will apply the given rule.

NoteSince version 1.2 the option header-left & header-right needed to be disabled.

<header id="header">
  ...
</header>

Logo

You'll find the logo container in the header element.

<div class="logo">
    <h1>
        <img src="example/">
    </h1>
</div>

Fullwidth Slider

The great Owl Slider is used for the Fullwidth slider. and use data-background to add slider back image

slider item

If you want to add more slider items just add next code:

<!-- slider item -->
<div  class="full-item" data-background="images/full-width-slider/slide1.jpg">
    <div class="container js-height-full">
    <!-- slider-caption here ↓ -->
        ...
    </div>
</div>
Javascript Initialiser / Caller

Find the script initialiser/caller in the script.js. You can of course change the different options to your needs.

/*---------------------------------------------- 
O W L   S L I D E R
------------------------------------------------*/
$(".fullwidth-slider").owlCarousel({
    transitionStyle: "fadeUp",
    navigation: true,
    slideSpeed: 500,
    paginationSpeed: 400,
    singleItem: true,
    responsive: true,
    autoPlay: 5000,
    pagination: true,
    stopOnHover: true,
    navigationText: ["<span class='slider-left'><i class='fa fa-angle-left'></i></span>",
    "<span class='slider-right'><i class='fa fa-angle-right'></i></span>"]
});

Caption

If you want to use the title style from the template add your text and your paragraph area content then put your buttons

<!-- slider caption -->
<div class="full-item-caption col-xs-12">
    <div class="full-caption-text">
        <!-- caption title -->
        <h3>online education gate</h3>
        <!-- caption paragraph -->
        <p>Progressively empower cost effective imperatives for standards compliant</p>
        <!-- caption btns -->
        <div class="caption-buttons">
            <ul>
                <li>
                    <a href="#">get started</a>
                </li>
                <li>
                    <a href="#">take a tour</a>
                </li>
            </ul>
        </div>
    </div>
</div>

global section title head

You can add title to any section ain the page just add:

<div class="public-head col-xs-12">
    <h3>popular courses</h3>
    <p>Appropriately matrix sustainable infrastructures for turnkey networks</p>
    <div class="public-head-spirite">
        <i class="fa fa-bookmark-o"></i>
    </div>
</div>

features

You'll find the home version #1 features like that

<div class="block col-md-4 col-xs-12">
    <div class="inner">
        <div class="inner-icon">
            <i class="zmdi zmdi-folder-star"></i>
        </div>
        <div class="inner-title">
            <h4>best courses</h4>
        </div>
        <div class="inner-desc">
            <p>
                ...
            </p>
        </div>
    </div>
</div>

add class v2 to change the color of the middle div

popular courses

You'll find the popular courses here

<div class="popular-courses col-xs-12">
    <div class="courses-body col-xs-12">
                       
    </div>
</div>


course slider

in this section you will able to add your course item in div has class block

<div class="courses-slider">
    <div class="block">
        <div class="inner">
            <div class="course-img" style="background-image: url(images/courses/img-11.jpg);">
                <span class="course-price">$290</span>
            </div>
            <div class="course-data">
                <div class="title">
                    <a href="#">basic time management advanced course</a>
                </div>
                <div class="author">
                    <a href="#">
                    <img src="images/avatars/avatar2_big.png" alt="">
                    amir nageh</a>
                </div>
            </div>
            <div class="course-extra">
                <div class="extra-details">
                    <ul>
                        <li>
                            <i class="zmdi zmdi-male-female"></i> 300
                        </li>
                        <li>
                            <a href="#">
                            <i class="zmdi zmdi-comments"></i> 200
                        </a>
                        </li>
                    </ul>
                </div>
                <div class="extra-rating">
                    <ul>
                        <li>
                            <i class="fa fa-star"></i>
                        </li>
                        <li>
                            <i class="fa fa-star"></i>
                        </li>
                        <li>
                            <i class="fa fa-star"></i>
                        </li>
                        <li>
                            <i class="fa fa-star"></i>
                        </li>
                        <li>
                            <i class="fa fa-star"></i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

testomenals

You'll find testomenals and clients opinion in this section

<div class="testomenals col-xs-12">>
    ...
</div>


testomenal slider item

you can add your testo opinion slider item

<div class="testomenals-slider">
   <div class="testo-item">
        <div class="item-img">
            <img src="images/avatars/avatar2_big.png" alt="">
        </div>
        <div class="item-title">
            <h4>- amir nageh, marketing diresctor</h4>
        </div>
        <div class="item-desc">
            <p>...</p>
        </div>
    </div>
</div>
                

counter

You'll find the counter items here

<div class="block col-md-4 col-xs-12">
<div class="inner">
    <div class="icon">
        <i class="zmdi zmdi-accounts"></i>
    </div>
    <div class="title">
        <h4>
            <!-- counter number -->
            <span class="count-number">2560</span>k
        </h4>
        <p>happy clients</p>
    </div>
</div>
</div>

blog

You'll find the blog slider items here

<div class="block">
    <div class="inner">
        <!-- blog image -->
        <div class="inner-img" style="background-image: url(images/list/1.jpg);">
            <div class="blog-date">
                <h5>24</h5>
                <span>dec</span>
            </div>
        </div>
        <div class="inner-data">
            <div class="data-title">
                <a href="#">basic time management advanced course</a>
            </div>
            <div class="data-desc">
                <p>
                    ...
                </p>
            </div>
            <div class="data-more">
                <a href="#">read more</a>
            </div>
        </div>
    </div>
</div>

color switcher

if you want to add more colors just add more <li> item

<ul class="colors">
    <!-- color item -->
    <li>
        <!-- just add your class with your color name -->
        <a href="#" class="color_name" title="color_name"></a>
    </li>
    <li>
        <a href="#" class="blue" title="blue"></a>
    </li>
    ....
</ul>

script file

just include the next file

<script src="js/switcher.js"></script>

java script initialize

add the next code to your new color with it's class="color_name" name

$("#style-switcher .color_name").click(function () {
    $("#colors").attr("href", "css/colors/color_name.css");
    return false;
});

Changelog

Version 1.0

Initial release