Boost Magnific

1. Config.php

Update $THEME->layout 

In layouts array there are lots of layout available we will update two layouts frontpage and mydashboard

We will update the regions array and add new layout names with existing ones (‘full-width-top’, and ‘full-bottom’) 

Code:

$THEME->layouts = [

    // The site home page.

    “frontpage” => [

        “file” => “frontpage.php”,

        “regions” => [“side-pre”, ‘full-width-top’, ‘full-bottom’],

        “defaultregion” => “side-pre”,

        “options” => [

            “nonavbar” => true,

        ],

    ],

…..

……

    // My dashboard page and custom pages.

    “mydashboard” => [

        “file” => “drawers.php”,

        “regions” => [“side-pre”, ‘full-width-top’, ‘full-bottom’],

        “defaultregion” => “side-pre”,

        “options” => [

            “nonavbar” => true,

            “langmenu” => true,

        ],

    ],

];

See the below screenshot

2. Changing the relevant php file

Php file name is mentioned on config layout with file field (see the $THEME->layout layouts)

For frontpage – frontpage.php

And for mydashboard – drawers.php is mention

-> these files are located on layout folder of theme and if not present directly copy it by boost layout and paste it to boost_magnific theme layout folder to make some changes

frontpage.php and drawers.php is already present on boost_magnific theme

1. Changes on fronpage.php

Path: theme/boost_magnific/layout/frontpage.php

At the bottom before this line echo $OUTPUT->render_from_template….);

Add these codes

Code:

if (in_array(“full-width-top”, $PAGE->blocks->get_regions())) {

    $addblockbuttonfwtop = $OUTPUT->addblockbutton(‘full-width-top’);

    $sidefwtopblocks = $OUTPUT->blocks(‘full-width-top’);

    // Strlen Calculation is total jugad.

    if (trim($addblockbuttonfwtop) != ” || (trim($sidefwtopblocks) != ” && strlen($sidefwtopblocks) > 117)) {

        $templatedata[‘addblockbuttonfwtop’] = $addblockbuttonfwtop;

        $templatedata[‘sidefwtopblocks’] = $sidefwtopblocks;

        $templatedata[‘canaddfwtopblocks’] = true;

    }

}

// bottom region full width.

if (in_array(“full-bottom”, $PAGE->blocks->get_regions())) {

    $addblockbuttonfwbottom = $OUTPUT->addblockbutton(‘full-bottom’);

    $sidefwbottomblocks = $OUTPUT->blocks(‘full-bottom’);

    // Strlen Calculation is total jugad.

    if (trim($addblockbuttonfwbottom) != ” || (trim($sidefwbottomblocks) != ” && strlen($sidefwbottomblocks) > 117)) {

        $templatedata[‘addblockbuttonfullwidthbottom’] = $addblockbuttonfwbottom;

        $templatedata[‘sidefullwidthbottomblocks’] = $sidefwbottomblocks;

        $templatedata[‘canaddfullwidthbottomblocks’] = true;

    }

}

See the screenshot below

2. Same changes on drawers.php file

Path: theme/boost_magnific/layout/drawers.php

3. Now we can add regions anywhere on frontpage, and dashboard by mustache file 

1. For frontpage

You can add regions anywhere on the Frontpage or Dashboard via the related Mustache file.

The Mustache file path is mentioned in the last line of the related PHP file.

Example:

On the Frontpage, you will see this line at the end of the PHP file:

echo $OUTPUT->render_from_template(‘theme_boost_magnific/frontpage’, $templatedata);

This means the Mustache path is:
frontpage

It is located at:
theme/boost_maginific/templates/frontpage.mustache

Note:

We had to add two regions 1st on top and 2nd on bottom

Add these code for full-width-top region inside this div  <div id=”page” data-region=”mainpage” data-usertour=”scroller”

Code:

        {{#canaddfwtopblocks}}

        <section id=”region-fullwidthtop-blocks” class=”has-blocks” aria-label=”region top blocks”>

            <div role=”region-main”>

                {{{ sidefwtopblocks }}}

                {{#addblockbuttonfwtop}}

                    <div id=”region-fullwidthtop-blocks-indicator” class=”container-fluid block-indicator”>

                        <font class=”text-center p-px-2d5 m-0  bg-white block-indicator-text-wrapper “>

                            {{#str}}full-width-top,theme_remui {{/str}}

                        </font>

                    </div>

                {{/addblockbuttonfwtop}}

            </div>

        </section>

        {{/canaddfwtopblocks}}

See the screenshot below

For full-bottom region we had to add the code at the end of page div

Add these code before footer –    {{> theme_boost_magnific/includes/footer}}

        {{#canaddfullwidthbottomblocks}}

            <section id=”region-fullwidthbottom-blocks” class=”has-blocks” aria-label=”region top blocks”>

                <div role=”region-main”>

                    {{{ sidefullwidthbottomblocks }}}

                    {{#addblockbuttonfullwidthbottom}}

                        <div id=”region-fullwidthbottom-blocks-indicator” class=”container-fluid block-indicator”>

                            <font class=”text-center p-px-2d5 m-0  bg-white block-indicator-text-wrapper “>

                                {{#str}}full-bottom,theme_remui {{/str}}

                            </font>

                        </div>

                    {{/addblockbuttonfullwidthbottom}}

                </div>

            </section>

        {{/canaddfullwidthbottomblocks}}

See the screenshot below

2. For dashboard layout

The same applies to the Dashboard layout.

The Mustache path used is:

drawers

Full location: theme/boost_magnific/templates/drawers.mustache

Placement Instruction

Add the full-width-top region display code after header – 

right after this line:     {{>theme_boost_magnific/includes/header}}

Code:

    {{#canaddfwtopblocks}}

            <section id=”region-fullwidthtop-blocks” class=”has-blocks” aria-label=”region top blocks”>

                <div role=”region-main”>

                    {{{ sidefwtopblocks }}}

                    {{#addblockbuttonfwtop}}

                        <div id=”region-fullwidthtop-blocks-indicator” class=”container-fluid block-indicator”>

                            <font class=”text-center p-px-2d5 m-0  bg-white block-indicator-text-wrapper “>

                                {{#str}}full-width-top,theme_remui {{/str}}

                            </font>

                        </div>

                    {{/addblockbuttonfwtop}}

                </div>

            </section>

    {{/canaddfwtopblocks}}

See the screenshot below

For full-bottom region

Right before footer –         {{> theme_boost_magnific/includes/footer}}

Code

    {{#canaddfullwidthbottomblocks}}

        <section id=”region-fullwidthbottom-blocks” class=”has-blocks” aria-label=”region top blocks”>

            <div role=”region-main”>

                {{{ sidefullwidthbottomblocks }}}

                {{#addblockbuttonfullwidthbottom}}

                    <div id=”region-fullwidthbottom-blocks-indicator” class=”container-fluid block-indicator”>

                        <font class=”text-center p-px-2d5 m-0  bg-white block-indicator-text-wrapper “>

                            {{#str}}full-bottom,theme_remui {{/str}}

                        </font>

                    </div>

                {{/addblockbuttonfullwidthbottom}}

            </div>

        </section>

    {{/canaddfullwidthbottomblocks}}

Now Enable the edit mode and go to the homepage, dashboard, or any custom page; you will now be able to add page builder blocks as well as Moodle blocks.