Preview - Beginning of a Boost Inspired theme

Preview - Beginning of a Boost Inspired theme

by Chris Kenniburg -
Number of replies: 28
Picture of Particularly helpful Moodlers Picture of Plugin developers

So I am prepping Dearborn Public Schools for Moodle 3.2 and we are very keen on the layout and enhancements of the Boost theme that is coming.  In the past we released evolve-D and Pioneer themes and learned a lot about what our teachers like and dislike in terms of style, functionality, and usability.  

We are building a brand new theme/possibly child theme based off Boost that will incorporate the best of what we learned in the past.  

  • Simplified, custom Site Homepage for logged in users (evolve-D)
  • Full screen image with login box for logged out users (evolve-D)
  • Custom Course Images for each course using Course Summary Files (Pioneer)
  • Netflix style custom Site Homepage based off featured course slider developed in Pioneer. Multiple sliders with custom or automatic course selections also developed in Pioneer such as featured, my courses, and recommended courses based on matching profile and course tags.
  • Marketing Spots, Custom Textbox, Netflix style sliders for custom Site Homepage
  • Customizable Icon Links using in both Pioneer and evolve-D
  • Possibly My Courses and This Course activity Drop downs
  • Custom color pickers for all major elements of the page
A VERY simplified theme admin area to help users get a great looking site with minimal effort.  This was lost with Pioneer as there were too many pages and settings.  The new theme will help take the guess work out and enable a standard look and feel out of the box with not a lot of tinkering for the Moodle admin to get started.


Here's a video of our initial development from yesterday where we modified the core renderer to grab the course summary image and use it within the core renderer for the full header.  


Attachment Course  Test course  S.jpg
Average of ratings: Useful (2)
In reply to Chris Kenniburg

Re: Preview - Beginning of a Boost Inspired theme

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

It's looking good Chris!

Really looking forward to seeing where you are able to take this - and helping where I can!


R

In reply to Richard Oelmann

Re: Preview - Beginning of a Boost Inspired theme

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks Richard!  Without your contributions it wouldn't be possible to do some of the things our teachers rely on!

In reply to Richard Oelmann

Re: Preview - Beginning of a Boost Inspired theme

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I might need some help in figuring out how I might be able to display this on the site homepage:

https://github.com/kennibc/moodle-theme_pioneer/blob/master/layout/includes/fp_iconnav.php

That is the icon navigation which uses fontawesome.  Not quite sure how to include this stuff with the new mustache framework.


Any help is much appreciated.  

In reply to Chris Kenniburg

Re: Preview - Beginning of a Boost Inspired theme

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

Hi Chris,

I would suspect that depending on where this code goes in relation to your site homepage, you should be able to convert this into an fp_iconnav.mustache template, in much the same way that boost/templates/header.mustache is made?

Then add it to your columns2.mustache template like so...

https://github.com/lazydaisy/moodle/blob/master/theme/boost/templates/columns2.mustache#L61

or like this example here...where the nav_drawer is added?

https://github.com/lazydaisy/moodle/blob/master/theme/boost/templates/columns2.mustache#L91

Mary

In reply to Mary Evans

Re: Preview - Beginning of a Boost Inspired theme

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I guess I am at a loss for how to use the new templating.  I don't really understand how a variable goes from the theme admin page into the theme.  

Is there an example of how a image or text string can be returned and displayed in the theme?  It would be nice if Boost shipped with the ability to upload a background image and then set the repeat etc, like you could in More.  That theme helped me figure a bunch of stuff out using PHP to make things happen.  


In reply to Chris Kenniburg

Re: Preview - Beginning of a Boost Inspired theme

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

Help is at hand...

https://docs.moodle.org/dev/Templates

Where you will find this section which I am sure will help you understand better...

https://docs.moodle.org/dev/Templates#What_other_helpers_can_I_use.3F

Cheers

Mary

In reply to Mary Evans

Re: Preview - Beginning of a Boost Inspired theme

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks Mary.  over the course of building my previous two themes I taught my self php and learned about Moodle's theme building.  

However, this seems a bit overwhelming to be honest.  

I'll take a deeper look on Monday but this seems pretty complex.  I'm hopeful as others explore this there will be more examples and maybe tutorials that might walk you through some practical stuff like adding a text box, an image, a color picker, and other elements to the theme settings and then call that in a template.

I'm just not sure how to do it yet.  Once I get it figured out I am sure it will be great.

Thanks for your help.  That's a good starting point.  I just don't know what I'm doing yet with it.  

