Universh - Material Education, Events, News, Learning Centre & Kid School MultiPurpose Template

Introduction What can be found in this package, and what can it be used for

Thank you for purchasing a webdemo template from our company. This manual will show you how to work with your template, how to edit it and make it a "live" webdemo.

All pages content is made with HTML, and dynamic animation is made with JavaScript.

Unzipping Template Package

After unzipping the template package you will find 3 folders: "documentation", "screenshots" and "Demo". You can also see a zip archive called "############.zip" that you need to unzip.

The sources package contains all source files for the template.

While unzipping "sources_############.zip" archive you will be prompted to enter a password, which you can find at your Product Download Page (open the link in the email you received from our company).

As soon as you are done with the unzipping the template, you should have 4 folders in total: "documentation", "screenshots", "demo" and "sources".

General Information

The following scheme displays the template files structure.

  • Documentation – contains documentation on template editing and installation.
  • Screenshots - contains screenshots of the template.
  • Demo - contains the .html files of the template and supporting files like css,js etc...
    • Css - contains main css files and supporting bottstraping css files
    • js - contains main js files and supporting jqueryfiles
    • Fonts - contains all the font files used in the demo.
    • Images - contains all images used in demo.
    • Forms - contains Php files for process the mailchimp subscription codes and contact form.
    • Sliders - contains the premium jquery revolution slider demos used in the demo.

Theme Features

You can see all the Featureas in menu area


10 Home Variations with single file

All the variation files found in "demo/" folder in your template package.

List of varialtions

  • Default Template (Full width Layout)
  • Kids School
  • News Home Page
  • Event Home Page
  • One Page Template
  • Video Background Home page
  • Login Page
  • Owl Carousel Slider Home Page
  • Comimg Soon Page
  • Under Construction Page

10 Header Variations

List of varialtions

  • Header Default
  • Header Center
  • Header Login
  • Header Profile
  • Header Fullwidth
  • Header Below Slider
  • Header Sticky
  • Header Transparent
  • Header Semi Transparent
  • Header Semi Transparent Light

List of varialtions

  • Footer Default with Dark background Color
  • Footer Center
  • Footer With Contact Information And Subscription Form
  • Footer With Fun Facts Counter
  • Footer With Background Image and over relay
  • Footer with light background Color
  • Footer Sticky

Other Features

Layout includes

Fullwidth Page,

Boxed Page,

Page with Leftsidebar,

Page with Right Sidebar,

Page with Both Left and Right Sidebar.

Pages like

News Page,

Teachers Page,

Gallery with different columns and also includes Timeline.

You can show the courses in different variations like grid, lists, single pages and more column layouts.

You can show the events in different variations like grid, lists, single page and more column layouts

You can show the blog in different variations like grid, lists, single page and more column layouts

Page Headers like Dark, Light, Small, Background Image, Background Video

Elements like Animations, Accordion, Backgrounds, Content Box, Counters, Forms, Google Map, Pie chart, Tabs, Caousel etc.

Extra pages like,

404 Page,

Under Construction Page,

Coming Soon Page,

Signup Page,

Login Page.

Editing template

Working with the template you need to edit the .html, .css, and .js files.

Editing HTML and CSS files

All editable HTML files are located in "package" folder of the template package (index.html, index-1.html, index-2.html, etc.) Each index-#.html file represents a single template page.

To open .html file with Sublime Text 3 application or by Dreamviewer, you should right mouse click on the file and in the context menu select Open with > Sublime Text 3 or Open with > dreamviewer . When the file is open, you can start editing it.

CSS files are used to change the template appearance like fonts (font-family, font-size, color etc), backgrounds, column width values etc. You can edit the css files with Sublime Text 3 application. Detailed tutorials on are available at our online help center.


It's possible to change the JS settings by extending the defaults from the template, that way is so much easier to update the theme changing only one JS file.Here are a few samples on how to do that:

var offset = 300,
		offset_opacity = 1200,
		scroll_top_duration = 700,
		$back_to_top = $('.cd-top');
Changing Plugins Options

The template includes a very simple way to configure the elements that are initialized automatically, such as the sliders, you just need to put the settings in the "data-plugin-options" attribute, as you can see below:

<div class="slider" data-plugin-revolution-slider data-plugin-options='{"startheight": 700}'>

