Bootstrap elements and Essential child theme

Bootstrap elements and Essential child theme

by mart van der niet -
Number of replies: 29

Hi,

Very exciting additions here! But, as so often, a few problems:

  • works OK when using Essential theme
  • but I'm also using child themes derived from Essential (to display custommenu's for different kinds of courses). With these bootstrap does not work anymore:
    • no fa picker appears
    • toggling lables don't work anymore

       

My child theme are composed of a copy of Essential config.php with a slight difference:

$THEME->name = 'essential_MYTHEMENAME';

// The only thing you need to change in this file when copying it to
// create a new theme is the name above. You also need to change the name
// in version.php and lang/en/theme_essential.php as well.

$THEME->doctype = 'html5';
$THEME->yuicssmodules = array();
$THEME->parents = array('essential');

$THEME->sheets[] = 'moodle-rtl';
$THEME->sheets[] = 'essential-pix';
$THEME->sheets[] = 'settings';
$THEME->sheets[] = 'fontawesome';

if ((get_config('theme_essential', 'enablealternativethemecolors1')) ||
    (get_config('theme_essential', 'enablealternativethemecolors2')) ||
    (get_config('theme_essential', 'enablealternativethemecolors3'))
) {
    $THEME->sheets[] = 'alternative';
}

$THEME->sheets = array ('essential_MYTHEMENAME', 'custom');

 And a /lang/en/essential_MYTHEMENAME.php with the correct plugin name.

 

Anyone can give me a hint how to get bootstrapelements working here? I'd love to use the functionality, but I'd hate to lose my custommenu's

 

MN

Average of ratings: -
In reply to mart van der niet

Re: Bootstrap elements and Essential child theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

I have not tried this theme as a child theme, but if I were the config.php would look similar to the Clean theme config.php, because that is in effect a child theme.

What I am trying to say is you do not need to list all the stylessheets that are in the parent theme, since your child theme will inherit them. All that you need is the custom.css and possibly the settings.css written like this...

$THEME->sheets = array('custom', 'settings');

This way you can make small changes in the custom.css file if you need to.

Essential is a pretty theme to look at, but not so pretty to play with.  There is code in it I don't understand, and as such has moved away from the types of themes I am used to.

However, I do think that what I have advised here is the best way forward...but then I may be totally wrong!

Hope this helps?

Cheers

Mary

In reply to Mary Evans

Re: Bootstrap elements and Essential child theme

by mart van der niet -

HI,

 

Mary thanks for the advice, but alas, does not help....

In reply to Mary Evans

Re: Bootstrap elements and Essential child theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

What specific code do you not understand Mary?

In reply to Gareth J Barnard

Re: Bootstrap elements and Essential child theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Most of everything you have added since taking over from Julian actually.

In reply to Mary Evans

Re: Bootstrap elements and Essential child theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Since Julian, most of the code has been tidied up and bugs removed, so cleaner with less duplication.  The only complex thing added was RTL CSS serving for issue #249.  The rest is straightforward.

In reply to Gareth J Barnard

Re: Bootstrap elements and Essential child theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Well it might be to you but it certainly isn't to me as I have no idea what is happening in the config.php.

In reply to Mary Evans

Re: Bootstrap elements and Essential child theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

'essential.css' served by another mechanism (bootstrap + moodle + essential styles) - https://github.com/gjb2048/moodle-theme_essential/blob/master/layout/includes/header.php#L35, config.php then has sheets for additional styles who's attributes are populated by php (and others too) and exclude core sheets that cause issues with that - so styles included another way - all served here: https://github.com/gjb2048/moodle-theme_essential/blob/master/layout/includes/header.php#L36 like other themes, no parent theme - so bootstrap built in, docking only activated if core version support. rest is like other themes.

Separate 'essential.css' to make use of 'grunt-css-flip' to produce RTL version of styles - 'essential-rtl.css' - so greatly reduced need to have 'dir-rtl' selectors.  Thus reduced style footprint served when user is either LTR or RTL but not both at the same time = more mobile / tablet / low bandwidth environment friendly.  This is then gzip'ed over the network to save additional bandwidth.

Additionally, all svg files have been optimised to be smaller with 'grunt-svgmin'.

In reply to Gareth J Barnard