Average of ratings: Useful (2)
In reply to Chris Kenniburg

Re: Preview - Beginning of a Boost Inspired theme

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

Colour pickers are causing me a major problem right now Chris. Although that shouldn't be anything to do with templates - they should go straight from settings>lib>scss.

I've added the settings and edited the config.php to

$THEME->prescsscallback = 'theme_stagetwo_get_pre_scss';

 and have copied (and edited) the lib.php file for my child theme to reflect the changes, but they are ignored.

However, if I make those same changes to the boost/lib.php (with the settings in my stagetwo theme) then they are picked up.

So, it seems to me, that there is a bug such that even the child theme (theme_stagetwo)  is picking up the parent theme_boost_get_pre_scss instead of the theme_stagetwo_get_pre_scss.

Code can be seen at https://github.com/roelmann/moodle-theme_stagetwo if anyone can take a quick look to make sure I haven't done (or missed) something obvious.

Going to try a few more things and then I'll probably file it as a bug in the tracker, but might have to wait until tomorrow/Tuesday before I get chance to look at it again now.

In an earlier version of boost and my child theme booster, this worked fine as:

$THEME->scssvariablescallback = 'theme_booster_get_scss_variables';

but the newer prescsscallback doesn't appear to function in a child theme.

R

In reply to Richard Oelmann

Re: Preview - Beginning of a Boost Inspired theme

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

Hi Richard,

I am just checkout your StageTwo theme out now, as I have had similar problems with my Moorcandy theme where it was LESS and not the SCSS as themes are now, but I seem to recall the order in which these settings are added to the config.php is important.

Also I am trying to understand why you have brand-primary duplicated in the following...

surely one will cancel out the other...or is that your intention?


    $configurable = [
    // Config key => variableName, ....
        'brandcolor' => 'brand-primary',
        'brandprimary' => 'brand-primary',
        'brandsuccess' => 'brand-success',
        'brandinfo' => 'brand-info',
        'brandwarning' => 'brand-warning',
        'branddanger' => 'brand-danger',
        'brandgraybase' => 'gray-base',

    ];

Cheers

Mary

In reply to Mary Evans

Re: Preview - Beginning of a Boost Inspired theme

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

The 2 brand-primary settings are intentional (for now) Mary.

The one I want to use is brandprimary and doesn't work (along with the others), but the brandcolor is the original and does. So 'intentional' for now, but only for testing and trying to get it to work and understand what is happening, and will get rid of one of them as soon as I can resolve the issue smile

I'll check the order in config.php and whether it has any effect when I get home - but not sure why that would cause it to still pick up the function from boost rather than its own (with the exception that the github version has that line commented out of config from my testing anyway smile )


R

In reply to Richard Oelmann

Re: Preview - Beginning of a Boost Inspired theme

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

Hi,

In that case remove the 'brandprimary' = 'brand-primary'

as all you need is the brand-color which is in effect brand-primary

That's how my Morecandy sidewayHeaderColor works, it replaces brand-primary.

SOME SMALL CODING ERRORS

I found something else that could be causing things not to work as expected:

THEME/STAGETWO/LIB.PHP
BRACKETS MISSING HERE: [ ]


