• Author: marbol2
  • Created: April 2020
  • Moodle Version: 3.6 - 3.9+
  • Theme Version: 1.1.1 (19 June 2020, changelog)
  • Demo: Link
  • Support: Link


Watch the quick start video

Installation/Update

Go to: Site administration → Plugins → Install Plugins and choose and choose theme file:

  • theme_mb2mcl-x.x.x_MOODLE-36.zip - for Moodle 3.6
  • theme_mb2mcl-x.x.x_MOODLE-37.zip - for Moodle 3.7
  • theme_mb2mcl-x.x.x_MOODLE-38-39.zip - for Moodle 3.8 - 3.9

During the next steps you must to confirm installation and upgrade Moodle database. To do it click "Upgrade Moodle database now" button.

Activation Theme

After installation go to: Site administration → Appearance → Themes → Theme selector and click "Change theme" button at "Default" device type.

Then find "Macro Learning" theme and click "Use theme" button.

For more info check Moodle documentation.

Settings Access

To access the theme options click "Theme settings" button on the top right corner.

Or go to: Site administration → Appearance → Themes → Macro Learning.

Location: Site administration → Appearance → Themes → Macro Learning → General → Logo and Favicon.

You may upload custom logo image with Moodle file picker. After uploading you may set logo height (logo width will be set automatically), margin top and bottom, logo atlernative text and title attributes.

Below logo settings you may upload favicon image in "ico" format.

Layout Settings

Location: Site administration → Appearance → Themes → Macro Learning → General → Layout.

You may select "Full width" or "Boxed" layout of the theme. For each layout you can set custom page width (maximum width) in pixels.

Layout "Full width" is a default layout in which whole page has white background color without image background.

"Boxed" layout is a layout in which page content is placed in a narrower container. In this case you may set custom page image or/and background color.

In layout settings section you may set also sidebars position (left, right or classic) and show/hide sidebars button.

In layout section you may also enable page sidebar. You may set position of the sidebar (left or right) and width. You have to know that page sidebar is display if sidebar option is enabled in theme settings and some blocks are published in "Page Sidebar" block region.

Courses Settings

Location: Site administration → Appearance → Themes → Macro Learning → General → Courses.

In courses options area you may set course grid or list layout and enable/disable course layout switcher.

