Themes: FlexiBase

Maintained by Picture of Richard OelmannRichard Oelmann
This is the flexibase theme for Moodle. It is a Bootstrap3 theme, but uses flexbox to create the layouts, rather than the bootstrap grid. This theme depends upon Bas Brands' bootstrap theme for bootstrap3.
194 sites
13 fans
Current versions available: 5

About this theme

 * @package    theme_flexibase
 * @author     2015 Richard Oelmann
 * @copyright  2015 R. Oelmann
 * @parents    Bootstrap
 * @copyright  2014 Bas Brands
 * @credits    Essential - Julian Ridden, Gareth Barnard;
 *             Elegance - Julian Ridden, Danny Wahl;
 *             BCU - Jez H, Mike Grant
 *             Decaf - Paul Nichols
 *             Many others for non-specific but vital inspirations,
 *             suggestions and support
 * @license GNU GPL v3 or later

This is the flexibase theme for Moodle. It is a Bootstrap3 theme, but uses
flexbox to create the layouts, rather than the bootstrap grid.

This theme depends upon Bas Brands bootstrap theme for bootstrap3.

The aim of the theme is to provide an experimental format for making use of the
flexbox css layouts to provide greater options for administrators and to simplify
the layout code when considering rtl languages, editing on/off, use of side-bars
and docking as well as other factors which influence the layouts. The theme allows
administrators to choose layout structures for set page layout types (standard pre
and post, 2 pre, 2 post etc) from a settings page without the need to edit theme

The theme also makes use of less compilation on the fly through its settings pages.
It has a range of colour and branding options which affect the less variables, but
also makes use of a 'CustomLess' setting in the same manner as many themes have a
'CustomCSS' (as flexibase also does).

IMPORTANT NOTE: Older versions of IE do not support any version of the flexbox

  • IE9 and older: no support - Will appear in theme as if on a small screen (mobile first layout)
  • IE10: Legacy support, supported in theme - Should appear as designed
  • IE11+: Full support

I hope you find the theme useful. Please submit any comments and feedback via the forums or any bugs via the github issues page


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


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

Comments RSS


  • Picture of Bob Gilmore
    Thu, Jan 21, 2016, 3:26 PM
    Hey there.

    I'm on the same site as Derek Chirnside above. We're looking to create a clone of the flexibase theme so two different parts of our organisation can have completely different custom CSS. I cloned the theme, renamed the directory, language file and did a replace of flexibase with our new name for the clones files (1698 occurrences over 92 files). However when trying to use the new clone, it seems to work, but will not load anything from the settings files. Any ideas what may be going on?

    Thanks in advance! Bob Gilmore
  • Picture of Richard Oelmann
    Thu, Jan 21, 2016, 4:16 PM
    There are several variations of the name that need changing (in the language strings, but they affect what is displayed on a few places).
    obviously flexibase is the main one, but make sure you have also changed Flexibase and one inconsistency that I will change in the main version as soon as I can, where the setting link is called FlexiBase. Other than that, I will have to take a look as I have not previously tried to clone or create a child for this theme, but I can;t see any reason why it wouldnt work as expected.
  • Picture of Bob Gilmore
    Fri, Jan 22, 2016, 4:08 AM
    Thanks for the response! I was doing a case insensitive find and replace, but tried again with the different case combinations. It's a weird problem. Everything seems to be working. All the default settings are there, but nothing is being used from either the custom CSS or from the branding.
  • Picture of Jean-Roch Meurisse
    Tue, Feb 16, 2016, 3:34 PM
    Hi Richard,

    In a previous post you wrote
    "so one of the things I'm working on is extracting things like the awesomebar (already done) and marketing spots and carousel and a few other things into a kind of plugin within a plugin - they can literally be copied and dropped into another theme and a few lines of code added to layout files, etc to 'include' the features and the new theme can have that 'plugin' added to it. "

    How can I more precisely achieve that for the awesome bar?

    Thanks in advance
  • Picture of Richard Oelmann
    Tue, Feb 16, 2016, 4:05 PM
    Hi Jean-Roch,
    If you go to the github link (source code link) above and check out the STABLE_30 branch you will find a plugins folder inside the theme which contains awesomebar (and others) along with full instructions to add it to your other themes.
    I have extracted that from the latest version of the theme because of complexity of the theme and code-checking etc and have said I will extract these plugins to a separate repository, but have not yet had chance to do that, so the STABLE_30 github branch is currently the place to get those features from.
  • Picture of Jean-Roch Meurisse
    Wed, Feb 17, 2016, 3:30 PM
    Thanks Richard, it's working "awesome" wink

  • Picture of armita hashemi
    Wed, May 25, 2016, 2:15 AM
    Blocks page link problem
    Guide me
    The image is sent

  • Picture of armita hashemi
    Wed, May 25, 2016, 2:19 AM
  • Picture of Richard Oelmann
    Wed, May 25, 2016, 2:37 AM
    Hi Armita,
    blocksmodal.php L55-56
    $dashboardlink = $CFG->wwwroot.'/my/index.php';
    $messageslink = $CFG->wwwroot.'/message/index.php';
    Need the / before my and message
    Fixed in github - will push fix to plugins database asap
  • Picture of Jason Long
    Mon, Sep 12, 2016, 9:20 PM
    The latest upgrade to the bootstrap theme ( on August 2 for Moodle 3.1 seems to have broken your theme for us. Is this a known issue or is anyone else experiencing this? Any workarounds? Thanks!
  • Picture of Richard Oelmann
    Mon, Sep 12, 2016, 9:33 PM
    This is fixed on the gihub version, so you can download from there. I had hoped to push this onto the database by now but has been delayed for a variety of reasons, but will hope to do so in the very near future.
  • Picture of Richard Oelmann
    Mon, Sep 12, 2016, 9:37 PM
    The actual cause was a name change on a LESS folder in the bootstrap theme, so the fix is easy if you don't want to re-download the theme from github and can be found at
    Essentially, change L42 of less/flexibase.less from:
    @import "../../bootstrap/less/bootstrap3/bootstrap";
    @import "../../bootstrap/less/bootstrap3-3-6/bootstrap";
  • Picture of Jason Long
    Tue, Sep 13, 2016, 4:39 AM
    I spoke too soon: I edited the /mymoodlestuff/theme/flexibase/less/flexibase.less file on line 42 as above (which, yes, it was pointing to the wrong directory and making the change should point it correctly) but that did not fix the issue for us; does anything else need to be done? It seems like that's the only change in your github. Maybe it's caching something somewhere?
  • Picture of Richard Oelmann
    Tue, Sep 13, 2016, 4:53 AM
    Have you done a Purge All Caches? Site Admin > Development > Purge All Caches or http://yourmoodlesite/admin/purgecaches.php(often themes now don't need you to do that when changing settings, but this isn't a setting, its a code change, so you need to purge caches)
  • Picture of Jason Long
    Tue, Sep 13, 2016, 5:07 AM
    Ah, brilliant - thank you so much again! Sorry for a moodle admin goof-up on my part. After purging caches that did the trick and the theme (definitely) works again! Thanks again for such speedy replies!
Please login to post comments