Themes: FlexiBase

theme_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.
172 sites
88 downloads
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    http://www.gnu.org/copyleft/gpl.html 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
files.

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
format.

  • 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
moodle.org forums or any bugs via the github issues page
https://github.com/roelmann/theme_flexibase/issues

Screenshots

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

Contributors

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

Comments RSS

Comments

  • Picture of Peter James
    Mon, Oct 5, 2015, 4:39 PM
    Thank you Richard for that speedy update smile
  • Picture of Philip Morris
    Fri, Nov 27, 2015, 11:45 PM
    HI I really like your theme, we are presently using Moodle2.7 with the formal white theme which works really well for us. Before I commit to upgrading Moodle I want to be sure there is a theme I am able to work with. Is it possible to change the colour of the menu text? Also are there plans to upgrade the theme for use with Moodle 3x I hope so this is a really flexible and great looking theme, Regards Phil
  • Just wondering . . .
    Sat, Nov 28, 2015, 6:28 AM
    I'm also curious if a 3x version is planned. Or does it work with 3x now anyway?

    -Derek
  • Picture of Richard Oelmann
    Sat, Nov 28, 2015, 7:07 AM
    I have it running on a 3.0 site with no significant issues, but I'm still working on a version that I want to release as the 3.0 version - It's available on my github as a work in progress.
    It will incorporate some of the work I did for Chris Kenniburg for his recent theme developments (course images, course grades). But the main bit Im working on is probably not a front end obvious improvement but something I've been looking at for a while and comes from a request you made yourself quite a long time ago Derek - that request related to being able to move awesomebar into another theme, 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. Perhaps more of a theme developer toy than a usability feature for admins and front end users, but I hope some people will find it useful smile
  • Picture of Richard Oelmann
    Sat, Nov 28, 2015, 7:12 AM
    Philip, There's not a setting specifically for the menu text, but there are setting boxes for both customcss and custom LESS, so provided you know the css selector you want to target you can change anything.
    I have gone down the road of creating settings for absolutely everything in the past (see the original flexi_ii themes for earlier 2.x ) and found it complex to work with and very difficult to maintain going forward, so this theme is trying to balance between the ability for the admin to customise - including things that are not customisable in any other theme that Im aware of, such as the layout type - and keeping the settings pages managable and usable. That said, if there was sufficient demand for a particular setting I would consider it.
  • Picture of Philip Morris
    Mon, Nov 30, 2015, 8:10 PM
    Hi Richard, thanks for your reply, I am not expirienced with CSS but I have installed FireBug and have looked for the line of code that defines the text colour but do not see it. the container I need to change the text colour on is is this set at lower level than the page I am trying to alter?
  • Picture of Richard Oelmann
    Mon, Nov 30, 2015, 10:00 PM
    Phillip, It should be something like
    .navbar-default .navbar-nav > li > a {color:#ffff00;}
  • Picture of Philip Morris
    Mon, Nov 30, 2015, 10:30 PM
    Thank you Richard the works a treat.
    Regards
    Phil
  • Just wondering . . .
    Thu, Dec 17, 2015, 10:41 PM
    Not a review as such, just part one of some thoughts.
    Here: https://moodle.org/mod/forum/discuss.php?d=324920
    Flexibase has a lot going for it. I really like it.
    AwesomeBar, theme looks really nice and oddles of settings where you want to change stuff, no gotchas yet that I could see. smile

    -Derek
  • Just wondering . . .
    Tue, Dec 22, 2015, 1:45 PM
    OK, I'm baffled.
    This is your course home page Richard: http://roelmann.no-ip.org/moodlemaster/course/view.php?id=7
    I presume the banner swirly thing is different to the home page here: http://roelmann.no-ip.org/moodlemaster/

    When I try to replicate this, I get something different.
    *What exactly are the sizes of these images?
    *What is the CSS banner height you have on the home page?
    *How exactly do you get a different banner image in a course home page?

    Looks good. smile

    -Derek
  • Picture of Richard Oelmann
    Tue, Dec 22, 2015, 4:53 PM
    Yes they are different images Derek - I'd forgotten that I also have a blue swirl in the main background when i added that to the course banner. I've just changed it to a different colour on my own site smile The images I used are 1200x100px. The actual height though is set by the flexibase > course images setting - Course Header Image Height.
    To add course header images, add it as a course summary file in the course settings page. If you want a different image for the course tile on the front page, then you can add two images into the course summary files (but you would need to set the site wide setting for the number of course summary files permitted in Admin > Appearance > Courses which normally defaults to only allow a single file ). The flexibase course images settings page also allows you to select between having a header background banner like I do, or using the image as a separate image just below the header, which is how we have them in work on our VLE - I prefer the header background, but added that option in for people to choose.

    The header banner on the front page is actually customcss as I used the main header logo setting for the logo itself, and then added customcss to that to create the background. The header background then is controlled by the height of the content of the header region itself as it is set to cover 100% 100%, although the image itself is 1300x145px.
    The customcss I used to style the logo and frontpage header background on my own site is below. So its actually the a.logo height (150px - although you may notice that I put a negative top margin on it as I wanted to kick the logo up onto the top branding bar to give it a look of dropping down) that is controlling the whole header height and therefore the background swirl too

    a.logo {
    background-color:#292562;
    border:4px ridge #faf6df;
    border-radius:15px;
    height:150px;
    margin-top:-45px;
    }
    #page-site-index header {
    background: #fff url('http://roelmann.no-ip.org/moodlemaster/pluginfile.php/20/mod_resource/content/1/overlay2.png') 100% 100%;
    background-size:cover;
    }

    There is more styling in my customcss, like giving some of the blocks their white background back having set the site background colour, because I needed some minor differences for my own branding compared to the client that flexibase was originally designed for (and who kindly allowed me to release it to the community, so long as it was without their branding)

    Hope that helps
    R
  • Picture of Richard Oelmann
    Tue, Dec 22, 2015, 8:03 PM
    Just for info Derek - the version on my own site does not yet have the fixes applied. I will be maintaining it with the published database version, not my master development version.
  • Just wondering . . .
    Tue, Jan 19, 2016, 1:07 PM
    A few questions:
    Is it easy to include Google fonts in this theme?
    How does the colour of the H1-H3 get derived from a colour set in the theme? I'm assuming the best way to tinker with these it to just hard code in the CSS. I'd like to change everything: size font and colour.

    I'm experimenting with a slightly more bland look.
    Simply changing the main colour to be light seemed to create mayhem. I got lots of light where I didn't expect it.

    *I've removed everything in the block headers, the image, colour and borders. Replaced with a simple flat green.
    *I've set both the menu bars to be "inverted" in colour. Where does the inverted colour come from? Is it one of the grey's?
    Where does the blue in the breadcrumbs come from?

    Hoping these are simple. smile
  • Picture of Richard Oelmann
    Tue, Jan 19, 2016, 5:21 PM
    1. Google fonts - they are not included by default or as a setting, but the provided by google when you select a font could be added to the site additional html and then the font-family included in the customcss
    2. H1-H3 colours, size etc are all set by LESS https://github.com/roelmann/moodle-theme_flexibase/blob/master/less/variables.less#L93-L123 They can be overridden either in customcss or customless as required. There are one or two small overrides eg. .block .h2 is set as @white as the .block header background is @brand-primary and so is the default heading colour.
    3. Rather than just changing the @brand-primary on the main branding page, you may want to experiment with changing the @brand-xxxxx-light/lighter/lightest on the Additional Less settings page as this is where most of the lighter colours will come from (you could even make them darker rather than lighter if that is preferable for your colour scheme). As a side effect of teh way the defaults are set, it does mean that some of these 'lighter' colours end up washed out as practically being white and do need to be adjusted to allow some contrast.
    "Additional for the theme - These are the secondary colours, usually lighter/darker forms of the primary colours - these should proably only be adjusted where contrast levels need changing because of choice of brand colours. These settings have been left as a text field so that LESS rules can be added (as per the default) but they can also set an html colour name, hex value or rgb/rgba colour value."
    I'll take a look at improving the documentation for this, but I feel there is probably enough flexibility in the existing settings to do what you want, although the instructions/docs could certainly be improved.
    4. Navbar comes from
    https://github.com/roelmann/moodle-theme_flexibase/blob/master/less/variables.less#L397-L456
    with the inverse navbar colours from
    https://github.com/roelmann/moodle-theme_flexibase/blob/master/less/variables.less#L433-L456
    Again, these can all be overriden in customless setting on the Additional Less page (or as individual selectors in customcss).
    5. Breadcumb
    https://github.com/roelmann/moodle-theme_flexibase/blob/master/less/variables.less#L827-L840
    Hmm - not sure why that uses @brand-info-light, I thought it was @brand-primary-light, may change that, I'll see. Not exactly a bug, but possibly an inconsistency.

    Just for reference purposes and for ease of copying/editing if anyone is using the customless setting, the theme readmes folder does also contain a text version of the theme less variables, as well as the original base css and flexbox layout css.
  • Picture of Richard Oelmann
    Tue, Jan 19, 2016, 5:22 PM
    * 'but the link code provided by google'
Please login to post comments