Enlight is designed to be fully responsive layout,it will make your site have amazing look on different screen resolutions such as: Desktop,Tablets and Mobile phones.This is one of the best option to reach the customers who use smart devices.

shadowed image

Features

This template has everything that you need to build a learning management system with Moodle. Check out some of features that we have in this template. To know more about features of Enlight, continue reading our documentation and check our available components.


Responsive

Enlight is fully responsive and adapts to every screen size. We obsessively test it all so your content looks beautiful.

Color schemes

Choose one color that suits your theme brand or logo. This unique color will be reflected in buttons, menus and links etc.

CUSTOMIZABLE

With Enlight’s advanced theme options panel, you can customize just about any part of your site quickly and easily.

Demo Import

We provide demo content for everything you see in enlight demo. Import the complete demo content in just 1 click.Saves time.

RTL Support

Enlight supports right-to-left functionality and features for languages that work in a right-to-left. You can change your display to read right-to-left .

Free Updates

Enlight comes with continually free updates that offer incredible new features and improvements.



  •   HTML5 & CSS3
  •   Built with Bootstrap 4
  •   SCSS files included
  •   100% responsive design
  •   Cross browser compatibility
  •   RTL language support
  •   Homepage slider
  •   Homepage carousel
  •   Custom menus
  •   Different header styles
  •   Customizable footer widgets
  •   Social media icons in footer block
  •   Promo boxes on home page
  •   Predefined color schemes
  •   Predefined layouts for courses listing page
  •   Google fonts support
  •   One click DEMO data importer
  •   Background images included
  •   Well Documented
  •   Easy to customize
  •   Customizable login page
  •   Supports moodle front page items: list of courses, list of categories , announcements
  •   Customizable front page settings
  •   Customizable featured courses block in frontpage
  •   Student testimonials block in frontpage
  •   Our team/teachers block in frontpage
  •   Site preloader option
  •   Back to top option
  •   Supports Custom CSS
  •   Easy to use
  •   No coding knowledge required
  •   Very detailed online documentation
  •   Fully tested on multiple versions of moodle
  •   Frequent updates to support newer moodle versions
  •   Free future updates & new features
  •   Reliable support

Installation

You can install the theme in two ways: through Moodle, or via FTP. The theme_enlight.zip file is the Installable Moodle Theme and what you need to use to get the theme installed. Please see the following sections for each method. But first, you need to download the Enlight files from your LMSACE account. Navigate to your downloads page on LMSACE and find Enlight theme with version. Click the download button to get Enlight installable theme file. See below.

For Moodle version 3.2.X please download Enlight version 1.3

shadowed image

Install Theme via FTP client

  1.   Log into your server installation via FTP. You can use software such as Filezilla for this.
  2.   Unzip the theme_enlight.zip file and ONLY use the extracted Enlight theme folder.
  3.   Upload the extracted Enlight folder to the to the /theme folder of your Moodle installation.
  4.   Now login to your Moodle site as an admin and go to Site administration > Notifications, you will see a Notification for theme to be installed. Click "Upgrade Moodle Database now" button to continue for the installation procedure.
shadowed image shadowed image

Install Theme via Moodle

  1.   Login to your Moodle site as an admin and go to Site administration → Plugins → Install plugins
  2.   Upload the theme_enlight.zip file. You could be prompted to add extra details (in the ‘Show more‘ section), if your plugin is not automatically detected.
  3.   If your target directory is not writeable, you will see a warning message.
  4.   Check the plugin validation report to find if the theme has been successfully installed.


shadowed image

Activating The Theme

  1.   Log in as admin and go to  Site administration → Appearance → Themes → Theme Selector
  2.   Click on "Clear theme caches" button
  3.   Click on the "Select theme" button on the right of the current theme being
  4.   Scroll down to find Enlight
  5.   Click the "Use theme"  button next to Enlight
  6.   Moodle will tell you that the theme has been set as the default theme
  7.   Check your Moodle site by going to the Moodle site’s home page

shadowed image

Import Enlight Demo

  1.   Login to your Moodle site as an admin and go to Site administration → Appearance → Themes → Enlight
  2.   Select General tab → "Miscellaneous Items" section
  3.   Please check the import demo content checkbox to import the demo data that will make your installation look like our demo site.
  4.   It can take a few minutes to import everything. Please be patient and wait for it to complete. Once it loads, you will see a success message.

