File Info
Installation
Installation/Update via File Uploader
Go to: Site administration → Plugins → Install Plugins and choose "mb2cg_theme_MOODLE-27-35.zip" (for Moodle version from 2.7 to 3.5) or "mb2cg_theme_MOODLE-36.zip" (for Moodle version 3.6) file, and click "Install plugin from the ZIP file" button.
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 "mb2cg_theme_MOODLE-27-35.zip" (for Moodle version from 2.7 to 3.5) or "mb2cg_theme_MOODLE-36.zip" (for Moodle version 3.6) file on your computer. Inside unziped folder you will find "mb2cg" folder.
Use FTP client (e.g. FileZilla) to upload "mb2cg" folder to: your_moodle_installation/theme.
Go to Site administration → Notifications and 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 "Cognitio" theme and click "Use theme" button.
For more info check Moodle documentation.
Settings
Settings Access
To access the theme options click "gear" icon on the top right corner or go to: Site administration → Appearance → Themes → Cognitio.
General Settings
Logo and Favicon
Location: Site administration → Appearance → Themes → Cognitio → General.
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.
Site Info
Location: Site administration → Appearance → Themes → Cognitio → General → Site Info.
You may add custom site info (emails, phones, loations, etc.) into page header. You may add up to 3 emails, phones, locations and custom info.
Layout Settings
Location: Site administration → Appearance → Themes → Cognitio → General.
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: Site administration → Appearance → Themes → Cognitio → General.
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.
Block Regions Settings
Location: Site administration → Appearance → Themes → Cognitio → General.
Theme provide the followind block regions:
- After Header (after-header)
- Slider (slider)
- After slider a, b (after-slider-a, after-slider-b)
- Before content a, b (before-content-a, before-content-b)
- Side pre (side-pre)
- Side post (side-post)
- After content a, b (after-content-a, after-content-b)
- Bottom a, b (bottom-a, bottom-b)
- Before footer a, b (before-footer-a, before-footer-b)
- Footer a, b, c, d (bottom-a, bottom-b, bottom-c, bottom-d)
- After footer a, b (after-footer-a, after-footer-b)
In general settings ("Block Regions") you may disable Bootstrap grid for selected regions. This is required for example for slider block published in "slider" block region.
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.
Footer Settings
Location: Site administration → Appearance → Themes → Cognitio → General.
You may add custom 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" published in "Footer A" block region. There is the following content in this block:
[image width="165" margin="0 0 15px 0"]https://dummyimage.com/206x58/a83432/ffffff[/image] Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor. Cras ultricies ligula sed magna dictum porta. Vivamus magna. [button link="#" type="primary" margin="10px 0 0 0"]Read more[/button]Get code
#2
This is block "HTML" published in "Footer B" block region. There is the following content in this block:
[list] [list_item link="#"]Nulla porttitor accumsan[/list_item] [list_item link="#"]Sed porttitor lectus nibh[/list_item] [list_item link="#"]Proin eget tortor risus[/list_item] [list_item link="#"]Donec sollicitudin molestie[/list_item] [list_item link="#"]Quisque velit nisi[/list_item] [/list]Get code
#3
This is block "HTML" published in "Footer C" block region. There is the following content in this block:
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi vivamus suscipit. [boxbg] [icon name="fa-envelope" nline="1" color="#fff" margin="0 0 13px 0"] info@example.com[/icon] [icon name="fa-phone" color="#fff" margin="0 20px 0 0"] +12 345 67 89[/icon] [icon name="fa-print" color="#fff"] +12 345 67 89[/icon] [/boxbg]Get code
You may use publish block maximum in four columns.
Features Settings
Loading Screen Settings
Location: Site administration → Appearance → Themes → Cognitio → Features.
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.
Login Form
Location: Site administration → Appearance → Themes → Cognitio → Features → Login Form.
You may set custom text below login form and also add custom links (up to 3), for example login info for students, teachers and guests.
Scroll to Top Settings
Location: Site administration → Appearance → Themes → Cognitio → Features.
You may enabled scroll to top link with smooth animation effect.
Fonts Settings
Location: Site administration → Appearance → Themes → Cognitio → 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: Site administration → Appearance → Themes → Cognitio → Menus.
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: Site administration → Appearance → Themes → Cognitio → Menus.
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).
Pages Settings
Login Page Settings
Location: Site administration → Appearance → Themes → Cognitio → Pages.
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: Site administration → Appearance → Themes → Cognitio → Pages.
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.
Social Settings
Location: Site administration → Appearance → Themes → Cognitio → Social.
You may publish social network icons in header and footer.
You may enabled tooltip option to show social media name on icon hover.
YTo add social media icon just select it from list.
Style Settings
Colors Settings
Location: Site administration → Appearance → Themes → Cognitio → 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: Site administration → Appearance → Themes → Cognitio → 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)
Main Header Style Settings
Location: Site administration → Appearance → Themes → Cognitio → Style.
You may use one of three header styles:
- Light (default)
- Light and dark navigation
- Light and color navigation
Block Regions Style Settings
Block Regions Padding
Location: Site administration → Appearance → Themes → Cognitio → 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: "30,0" which is 30 pixels padding top and 0 pixels padding bottom.
Block Regions Layout
Location: Site administration → Appearance → Themes → Cognitio → Style.
Selected block regions contains two columns, for example "After Slider A" and "After Slider B". Default width of these columns is 6 which is half of full grid (6+6=12). In theme options you may change default width of the first column, the second column width will be set automatically. For example set this field to "8" and you will get width of the first column 8 and width of the second column 4 (8+4=12).
Block Regions Style
Location: Site administration → Appearance → Themes → Cognitio → Style.
Selected block regions you may set custom style.
Typography Settings
Location: Site administration → Appearance → Themes → Cognitio → 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.
Slider Block
Installation
To use slider you need 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, select plugin type "Block (block)" and click "Install plugin from the ZIP file" button.
Setup
To set up main slider go to front page.
Then turn it 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.
Then set "Prev Next Navigation" option to "Navigation in caption box". Leave default values of other settings in this area.
Global Slides Options
You may set global options (caption style, width background color, etc.) for all slides. These options can be overwritten by settings at single slide.
Click "Global Slide Options" and set the following options:
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).
Front Page Builder
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, then paste it into import textarea and click "Import" link.
To keep changes click "Save changes" button.
Courses Categories Element
Images in courses categories element comes from category description. To set image you have to edit category,
and add image to category description.
Featured Courses Element
Images in featured courses element comes from course summary file. To set image you have to edit course settings,
and add image course summary file.
A-Z Courses Block
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.
Content Block
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, select plugin type "Block (block)" and click "Install plugin from the ZIP file" button.
Setup
To set up site announcements ticker go to front page.
Then turn it editing on Front page settings → Turn editing on.
Find block "Add a block", choose from dropdown list "Mb2 Content" and move it to "After Header" block region.
Then on Mb2 Content block click "gear" icon and choose "Configure Mb2 Content Block block"
and set the following parameters:
Banners Block
Installation
To use banners you have to install "Mb2 Banners" block which is located in "Plugins" folder in downloaded files. Go to Site administration → Plugins → Install Plugins, upload "block_mb2banners-x.x.x.zip" file, select plugin type "Block (block)" and click "Install plugin from the ZIP file" button.
An alternative installation method is to unzip "block_mb2banners-x.x.x.zip" file and upload via FTP "mb2banners" folder to moodleRoot/blocks directory. Then go Site administration → Notifications and upgrade database.
Display banners
To setup banners go to frontpage, then Front page settings → Turn editing on. After that find block "Add a block", choose from dropdown list "Mb2 Banners" and move it to "Banner Top" or "Banner Bottom" block region. Then on "Mb2 Banners" block click "gear" icon and choose "Configure Mb2 Banners Block block".
On block settings page you may set custom colors, text, start/end publishing time, cookies expire time and custom close button. You may use multiple banners on the same page.
To display banner on any page, in "Where this block appears" section select "Display throughout the entire site" option.
Elements (shortcodes)
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.
An alternative installation method is to unzip "filter_mb2shortcodes-x.x.x.zip" file and upload via FTP "mb2shortcodes" folder to your_moodle_website/filter directory. Then go Site administration → Notifications and upgrade database.
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 | |||
| 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. | |
| open | boolean | 0 | Set to "1" if you watn to make item opened. |
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://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]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://placeimg.com/950/250/nature"][/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://placeimg.com/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://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]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://placeimg.com/700/400/nature"][/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". |
Icon Fonts
In Cognitio theme you may use over 1100 icons. The following icons ara available:
- Glyphicons - example name: "glyphicon-home"
- Font Awesome - example name: "fa-comments"
- Pe-icon-7-stroke - example name: "pe-7s-gym"
Custom Styles
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: Site administration → Appearance → Themes → Cognitio → Style → Custom Css Style).
Support
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.
