• Author: marbol2
  • Created: April 2018
  • Moodle Version: 2.7 - 3.6+
  • Theme Version: 2.2.1 (08 March 2019, changelog)
  • Demo: Link
  • Support: Link

Installation/Update via File Uploader

Go to: Site administration → Plugins → Install Plugins and choose "mb2iq_theme_MOODLE-27-35.zip" (for Moodle version from 2.7 to 3.5) or "mb2iq_theme_MOODLE-36.zip" (for Moodle version 3.6) file.

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

Installation/Update via FTP

Unzip "mb2iq_theme_MOODLE-27-35.zip" (for Moodle version from 2.7 to 3.5) or "mb2iq_theme_MOODLE-36.zip" (for Moodle version 3.6) file on your computer. In unziped folder you will find "mb2iq" folder. This is the folder which you have to upload to your server.

Open your favorite FTP client (e.g. FileZilla) and connect to your server and upload "mb2iq" folder to "your_moodle_website/theme" folder.

Then go to: Site administration → Notifications and upgrade Moodle database by clicking "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 "IQ" theme and click "Use theme" button.

For more info check Moodle documentation.

Settings Access

To access the theme options click "gear" icon on the top right corner or go to: Site administration → Appearance → Themes → IQ.

General Settings

Location: Theme options → General → Logo and Favicon.

You may upload custom logo image moodle file picker. After uploading you can set logo width (height will be set automatically), margin (top, right, bottom left) and logo "title" attribute text.

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

Layout Settings

Location: Theme options → 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"

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

Layout "Boxed"

"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. Below you may see "boxed" layout example.

You may set columns layout: "Left", "Right" or "Classic".

Courses Settings

Location: Theme options → General → Courses.

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" form field) and course "enter" button.

To change course placehoder image upload to: theme/mb2iq/pix your custom image which is called "course-custom".

Block Regions Settings

Location: Theme options → General → Block Regions.

Theme provide the followind block regions:

  • Slider (slider)
  • After slider(after-slider)
  • Before content(before-content)
  • Side pre (side-pre)
  • Side post (side-post)
  • After content(after-content)
  • Bottom (bottom)
  • Bottom a, b, c, d (bottom-a, bottom-b, bottom-c, bottom-d)

You may also add custom css class for region and then add some specific style for blocks placed in this region. To use custom class for some region write: "regionName:className". Classes for each regions write in a new line.

Static Content

Location: Theme options → General → Static Content.

You may add custom static content to top bar above logo image and to bottom bar above footer.

Location: Theme options → General → Footer.

You may add custom copyright info, footer content and show/hide login info in footer.

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

#1

This is block "HTML" with custom image. This block is published in "Bottom A" block region.

#2

This is "Mb2 Content" block.

#3

This is "Mb2 Content" block.

#4

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

[list]
[list_item link="#"]Nulla portr accusan[/list_item]
[list_item link="#"]Sed porttitor[/list_item]
[list_item link="#"]Lectus nibh[/list_item]
[list_item link="#"]Proin eget tortor risus[/list_item]
[list_item link="#"]Donec sollicitudin[/list_item]
[/list]
Get code

Features Settings

Loading Screen Settings

Location: Theme options → Features → Loading Screen.

You may enable nice screen with logo and animated spinner when page is loading. This page is fully customized, you may change spinner type, background color, add custom logo image and change the time after which loading screen is hidden.

To change default loading spinner you may upload to: theme/mb2iq/pix/spinners/custom folder your own "gif" (recommended because is supported by all web browsers including IE) or "svg" (not supported by IE) animated image. If you upload more than one image to the spinners custom folder they will be displayed randomly.

To get better GIF image quality upload image at least twice the size. So if you set "Spinner Image Size" to 50 pixels upload GIF image at least 100x100 pixels.

Remember that you can NOT use spaces in images names.

Login Form

Location: Theme options → Features → Login Form.

You may set custom text below login form and also set text link.

Login Page Settings

Location: Theme options → Features → Login Page.

You may set custom login page hich is fully customized. You may set custom logo image and page background (color and image).

Page Css Classes Settings

Location: Theme options → Features → Page Calss.

You may use custom css class for a specific page (Moodle page module) and then add custom css style for this page/pages. You may add different classes for different pages (in a new line) or add css class for all pages in course.

Scroll to Top Settings

Location: Theme options → Features → Scroll to Top.

You may enabled scroll to top link with smooth animation effect.

Fonts Settings

Location: Theme options → Fonts.

In "Fonts" settings you may set 3 normal fonts and 3 google web fonts which you may use then in "Typography settings" of the theme.

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 which you need to paste into specific form fields.

Menus Settings

Main Menu Settings

Location: Theme options → Menus → General.

To set up menu go to: Site administration → Appearance → Themes → Theme settings and add menu items into "Custom menu items" form fields.

For more info check Moodle documentation.

In theme settings you may change animation options of dropdown menu and enabled "Sticky" navigation as well as show "My courses" menu item in menu.

To know how to change font (font family, size, style, etc.) of menu and submenu items see "Typography settings".

Icon Menus Settings

Location: Theme options → Menus → Icon Navigation.

You may add up to 7 icon links with custom icon and text.

To set icon use available icon name, e.g. "fa-envelope" (check available icon in this theme).

Social Settings

Location: Theme options → Social.

You may publish social network icons in header and footer.

YTo add social media icon just select it from list.

Style Settings

Colors Settings

Location: Theme options → Style.

In style settings you may change "Accent 1", "Accent 2" and "Accent 3" colors as well as text, links (normal and hover) and headings. You may use normal (rgb) or transparent (rgba) colors.

