Introduction


First of all, Thank you so much for purchasing Educomp and trusting WWS Themes as your partner. Together, we are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the us directly.

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.

Prerequisites

You will need the following sofwares to customize this template.

  1. Text Editor (eg: Sublime Text or Notepad)
  2. Web Browser (eg: Google Chrome or Mozilla Firefox)
  3. 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.

General

File Structure

                                            EDUCOMP/
                                              |- css/
                                                 |- colors/
                                                 |- uncompressed/
                                                 |- *.*
                                              |- js/
                                                 |- uncompressed/
                                                 |- *.*
                                              |- images/
                                                 |- gallery/
                                                 |- prettyPhoto/
                                                 |- shop/
                                                 |- *.*
                                              |- fonts/
                                              |- flags/
                                              |- slider-revolution/
                                             *.*
                                        

  1. EDUCOMP, the root folder, contains all the files and folders used in this template. All the HTML pages directly reside within the EduComp folder.
  2. CSS folder contains all the css files including the plugins (except the revolution slider files).
    The colors folder contains color variations for the template that come bundled. How to use them will be explained later in the documentation under "Customization".
    The uncompressed folder contains un-minified versions of CSS files. These files are not linked to any of the pages of the template. You may delete them altogether if you don't need any editing work done.
  3. JS folder contains all the javascript files including the plugins that have been used (except the Revolution Slider files).
    The uncompressed folder contains un-minified versions of JS files. These files are not linked to any of the pages of the template. You may delete them altogether if you don't need any editing work done.
  4. Images folder contains all the images used in EduComp.
    The gallery folder contains images used in "Albums" on Albums page and Single Album page.
    The shop folder contains images used in Ecommerce pages like shop, cart, checkout etc.
  5. Fonts folder contains icon font files. EduComp uses FontAwesome family of icon fonts.
  6. Flags folder contains flag icon font files that are used in language select Modal.
  7. Slider-revolution folder contains all the files used by revolution slider (js, css etc.)



Installation

Whether you are working on your local system or you need to upload the website to the server, you need to copy all the files and folders present in the EDUCOMP folder

Use any FTP client to copy files from your system to the server. All the below folders and files need to be uploaded:

  1. js Folder
  2. css folder
  3. images Folder
  4. fonts folder
  5. flags folder
  6. slider-revolution folder
  7. All HTML files

 index.html is the homepage of your website which opens by default when someone visits your site.

Back to Top Proceed

HTML

HTML Structure

EduComp uses the following basic structure on all pages with exceptions like Coming Soon page:

                    
                                            <html>

                                               <head>

                                                  EduComp Education Website Template
                                                  

                                               </head>

                                               <body>
                                            
                                                  
             
      
       ...       
             
       ...       
      
              
   </body> </html>

  • <head> houses the Title, Meta tags, Includes like CSS stylesheets etc.
  • <body> houses the Header (Website Menu), Content of the page and the Footer.



The Header


Educomp header is divided into 2 parts:

  1. Topbar - The Band at the top. Contains Phone number, Mini Cart, Language Selector and Login/Signup links.
  2. Navbar - The Navigation bar below the Topbar. Contains Logo and the Menu

Header structure is a s follows :

                                            
Topbar Items

Applying .header-1 class makes the menu overlapping on the slider as seen in index.html

Applying .header-2 class makes the menu normally positioned i.e. that not overlapping the slider as seen in index-1.html, index-2.html, index-3.html and index-shop.html




Revolution Slider

EduComp comes bundled with Slider Revolution which is one of the most amazing and modern Sliders available. Slider Revolution has a pretty extensive documentation of its own.

View Documentation

Basic structure of Slider Revolution in EduComp is as follows:

                                            
  • ...
  • ...



Page Header

  Do not confuse Header with Page Header.

Page header contains the Heading which tells us which page we are on. Page Header is not present on Home page.

In EduComp the page header wraps the following:

  1. Page Title/Page Name - Tells us which page we are currently on. Example : About
  2. Breadcrumb - Tells us our exact location within the directory structure of the website. Example : Home / About



Sidebar

Love sidebars? Use them on the website pages or on the blog pages, as you like.

The basic structure of sidebars in EduComp is as follows :

                                            
                                        

  • .widget class is the wrapper class for every widget in the sidebar.
  • .widget-specific-class class is widget specific class like .twitter-widget, .search-widget, .category-widget etc. depending upon which widget you use.



Footer

Footer is EduComp is divided into 2 parts:

  1. Primary Footer - The upper big part of the footer. Houses the Footer widgets
  2. Secondary Footer - The lower smaller part of the footer. Houses Copyright info and Social Media Connect

The basic Footer structure in EduComp is as follows:

                                                

.footer-widget class is the wrapper class for every widget in the sidebar.


Back to Top Proceed

CSS

CSS Files

