Themes: Klass

Maintained by LMSACE - E-learning development company , Moodle ExpertsLMSACE e-learning experts
Klass is fully responsive and coded with the latest techniques in HTML5 and CSS3,so it will work on all devices, all browsers, and it does it all seamlessly.Just download and make your e-learn website modern.
4613 sites
177 fans
Current versions available: 7

Klass Theme Version 3.7

A new Modern Responsive moodle theme ‘Klass’ has been released for your online e-learning websites. This is very very modern theme suitable for your school / college / university and other online educational websites. , This theme is fully responsive meaning your readers can enjoy viewing your site on a android / ios / all devices for a seamless experience. 

Support   Live demo   Report issue

Change log:

20/05/2019: v3.7

  • Upgraded to support Moodle version - 3.7

26/01/2019: v3.6.2

  • Upgraded to support Moodle version - 3.6.2

29/12/2018: v3.6.1

  • Upgraded to support Moodle version - 3.6.1

15/11/2018: v3.5.3

  • Fixed the login token security issue in the theme for the moodle ver-3.5 latest

17/05/2018: v3.5.2

  • Upgraded to support Moodle 3.5.2

12/05/2018: v3.5

  • Upgraded to support Moodle 3.5

29/12/2017: v3.4.0.4

  • fixed js file missing issues

14/11/2017: v3.4.0.3

  • fixed css issues

13/11/2017: v3.4.0.2

  • fixed css issues

10/11/2017: v3.4.0.1

  • Upgraded to support Moodle 3.4

17/05/2017: v1.5.1

  • Fixed installation issues
16/05/2017: v1.5

  • Upgraded to support Moodle 3.3
  • fixed css issues

24/04/2017: v1.4

  • Upgraded to support Moodle 3.2.2+

04/11/2016: v1.3

  • Upgraded to support Moodle 3.1.2+
  • Removed hard coded texts and added language strings for those

28/12/2015 : v1.2

  • Upgraded up to 3.0.1

03/08/2015 : v1.1

  • Added new logo for the theme
  • Theme settings provided for frontpage "Who we are" section
  • Theme settings provided to modify  links in "INFO" block on footer section
  • Theme settings provided to change social media links in "Get social" block on footer section
  • Theme settings provided to change copyright information on footer section

12/07/2015 : v1.0

  • Initial release


Screenshot #0
Screenshot #1
Screenshot #2
Screenshot #3
Screenshot #4