Re: Bootstrap elements and Essential child theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

To me this theme you call Essential is a good example of what happens to a simple design when taken over by a programmer, it become overly complicated, not simple at all, especially to a non-programmer. It's the same with AJAX/Javascript of which Moodle relies so much on and yet still maintains Moodle will wrk if JS is disabled. Have you tested Moodle with JS disabled?

And that's not even counting the reams and reams of CSS being churned out.

It makes me feel utterly depressed, and want to bring back Moodle 1.9.

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Bootstrap elements and Essential child theme

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

While appreciating the effort and hard work you put in Gareth, I have to agree with Mary.

Essential takes me FAR outside my comfort zone in supporting people using themes and I frequently feel unable to respond to queries about it - when we used to be able to advise people to make realtively simple changes in the php/css, now its less and grunt and this and that.

Having to install build tools such as grunt and recess is taking me back to my early days with Linux - having to recompile software from scratch and I haven't done that for years! I consider it a barrier to entry and discouraging for new theme develoeprs, or those who only want to make relatively small changes to their school theme, but keep finding the advice to change less files (which means recompiling) rather than relatively simple css changes.

To me less should always have been a developer tool and not something seen as the way for people to customise their theme - yes, make it available for those who want it, but explanations about change the less files should be for developers. The theme itself should be usable with the css only and the less files being removed from it - almost as a developer edition with the less and a standard edition for users with just the css.

R


Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Bootstrap elements and Essential child theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Mary and Richard,

That is so harsh!

Ok, the 'Design' of Essential has not changed, only its implementation.  You forget that I am also an Educator to, but, I do separate out the difference between the two.  Thus, Essential has lots of features that allow you to customise it without touching a single letter of code (including CSS).  Therefore I put a substantial amount of effort into making things easy for the user even when they are hard and time consuming for me as a programmer.  I understand the classroom situation and what users need.  However, to achieve that there needs to be more creative use of the technology available.  If you are simplifying the theme down to just CSS you are simplifying it for other programmers who do not have the skill set yet, you are not simplifying it for the users who would not go there anyway but would want a user interface solution.  That is what Essential provides.

If you want to be afraid - very afraid - then watch the first hour of the January 2015 developer's meeting.  Progression for improvements comes at a price and that price is the capability to adapt.  So, is that not 'learning new things' which is after all what Moodle is here to facilitate?

Kind regards,

Gareth

In reply to Gareth J Barnard

Re: Bootstrap elements and Essential child theme

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

I'm sorry you feel my comments were harsh Gareth - As I said I fully and wholeheartedly appreciate the effort you continue to put in to Essential and to the other themes and projects you work on. And especially the level of customisation settings within the theme - and the level of coding and programming needed to achieve that with a front end usability focus!

But those are my feelings about the changes over the last few years - a report of my personal feelings about the direction some themes have taken and the complexity now involved. It is not and was never intended to be a criticism of you or the work you and others put in.

But, my point stands I believe. Less and Grunt are developer tools and very useful ones. But a usable theme does not/should not need build tools installed on a local computer for users to begin to tweak it. That immediately, in one action, raises the entry bar for people with a side interest in how themes work.

There are, I think now, 3 levels of theme users -

  1. those who want to and can edit the theme to the way they want it purely through the front end settings pages
  2. those who want to make relatively minor changes that can be done through CSS/PHP but have neither the skills nor the time/inclination to install/learn to use build tools to compile a theme
  3. those who want to fully develop a theme, using all the advantages of grunt and compilers and so on
Not everyone who has to tinker with themes is, or wants to be, a developer/programmer or to have to learn to use compiling tools.

I guess Im seeing it something a bit like Linux packages - you can download the theme, even play with the core of it to some extent - but if you want to go hardcore, then you download and compile a separate source file, complete with all the requisite less etc for development purposes.