shadowed image

Update Theme

Download the latest theme version and install the theme plugin in your moodle. Same process as the theme installation.

  1.   Login to your Moodle site as an admin and go to Site administration → Plugins → Install plugins
  2.   Upload the theme_enlight.zip file. You could be prompted to add extra details (in the ‘Show more‘ section), if your plugin is not automatically detected.
  3.   If your target directory is not writeable, you will see a warning message.
  4.   Check the plugin validation report to find if the theme has been successfully installed.

Validation Failure

If the validation error message appears during installation or upgrading the theme, its because the theme is trying to install on the lower moodle version.


shadowed image

Upgradation Failure

If the upgradation error message appears during upgrading the theme, its because the theme new version is incorrect from the current installed version.


shadowed image

Multi Language

The multi-language content filter enables resources to be created in multiple languages. When turned on, it looks for tags which indicate that a text contains multiple languages. Then it selects and outputs the text in the user's language




Enabling the multi-language content filter

An admin can enable the multi-language content filter as follows:

  1. Go to Site administration > Plugins > Filters > Manage filters and in the dropdown menu for multi-language content select 'On'.
  2. If headings are to be shown in multiple languages too, select 'Content and headings' in the 'Apply to' column. Note that this may affect site performance.

shadowed image

How to use

Add lang="en" class="multilang" inside span tag with your content "your_content_in_English"
Add lang="de" class="multilang" inside span tag with your content "your_content_in_German_here"
Add lang="ar" class="multilang" inside span tag with your content "your_content_in_Arabic_here"

Note: Use the span tag as shown in the below image inside the text box.

shadowed image

Common problems

The multi-lang filter is not enabled. It can be enabled in 'Manage filters' in the Site administration'.

  1. Headings aren't displaying correctly - the multi-lang filter should be set to apply to content and headings in 'Manage filters' in the Site administration'.
  2. Extra characters between language span tags - editor might add or other tags, please review the html in source view.
  3. If the course setting is "force" some language, you won't be able to change the displayed language.
  4. Extra spaces in language span tag.
  5. The multi-lang filter does not work with the course short name! A course's short name is meant as a unique course identifier, so it does not use the multi-lang filter.

General

Color Schemes

Select the color scheme from the color pattern to change your site color.

  1.   Navigate to Site administration → Appearance → Themes → Enlight
  2.   Select "General" tab → "COLOR SCHEMES, HEADER STYLES, LOGO & MENUS" section
  3.   You can select your theme color from the color scheme in the Predefined color scheme option,
  4.   Click the ‘Save changes’ button at the bottom.

shadowed image

Header Styles

Enlight includes different Header styles to better fit the needs of your website(s).

  1.   Navigate to Site administration → Appearance → Themes → Enlight
  2.   Select "General" tab → "COLOR SCHEMES, HEADER STYLES, LOGO & MENUS" section
  3.   Locate the "Header Style" option and select your header style
  4.   Click the "Save changes" buttton to save the customized option.


shadowed image

Style1

The header style 1 has the logo on the left and the navigation menu on the right. The "style1" option has the Blue background for the header main.



shadowed image

Style2

The header style 2 has the logo on the left and the navigation menu on the right. The "style2" option has the White background for the header main.



shadowed image

You can upload your custom logo and sticky logo here.

  1.   Navigate to Site administration → Appearance → Themes → Enlight
  2.   Select "General" tab → "COLOR SCHEMES, HEADER STYLES, LOGO & MENUS" section
  3.   Locate the "Logo" option and upload your custom logo
  4.   Click the "Save changes" buttton to save the customized option.

shadowed image

Manage Primary Menus
  1.   Navigate to Site administration → Appearance → Themes → Enlight
  2.   Select "General" tab → "COLOR SCHEMES, HEADER STYLES, LOGO & MENUS" section
  3.   Locate the "Primary menu items" option and configure the primary menus


shadowed image

Courses mega menu
The Courses mega menu, which display in the "header menu". You can enable or disable the course mega menu in the option and also can change the position of the course mega menu in the header menu.
  1.   Navigate to Site administration → Appearance → Themes → Theme Settings
  2.   Locate the "Enable courses mega menu" option and check the "Enable" option to display in the header menu
  3.   Locate the "Courses mega menu position" option and you can change the position of the mega menu within the primary menu.
  4.   Click the "Save changes" buttton to save the customized option.