LMSACE - E-learning development company , Moodle Experts
LMSACE e-learning experts (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS


  • Picture of Skeeter Harris
    Thu, Mar 15, 2018, 11:04 PM
    Hello and Thank you for a very nice Theme for Moodle.

    I have two requests for the team on what I would like to know how to change.

    1. I would like to change the slider from 375 down to either 250 or 225 and I believe I need to change it in theme.scss but can't seem to find the right carousel id to make the change.
    2. How do I control the number of new courses that show up with the images on top top of the home page. We would like to limit it to the most recent 4 courses only.

    Thank you - Skeeter
  • Picture of nithy anand
    Fri, Mar 16, 2018, 1:30 PM
    Hi Harris,

    #1. To change the slider height, add this line at last to your theme.scss file to overwrite.

    @media (min-width: 768px) {
    .carousel-inner .carousel-item {
    min-height: 250px;

    Goto site administration -> Front page -> front page setting -> Maximum number of courses.

    You can set the number of courses to display on your front page.

  • Picture of Mario Zappavigna
    Fri, Mar 16, 2018, 3:23 PM
    @nithy anand do you mean homepage settings? It doesn't work.
  • Picture of Skeeter Harris
    Fri, Mar 16, 2018, 8:49 PM
    Hi Mr Anand,

    Thank you so much for your response and I will apply this change to the slider solution you provide. WIth regard to the Front Page and number of new courses, I have set it to 4 but that does not work it shows all my classes at this time.

    Any thoughts on this?

    Again thank you for the guidance on the slider.

    Best wishes,

  • Picture of nithy anand
    Mon, Mar 19, 2018, 1:32 PM
    Hi Harris and Mario,

    The frontpage setting is Moodle default setting, so it will work without any issue.
    Also, I have checked once again and its working fine.

    Please check once again the path I have informed.

    Goto site administration -> Front page -> front page setting -> Maximum number of courses.

    The value should be typed in the text box in the maximum number of courses.

    Do not select the value from the select box (dropdown), it is the Maximum category depth.

  • Picture of Arun Dakshinamurthy
    Wed, Mar 21, 2018, 8:13 PM
    Hi Nithyanandan,

    In an earlier post (to change slider height) you ask to add css codes to theme.scss. However, I only find a field called theme_klass | customcss under the General tab in Klass. Are they the same?
  • Picture of nithy anand
    Thu, Mar 22, 2018, 12:51 PM
    Hi Arun,

    Yes, you can add the css code in the custom css for the slider height.

  • Picture of Arun Dakshinamurthy
    Thu, Mar 22, 2018, 5:01 PM
    Hi Nithyanandan,

    I added the following code (from your previous post) to the custom css field, but there is no change in the slider height.

    @media (min-width: 768px) {
    .carousel-inner .carousel-item {
    min-height: 250px;

    Can you please let me know where I might be going wrong.
  • Picture of Skeeter Harris
    Thu, Mar 22, 2018, 8:52 PM
    Hi Nithy,

    So I went back to Administration/Front Page and found the setting for maximum number of course which was set to 100. Changed it to 4 but nothing has happened. Should I try to clear cache or something for this to take affect?

    Thanks - Skeeter
  • Picture of Skeeter Harris
    Thu, Mar 22, 2018, 8:53 PM
    Hello Arum and Nithyanadan,

    What I had to do for the CSS for the slider was to actually drop it into the custom CSS field within the Klass theme itself, once I did that it worked fine for me.

  • Picture of Arun Dakshinamurthy
    Thu, Mar 22, 2018, 9:41 PM
    Hi Skeeter. Thanks for responding.

    I think I did what you did too, but couldn't see any change. Meanwhile I have been playing around with the following code from Mary Evans:

    .carousel-inner .item {
    min-height: 385px;
    .carousel-overlay-content {
    width: 100%;
    height: 385px;

    I do see some difference, but not what I actually want. I need about 1/3 of the default slider height. When I fiddle around with the numbers above, I could get about 20% reduction in slider height, but not beyond that, no matter what numbers I changed in the above code. I also tried resizing my slides, but to no avail.
  • Picture of Skeeter Harris
    Sun, Mar 25, 2018, 11:36 PM
    Hi Nithyanandan,

    I don't have an answer yet but figure out what I think the disconnect is on the Number of Courses on the home page and what I and a few others have been asking.

    on the home page of the theme you have a section listed as NEW COURSES and then the section below is MY COURSES. What I am trying to change is the section at the top called NEW COURSES. If I follow your directions about going into front page and change number of courses that works but it changes the MY COURSES section and not the listing of new courses at the top of the theme on home page. You can see my installation here -

    So my question goes back to how to I change that section to only show me the 4 most recent new courses that have been created in the LMS?

    Thank you - Skeeter
  • Picture of nithy anand
    Mon, Mar 26, 2018, 2:16 PM
    Hi Arun,

    Here is the code to fix the slider height, add this code in the custom css.

    @media (min-width: 768px) {
    .carousel-inner .carousel-item {
    min-height: auto;
    max-height: 250px;
    .carousel-overlay-content {
    height: 250px;

  • Picture of Arun Dakshinamurthy
    Mon, Mar 26, 2018, 8:51 PM
    Hi Nithyanandan, this worked perfectly!!! Thanks so much.
  • Picture of Adriane Cônsolo
    Thu, Apr 5, 2018, 12:22 AM
    I have the same problem's L Defalco. The feature function inserted inside the activities and resource, the buttons "next" and "previous" doesn't appear.
Please login to post comments