The CSS folder has the followings contents:

  1. bootstrap.min.css - Bootstrap Core Stylesheet
  2. components.css - Restyled Bootstrap Components
  3. font-awesome.min.css - Font Awesome Stylesheet
  4. style.css - EduComp Custom stylesheet
  5. vendors.css - Contains Plugin styles - As provided by vendors (not modified)
  6. Uncompressed [Folder] - Contains all the CSS files in an un-compressed state. Use them for restoration to the original form just in case you make some undesired changes while editing.
  7. Colors [Folder] - Contains 6 folders with each folder containing :
    1. styles.css
    2. components.css



Helper Classes

To make customization a breeze, we have added some helper classes to the default ones :

Category Class Name
Font Weight
  • .thin - Sets font weight to lowest value
  • .normal - Sets font weight to normal
  • .bold - Sets font weight to maximum value
Font Size
  • .font16 - Sets font size to 16px
  • .font18 - Sets font size to 18px
  • .font20 - Sets font size to 20px
  • .font22 - Sets font size to 22px
  • .font24 - Sets font size to 24px
  • .font26 - Sets font size to 26px
  • .font28 - Sets font size to 28px
  • .font30 - Sets font size to 30px
  • .font32 - Sets font size to 32px
  • .font34 - Sets font size to 34px
  • .font36 - Sets font size to 36px
IMP : The font sizes are in "rem" units unlike in "px" units earlier. The base font size in Educomp is 16px. Hence, .font16 sets the font-size to 1 rem which is same as 16px. Same applies to other font sizes.
Color (Depends on Template Color Theme)

Yellow (Path : css/colors/yellow)

  • #ff9c00Primary Color
  • #1a2b51Secondary Color

.text-primary sets the text color to primary color.
.bg-primary sets the background color to primary color.


Beige (Path : css/colors/beige)

  • #f2be2ePrimary Color
  • #3c156bSecondary Color

.text-primary sets the text color to primary color.
.bg-primary sets the background color to primary color.


Blue (Path : css/colors/blue)

  • #92bdcePrimary Color
  • #1E2570Secondary Color

.text-primary sets the text color to primary color.
.bg-primary sets the background color to primary color.


Green (Path : css/colors/green)

  • #8EA604Primary Color
  • #212121Secondary Color

.text-primary sets the text color to primary color.
.bg-primary sets the background color to primary color.


Peach (Path : css/colors/peach)

  • #fc9b6bPrimary Color
  • #305b6bSecondary Color

.text-primary sets the text color to primary color.
.bg-primary sets the background color to primary color.


Red (Path : css/colors/red)

  • #ff3c00Primary Color
  • #025c53Secondary Color

.text-primary sets the text color to primary color.
.bg-primary sets the background color to primary color.

Padding
  • .pt-20 - Sets padding-top to 20px
  • .pt-40 - Sets padding-top to 40px
  • .pt-60 - Sets padding-top to 60px
  • .pt-80 - Sets padding-top to 80px
  • .pt-100 - Sets padding-top 100px
  • .pt-120 - Sets padding-top 120px

  • .pb-20 - Sets padding-bottom to 20px
  • .pb-40 - Sets padding-bottom to 40px
  • .pb-60 - Sets padding-bottom to 60px
  • .pb-80 - Sets padding-bottom to 80px
  • .pb-100 - Sets padding-bottom to 100px
  • .pb-120 - Sets padding-bottom to 120px
Margin
  • .nom - Sets all Margins to 0px
  • .nom-tb - Sets Top and Bottom margin to 0px
  • .mt-20 - Sets margin-top to 20px
  • .mt-40 - Sets margin-top to 40px
  • .mt-60 - Sets margin-top to 60px
  • .mt-80 - Sets margin-top to 80px
  • .mt-100 - Sets margin-top 100px
  • .mt-120 - Sets margin-top 120px

  • .nop - Sets all Paddings to 0px
  • .nop-tb - Sets Top and Bottom Padding to 0px
  • .mb-20 - Sets margin-bottom to 20px
  • .mb-40 - Sets margin-bottom to 40px
  • .mb-60 - Sets margin-bottom to 60px
  • .mb-80 - Sets margin-bottom to 80px
  • .mb-100 - Sets margin-bottom to 100px
Miscellaneous
  • .hide-overflow - Hides Overflow
  • .w-auto - Sets width to "auto"

Back to Top Proceed

JS

We have taken utmost care so that you never need to deal with the javascript files until and unless you need to customize the functionality. Thats why we have used data-attributes to simplify things as much as possible.

Overview of Main.js (js/main.js)

main.js is the custom javascript file fo EduComp which contains all the initializing scripts etc.

To make handling simple, this file is divided into 2 parts:

  1. Function Calls
  2. Function Definitions

If you want to fiddle with certain values like timing or want custom functionalities, you may edit this file. The file is well commented.




Countdown Timer

Files Required :
  • jquery.min.js
  • jquery.countdown.min.js
  • main.js

Multiple Instances : Supported

We understand that dealing with Javascript can be messy. You can directly change the date for Countdown Timer with data attributes

The basic structure for timer is as follows:

                                            
0days 0hrs 0min 0sec

Simply edit the attribute data-date to your choice of date. Format for the date is YYYY/MM/DD hh:mm:ss. Thats it!