Again, that is not intended as any kind of criticism of you (harsh or otherwise) or what you are doing - but my take on how things have developed over the last couple of years and a possible way forward, taking into account user experiences with projects such as Linux and the way ordinary users just turn away as soon as you mention taking source code and compiling it.
That may change with pre-compilers built into Moodle - not the individual themes, but Moodle core - and the compiling done on the fly (and cached) so that the less becomes the key feature and not the css, but I don't think we are there yet and its the transition period that I think we need to ensure that the second group I mention above are not overlooked. To me they are the enthusiasts that have historically been the majority of the contributors on this forum in particular, but seem (IMO) to be dwindling as the entry level seems to be getting higher and higher. I don't have hard data to support that, just a view that i have come to over the past year and a feeling that this was my background and entry route into Moodle and theming and I would not like to see that group diminishing.
"Group 1" - the front end users are getting more and more tools to use in themes like Essential and that is a fantastic thing and a very desirable outcome
"Group 3" - are able to make use of the build tools and the support to engage with full theme development
But Group 2 - well, I have a strong feeling that if I was approaching this area now, I personally would not become engaged with it as things are now. That would be my loss as I have learned (and continue to learn) so much, but thats my feeling about the entry level we now have. Option 1 wasn't available then, Option 3 would have had me telling my head I didn't have the time or inclination to do it - buy in an external theme designer, which I can guarantee would have had us not using Moodle at all at that stage.

Again Gareth - this is NOT intended to be harsh to you or to anyone else - I can see all the logical steps that have take us to where we are, and the work from David, Bas, yourself and many others (as well as the long term, massive community support of Mary E, without whom this forum would not be the community it is!!!)
But I have my own feelings about the way we have gone and my own ideas about moving forward - and the notion of a standard version and developer version of complex themes is just one of them (which I have used on a couple of recent small projects for people) and I put it forward as a suggestion for consideration and nothing more.
In reply to Richard Oelmann

Re: Bootstrap elements and Essential child theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Richard,

Thank you for your kind and considered words.  An opinion is what it is, somebodies point of view, and that has to be respected.  But the words "Essential is a good example of what happens to a simple design when taken over by a programmer" are negative and portray something that is bad when in fact Essential has improved and is more stable now because I'm a 'software engineer'.  I'm not dissin Julian, he is an awesome evangelist but he did admit to knocking up Essential overnight (I think on a plane), and Essential is visionary.  Whilst he was maintaining the theme I did help out and provide patches for the benefit of all.  If I did not believe in Essential and what it stands for I would not have joined forces with David Bezemer and worked on it.

I agree with your 'groups'.  But the key point is, once you enter group 2, then you become a 'programmer'.  You are no longer a user, and therefore you begin training as a programmer.  I do appreciate that time is an issue, so do provide clear instructions in the files of what to do.  In the past, I have provided screen casts for 'recess'.  I'll see what happens with Shoehorn and see if I need to make a screen cast for using 'grunt'.  They are there to remove all of the 'fear' and save time by providing step by step instructions.  Thus so group 2 does not have to enter group 3 and learn the whole concept that created the material in the first place.

With 'Group 2', Essential can still be customised via the Custom CSS box.  The compiled CSS is there and you are not 'forced' to use the developer tools to make changes.

All of the code is there in Essential if you wanted to make a less developer orientated clone and publish it.  Its all 'open source' anyway smile.  You could publish, support and maintain it on Moodle.org as 'Mini-Essential' / 'Essential-Lite' or even a brand new name link 'Elope' keeping the 'E' prefix and 'detachment' concepts together.

From a users perspective, Essential has not changed, it was never intended I believe to support 'Group 2', but in fact 'Group 1' when the majority of themes only supported 'Group 2' and '3'.  I admit, that my other themes Shoelace and Shoehorn are not good at supporting 'Group 1' yet.

Kind regards,

Gareth

In reply to Gareth J Barnard

Re: Bootstrap elements and Essential child theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

In truth if Moodle HQ had embraced Bootstrap fully, and not just partially as we have it now, then making themes would be child's play, as most of the elements that make up Moodle would be using Bootstrap scaffolding and form structures, and all tables would be responsive, all buttons uniform, colours would be easily changed using  a built in variables LESS processor. 

But that is a dream, in reality, we have to go down the Essential road...but do we?

Do we really need all those extra functions in themes lib.php? Why can't these be part of Moodle too?

We don't really need to learn how to compile LESS although that is simplicity itself, it can be part of the theme, like More.

The includes too could be included like Easy does it using a renderer. 

Converting all the lib functions to produce html settings...like they are in Clean theme.