function theme_boost_get_pre_scss($theme) {
    global $CFG;

    $scss = '';
    $configurable = [
        // Config key => [variableName, ...].
        'brandcolor' => ['brand-primary'],
        'brandprimary' => ['brand-primary'],
        'brandsuccess' => ['brand-success'],
        'brandinfo' => ['brand-info'],
        'brandwarning' => ['brand-warning'],
        'branddanger' => ['brand-danger'],
        'brandgraybase' => ['gray-base'],

    ];
BRACES MISSING HERE... { }
    // Prepend variables first.
    foreach ($configurable as $configkey => $targets) {
        $value = $theme->settings->{$configkey};
        if (empty($value)) {
            continue;
        }
        array_map(function($target) use (&$scss, $value) {
            $scss .= '$' . $target . ': ' . $value . ";\n";
        }, (array) $targets);
    }

In reply to Mary Evans

Re: Preview - Beginning of a Boost Inspired theme

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

Thanks for the help Mary - unfortunately it doesn't work.

1. re order of setting in config.php - matched it to the order in Boost, no difference

2. braces and square brackets - have tried it both ways. Originally did it with them all as per Damyon's lib.php in Boost, when that didn't work tried it without as per most examples of setting arrays in the net and as per every other example of $theme->settings->$variablename; in Moodle.

3. commenting out the duplicate brand-primary from my testing - yes, stops the brandcolor being overridden by the brandprimary, but that was part of my testing anyway to make sure my new settings were working, so when it does work (ie when those variables are added to boost lib.php) then it works as expected.

4. MoreCandy - extends bootstrapbase rather than boost doesn't it? I have no issues with settings on bootstrap2 or boostrap3 themes (bootstrapbase/bootstrap as parent or standalone), or with using LESS compilation on the fly so that settings override LESS variables. That all works and I've done it in several themes, especially flexibase which was one of the first 3rd party themes that used LESS-on-the-fly for settings. The issue is with boost based themes only.


What I have found -

theme_boost_get_pre_scss is getting called by the child theme - I'm not sure about the other lib.php functions as I haven't changed those, will need to test them separately.

If I add the variables into boost/lib.php (with or without the square brackets, it doesn't matter - and with or without the braces around the variable, that has no effect either), then it works. If I revert boost back to the way it should be and add the variables to my own child theme, with or without braces, then it doesn't. Hence the conclusion that get_pre_scss is only being called from theme_boost irrespective of whether a child theme has overridden it.


Richard

Edit: get_extra_scss function is being called from theme_mychild as changes made in that function are reflected correctly, so it would seem to only be the get_pre_scss that isn't working and is only calling the parent one.

In reply to Richard Oelmann

Re: Preview - Beginning of a Boost Inspired theme

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

Hi Richard,

With regards to the Morecandy theme yes that is a Bootstrapbase theme, however the principle is the same. For example the Morcandy preset has brand-color set to use brand-primary.

With regards your Pre SCSS & Raw SCSS are you saying that although these show up in the Advanced settings the Pre SCSS does not work?

I've not tested it yet as got tangled up in messing with men with mustaches last night. LOL

I'm testing out some Moodle stuff now so will see if how your Stage Two theme goes.

Cheers

Mary

In reply to Mary Evans

Re: Preview - Beginning of a Boost Inspired theme

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

So in Boost settings.php I added this:

// Frontpage Textbox.

    $name = 'theme_boost/fptextbox';

    $title = get_string('fptextbox', 'theme_boost');

    $description = get_string('fptextboxdesc', 'theme_boost');

    $default = '';

    $setting = new admin_setting_confightmleditor($name, $title, $description, $default);

    $setting->set_updatedcallback('theme_reset_all_caches');

    $page->add($setting);


In lib.php I added this:

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

    global $CFG;

    $return = new stdClass;

    $return->heading = $output->page_heading();

    $return->fptextbox = '';

    if (!empty($page->theme->settings->fptextbox)) {

        $return->fptextbox = '<div class="fptextbox">'.format_text($page->theme->settings->fptextbox).'</div>';

    }

    return $return;

    }


Now how do I get it to appear on the page with this new templating ??  I am pretty lost and could use some practical guidance.  

Thank you for any help you can provide.

Previously you could just drop this in and it would display:

echo $PAGE->theme->settings->fptextbox;

In reply to Chris Kenniburg

Re: Preview - Beginning of a Boost Inspired theme

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

You need to look in the php files in theme/boost/layout and follow the way settings are added.

It's all about declaring variables and then converting those variable into 'text' names that are used in the templates.

So supposing you create a layout/frontpage.php which is a copy of layout/columns2.php

and then set up the variable for your fptextbox like so...

$fptextbox = $page->theme->settings->fptextbox;
$hasfptexbox =   !empty($page->theme->settings->fptextbox));


Then create a template called frontpage.mustache

you then need to start off with declaring the variables you will be using like so...

$fptextbox = $page->theme->settings->fptextbox;
$hasfptexbox =   !empty($page->theme->settings->fptextbox));

and then converting them into text like so...

'fptextbox' = $fptexbox,
'hasfptexbox' =   !empty($page->theme->settings->fptextbox)),