Enable Courses mega menu & Courses mega menu Position

shadowed image



Manage front page items

  1.   Navigate to Site administration → Appearance → Themes → Enlight
  2.   Select "General" tab → "Manage front page items" section

You can change the style of the frontpage setting by customization of the "Manage front page items".

  1.   Popular courses:-   Enable or Disable to display or hide by selecting the "Popular courses" options.
  2.   Generate popular courses based on:-
  3.   Number of enrolled courses displays all the courses enrolled by the user.
  4.   Custom courses:- select the custom courses and enter the course id in the next option "Popular courses id's" text box.
  5.   Enter the "Popular courses ID's" to display the courses on the "Popular Courses" block.
  6. shadowed image

  7.   Available courses display style Choose the block style to view as moodle default or Carousel for the "Available courses" style.
  8.   Course categories display style Choose the block style to view as moodle default or Carousel for the "Course categories" style.
  9.   My courses display style Choose the block style to view as moodle default or Carousel for the "My courses" style.
  10.   Site news display style Choose the block style to view as moodle default or enlight theme custom style for the "Site news" style.
  11.   Combo list display style Choose the block style to view as Collapsed or Expanded style for the "Combo list" style.
  12.   Click the "Save changes" buttton to save the customized option.

  13. shadowed image

MANAGE BACKGROUND IMAGES & COLOURS

  1.   Navigate to Site administration → Appearance → Themes → Enlight
  2.   Select "General" tab → "MANAGE BACKGROUND IMAGES & COLOURS" section

In "MANAGE BACKGROUND IMAGES & COLOURS"

  1.   Background image for popular courses block: To add the background image for the "Popular courses" block.
  2.   Background color options for popular courses block: You can select only color option or both color & background image option for the "poular courses" background
  3.   Background image for available courses block: To add the background image for the "Available courses" block.
  4.   Background color options for available courses block: You have "white" background , "default theme color background" and "theme color with background image" option to select background style for the "available courses" background
  5.   Background image for course categories block: To add the background image for the "Course categories" block.
  6.   Background color options for course categories block: You have "white" background , "default theme color background" and "theme color with background image" option to select background style for the "course categories block" background
  7.   Background image for enrolled courses block: To add the background image for the "Enrolled courses" block.
  8.   Background color options for enrolled courses block: You have "white" background , "default theme color background" and "theme color with background image" option to select background style for the "enrolled courses block" background
  9.   Background image for testimonial block: To add the background image for the "Testimonial" block.
  10.   Background color options for testimonial block: You have "default theme color background" and "theme color with background image" option to select background style for the "Testimonial block" background
  11.   Background color options for footer section: You have "default theme color background" and "theme color with background image" option to select background style for the "Footer block" background
  12.   Background image for footer section: To add the background image for the "Footer" block.
  13.   Click the "Save changes" buttton to save the customized option.

shadowed image

Miscellaneous items

  1.   Navigate to Site administration → Appearance → Themes → Enlight
  2.   Select "General" tab → "Miscellaneous items" section

In "Miscellaneous items"

  1.   Course category layout: To change the display format of the courses listing page choose the default or the custom layouts from the option.

  2. Course Layout-1

    shadowed image

    Course Layout-2

    shadowed image

  3.   Login page layout: Select the "default" style or the "enligth theme" style for the login page style.

  4. Login Page Style

    shadowed image

  5.   Enable preloader: This option allow you to show/hide preloader animation when the site pages are loading.
  6.   Preloader image: Use this option to change the pre-loader animation image (GIF)
  7.   Preloader background color:"Select your prefered color for the pre-loader background color.
  8.   Add back to top button: This option controls to enable a back to top button on your pages.
  9.   Custom SCSS: Use this field to provide SCSS or CSS code which will be injected at the end of the style sheet
  10.   Import demo content: To import the content for your theme as the demo site.
  11.   Click the "Save changes" buttton to save the customized option.

shadowed image

Homepage Slider

