1. Config.php
Changes in /theme/academi/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’)
At line no 100
Code:
// The site home page.
‘frontpage’ => [
‘file’ => ‘frontpage.php’,
‘regions’ => [‘side-pre’, ‘full-width-top’, ‘full-bottom’],
‘defaultregion’ => ‘side-pre’,
‘options’ => [‘nonavbar’ => true],
],
At line no 120
Code:
// My dashboard page.
‘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
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 Academi theme layout folder to make some changes
frontpage.php and drawers.php is already present on Academi theme
Changes in /theme/academi/layout/drawers.php :-
Add following code at line no 44
before this line echo $OUTPUT->render_from_template….);
Code:
// Top region full width.
if (in_array(“full-width-top”, $this->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)) {
$templatecontext[‘addblockbuttonfwtop’] = $addblockbuttonfwtop;
$templatecontext[‘sidefwtopblocks’] = $sidefwtopblocks;
$templatecontext[‘canaddfwtopblocks’] = true;
}
}
// bottom region full width.
if (in_array(“full-bottom”, $this->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)) {
$templatecontext[‘addblockbuttonfullwidthbottom’] = $addblockbuttonfwbottom;
$templatecontext[‘sidefullwidthbottomblocks’] = $sidefwbottomblocks;
$templatecontext[‘canaddfullwidthbottomblocks’] = true;
}
}
See the below screenshot
Changes in /theme/academi/layout/frontpage.php :-
Add following code at line no 42
before this line echo $OUTPUT->render_from_template….);
Code:
// Top region full width.
if (in_array(“full-width-top”, $this->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)) {
$templatecontext[‘addblockbuttonfwtop’] = $addblockbuttonfwtop;
$templatecontext[‘sidefwtopblocks’] = $sidefwtopblocks;
$templatecontext[‘canaddfwtopblocks’] = true;
}
}
// bottom region full width.
if (in_array(“full-bottom”, $this->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)) {
$templatecontext[‘addblockbuttonfullwidthbottom’] = $addblockbuttonfwbottom;
$templatecontext[‘sidefullwidthbottomblocks’] = $sidefwbottomblocks;
$templatecontext[‘canaddfullwidthbottomblocks’] = true;
}
}
See the below screenshot
3. Now we can add regions anywhere on frontpage, and dashboard by mustache file
1. For dashboard
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 Dashboard, you will see this line at the end of the PHP file:
echo $OUTPUT->render_from_template(‘theme_academi/drawers, $templatecontext);
This means the Mustache path is:
drawers
It is located at:
theme/academi/templates/drawers.mustache
Note:
We had to add two regions 1st on top and 2nd on bottom
Changes in /theme/academi/templates/drawers.mustache :-
At line no 93 add following code after the line <div id=“page” data-region=“mainpage”……
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 “>
Full-width Top
</font>
</div>
{{/addblockbuttonfwtop}}
</div>
</section>
{{/canaddfwtopblocks}}
See the below screenshot
At line no 180 add following code before the line {{> theme_academi/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 “>
Full-width Bottom
</font>
</div>
{{/addblockbuttonfullwidthbottom}}
</div>
</section>
{{/canaddfullwidthbottomblocks}}
See the below screenshot
2. For frontpage layout
The same applies to the Frontpage layout.
The Mustache path used is:
frontpage
Changes in /theme/academi/templates/frontpage.mustache :-
At line no 92 add following code after the line <div id=“page” data-region=“mainpage”…..
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 “>
Full-width Top
</font>
</div>
{{/addblockbuttonfwtop}}
</div>
</section>
{{/canaddfwtopblocks}}
See the below screenshot
At line no 181 add following code before the line {{> theme_academi/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 “>
Full-width Bottom
</font>
</div>
{{/addblockbuttonfullwidthbottom}}
</div>
</section>
{{/canaddfullwidthbottomblocks}}
See the below screenshot
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.