And then you can add something like this that adds this setting to the frontpage...

    <div id="page" class="container-fluid">
        {{{ output.full_header }}}
        {{#hasfptextbox}}
            <div class="fptextbox">{{{ format_text($PAGE->theme->settings->fptextbox) }}}</div>
        {{/hasfptextbox}}

You will of course need to make sure all your lang strings are in your lang/en folder or else you will get errors.

The above is only a rough guide so you will need to read up first in the Templates Moodle doc.

Hope this helps find your way through the fog?.

Mary

In reply to Mary Evans

Re: Preview - Beginning of a Boost Inspired theme

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Mary,

I am going to guess there are several steps missing as I am still pretty lost.

For ease of tutorial, let's just use the default two-column page of Boost.  And for purposes of figuring this out, let's just try to get the HTML text from the textbox to appear above the  {{{ output.main_content }}}.

In layout/columns2.php I added this near the top:

$fptextbox = $page->theme->settings->fptextbox;
$hasfptexbox =   !empty($page->theme->settings->fptextbox);

Inside   $templatecontext =    in columns2.php I also added this:

'fptextbox' => $fptexbox,
'hasfptextbox' =>   !empty($page->theme->settings->fptextbox),


Then in columns2.mustache I added the following right above {{{ output.main_content }}}

                {{#hasfptextbox}}

                    <div class="fptextbox">{{{ format_text($page->theme->settings->fptextbox) }}}</div>

                {{/hasfptextbox}}


I am still not getting it to display anything.  Any ideas on where I am going wrong?

In reply to Chris Kenniburg

Re: Preview - Beginning of a Boost Inspired theme

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

Hi Chris - I got the course images working in stagetwo, but did it by overriding renderers rather than messing with the templates yet. That adds the course image as an inline style (not ideal, but works) and overrides the setting I added for a site-wide header image which gets pulled into the extrascss function as a background image.

Perhaps renderers is another alternative for you to start with and then gradually move things from the renderer into the templates as we all find out a bit more about working with them?

Rather than creating new or editing templates, you could possibly make use of the fact that things like {{{ output.full_header }}} are actually calling the renderer, so could be adapted there to achieve the aims, while then taking the time to learn more about templates.

In reply to Richard Oelmann

Re: Preview - Beginning of a Boost Inspired theme

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Hey Richard,

Funny, we were thinking the same thing on this one.  I got it working through the renderer and I like that approach for this as it is just the default behavior now of the theme.

My full header looks like this:  

public function full_header() {

        $html = html_writer::start_tag('header', array('id' => 'page-header', 'class' => 'row'));

        $html .= html_writer::start_div('col-xs-12 p-a-1');

        $html .= html_writer::start_div('card');

        $html .= html_writer::start_div('headerbkg-home');

        $html .= html_writer::start_div('headerbkg', array('style' => 'background-image:url(' . self::courseimage() . ')'));

        $html .= html_writer::start_div('header-position');

        $html .= html_writer::start_div('headerfade');

        $html .= html_writer::start_div('card-block');

        $html .= html_writer::div($this->context_header_settings_menu(), 'pull-xs-right context-header-settings-menu');

        $html .= $this->context_header();

        $html .= html_writer::start_div('clearfix', array('id' => 'page-navbar'));

        $html .= html_writer::tag('div', $this->navbar(), array('class' => 'breadcrumb-nav'));

        $html .= html_writer::div($this->page_heading_button(), 'breadcrumb-button');

        $html .= html_writer::end_div();

        $html .= html_writer::tag('div', $this->course_header(), array('id' => 'course-header'));

        $html .= html_writer::end_div();

        $html .= html_writer::end_div();

        $html .= html_writer::end_div();

        $html .= html_writer::end_div();

        $html .= html_writer::end_div();

        $html .= html_writer::end_div();

        $html .= html_writer::end_div();

        $html .= html_writer::end_tag('header');

        return $html;

    }

In reply to Chris Kenniburg

Re: Preview - Beginning of a Boost Inspired theme

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I am still having the hardest time just getting a regular old image to appear on a page.  

The custom textbox was a chore at first but made easy when explained.  However, with 20 or 30 text variable from the theme settings page for something like marketing spots or the icon navigation I like to add to themes it is not very practical.  Maybe i have to add every variable in the  Layout file like this:

$templatecontext = [

    'sitename' => format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID))),

    'output' => $OUTPUT,

    'sidepreblocks' => $blockshtml,

    'hasblocks' => $hasblocks,

    'bodyattributes' => $bodyattributes,

    'navdraweropen' => $navdraweropen,

    'regionmainsettingsmenu' => $regionmainsettingsmenu,

    'hasregionmainsettingsmenu' => !empty($regionmainsettingsmenu),

    'fptextbox' => '<div class="fptextbox">'.format_text($PAGE->theme->settings->fptextbox).'</div>',

];


It's very confusing all the steps when before you could just use PHP echo to display the variable or text.  I hope we start seeing some examples on how to do things from the theme admin settings page.  

I was also able to use the lib.php SCSS to add in a few color pickers for the basic elements from the theme admin page:

function theme_boost_get_pre_scss($theme) {

    global $CFG;


    $scss = '';

    $configurable = [

        // Config key => [variableName, ...].

        'brandcolor' => ['brand-primary'],

        'bodybackground' => ['body-bg'],

        'breadcrumbbkg' => ['breadcrumb-bg'],

        'navbarbkg' => ['navbar-light-color'],

        'cardbkg' => ['card-bg'],

        'drawerbkg' => ['drawer-bg']

    ];

In reply to Chris Kenniburg

Re: Preview - Beginning of a Boost Inspired theme

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

Hi Chis.

Like I said to Richard the other day, Boost is in its infancy and not fully functional yet. Damyon has also admitted that he has not had time to create the tutorials that we so desperately need. However we do have a preset uploader, which is what I am using so far, plus learning about templates and mustache, steep learning curve that it is - I admit, but then I am still learning and so far enjoying the journey.

Good luck with all your extra settings...

Cheers

Mary

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

Re: Preview - Beginning of a Boost Inspired theme

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I can only imagine all the work being done to get it ready.  Damyon has done a great job in hammering out the issues.

Hopefully after release there will be time to work on tutorials and stuff. 

Average of ratings: Useful (1)
In reply to Chris Kenniburg

Re: Preview - Beginning of a Boost Inspired theme

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

So I am learning a whole bunch about Mustache and how the new theme operates.  

By no means a pro and still many issues to figure out, but we made some progress in "Rounding the edges" of the new default Boost theme.  


Average of ratings: Useful (1)
In reply to Chris Kenniburg

Re: Preview - Beginning of a Boost Inspired theme

by David Morrow -

Chris,

Thank you and everyone else who is working on this! The teachers in our K-12 district love your Pioneer theme - especially the ability to customize the header image of a course. I am really grateful for the efforts of all of you who make Moodle great!

David

Average of ratings: Useful (1)
In reply to David Morrow

Re: Preview - Beginning of a Boost Inspired theme

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks David and I am glad you like Pioneer.  We are also k12.  I am figuring out the new Boost theme and I plan to release a compatible child theme with features that work well for K12 in mind.  

Is there anything in particular your teachers ask about?  

Pioneer has too many settings, toggles, and features.  It's overly complex to setup with all the pages of stuff.  

This new theme will work out of the gate and give you a great looking site with little effort.

 I got a lot to learn though.  Many things I still don't know how to achieve with Mustache templates.

Average of ratings: Useful (2)
In reply to Chris Kenniburg

Re: Preview - Beginning of a Boost Inspired theme

by David Morrow -

Chris,

Sorry for my delay in responding.

Just from observation and some discussion in workshops, three things that we love about Pioneer are:

  • The course teacher can customize the banner image. If that were the only thing Pioneer did, it would still be awesome. That ownership and control might not matter so much in higher ed and business - especially if the organization is going for consistency across the site, but for K-12 it is very valuable. I try to frame Moodle as the online component of your classroom. Each physical classroom is different, and it is nice to be able to carry that on into the online environment. Teachers add images that reflect the subject, the seasons, etc. Elementary teachers can use a class picture from a field trip - so many possibilities.
  • The way the sections are separated and sort of float on the page is both appealing and visually useful.
  • The Edit button sticks at the top of the page as you scroll down! This is hugely convenient and appreciated by our teachers who use your theme.

We aren't using Pioneer as the site theme, although I'm playing around with it our test server for that purpose. It is available for teachers to select for existing courses, and I've been selecting it for all new courses I set up over the last few months.

There are lot of settings! That's good, though, right? Lots of settings, lots of options - but lots of decisions to make and test. A new theme with the features above - and fewer decisions on admin settings would be great! Looking forward to trying it out. We are on 3.1 and probably won't update until the summer -  and will probably jump to 3.3 then.

Thanks - again - for all of the work you and others do! Please keep it up!

David



In reply to David Morrow

Re: Preview - Beginning of a Boost Inspired theme

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks David!  Great suggestions.  More than one teacher has asked for the edit button to be always visible.  I will see what I can do with that.

The new theme is called Fordson.   You can grab copies of the work here  https://github.com/kennibc/moodle-theme_fordson

It's not anywhere near ready and the default presets are not pretty at all but it has the custom image, custom login page image, and background image.  It has a navigation icon bar, marketing tiles, custom textbox and alert box.  

You will find setup and initial results for Fordson to be pretty great and straightforward.  Whereas with Pioneer we went feature happy, Fordson will be more like Evolve-D and simple to setup and use.  

I'll see what I can do with your suggestions.

Average of ratings: Useful (2)