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 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.
  • Picture of Luckas luckas
    Tue, Oct 13, 2015, 4:10 PM
    I have a question:
    It will support Moodle v 2.9 (I have a problem with date selections with 2.9).
  • Picture of David Walser
    Mon, Oct 26, 2015, 10:07 PM
    Hi Eduardo. Did you get a chance to look at the CSS issue?
  • Picture of Eduardo Ramos
    Tue, Oct 27, 2015, 5:21 AM
    Hi Luckas, I intend to support 2.9. Can you describe the date selection problem in 2.9 and maybe create an issue in github?
  • Picture of Eduardo Ramos
    Tue, Oct 27, 2015, 5:29 AM
    Hi David,
    Slides CSS won't affect your rule.

    Your rule should overrid #main-content-box overflow, and it does for me in firefox. The only posssible problem is that #main-content-box overflow is defined twice in the code (to be fixed in next version).

    Could you inspect with your browser developer tools what rule is overriding your custom CSS if you don't use important?
  • Picture of Luckas luckas
    Wed, Oct 28, 2015, 5:17 AM
    Sí, passa al seleccionar una fecha.
    Aquí puedes ver una imagen:
  • Picture of David Walser
    Sat, Nov 7, 2015, 3:24 AM
    Hi Eduardo,

    Sorry for the delay. My co-worker is unavailable and I'm not a web developer, so I'm trying to figure out developers tools in Chrome myself. When I use what she added to config.php, in developer tools I can see the visible property she set and the CSS file listed as a separate source at the top of the Styles box. When I disable that, I don't see the CSS we added in the theme designer anywhere. If I go in the theme designer and add the !important;, then I also will see that as a separate section (different line number) and listed at the top of the Styles box. Looking at the Source file it does have it at the very bottom. It seems like it doesn't even use your custom CSS at all unless you have an !important in it. Of course, I'm trying to go back to check it again without the !important and it won't go back to how it was before (even with designer mode on and I purged caches). I remember my coworker running into this issue and I don't know how she got around it.
  • Picture of Eduardo Ramos
    Sun, Nov 8, 2015, 12:08 AM
    Hi David,
    Can you see any rules overriding your rule (when not putting !important) in the developer tools?

    If your site is available somewhere, I can help you trace the problem.
  • Picture of stefan weber
    Mon, Nov 9, 2015, 8:43 PM
    Hi David,

    not sure if that is your issue here, but i made the experience that the visual style manager does not always integrate custom CSS on the first take.

    I dont know the technical background for this, but I had to click OK at twice for most new CSS to work, and occasionally even re-loading the visual style manager site itself and then clicking on OK again
  • Picture of Niall Sheehan
    Fri, Nov 27, 2015, 8:16 PM
    Good morning, wondering about support for Moodle 3.0? While the theme works, the style customizer fails to load correctly, and because of the way that the theme saves custom CSS I have no idea how to make a few needed adjustments. smile

    If a new version that supports 3.0 is coming soon, we can likely just wait out the small issues, however if you think it may be a few weeks I will need to switch to something else. (not looking forward to that)

    Thank you for your great work on this project.
  • Picture of Gael TUROTTE
    Sat, Nov 28, 2015, 1:50 AM
    Hello, thanx for your work and sharing your knowledge.
    I want to change the colour of the marketing spot background, how can I do that ? Thanx in advance.
  • Picture of Eduardo Ramos
    Mon, Nov 30, 2015, 6:28 AM
    Hi Niall,
    A release for Moodle 2.9 and 3.0 should be available before the end of december.
  • Picture of Eduardo Ramos
    Mon, Nov 30, 2015, 6:36 AM
    Hi Gael,
    Currently no variable affects marketing spots background. I created an issue in github to fix this in next release =>
    Meanwhile, you can add custom CSS to do it at the bottom of the styles manager. Sample CSS to change marketing spots background to white and border to black

    #marketing .service {
    background: white;
    border-color: black;
1 2 3 4 5 6 7
Please login to post comments