Page Style Settings

Location: Theme options → Style.

You may set custom background of page and selected block regions (after slider, before content, after content) by adding:

  • Background image
  • Transparend color (to make lighten or darken background image)
  • Predefined background effect (strips light or dark)

Block Regions Style Settings

Location: Theme options → Style.

For selected block regions you may set padding (internal margins) top and bottom in pixels. To do it type comma separated padding valuse, fo example: "40,0" which is 40 pixels padding top and 0 pixels padding bottom.

Typography Settings

Location: Theme options → Typography.

You may change typography settings for:

  • Global fonts
  • Headings fonts
  • Menu fonts
  • Dropdown menu fonts

For each group of typography you can select font:

  • Normal Font #1
  • Normal Font #2
  • Normal Font #3
  • ------------
  • Google Font #1
  • Google Font #2
  • Google Font #3

These fonts you may set in "Fonts" settings.

Installation

To use slider you have to install "Mb2 Slider" block which is located in "Plugins" folder in downloaded files. Go to Site administration → Plugins → Install Plugins, upload "block_mb2slider-x.x.x.zip" file and click "Install plugin from the ZIP file" button.

Setup

Slider Options

To set up main slider go to front page.

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

Find block "Add a block", choose from dropdown list "Mb2 Slider".

And move it to "Slider" block region.

Then on Mb2 Slider block click "gear" icon and choose "Configure Mb2 Slider Block block".

In "Slider Options" area add slider images. You may add up to 12 images.

Single Slide Options

Click "Slider #1" to add first slide. Select "Image Number" which you want to assign to this slide.

To set link for a slide type url in "Link" form field. If you want to show link button set "Link Button" from field to "Yes" (if "No" whole slide will be a link).

For every single slide you may set custom background color, button color and also overlay background color (to make slide image darken or lighten) and color of caption text (title and description).

Installation

To use front page builder you need 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

Go to Site administration → Mb2 builder → Front page builder

and click "Import/Export" link.

Copy front page content, and then paste it into import textarea and click "Import" link.

To keep changes click "Save changes" button.

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 and click "Install plugin from the ZIP file" button.

Display courses A-Z index

Go to front page.

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

Add "Main menu" block.

Then on Main menu block click "Add an activity or resource" button.

Then 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.

Buttons

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

Then on course settings page select "Buttons" course format. For more info and documentation check this link: https://docs.moodle.org/36/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/36/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

Content block is "Mb2 Content" Moodle block which is located in "Plugins" folder in downloaded files. To install it go to Site administration → Plugins → Install Plugins, upload "block_mb2content-x.x.x.zip" file and click "Install plugin from the ZIP file" button.

Site Announcements

To set up site announcements go to home page and then Front page settings → Turn editing on. After that find block "Add a block", choose from dropdown list "Mb2 Content" and move it to "Bottom B" block region. Then on Mb2 Content block click "gear" icon and choose "Configure Mb2 Content Block block" and set the following parameters:

Upcoming Events

To set up site announcements block go to home page and then Front page settings → Turn editing on. After that find block "Add a block", choose from dropdown list "Mb2 Content" and move it to "Bottom C" block region. Then on Mb2 Content block click "gear" icon and choose "Configure Mb2 Content Block block" and set the following parameters:

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 enabled 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.

An alternative installation is to unzip "atto_mb2shortcodes-x.x.x.zip" file and upload via FTP "mb2shortcodes" folder to your_moodle_website/lib/editor/atto/plugins directory. Then go Site administration → Notifications and upgrade database.

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]
Get code
Attributes Type Default Description
accordion
accordion_active number 1 Set which accordion item will be open. To close all accordion items set this attribute to "0".
parent boolean 1 Set to "1" to close other items when one is opened.
accordion_item
title string Title here... 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]
Get code
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://picsum.photos/750/445" link="#" color="#e63946"]Text 1[/boximg]
[boximg image="https://picsum.photos/750/445" link="#" color="#119d65"]Text 2[/boximg]
[boximg image="https://picsum.photos/750/445" link="#" color="#fb8b24"]Text 3[/boximg]
[boximg image="https://picsum.photos/750/445" link="#" color="#033860"]Text 4[/boximg]
[/boxes]
Get code
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]
Get code
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]
Get code
Attributes Type Default Description
size number 4 The sum of all columns is 12.

Gap

Return gap div.

[gap size="20"][/gap]
Get code
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://picsum.photos/950/250"][/header]
Get code
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]
Get code
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]
Get code
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]
Get code
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://picsum.photos/300/300/nature[/image]
Get code
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]
Get code
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]
Get code
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://picsum.photos/1200/600"][/slider_item]
[slider_item image="https://picsum.photos/1200/600"][/slider_item]
[slider_item image="https://picsum.photos/1200/600"][/slider_item]
[/slider]
Get code
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.
nav boolean 1 Prev/next navigation.
dots 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]
Get code
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]
Get code
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" bg_image="https://picsum.photos/700/400"][/video]
Get code
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 IQ theme you may use over 1100 icons. The following icons ara available:

It is not recommended to change any theme file. It is safe but after upgrade to a newer version all changes will be lost.

If you want to add some small css changes you may use theme option "Custom Css Code" (location: Theme options → Style → Custom Css Style).

Before Send a Support Message

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

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

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

3. Error message text. To know if and what is it go to: Site administration → Development → Debugging and set "Debug messages" option to "DEVELOPER: extra Moodle debug messages for developers".

4. Screenshots or 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 ↑