Themes: Klass

theme_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.
4429 sites
6k downloads
171 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


Screenshots

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

Contributors

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

Comments

  • Picture of Sukran Tuki
    Mon, Nov 7, 2016, 2:25 AM
    how in order to run automatically without scrolling slideshow??
    and how to display the logo FB, Pinterest, twitter, and google + on GET SOCIAL ???
  • Picture of Boris Vargas
    Thu, Nov 17, 2016, 11:31 PM
    Hello, can someone please tell me how to edit the ReadMore that appears in the list of courses (not in slide).
    Thank you very much.
  • Picture of Dave Hope
    Tue, Nov 22, 2016, 12:53 AM
    To change the "New courses" text to something else, browse to:
    \theme\klass\lang\en\theme_klass.php
    Then edit (around) line 106 to whatever you want. For example,
    $string['newcourses'] = 'New courses';
    to
    $string['newcourses'] = 'Available courses';
    Save your changes then browse to:
    Site Administration > Development > Purge all caches > Purge all caches
    Refresh your front page and it should be showing the new text.
    Alternatively, you can edit (around) line 21 of:
    \theme\klass\renderers\course_renderer.php
    From:
    <h2>'.$new_course.'</h2>
    to
    <h2>Available courses</h2>
  • Picture of Dave Hope
    Tue, Nov 22, 2016, 1:09 AM
    Changing both slider and course "ReadMore" buttons together
    To change the "ReadMore" text to something else for both the slider and course buttons, browse to:
    \theme\klass\lang\en\theme_klass.php
    Then edit (around) line 205 to whatever you want. For example,
    $string['readmore'] = "ReadMore";
    to
    $string['readmore'] = "View course";
    Save your changes then browse to:
    Site Administration > Development > Purge all caches > Purge all caches
    Refresh your front page and it should be showing the new text.

    Changing just the courses "ReadMore" buttons
    To change the "ReadMore" text to something else for just the course buttons, browse to:
    \theme\klass\renderers\course_renderer.php
    Then edit (around) line 81 to whatever you want. For example,
    '.get_string("readmore","theme_klass").'
    to
    View Course 
    Save your changes then browse to:
    Site Administration > Development > Purge all caches > Purge all caches
    Refresh your front page and it should be showing the new text.

    Changing just the slider "ReadMore" buttons
    To change the "ReadMore" text to something else for just the slider buttons, browse to:
    \theme\klass\layout\includes\slideshow.php
    Then edit (around) line 856 to whatever you want. For example,
    <?php echo get_string('readmore','theme_klass'); ?>  
    to
    View more information 
  • Picture of Dave Hope
    Wed, Nov 23, 2016, 10:23 PM

    Automate the slider

    To automatically start the slider, browse to:

    \theme\klass\layout\includes\footer.php

    Then add the following code at the end of the file (after all other code):

     <script>
    $(function() {
    $('.carousel').carousel({
    interval: 5000
    });
    });
    </script>

    Save your changes then refresh your front page and the slider should automatically start.


    If you want a longer or shorter pause between slides, simply change the 5000 (5 seconds) to another value:
    1000 = 1 second
    2000 = 2 seconds
    3000 = 3 seconds
    ...
    20000 = 20 seconds



    Automate the slider with pause on hover

    Do the same as above but use the following code:

     <script>
    $(function() {
    $('.carousel').carousel({
    interval: 5000
    });
    });

    $(function() {
    var interval = setInterval( slideSwitch, 5000 );
    $('.carousel').hover(function() {
    clearInterval(interval);
    }, function() {
    interval = setInterval( slideSwitch, 5000 );
    });
    });
    </script>
  • Picture of Joao galvao
    Thu, Dec 8, 2016, 12:56 AM
    What is the detailed way to access these files and make the suggested changes? \theme\klass\layout\includes\footer.php
  • Picture of Dave Hope
    Thu, Dec 15, 2016, 12:30 AM

    @Joao, you need to browse to this file as you would browse to any other file. Let's assume you're using Windows and it's installed locally, you would browse to C:\Moodle\theme\klass\layout\includes\footer.php.

    You then need to use a text editor to edit the file. I use Notepad++ but there are loads out there.

    Text editors [Google]

  • Picture of jadir jadir
    Wed, Dec 28, 2016, 10:40 PM
    This code does not work to start the slideshow automatically, it disables the side scroll bar of the site, if you can show the correct code, thanks.
  • Picture of jadir jadir
    Wed, Dec 28, 2016, 10:41 PM
    This code does not work to start the slideshow automatically, it disables the side scroll bar of the site, if you can show the correct code, thanks.
  • Picture of jadir jadir
    Wed, Dec 28, 2016, 10:43 PM
    This code does not work
  • Picture of Priscila Nunes
    Tue, Jan 3, 2017, 2:47 AM
    Is it possible to change the texts in English to Portuguese in this theme, even manually?
  • Frankie's the name, Moodle's my game!
    Tue, Feb 7, 2017, 3:22 PM
    Jadir. I have tried Dave Hope's "slider carousel with pause on mouseover" code. It works beautifully on both Chrome and Firefox for me. If you can furnish me with more details (what web browser are you using? did you edit the footer.php file correctly? etc.), I may be able to help you.
  • Frankie's the name, Moodle's my game!
    Tue, Feb 7, 2017, 3:30 PM
    Pat Webber (Sat, Nov 14, 2015, 12:53 AM) asked, "I am using the Klass theme and this is adding all new courses to the front page. I only want to show enrolled courses. I have tried to select this using front page settings in Moodle but this has not worked. Would you have any other suggestions that could help to resolve this." I have shared the answer to her question here: https://moodle.org/mod/forum/discuss.php?d=323160 (Moodle.org's theme forum). Enjoy.
  • Picture of Jessi Auslander
    Tue, Feb 14, 2017, 8:21 AM
    Hello,
    I've been fussing with my site all day trying to adapt to having our module in 2 languages. however, whatever I do, I cannot get the course titles to change while using this theme on the front page. Has anyone been able to fix this? Some people suggested changing some code but it looks like that was fixed in the last update. Any ideas on how to fix it? Please help
  • Picture of fred hunter
    Wed, Feb 15, 2017, 1:46 AM
    Hi,

    I recently downloaded this theme to use on my own moodle test site. Whenever I try to change the logo in the header, the graphic comes out either squashed vertically or stretched horizontally. I've tried editing the graphic to fit the suggested dimensions, but the same issue occurs. Any help? Also, how do I change the type face for the headings, it seems to be in a serif font like TNR, but I would prefer Arial, also the vertical spacing between the content headings seems to be quite close together, how do I adjust this? I've reverted back to my previous theme for now
Please login to post comments