If you want to disable the auto initialization you can just add a class "manual" or remove the data-plugin-* attribute:

<div class="slider manual" id="myRevolutionSlider">

Editing Html template

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.

<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>

CSS Structure

The organization of the CSS is one of our priorities.

These are the CSS file we're using in the template:

  • theme.css - (The basic layout structure styles)
  • theme-elements.css - (Elements such as sliders, boxes, titles, etc...)
  • theme-shop.css - (Shop Pages styles)
  • theme-blog.css (Blog Pages styles)
  • theme-animate.css (CSS Animations)
  • custom.css (Add all customizations into this file)
  • ie.css (Internet Explorer fixes)

Email Template located in the "package/" folder in your template package.

During the send news letter process you can send by using Email Template files.

Customization & Styles



The style switcher was made to support to change the skin types.
You don't need to use LESS in your project, after you done customizing your skin you may want to grab the generated code and save it in a file in the folder: /css/skins/(skin-name).css

Layout Style (Normal/Boxed)

The template has two different layout modes, Wide and Boxed. The wide one is the default option, if you want to use the Boxed version, add the following class in the <html>:

<html class="gecko win js boxed">

You can also customize the background color or image.

Background Color (Light/Dark)

The template has two different background colors, Light and Dark. The light one is the default option, if you want to use the Dark version, add the following class in the <aside> or in <div>:

<aside class="sidebar widgets-dark typo-light">

Custom Fonts

Some templates may contain the non-default fonts used in the design. By default, the internet browser can render only fonts that are installed to your operating system. In other words, if your webdemo design uses some custom fonts and these custom fonts are not installed on your webdemo visitor's computer, custom fonts won't be displayed. Default fonts will be rendered instead. That's why web developers should look for some alternative solutions. In our templates custom fonts are embedded using Google Web Fonts technology.

Google Web Fonts

You can learn more on using Google Web Fonts by checking the tutorial on how to work with Google web Fonts.

Can't load Google Fonts:
  1. Open 'demo\index-*.html' or 'demo\css\style.css' files
  2. Locate the line:
  3. Replace it with the following:

Customization Tutorials

How to edit text

These templates are HTML based, so all content is stored and could be accessed though the .html files.

  1. Open your template package and go to the demo folder.
  2. There open index.html  file with your HTML editor.
  3. You can use the search tool CTRL+F to find any text you need.
  4. Edit text in HTML editor. Save the file and open it with your Browser to see the changes.

The other way is to use the browser developer tool to find the blocks you want to edit. You can learn more about the developer tools checking the tools description and tutorials.

How to edit images

Open the template folder, go to 'demo/img' directory. You can upload your images with the same name and extension to replace the default ones.

The other way is to upload custom images with your titles and extensions. Then you’ll need to change the image file names in the html files.

  1. Open .html file from the “demo” folder with your html editor.
  2. Use search tool CTRL+F to find the images in the html file.
  3. Replace the image title and extension.

How to activate contact form

  1. Open the template folder.
  2. Go the demo/form directory.
  3. There open the 'contact-form.php' file with your editor (Sublime Text 3, Notepad etc).
  4. Using the Find and Replace tool (CTRL+F) search for the $to_email.

You should see the following line:


replace # symbol with your email address. That's all, now the contact form should send the messages to your email account.

Uploading template

In order to make your demo "live", you need to upload all the content of "demo" folder from your local computer to your hosting server.

Please note: your webdemo root depends on the directory structure on your hosting server. If you upload the "demo" folder itself into your server, the root to your webdemo will be http://your_domain_name/demo. To avoid this and make the webdemo root http://your_domain_name/, please open the "demo" folder and upload the folder content.

Please do not upload the sources directory or any of the template source files to the hosting server.

Support where to get help, support and additional information

We hope this manual was useful for you and helped you to install, to edit the template and to resolve your issues.

Help and Support

Feel Free to contact our Support team for help. support@glorythemes.in


W3C validation

Both HTML markup and CSS styles used in our templates are semantically correct and valid. However some W3C errors still can take place. Making code 100% W3C valid eliminates the usage of modern webdemo technologies as CSS3 features and HTML5 markup. Our goal is to deliver rich user experience with high quality templates and sometimes we have to break some rules.