function theme_clean_get_html_for_settings(renderer_base $output, moodle_page $page) {

I know this is not making things easier but at least it would be a start in keeping things uniform.

Average of ratings: Useful (3)
In reply to Mary Evans

Re: Bootstrap elements and Essential child theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

"if Moodle HQ had embraced Bootstrap fully" then you'd still be using grunt -> https://github.com/twbs/bootstrap/blob/master/Gruntfile.js !!

In reality quite a few of the lib.php functions could be methods in the overridden core_renderer.php file and accessed via $OUTPUT and named with out the 'theme_xxxxx_' prefix.

In reply to mart van der niet

Re: Bootstrap elements and Essential child theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mart.

I've not made a child of Essential yet to test, but sounds like:

1. Bootstrap Javascript (jQuery version) not being loaded - anything on the console (browser development tools)?

2. Possibly 'essential.css' not being served.  Does it show up in the network tab (browser development tools)?

Cheers,

Gareth

In reply to Gareth J Barnard

Re: Bootstrap elements and Essential child theme

by mart van der niet -

Hi Gareth,

 

Essential.css seems to be loaded.

Jquery however:

ReferenceError: jQuery is not defined
 
jQuery(document).ready(function () {

How do I correct this?

Thanks in advance (love your theme!)

In reply to mart van der niet

Re: Bootstrap elements and Essential child theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mart,

Oooo, in that case, I think you need something like this: https://github.com/gjb2048/moodle-theme_essential/blob/master/lib.php#L1033-L1047 in your Child theme's lib.php.  The 'theme_essential' bits would normally change, but as the theme is there, should be ok.  Try it!  Ref: https://docs.moodle.org/dev/jQuery.

Kind regards,

Gareth

In reply to Gareth J Barnard

Re: Bootstrap elements and Essential child theme

by mart van der niet -

Hi Gareth,

 

Thanks for your effort, but I'm afraid this is not quite clear to me...

Could you clarify a bit what exactly I should be doing here?

Rgds,

 

Mart

In reply to mart van der niet

Re: Bootstrap elements and Essential child theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mart,

In essence the 'function theme_sometheme_page_init(moodle_page $page)' bit of: https://docs.moodle.org/dev/jQuery#Basic_jQuery_in_add-on_theme.  So you need something similar in your child theme.

Ok, if you were to publish the theme, then I may get a little time at the weekend to look at it.  But only after some Collapsed Topics work I need to do.

Kind regards,

Gareth


In reply to mart van der niet

Re: Bootstrap elements and Essential child theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Add this line to your child theme lib.php

<?php
// file: /theme/sometheme/lib.php
function theme_MYTHEMENAME_page_init(moodle_page $page) {
$page->requires->jquery();
}

In reply to Mary Evans

Re: Bootstrap elements and Essential child theme

by mart van der niet -

The child theme does not have a lib.php of it's own, it uses the lib.php from the mother theme essential. This already contains this function.

 

In reply to mart van der niet

Re: Bootstrap elements and Essential child theme

by Mike Grant -

Is your code on GitHub or anything? It's starting to sound like that might be the easiest way to browse everything and see if there are any standout issues with it.


Thanks

In reply to Mike Grant

Re: Bootstrap elements and Essential child theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mart,

Ok, I've discovered, it looks like all you need is this:

function theme_essential_msp_page_init(moodle_page $page) {
    require_once(dirname(__FILE__) . '/../essential/lib.php');
    theme_essential_page_init($page);
}

After working on this: https://moodle.org/mod/forum/discuss.php?d=279015 today.

Kind regards,

Gareth

In reply to Gareth J Barnard

Re: Bootstrap elements and Essential child theme

by mart van der niet -

Thanks Gareth, this works!

To summarize:

  • Copy the essential lib.php to you child theme
  • Add there:
    function theme_YOURCHILDNAMETHEME_page_init(moodle_page $page) {
        require_once(dirname(__FILE__) . '/../essential/lib.php');
        theme_essential_page_init($page);
    }

 

In reply to mart van der niet

Re: Bootstrap elements and Essential child theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Oh no!

Just create a new lib.php in the child theme with only:

function theme_essential_msp_page_init(moodle_page $page) {
    require_once(dirname(__FILE__) . '/../essential/lib.php');
    theme_essential_page_init($page);
}

in it.  I did say "all you need is this" smile