The homepage slider will allow you to promote important elements of your site; you have to upload at least one slide image to make the slideshow appear. Slide title, description and button are optional. Use larger images for best results, the slider will crop your images to fit the height and width of the slideshow. If you use too small images it won’t work correctly.

  1.   Navigate to Site administration → Appearance → Themes → Enlight
  2.   Select "Homepage slider" tab → "Slider options" section
  3.   The Homepage slider contains number of slider, Autoplay, pagination, pause time and Height options.
  4.   Number of slides: Use this option to select the number of slides. You can add upto maximum of 12 slides for the Homepage slider.
  5.   Show homepage slider: You can show/hide the Homepage slider by the Yes/No option.
  6.   Autoplay: Use this option to scroll slides automatically after page load by selecting yes in the autoplay option.
  7.   Show progress bar: The progress bar is the loading status of the each slider. You can show/hide the progress bar which appears on the top of the slider.
  8.   Pagination: You can set the pagination style with Dots, Thumbnails image, Dots with Thumbnail images, none for the slider.
  9.   Pause time: Use this option to set the pause or wait time between each slide change in the slideshow.
  10.   Slideshow height: You can set value for the slider height in the slideshow option.
  11.   Overlay opacity: Use this option to set value for the background overlay for the content in the slider.
  12.   Click the "Save changes" buttton to save the customized option.

shadowed image

Slideshow option:

  1.   Navigate to Site administration → Appearance → Themes → Enlight
  2.   Select "Homepage slider" tab → "Slide 1 options" section
  3.   Status: The slide has the option to show or hide the respective slideshow.
  4.   Image: Upload the image for the respective slide, add the recommended image size.
  5.   Title: Add the title and also you can set the title with the multi-lang using "" for the slide. eg: using "Slideshow Title" "عرض الشرائح العنوان "
  6.   Description: Add the description and also you can set the description with the multi-lang using "" for the slide. eg: using "Slideshow Description" "وصف عرض الشرائح "
  7.   Button 1 Text: Add the text to display in the link button for the slider
  8.   Button 1 URL: Add the URL link for the button in the slider.
  9.   Button 1 Target: Select the target whether the link should be open in the "Same/New" window.
  10.   Button 2 Text: Add the text to display in the link button for the slider
  11.   Button 2 URL: Add the URL link for the button in the slider.
  12.   Button 2 Target: Select the target whether the link should be open in the "Same/New" window.
  13.   Content width: Use this option to set the width for the content. This width will be calculated as a percentage of main grid width. Default value for this option is 50%.
  14.   Content style: You can choose the "Content overlay", "Full slide overlay", "Double Title", "Plain theme colored" from the content style option.
  15.   Content position: Use this option to set the positon of the slide content and button in the slide.
  16.   Content animation: Use this option to set the animation style for the slide content and button in the slide.
  17.   Slide animation: Use this option for the transition animation type of the slide, move to the next slide.
  18.   Click the "Save changes" button to save the customized option to apply for the slide.


shadowed image

Marketing Spots

News & Events block

  1.   Navigate to Site administration → Appearance → Themes → Enlight
  2.   Select "Marketing spot" tab → "MARKETING SPOT 1 (ABOUT US)" section
  3.   Acitvate block: Select the checkbox to enable the "MARKETING SPOT 1 (ABOUT US)"
  4.   Title: Add a new title for the "MARKETING SPOT 1 (ABOUT US)" block.
  5.   Description: Add a description for the "MARKETING SPOT 1 (ABOUT US)" block.
  6.   Media: Add a youtube iframe to display the video for the "MARKETING SPOT 1 (ABOUT US)" block.
  7.   Navigate to Site administration → Appearance → Themes → Enlight
  8.   Select "Marketing spot" tab → "MARKETING SPOT 2 ( LEARN ANYTIME, ANYWHERE )" section
  9.   Acitvate block: Select the checkbox to enable the "MARKETING SPOT 2 ( LEARN ANYTIME, ANYWHERE )"
  10.   Title: Add a new title for the "MARKETING SPOT 2 ( LEARN ANYTIME, ANYWHERE )" block.
  11.   Description: Add a description for the "MARKETING SPOT 2 ( LEARN ANYTIME, ANYWHERE )" block.
  12.   Button Text: Add a text for the link button in the "MARKETING SPOT 2 ( LEARN ANYTIME, ANYWHERE )" block.
  13.   Button Link: Add a URL link for the button in the "MARKETING SPOT 2 ( LEARN ANYTIME, ANYWHERE )" block.
  14.   Button Target: Select the option to open the link in the same window or new window for the "MARKETING SPOT 2 ( LEARN ANYTIME, ANYWHERE )" block.
  15.   Click the "Save changes" buttton to save the customized option.