Youtube Video

EduComp offers custom look for Youtube Videos.

Files Required :
  • jquery.min.js
  • main.js

Multiple Instances : Supported

The basic structure of youtube video is as follows:

                                            

To load your choice of Youtube video, simple replace the attribute data-video-id with your Video's Id.

Use it on static pages, blog posts or anywhere seamlessly.

How to find the ID of any Youtube video? In the following image, the red underlined string is the ID of any video.





Google Map Custom contact.html

EduComp offers customized Google maps along with custom Pin Marker and Information Window.

Files Required :

Multiple Instances : Not Supported

The map in EduComp is theme styled and has Auto Center feature.

The basic structure of Google map is as follows:

                                            <div

                                                class="gmap" 

                                                id="gmap" 

                                                data-lat="51.508103" 

                                                data-long="-0.074911" 

                                                data-info-win="<h6>Educomp London Campus</h6>">

                                            </div>
                                        

To load the place of your choice, you need to do the following:

  1. Replace the value of data-lat attribute with your place's Latitude.
  2. Replace the value of data-long attribute with your place's Longitude.
  3. Replace the value of data-info-win attribute with the data you want to display in the info window that shows up on the marker. HTML is supported

How to find the Latitude and Longitude of your place?

  1. Open Google Maps
  2. Find your place on the map
  3. Right click on your place and Click "Whats here?"
  4. The Latitude and Longitude of the place will be shown.
  5. Put those values here.



Modal Pop Up (index.html)

We have extended the Modal functionality provided with Bootstrap. So you can have auto pop-up modals for displaying offers or getting subscriptions.

Files Required :
  • bootstrap.min.js
  • jquery.min.js
  • main.js

Multiple Instances : Supported

EduComp offers a superb functionality of PopUps using Bootstrap Modals.

Any Modal can be used to make it "Pop Up" on Home Page or any other page of your choice.

You just need to use the following 2 attributes:

  1. data-open-onload Valid Values : "true" | "false"

    If you want to open your modal on page load then set the value as "true" else set it to "false". Default value is false.

  2. data-open-delay Valid Values : Integer specifying time in milliseconds

    If you want that the Pop Up should come after some delay on page load, then specify time here in milliseconds

Modals can contain any HTML data. So, you can modify according to your needs.


Back to Top Proceed

Customization

Changing Color Scheme

EduComp comes with 6 color schemes built in:

  1. Yellow (Path : css/colors/yellow)
  2. Beige (Path : css/colors/beige)
  3. Blue (Path : css/colors/blue)
  4. Green (Path : css/colors/green)
  5. Peach (Path : css/colors/peach)
  6. Red (Path : css/colors/red)

If you want to change the color scheme of template, follow the given steps. As an example, we will be changing the color scheme to Green, but the steps are same for all other color schemes.

  1. In the template's Root directory, navigate to the folder - css > colors.
  2. Within the colors folder, you will find various folders having names of colors depicting the CSS files for the color scheme that folder contains.
  3. To change the color scheme, open the folder of your choice. For eg. Green.
  4. Copy both style.css and components.css.
  5. Paste the files in the template's CSS folder i.e two level above. Overwrite the files if warned by the system.

That's it!




Create Custom HTML Page

There may be times when you want to create some new pages with assorted elements as per your need.

We have provided an empty page with the theme so that you may add elements as per your choice quickly.

  1. Find blank.html in Root directory.
  2. Open it with with any text editor like Notepad++
  3. Start editing!

 This page already contains Header and Footer.



Logo/Branding

Logo can be changed by replacing the file logo.png located in images folder.

OR

You can change the logo by changing the filename in the code to your file name. You can find the logo in the header by searching for "Replace with your Logo" in the code. Logo is present within Anchor tag with class name navbar-brand

While you can upload a Logo of any size, recommended size of the logo is 114px by 35px.




Menu/Navigation

EduComp offers Mega-menu and Multi-level sub-menus.

Main Menu can be found by searching for "Main Menu" in the code. Main menu can also be identified with ID : main-navigation

The basic structure of Main Menu in EduComp is as follows:

                                            
                                        

 There is no need to add .active class to current page as Educomp does that automatically.



Back to Top Proceed

Contact Form

Files Required :
  • jquery.min.js
  • jquery.form.js
  • jquery.validate.min.js
  • main.js

With EduComp, we have provided the validation script and submission script bundled.

To change the email id from which the Emails are being sent to visitors, please follow the given steps:

  1. Find the file sendemail.php in root directory of the theme.
  2. Open it any Text Editor like Notepad++
  3. Go to Line No. 7
  4. Replace the email with your choice of email id
  5. Save it.
 The contact form in EduComp is submitted via AJAX, so the page doesn't reload while submitting.

Back to Top Proceed

Google Fonts

EduComp makes use of 2 fonts provided by Google Fonts.

  1. PT Sans Narrow for headings
  2. Noto Serif for body text

Google fonts are included within the <head> tag of every page.


Back to Top Proceed