In this options area you may enable courses placeholder image (it will be display if you don't add any mage to "Course summary files"), course "enter" button and enrolled students.

You may also enable "Course banner image" option and then in course settings add "Course image". After that course image will be display as a banner on course pages.

Location: Site administration → Appearance → Themes → Macro Learning → General → Footer.

In footer section you may set custom footer content and footer menu.

Above copyright info you may place Moodle blocks with custom content.

#1

This is block "HTML" published in "Bottom A" block region. There is the following content in this block:

[list]
[list_item link="#"]Nunc egestas[/list_item]
[list_item link="#"]Pellentesque laoreet[/list_item]
[list_item link="#"]Felis eros vehicula[/list_item]
[list_item link="#"]Leo, at males[/list_item]
[list_item link="#"]Velit leo quis pede[/list_item]
[/list]

#2

This is block "HTML" published in "Bottom B" block region. There is the following content in this block:

[list]
[list_item link="#"]Pellentesque laoreet[/list_item]
[list_item link="#"]Felis eros vehicula[/list_item]
[list_item link="#"]Leo, at males[/list_item]
[list_item link="#"]Velit leo quis pede[/list_item]
[/list]

#3

This is block "HTML" published in "Bottom C" block region. There is the following content in this block:

[list]
[list_item link="#"]Nunc egestas[/list_item]
[list_item link="#"]Felis eros vehicula[/list_item]
[list_item link="#"]Velit leo quis pede[/list_item]
[/list]

#4

This is block "HTML" published in "Bottom D" block region. There is the following content in this block:

--- image here ---
Nullam vel sem. Donec mollis hendrerit risus. Donec sodales sagittis magna.
[button link="#" type="secondary" margin=".6rem 0 0 0"]Learn more[/button]

Header Buttons

Location: Site administration → Appearance → Themes → Macro Learning → General → Header.

In general theme settings area you may set custom header buttons. This buttons may be display for different languages and for logged in or none logged in users.

Static Content

Location: Site administration → Appearance → Themes → Macro Learning → General → Static Content.

In general theme settings area you may set custom top and bottom static content. This content may be display for different languages and for logged in or none logged in users.

Top content is display above header.

Bottom content is display below footer.

Installation

To use slider you need to install "Mb2 Slides" local plugin which is located in "Plugins" folder.

Go to Site administration → Plugins → Install Plugins, upload "local_mb2slides-x.x.x.zip" file and click "Install plugin from the ZIP file" button.

Setup

To display slider on front page go to: Theme settings → General → Front Page and make sure that "Slider" option is enabled.

To add slides go to: Site administration → Mb2 Slides → Manage slides. Then click "Add slide" button.

Mb2 Slides plugin provides two levels of options: globl options and slide options. To set global options go to: Site administration → Mb2 Slides → Global options. Some of global options, for example descriptions alignment, width, background color, etc. can be overwritten by slide options. In this way you may set different styles for different slides.

To set link for a slide type url in "Link" form field. If you want to show link button set "Button link" from field to "Yes" (if "No" whole slide will be a link). You may set your own button text in "Button link text" form field or leave it empty to use dafult text "Read more" text.

Use "Button link css class" form field to style slide button. By default slide button class is "btn btn-lg btn-primary", you may use: "btn-success", "btn-warning", "btn-info", "btn-danger", "btn-inverse".

You may change font size and color of slider description.

By default font weight of all titles is semibold. If you want to set font weight of some words title thin, separate these words by pipe characters "|".

For example to make word "Enjoy" thin, use the following text:

Enjoy Online Learning|Enjoy

Or if you want to make thin two words, for example "Enjoy" and "Learning", use the following text:

Enjoy Online Learning|Enjoy|Learning

Sometimes you may want to make slide image darken or lighten. You may do it easy with "Image overlay color" option.

Installation

To use front page builder you have to install "Mb2 Page Builder" local plugin which is located in "Plugins" folder in downloaded files. Go to Site administration → Plugins → Install Plugins, upload "local_mb2builder-x.x.x.zip" file and click "Install plugin from the ZIP file" button.

Import Demo Content

Page builder plugin allows import demo content. To do it go to Site administration → Mb2 builder → Front page builder.

Click button below to copy front page content code:

 

Then paste the code into import textarea and click "Import" link.

To keep changes click "Save changes" button.

Login and Search Form

Location: Site administration → Appearance → Themes → Macro Learning → Features → Login and Search Form.

You may set custom links next to login form, for example links to help pages for sutents, teachers or guests.

You may add also custom links below search form.

Buttons

To use "Buttons" course format dwonload and install this plugin: https://moodle.org/plugins/format_buttons.

Then on course settings page select "Buttons format" course format. For more info and documentation check this link: https://docs.moodle.org/38/en/Buttons_course_format

Collapsed Topics

To use "Collapsed Topics" course format dwonload and install this plugin: https://moodle.org/plugins/format_topcoll.

Then on course settings page select "Collapsed Topics" course format. For more info and documentation check this link: https://docs.moodle.org/38/en/Collapsed_Topics_course_format

Grid

To use "Grid" course format dwonload and install this plugin: https://moodle.org/plugins/format_grid.

Then on course settings page select "Grid format" course format. For more info and documentation check this link: http://gjb2048.github.io/moodle-format_grid/

Installation

To use courses A-Z index you need to install "Mb2 A-Z Courses" block which is located in "Plugins" folder in downloaded files. Go to Site administration → Plugins → Install Plugins, upload "block_mb2azcourses-x.x.x.zip" file, select plugin type "Block (block)" and click "Install plugin from the ZIP file" button.

Display courses A-Z index

To set up courses A-Z index go to front page.

Then turn it editing on Front page settings → Turn editing on.

Find block "Add a block", and add "Main menu" block.

Then on Main menu block click "Add an activity or resource" button and add "Page" resource to the front page. You may call this page "Courses A-Z Index".

After that go to "Courses A-Z Index" page, find block "Add a block", choose from dropdown list "Mb2 A-Z Courses" block and move it to "Content Bottom" block region.

See "Main menu" block documentation.

Fonts

Location: Site administration → Appearance → Themes → Macro Learning → Fonts.

In "Fonts" settings you may set 3 normal fonts and add 3 google web fonts.

To add google webfont go to: https://fonts.google.com, find font which you want to use and copy name, style and subset (optional) attributes.

Fonts which you set in this settings section you may use in Typography settings.

Typography

Location: Site administration → Appearance → Themes → Macro Learning → Typography.

In typography settings section you may set typography (font family, font size, font weight and font style) for:

  • global page,
  • headings,
  • main menu - first level,
  • main menu - dropdown items,
  • custom elements (css selectors or html tags).

Fonts which you may set in typography settings section you may define/edit in Fonts settings section.

You may set three global font size values: normal, medium and large. These valuse will be used by click on font sizer.

Shortcodes Filter

To use shortcodes you need to install "Mb2 Shortcodes" filter plugin which is located in "Plugins" folder in downloaded files. Go to Site administration → Plugins → Install Plugins, upload "filter_mb2shortcodes-x.x.x.zip" file, select plugin type "Text filter (filter)" and click "Install plugin from the ZIP file" button.

After installation you need to activate filter plugin. Go to Site administration → Plugins → Filters → Manage filters and activate "Mb2 Shortcodes" filter.

Shortcodes Button

To make easy use shortcodes you need to install "Mb2 Shortcodes Button" plugin which is located in "Plugins" folder in downloaded files. Go to Site administration → Plugins → Install Plugins, upload "atto_mb2shortcodes-x.x.x.zip" file, select plugin type "Atto HTML editor / Atto plugin (atto)" and click "Install plugin from the ZIP file" button.

After installation go to Site administration → Plugins → Text editors → Atto HTML editor → Atto toolbar settings and add "mb2shortcodes = mb2shortcodes" text into "Toolbar config" form field and click "Save changes" button.

After that you may use shortcode generator by click "gear" icon in HTML editor toolbar.

To use some shortcode set all options like you want, then click "Generate Shortcode" button and "Insert Shortcode" button.

Accordions

Return Bootstrap accordions.

[accordion parent="1"]
[accordion_item title="Title 1"]Content 1[/accordion_item]
[accordion_item title="Title 2"]Content 2[/accordion_item]
[/accordion]
Attributes Type Default Description
accordion
parent boolean 1 Set to "1" to close other items when one is opened.
accordion_active number 1 Set which accordion item will be open by default.
accordion_item
title string Title of the accordion item.
icon string Icon name: Glyphicons, Font Awesome or Pe-icon-7-stroke.

Box Icon

Return boxes with text and animated icon.

[boxes columns="3"]
[boxicon icon="pe-7s-plugin" title="Title 1" link="#"]Content 1[/boxicon]
[boxicon icon="pe-7s-cloud-download" title="Title 2" link="#"]Content 2[/boxicon]
[boxicon icon="pe-7s-tools" title="Title 3" link="#"]Content 3[/boxicon]
[/boxes]
Attributes Type Default Description
boxes
columns number 1 Number of columns.
boxicon
icon string Icon name: Glyphicons, Font Awesome or Pe-icon-7-stroke.
type number 1 Box type: 1, 2 or 3.
color string primary Box icon color: gray, primary, danger, info, inverse, success, warning .
title string Box title text.
link url Box link.
link_target string Box link target. Set "_blank" to open link in a new window.

Box Image

Return boxes with image background.

[boxes columns="2"]
[boximg image="https://placeimg.com/750/445/nature" link="#" color="#e63946"]Text 1[/boximg]
[boximg image="https://placeimg.com/750/445/nature" link="#" color="#119d65"]Text 2[/boximg]
[boximg image="https://placeimg.com/750/445/nature" link="#" color="#fb8b24"]Text 3[/boximg]
[boximg image="https://placeimg.com/750/445/nature" link="#" color="#033860"]Text 4[/boximg]
[/boxes]
Attributes Type Default Description
boxes
columns number 1 Number of columns.
size string Box size: "normal" or "small".
boximg
image url Background image url.
image number 1 Box type 1 or 2.
color string Hex (#000000) or rgb (rgb(0,0,0)) or rgba (rgba(0,0,0,.5)) color value.
link url Box link.
link_target string Box link target. Set "_blank" to open link in a new window.

Button

Return button.

[button link="#" type="primary" size="lg"]Read More[/button]
Attributes Type Default Description
type string default Type of the button: "default", "primary", "success", "warning", "info", "inverse", "link".
size string Size class of the button: "lg", "sm", "xs".
link url # Button link.
target string Button link target attribute: "_blank", "_self".
icon string Icon name: Glyphicons, Font Awesome or Pe-icon-7-stroke.
icon_pos string before Button icon position: "before" or "after'.
title string Button link title attribute. It's require for tooltip.
ttpos string top Tooltip position: "top', "right", "bottom", "left".
fw boolean 0 Set to "1" for full width button.
rounded boolean 0 Set to "1" for rounded corners of the button.
border boolean 0 Set to "1" for border button style.
class string Css class.
margin string Margin (top right bottom left) in pixels, e.g. to set 10 pixels margin bottom use: "0 0 10px 0".

Columns

Return Bootstrap columns.

[columns]
[column size="4"]Content 1[/column]
[column size="4"]Content 2[/column]
[column size="4"]Content 3[/column]
[/columns]
Attributes Type Default Description
size number 4 The sum of all columns is 12.

Gap

Return gap div.

[gap size="20"][/gap]
Attributes Type Default Description
size number 20 Gap size in pixels.
smallscreen boolean 1 Set to "0" if you want to disable gap in small screen devices (tablet or smartphone).

Header

Return div with image background.

[header type="dark" title="Title" subtitle="Subtitle" image="https://placeimg.com/950/250/nature"][/header]
Attributes Type Default Description
type string dark Header type: "dark", "dark_striped", "light", "light_striped".
title string Title text.
subtitle string Subtitle text.
image url Background image url.
margin string Margin (top right bottom left) in pixels, e.g. to set 10 pixels margin bottom use: "0 0 10px 0".

Headings

Return heading tag.

[h size="1"]Heading text[/h]
Attributes Type Default Description
size number 4 Heading hierarchy, from 1 to 6
margin string Margin (top right bottom left) in pixels, e.g. to set 10 pixels margin bottom use: "0 0 10px 0".

Highlight

Return string in highlight span tag.

[highlight type="1"]Text[/highlight]
Attributes Type Default Description
type number 1 Highlight type (style): 1, 2 or 3

Icon

Return icon font.

[icon name="fa-star"]Optional text[/icon]
Attributes Type Default Description
name string fa-star Icon name: Glyphicons, Font Awesome or Pe-icon-7-stroke.
color string Hex (#000000) or rgb (rgb(0,0,0)) or rgba (rgba(0,0,0,.5)) color value.
size string default Icons size class: "small", "default", "large", "xlarge".
spin boolean 0 Set to "1" to spin icon. It works with Font Awesome and Pe-icon-7-stroke icons.
rotate string normal Rotate class: "normal", "rotate-90", "rotate-180", "rotate-270", "flip-horizontal", "flip-vertical".
margin string Margin (top right bottom left) in pixels, e.g. to set 10 pixels margin bottom use: "0 0 10px 0".
sizebg number Icon background size in pixels.
rounded boolean 1 Set to "0" to get square background icon.
bgcolor string Hex (#000000) or rgb (rgb(0,0,0)) or rgba (rgba(0,0,0,.5)) color value.
icon_text_pos string after Icon text position: "before", "after".
nline boolean 0 Set to "1" if you want place icon in a new line.

Image

Return image.

[image]https://placeimg.com/300/300/nature[/image]
Attributes Type Default Description
alt string Alternative text.
align string Image align: "left", "right", "center".
link url Image link.
link_target string Image link target. Set "_blank" to open link in a new window.
width number Image width. Height will be set automatically.
margin string Margin (top right bottom left) in pixels, e.g. to set 10 pixels margin bottom use: "0 0 10px 0".

Line

Return horizontal line.

[line][/line]
Attributes Type Default Description
color string dark Line color: "dark", "light".
custom_color string Hex (#000000) or rgb (rgb(0,0,0)) or rgba (rgba(0,0,0,.5)) color value.
style string solid Border style: "solid", "dotted", "dashed".
double boolean 0 Use "1" to set double line.
size number 1 Border width in pixels.
margin string Margin (top right bottom left) in pixels, e.g. to set 10 pixels margin bottom use: "0 0 10px 0".

List

Return list.

[list]
[list_item icon="fa-flag" link="#"]List 1[/list_item]
[list_item icon="fa-trophy" link="#"]List 2[/list_item]
[list_item icon="fa-crosshairs" link="#"]List 3[/list_item]
[/list]
Attributes Type Default Description
list
type number 1 List type: 1, 2 or 3
horizontal boolean 0 Set to "1" to display list items horizontally.
align string List items alignment: "left", "right", "center".
margin number Margin (top right bottom left) in pixels, e.g. to set 10 pixels margin bottom use: "0 0 10px 0".
list_item
icon string Icon name: Glyphicons, Font Awesome or Pe-icon-7-stroke.
link url List item link.
link_target string List item target. Set "_blank" to open link in a new window.

Slider

Return slider carousel.

[slider]
[slider_item image="https://placeimg.com/1200/600/nature"][/slider_item]
[slider_item image="https://placeimg.com/1200/600/nature"][/slider_item]
[slider_item image="https://placeimg.com/1200/600/nature"][/slider_item]
[/slider]
Attributes Type Default Description
slider
columns number 1 Number of visible images.
gutter number 0 Slide horizontal margin in pixels.
autoplay boolean 1 Auto animation.
loop boolean 1 Loop animation.
animtime number 450 Animation time in miliseconds.
pausetime number 5000 Pause time in miliseconds.
snav boolean 1 Prev/next navigation.
sdots boolean 1 Dots navigation below slider.
margin number Margin (top right bottom left) in pixels, e.g. to set 10 pixels margin bottom use: "0 0 10px 0".
slider_item
image url Image url.
title string Caption title.
desc string Caption description.
link url Slider item link.
target string List item target. Set "_blank" to open link in a new window.

Tabs

Return Bootstrap tabs.

[tabs]
[tab_item title="Tab 1" icon="fa-trash-o"]Content 1[/tab_item]
[tab_item title="Title 2" icon="fa-shopping-cart"]Content 2[/tab_item]
[tab_item title="Title 3" icon="fa-calendar"]Content 3[/tab_item]
[/tabs]
Attributes Type Default Description
tabs
tabpos string top Tabs position: "top", "left", "right".
height number Min height in pixels. It's reguired for "left" or "right" tabs position.
margin string Margin (top right bottom left) in pixels, e.g. to set 10 pixels margin bottom use: "0 0 10px 0".
tab_item
title string Title Tab title text.
icon string Icon name: Glyphicons, Font Awesome or Pe-icon-7-stroke.

Title

Return title.

[title subtext="Subtext"]Title text[/title]
Attributes Type Default Description
subtext string Subtitle text.
size string Set to "s" if you want small title.
align string left Title alignment: "left", "right", "center".
tag string h4 HTML tag for title.
margin string Margin (top right bottom left) in pixels, e.g. to set 10 pixels margin bottom use: "0 0 10px 0".

Video

Return web video (Youtube or Vimeo) iframe.

[video id="wop3FMhoLGs"][/video]
Attributes Type Default Description
id string Youtube or Vimeo video id (get it from url of the video).
bg_image url Optional background image url.
ratio string "16:9", "4:3"
margin string Margin (top right bottom left) in pixels, e.g. to set 10 pixels margin bottom use: "0 0 10px 0".

In Macro Learning theme you may use over 1100 icons. The following icons ara available:

Location: Site administration → Appearance → Themes → Macro Learning → Style → Custom Css Style.

If you want to add some small css changes you may use theme option "Custom Css Code".

Before Send a Support Message

To solve problem faster you need to give me detailed informartion about it.

1. Check Moodle version. To find it go to: Site administration → Notifications.

2. Check server Info. To find if go to: Site administration → Server → PHP info.

3. Enable debugging. Go to: Site administration → Development → Debugging and set "Debug messages" option to "DEVELOPER: extra Moodle debug messages for developers" and check "Display debug messages" option.

4. Make screenshots or record video.

Send a Support Message

To get support visit item page on Themeforest then click "Support" tab and send me a message.

Response time can be up to 1 business day.

Top ↑