shadowed image

After finishing Marketing spot block customization will be like this:

shadowed image

Category Images

You can represent the categories by adding the images for the category in the back-end setting. Follow the instruction to add the images for the categories.

  1.   Navigate to Site administration → Appearance → Themes → Enlight
  2.   Locate the "Category images" option and upload the image for the each categorie


shadowed image

Category block with images on the frontpage:

shadowed image

Our Team

You can show the team member in the our team block.

  1.   Navigate to Site administration → Appearance → Themes → Enlight
  2.   Locate the "Our team" option and "Our team general settings".
  3.   Activate this block Click the check box to enable the Our team block on the frontpage.
  4.   Title Add the Title for the Our team block.
  5.   Auto Play Select the Yes/No option to enable the auto play option for the Our team block.
  6.   Number of members Use this option to select the number of members to display for the Our team block.


  7.   Navigate to Site administration → Appearance → Themes → Enlight
  8.   Locate the "Our team" option and "MEMBER 1 DETAILS".
  9.   Name Add the name to display the member name in the member block.
  10.   Job Title Add the job title to display in the member block.
  11.   Profile URL Add the URL in the option to view member's profile.
  12.   Social Media Icon 1 Add the social icon in the option to follow the member in the social network. Usse font awesome icon eg: fa fa-facebook
  13.   Social Media Icon 1 URl Add the social network URl with the member's id. eg: https://www.facebook.com/yourfacebookid
  14.   Social Media Icon 2 Add the social icon in the option to follow the member in the social network. Usse font awesome icon eg: fa fa-twitter
  15.   Social Media Icon 2 URl Add the social network URl with the member's id. eg: https://www.twitter.com/yourtwitterid
  16.   Social Media Icon 3 Add the social icon in the option to follow the member in the social network. Usse font awesome icon eg: fa fa-google-plus
  17.   Social Media Icon 3 URl Add the social network URl with the member's id. eg: https://www.facebook.com/yourgoogle-plusid
  18.   Social Media Icon 4 Add the social icon in the option to follow the member in the social network. Usse font awesome icon eg: fa fa-pinterest
  19.   Social Media Icon 4 URl Add the social network URl with the member's id. eg: https://www.facebook.com/yourpinterestid
  20.   Description Add the description about the member in the our team block.
  21.   Upload member image Add the image to display the member of the image in the Our team block.


shadowed image

Our team block on the frontpage:

shadowed image

Testimonials

Getting a message to your target audience that is exactly what you want to say, exactly how you want to say it!

  1.   Navigate to Site administration → Appearance → Themes → Enlight
  2.   Locate the "Testimonials" option and "Testimonials general settings".
  3.   Testimonials displayYou have to Activate the testimonial block by enabling the checkbox, to display the testimonials on the frontpage.
  4.   Show pagination: Select the Yes/No option to enable the pagination for the testimonial block.
  5.   AutoplaySelect Yes/No option to enable the autoplay the textimonial block.
  6.   Number of testimonial: You can add upto 16 testimonials by selecting the value on the "Number of testimonials" select box.
  7.   Click the "Save changes" buttton to save the customized option.


shadowed image

Add the User name, User role, image and content for the testimonial blocks.

After adding the content on the testimonial block setting, you will get the result in the front page as the below image


shadowed image

  1.   Navigate to Site administration → Appearance → Themes → Enlight
  2.   Select "Footer" tab → "Footer Block 1" section
  3.   Activate block: Select the checkbox to activate the respective footer block.
  4.   Title: Enter a title for the respective block as plain text or lang:language_key for multi-lingual support. You can find the theme language keys here: /theme/enlight/lang/en/theme_enlight.php
  5.   Description: Enter the any text or html content inisde the Text editor block for the footer description or multi-lingual support enter lang:language_key.
  6.   Add image or the icon in the File picker, Title, Description in the textbox and the URL to refer to another page
  7.   Follow the same process to activate the other site featured block and Click "Save Changes"


shadowed image

Different appearance when the footer blocks are disable:

All blocks are Enabled:

shadowed image

Three blocks:

shadowed image

Two blocks:

shadowed image

Single block:

shadowed image