Moodle plugins directory: FlexiBase | Moodle.org
FlexiBase
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
-Derek
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
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.
.navbar-default .navbar-nav > li > a {color:#ffff00;}
Regards
Phil
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.
-Derek
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.
-Derek
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
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.
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.