Your Moodle version

Themes: UIkit

Maintained by Picture of Eduardo Ramos Eduardo Ramos
This theme is built from its core to work with UIkit (a framework similar to Twitter Bootstrap). It is designed to be easily customizable using an interactive visual styles manager.

UIkit Theme for Moodle

  • Features a very advanced and interactive visual styles customizer
  • 3 base themes to build your site appearance
  • 2 different page layouts: the original Grid based layout and a new one based on new CSS Flex features
  • Fully responsive design
  • Support of Google fonts
  • Integrates Fontawesome 4.3 for displaying most icons in Moodle
  • A renovated Slideshow with many animations and effects, marketing spots and social networks for your site frontpage like in the essential theme
  • Many other cool features such as: login page and navigation menu customization, possibility of showing only enrolled courses in combo lists and google analytics integration

It supports Moodle 2.5 to 2.8

License GNU GPL v3 or later

This theme is based on the UIkit CSS framework version 2.16.2 (

It is inspired by bootstrapbase theme and essential theme ( A big thank you to the creators of these two themes.

Many features and settings are based on the essential theme, while others are new for this theme, specially the visual style manager.

This theme includes an advanced Visual Style Customizer to change the appearance of the whole site with a few clicks. This customizer is inspired by the UIkit customizer (

Notice: these theme is NOT an official UIkit team release.


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


Picture of Eduardo Ramos
Eduardo Ramos (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Picture of Niall Sheehan
    Tue, Jul 7, 2015, 8:11 PM
    Love this theme, any chance we can incorporate the Category layout from the Essential theme? The Category Icon layout method is a nice and clean way of displaying the Categories in a Visual way.

    Makes for a nice clean Homepage.

  • Picture of Kristin Tierney
    Wed, Aug 19, 2015, 4:57 AM
    I have chosen "Never Show" on mobile devices for my frontpage slideshow, but it is still showing. Any ideas on how to get the slideshow to disable for mobile, but still show on desktop?
  • Picture of Eduardo Ramos
    Wed, Aug 19, 2015, 5:06 AM
    Hi Kristin,
    This must be a bug introduced when I changed the slideshow component in a recent release.
    It will be fixed for next version.

    Thanks for the report.
  • Picture of Morne Louw
    Sat, Aug 22, 2015, 4:08 PM

    I have local instance of Moodle running on my laptop and installed the UIKit theme.

    I am experiencing problems on the Visual Style Manager. The refresh button's icon does not stop spinning and the "Save and use styles", "Export LESS" and "Import LESS" buttons remain disabled, so I have no way to commit any changed.

    Do I have to activate this Visual Style Manager component somewhere?

    I have re-downloaded the Theme just few minutes ago thinking my previous download was perhaps corrupt, but that made no difference.

    I would really like to use the UIKit Theme.

  • Picture of Gavin Neale
    Sat, Aug 22, 2015, 4:24 PM
    Hi Morne, the UIKIT theme has issues with 2.9. It works fine on 2.8.
  • Picture of Morne Louw
    Sun, Aug 23, 2015, 3:40 PM
    Thank you for the replay Gavin I will install 2.8 to try it out. I also saw the "It supports Moodle 2.5 to 2.8" line now too ... duh to me!

    Do you think UIKit theme will be compatible with Moodle 3 in the future?
  • Picture of stefan weber
    Tue, Aug 25, 2015, 9:50 PM
    the font type in the action menus (the small menus that popup when you click on a "action" icon for a block or on the "edit" dropdown for a course activity) cannot be adjusted with the visual style manager. could you help me out how I can do this using custom CSS?
  • Picture of stefan weber
    Wed, Sep 9, 2015, 11:11 PM
    is there a way to enable docking in uikit theme?
  • Picture of Eduardo Ramos
    Thu, Sep 10, 2015, 2:01 AM
    the theme does not support docking at all.
  • Picture of stefan weber
    Thu, Sep 10, 2015, 10:22 PM
    hi eduardo,
    does it actively surpress docking somewhere? im currently trying to add docking to it, but i fail to get the dock icons to show up, even after including dock.js from bootstrap and enabling docking in the config.php. am i missing something?
  • Picture of stefan weber
    Fri, Sep 11, 2015, 9:16 PM
    hi eduardo

    one more issue - when text is set to italic (/em) in tinyMCE, text display color is red.

    i cannot find this setting anywhere in the visual style manager - maybe this is fixable with custom css or you can tell me where this setting is?
  • Picture of Eduardo Ramos
    Sat, Sep 12, 2015, 9:33 PM
    Hi stefan,
    I never tested docking with this theme, but I guess you can add the following to /themes/uikit/config.php and see what happens.

    $THEME->enable_dock = true;

    About emphasized text with red color, this is part of UIkit base styles, but you can override it with custom CSS similar to:

    em {
    color: inherit;
  • Picture of David Walser
    Sat, Oct 10, 2015, 1:21 AM
    Adding custom CSS does not work correctly. It seems to be injected in the wrong place and get overridden. If you put "important" in it, then it will work, but that should not be needed.
  • Picture of Eduardo Ramos
    Sat, Oct 10, 2015, 1:30 AM
    Can you show an example? Custom CSS is added to the bottom of the theme stylesheet.
  • Picture of David Walser
    Sat, Oct 10, 2015, 3:12 AM
    Thanks Eduardo.

    We are trying to fix the issue in the Quiz results display where it puts a horizontal scrollbar *in the page* on the table, rather than at the bottom of the whole page, which makes it practically unusable.

    My co-worker figured out that the appropriate CSS to add to fix this is:
    #main-content-box {overflow:visible}

    and we tried adding that through the web interface in the UIKit Visual Style Manager, but it did not take effect. Adding an important in our CSS made it work. My co-worker traced through the UIKit theme code and found in theme/uikit/config.php that the code injected from the web interface gets added at the end *before* slides.css. It is not apparent what in slides.css is overriding our CSS code, but regardless, our custom CSS code should be after everything.

    Loading moodle/theme/styles.php/uikit/1444417668/all in the browser let's us see the CSS that gets generated, so we can see that an adjustment needs to be made in config.php for our custom CSS to get properly added at the very end.
1 2 3 4 5 6 7
Please login to post comments