Edifi is a sleek and powerful responsive Moodle theme that provides all the tools you need to launch a successful online e-learning portal.
Features
This template has everything that you need to build a learning management system with Moodle. Check out some of features that we have in this template. To know more about features of Edifi, continue reading our documentation and check our available components.
- HTML5 & CSS3
- Built with Bootstrap 4
- SCSS files included
- 100% responsive design
- Cross browser compatibility
- RTL language support
- Homepage slider
- Homepage carousel
- Custom menus
- Different header styles
- Customizable footer widgets
- Social media icons in footer block
- Promo boxes on home page
- Predefined color schemes
- Predefined layouts for courses listing page
- Google fonts support
- One click DEMO data importer
- Background images included
- Well Documented
- Easy to customize
- Customizable login page
- Supports moodle front page items: list of courses, list of categories , announcements
- Customizable front page settings
- 4 header styles
- Customizable featured courses block in frontpage
- Student testimonials block in frontpage
- Our team/teachers block in frontpage
- Site preloader option
- Back to top option
- Supports Custom CSS
- Easy to use
- No coding knowledge required
- Very detailed online documentation
- Fully tested on multiple versions of moodle
- Frequent updates to support newer moodle versions
- Free future updates & new features
- Reliable support
Installation
You can install the theme in two ways: through Moodle, or via FTP. The theme_edifi.zip file is the Installable Moodle Theme and what you need to use to get the theme installed. Please see the following sections for each method. But first, you need to download the Edifi files from your LMSACE account. Navigate to your downloads page on LMSACE and find Edifi theme with version. Click the download button to get Edifi installable theme file. See below.
For Moodle version 3.2.X please download Edifi version 1.3
Install Theme via FTP client
- Log into your server installation via FTP. You can use software such as Filezilla for this.
- Unzip the theme_edifi.zip file and ONLY use the extracted Edifi theme folder.
- Upload the extracted Edifi folder to the to the /theme folder of your Moodle installation.
- Now login to your Moodle site as an admin and go to Site administration > Notifications, you will see a Notification for theme to be installed. Click "Upgrade Moodle Database now" button to continue for the installation procedure.
Install Theme via Moodle
- Login to your Moodle site as an admin and go to Site administration → Plugins → Install plugins
- Upload the theme_edifi.zip file. You could be prompted to add extra details (in the ‘Show more‘ section), if your plugin is not automatically detected.
- If your target directory is not writeable, you will see a warning message.
- Check the plugin validation report to find if the theme has been successfully installed.
Activating The Theme
- Log in as admin and go to Site administration → Appearance → Themes → Theme Selector
- Click on "Clear theme caches" button
- Click on the "Select theme" button on the right of the current theme being
- Scroll down to find Edifi
- Click the "Use theme" button next to Edifi
- Moodle will tell you that the theme has been set as the default theme
- Check your Moodle site by going to the Moodle site’s home page
Import Edifi Demo
- Login to your Moodle site as an admin and go to Site administration → Appearance → Themes → Edifi
- Select General tab → "Miscellaneous Items" section
- Please check the import demo content checkbox to import the demo data that will make your installation look like our demo site.
- It can take a few minutes to import everything. Please be patient and wait for it to complete. Once it loads, you will see a success message.
Update Theme
Download the latest theme version and install the theme plugin in your moodle. Same process as the theme installation.
- Login to your Moodle site as an admin and go to Site administration → Plugins → Install plugins
- Upload the theme_edifi.zip file. You could be prompted to add extra details (in the ‘Show more‘ section), if your plugin is not automatically detected.
- If your target directory is not writeable, you will see a warning message.
- Check the plugin validation report to find if the theme has been successfully installed.
Validation Failure
If the validation error message occurs during installation or upgrading the theme, its because the theme is trying to install on the lower moodle version.
Upgradation Failure
If the upgradation error message occurs during upgrading the theme, its because the theme new version is incorrect from the current installed version.
Multi Language
The multi-language content filter enables resources to be created in multiple languages. When turned on, it looks for tags which indicate that a text contains multiple languages. Then it selects and outputs the text in the user's language
Enabling the multi-language content filter
An admin can enable the multi-language content filter as follows:
- Go to Site administration > Plugins > Filters > Manage filters and in the dropdown menu for multi-language content select 'On'.
- If headings are to be shown in multiple languages too, select 'Content and headings' in the 'Apply to' column. Note that this may affect site performance.
How to use
<"span lang="en" class="multilang"> "your_content_in_English"<"span lang="de" class="multilang"> "your_content_in_German_here"
Common problems
The multi-lang filter is not enabled. It can be enabled in 'Manage filters' in the Site administration'.
- Headings aren't displaying correctly - the multi-lang filter should be set to apply to content and headings in 'Manage filters' in the Site administration'.
- Extra characters between language span tags - editor might add
or other tags, please review the html in source view. - If the course setting is "force" some language, you won't be able to change the displayed language.
- Extra spaces in language span tag.
- The multi-lang filter does not work with the course short name! A course's short name is meant as a unique course identifier, so it does not use the multi-lang filter.
General
Color Schemes
Select the color scheme from the color pattern to change your site color. And you can also change your site colors from the color picker in the Customize Design panel of several elements. Click any of the color to view the HEX color.
- Navigate to Site administration → Appearance → Themes → Edifi
- Select "General" tab → "Color schemes,header styles,logo" section
- You can select your theme color from the multi color choice in the Predefined color scheme option,
- If you want your own prefered color, Select the "custom color" from the Predefined color scheme option.
- Locate the "Site custom color " option and select the color from the color picker or type the hex value in the text box , then click the ‘Save changes’ button at the bottom
Header Styles
Edifi includes different Header styles to better fit the needs of your website(s).
- Navigate to Site administration → Appearance → Themes → Edifi
- Select "General" tab → "Color schemes,header styles,logo" section
- Locate the "Header Style" option and select your header style
Header Style1
The default header style has the logo on the left and the navigation menu on the right. The "White" color as background for the header is default header by disabling the "Transparent header" and "Transparent header overlay" option.
Header Style1
Enable the "Transparent header" option, for the "Transparent BG header".
Header Style3
Enable the "Transparent header" and "Transparent header overlay" option for the Semi Transparent BG header.
Sticky Header
"Sticky Header" has theme color as BG color will appear only when scrolling the page.
Logo
You can upload your custom logo and sticky logo here.
- Navigate to Site administration → Appearance → Themes → Edifi
- Select "General" tab → "color schemes,header styles,logo" section
- Locate the "Logo" option and upload your custom logo
- "Sticky header logo" option will be next to the "Logo" option and upload your custom logo for sticky header
Menus
Manage Primary Menus
Primary Navigations are placed next to the site logo. Choose your header primary menu style:- Select the "Left Left nav" menu for logo at the left and primary menu on the left side on the header.
- Select the "Centered split nav" menu for logo at the center between the splited primary menu on the header.
- Select the "Left Right nav" menu for logo at the left and primary menu on the right side on the header.
- Select the "Left Centered nav" menu for logo at the left and primary menu on the center on the header.
- Navigate to Site administration → Appearance → Themes → Edifi
- Select "General" tab → "color schemes,header styles,logo" section
- Locate the "Primary menu items" option and configure the primary menus
Header Height
You can also increase the header height by adding the value in the text box. But the Sticky header will be default height.
Manage Custom Menu Items
The custom menu, which appeared as the "primary menu" on the header with different styles. To manage custom menu links- Navigate to Site administration → Appearance → Themes → Theme Settings
- Locate the "Custom menu items" option and configure the custom menu items
Enable Courses Menu Items
Manage front page items
- Navigate to Site administration → Appearance → Themes → Edifi
- Select "General" tab → "Manage front page items" section
You can change the style of the frontpage setting by customization of the "Manage front page items".
- Enter the "Course ID" to display the courses on the "Featured Courses" block.
- You can add the Title, Description for the Featured Course, Available Course, My Course, Course Categories, Combo List Course and Search block.
- Choose the block style as moodle default or Carousel for the front page default items in the settings.
The Available courses as the carousel style and search block on the frontpage. All the courses will be shown in the slider list of the "Available courses" block.
The Combo list courses as the carousel style on the frontpage. You can select the category and also the sub category on the "Select subcategory" select box.
The Site news with the default style on the frontpage. You can add the site news by clicking the "Add a new topic" on the frontpage after logged in as "Administration".
Miscellaneous items
- Navigate to Site administration → Appearance → Themes → Edifi
- Select "General" tab → "Miscellaneous items" section
In "Miscellaneous items"
- Courses listing page layout: To change the display format of the courses listing page choose the default or the custom layout.
- Background image for login page: Upload a background image for user login page.
- Custom SCSS: Use this field to provide SCSS or CSS code which will be injected at the end of the style sheet
- Import demo content: To import the content for your theme as the demo site.
- Enable preloader: This option allow you to show/hide preloader animation when the site pages are loading.
- Preloader background color:Select your prefered color for the pre-loader background color.
- Preloader image: Use this option to change the pre-loader animation image (GIF)
- Add back to top button: This option controls to enable a back to top button on your pages.
Homepage Slider
Homepage Slider is highly customizable and responsive swipe image slider carousel with content, links and slideshow effects. When cursor hover Slider, it will freeze and when the cursor is away from slider then it moves to the next slider.
- Navigate to Site administration → Appearance → Themes → Edifi
- Select "Homepage slider" tab → "Slider options" section
- The Homepage slider contains number of slider, Autoplay, pagination, pause time, Height and Canvas type options.
- Show homepage slider: You can show/hide the Homepage slider by selecting Yes/No from the select box.
- Number of slides: Use this option to select the number of slides. You can add upto maximum of 12 slides for the Homepage slider.
- Autoplay: Use this option to scroll slides automatically after page load by selecting yes in the select box.
- Pagination: You can set the pagination style with Dots or Thumbnails image for the slider.
- Pause time: Use this option to set the pause or wait time between each slide change in the slideshow.
- Slideshow height: You can set value for the slider height in the text box.
- Canvas size: Use this option to set the canvas size.
- Canvas color: Select your prefered color fron the color picker for your canvas content.
Slideshow option:
- Navigate to Site administration → Appearance → Themes → Edifi
- Select "Homepage slider" tab → "Slide 1 options" section
- Status: The slide has the option to show or hide the respective slideshow.
- Slide type: Select whether you need the image or video slide for the slideshow.
- Slide image: Upload the image for the respective slide, add the recommended image size.
- Slide video URL: If you have selected the self-hosted video in the "Slide type", then add the video URL here.
- Video preview image: Upload the image, which will appear while the video is loading for the video slide.
- Mute audio: Select Yes/No to mute audio for the video slide.
- Slide title and description: Add the title and the description for the slide.
- Button 1 text, URL, target: Add the text, URL for the slide and select the target whether the link should be open in the "Same/New" window.
- Content style: You can choose the content/canvas style from the style option.
- Content width: Use this option to set the width for the content. This width will be calculated as a percentage of main grid width. Default value for this option is 50%.
- Content position: Use this option to set the location of the slide content and button in the slide.
- Content color: Use this option to set the color of slide contents (ie Slide title, Slide description and buttons).
- Slide title,description and button animation: Select the animation style for the slide content top appear on the slideshow.
- Slide animation: Use this option for the transition animation type of the slide, move to the next slide.
- Zoom slide image: Use this option for the image slideshow displaying images with zooming effect
- Overlay type: Select whether you need the background overlay for the content or full slide.
- Overlay color: Use this option to set a color for overlay on the slide. With this you will guarantee the readability of slide textual content.
- Overlay opacity: Use this option to set the opacity level of the overlay color. The default value for this option is 0.4.
- Click the "Save changes" button to save the customized option to apply for the slide.
Marketing Spots
News & Events block
- Navigate to Site administration → Appearance → Themes → Edifi
- Select "Marketing spot" tab → "News & Events block" section
- Acitvate block: Select the checkbox to enable the "News & Events block"
- News & Events block content: Whatever you add to this textarea will be displayed in the "News & events block in front page".
After finishing site featured block customization block will be like this:
Site Featured Block
Getting a message to your target audience that is exactly what you want to say, exactly how you want to say it!
- Navigate to Site administration → Appearance → Themes → Edifi
- Select "Marketing spot" tab → "Site Featured Block" section
- The demo site of Theme Edifi contains a row of four icon boxes on the frontpage below the "Featured Courses". They also contain Image, Title, Description and links, for example to refer to another page.
- In the Site Featured First block, Enable the checkbox for the Activate block to Activate the "Site Featured First Block".
- Add image or the icon in the File picker, then add Title, Description in the textbox and the URL, if you want to link this feature to a page.
- Follow the same process to activate the other site featured block and Click "Save Changes"
After finishing site featured block customization block will be like this:
Category Images
You can represent the categories by adding the images for the category in the back-end setting. Follow the instruction to add the images for the categories.
- Navigate to Site administration → Appearance → Themes → Edifi
- Locate the "Category images" option and upload the image for the categories
After adding the images to the catergories the category block will be like this:
As the Category row value changes in the setting, the category block row will increases on the frontpage as shown on the image below
Testimonials
You can show the users review by the testimonial block.
- Navigate to Site administration → Appearance → Themes → Edifi
- Locate the "Testimonials" option and "Testimonials general settings".
- You have to Activate the testimonial block by enabling the checkbox, to display the testimonials on the frontpage.
- You can add upto 16 testimonials by selecting the value on the "Number of testimonials" select box.
- Select whether the testimonial should autoplay by selecting the "Autoplay" option.
- Also Add the Auto play time interval, Title and Description for the Testimonial block.
Add the User name, User role, image and content for the testimonial blocks.
After adding the content on the testimonial block setting, you will get the result in the front page as the below image
Counter Block
You can show the counters in the counter block.
- Navigate to Site administration → Appearance → Themes → Edifi
- Locate the "Counters" option and "Counters general settings".
- You have to "Activate" the Counter block by enabling the checkbox, to display the Counters on the frontpage.
- Add the Title, Description for the Testimonial block.
- Uploading the image for "Block background image" will be the background image for the counters block.
- You can Enable the "Parallax Effect" for the Counters block.
Add the User name, User role, image and content for the counter blocks.
After adding the content on the Counter block setting, you will get the result in the front page as the below image
Our Partners
You can view the users review by the Partner block.
- Navigate to Site administration → Appearance → Themes → Edifi
- Locate the "Partners" option and "Partners general settings".
- You have to Activate the Partners block by enabling the checkbox, to display the testimonials on the frontpage.
- You can add unlimited number of partners by adding the value on the "Number of Partners to show" text box.
- Select whether the Partners should autoplay by selecting the "Autoplay" option.
- Also Add the Auto play time interval, Title and Description for the Partners block.
Parenters Block
Add the Title, logo, URL for the Partners blocks.
After adding the content on the Partners block setting, you will get the result in the front page as the below image
Footer Blocks
Getting a message to your target audience that is exactly what you want to say, exactly how you want to say it!
- Navigate to Site administration → Appearance → Themes → Edifi
- Select "Footer" tab → "Footer Block 1" section
- Activate block: Select the checkbox to activate the respective footer block.
- Title: Enter a title for the respective block as plain text or use "Block Title""Block Title" for the multi lang support
- Footer description: Enter the any text or html content inside the Text editor block for the footer description or use "Block Title""Block Title" for the multi lang support.
- Add image or the icon in the File picker, Title, Description in the textbox and the URL to refer to another page
- Follow the same process to activate the other site featured block and Click "Save Changes"
Footer Center Block
- Navigate to Site administration → Appearance → Themes → Edifi
- Select "Footer" tab → "Footer Center Block" section
- Footer logo: Upload the logo to display at the footer center block.
- Address: Enter the address in the text editor to know about your the location.
- Email/Phone no: Enter the Email and phone.no in the text box for the more information to contact.
Copyright & social media informations
- Navigate to Site administration → Appearance → Themes → Edifi
- Select "Footer" tab → "Change copyright & social media informations" section
- Social media icon/URL: Enter the social media icon and URL name in the text box which is used to follow you on the social network. You can add four social icons which will display at the bottom of the footer.
- Copyright content: Enter the Copyright content in the text box to display at the footer bottom.
Different appearance when the footer blocks are disable:
All blocks are Enabled:
One block Disabled:
Two blocks Disabled:
Center block Disabled:
Integer egestas ante id justo mollis feugiat ac vel metus. Nunc pulvinar scelerisque faucibus. Aenean at libero hendrerit, feugiat felis suscipit, facilisis justo. Praesent laoreet rutrum velit vitae facilisis. Fusce ac consectetur leo. Praesent dapibus interdum arcu, et hendrerit mi imperdiet eget. Morbi volutpat, leo id interdum aliquet, massa justo vestibulum nisl, eget posuere velit diam ac nibh. Duis tellus enim, porttitor id lectus vitae, tristique congue odio. Duis elementum porttitor nibh et porta. Suspendisse potenti.
Ut vitae sagittis ex. In porttitor ante in nunc ultrices malesuada. Praesent iaculis odio vitae volutpat tempus. Nullam a sodales lorem, nec pellentesque odio. Praesent ullamcorper nisl commodo justo imperdiet dignissim. Duis purus magna, congue sit amet varius condimentum, dapibus tristique urna. Aliquam congue molestie tempor. Curabitur vel arcu vel nibh euismod porttitor. Sed a dolor maximus ex tempus pharetra rhoncus et nulla. Integer dolor ex, lobortis ac leo non, dapibus cursus ligula. Fusce sed ultrices urna, vel tincidunt mi. Nullam neque dolor, tempor nec lorem vitae, scelerisque consectetur quam.
Typography
Typography is the art and technique of arranging type to make written language readable and appearance on your site. A text stays the same no matter how it's rendered. Use typefaces and web fonts more creatively with our expert-taught typography.
Headings
A title at the head of a page or section with h1 tag through h6 tag, are available with different font styling.
h1. theDocs heading
h2. theDocs heading
h3. theDocs heading
h4. theDocs heading
h5. theDocs heading
h6. theDocs heading
Integer egestas ante id justo mollis feugiat ac vel metus. Nunc pulvinar scelerisque faucibus. Aenean at libero hendrerit, feugiat felis suscipit, facilisis justo. Praesent laoreet rutrum velit vitae facilisis.
<div class="typo-block">
<h1>h1. theDocs heading</h1>
<h2>h2. theDocs heading</h2>
<h2 class="title-headings"><b>Docs</b> heading<span><i class="fa fa-star"></i></span></h2>
<h3>h3. theDocs heading</h3>
<h4>h4. theDocs heading</h4>
<h5>h5. theDocs heading</h5>
<h6>h6. theDocs heading</h6>
<p> Integer egestas ante id justo mollis feugiat ac vel metus. Nunc pulvinar scelerisque faucibus. Aenean at libero hendrerit, feugiat felis suscipit, facilisis justo. Praesent laoreet rutrum velit vitae facilisis. </p>
</div>
Buttons
Use the button classes on an <a>, <button>, or <input> element. Add the class btn-primary, btn-secondary to change the style for the buttons.
Icon and Text
Add fontawesome icon class with <i> and text in the button for the iconic button. You can also change the button size by addign the button classes. Refer the markup for the example below.
<div class="iconic-text-block">
<button type="button" class="btn btn-xs btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-xs btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-xs btn-secondary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-xs btn-success"><i class="fa fa-check-square-o"></i> Checked</button>
<br><br>
<button type="button" class="btn btn-sm btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-sm btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-sm btn-secondary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-sm btn-success"><i class="fa fa-check-square-o"></i> Checked</button>
<br><br>
<button type="button" class="btn btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-secondary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Checked</button>
<br><br>
<button type="button" class="btn btn-lg btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-lg btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-lg btn-secondary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-lg btn-success"><i class="fa fa-check-square-o"></i> Checked</button>
</div>
Labels
You can highlight part of your text by placing it inside a .label class.
Available variations
Add any of the below mentioned modifier classes to change the appearance of a label.
<div class="label-block">
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="label label-dark">Dark</span>
</div>
Labels in header
You can use labels inside a heading tag. Label will changes its size based on the heading size.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<div class="label-block">
<h1>Example heading <span class="label label-primary">New</span></h1>
<h2>Example heading <span class="label label-primary">New</span></h2>
<h3>Example heading <span class="label label-primary">New</span></h3>
<h4>Example heading <span class="label label-primary">New</span></h4>
<h5>Example heading <span class="label label-primary">New</span></h5>
<h6>Example heading <span class="label label-primary">New</span></h6>
</div>
Icon in labels
Labels can accompany icons as well.
<div class="label-block">
<span class="label label-default">a delicious coffee <i class="fa fa-coffee"></i></span>
<span class="label label-primary"><i class="fa fa-cloud"></i> Float in clouds</span>
<span class="label label-danger"><i class="fa fa-exclamation-circle"></i> Danger <i class="fa fa-exclamation-circle"></i></span>
</div>
Tables
Table is a great way to display some related information together. In this page, we show how you can use different type of tables supported in theDocs.
Basic Tables
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<div class="table-block">
<table class="table">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
For more samples and documentation, please visit official Bootstrap documentation.
Options Table
Options table can be used for describing a function, event, class, etc. Make sure you'll wrap your table indside .table-responsive and your table has classes of .table, .table-bordered and .table-striped.
| Name | type | default | description |
|---|---|---|---|
| interval | number | 5000 | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. |
| pause | string | "hover" | Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. |
| delay | number | object | 0 |
Delay showing and hiding the popover (ms) - does not apply to manual trigger type if a number is supplied, delay is applied to both hide/show object structure is: delay: { "show": 500, "hide": 100 }
|
| wrap | boolean | true | Whether the carousel should cycle continuously or have hard stops. |
| keyboard | boolean | true | Whether the carousel should react to keyboard events. |
<div class="table-block">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>interval</td>
<td>number</td>
<td>5000</td>
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
</tr>
<tr>
<td>pause</td>
<td>string</td>
<td>"hover"</td>
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
</tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>0</td>
<td>
<p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
<p>If a number is supplied, delay is applied to both hide/show</p>
<p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
</td>
</tr>
<tr>
<td>wrap</td>
<td>boolean</td>
<td>true</td>
<td>Whether the carousel should cycle continuously or have hard stops.</td>
</tr>
<tr>
<td>keyboard</td>
<td>boolean</td>
<td>true</td>
<td>Whether the carousel should react to keyboard events.</td>
</tr>
</tbody>
</table>
</div>
</div>
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Default alerts
Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.
<div class="alert-block">
<div class="alert alert-success" role="alert">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="alert alert-info" role="alert">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="alert alert-warning" role="alert">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="alert alert-danger" role="alert">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
Dismissible alerts
Build on any alert by adding an optional .alert-dismissible and close button.
<div class="alert-block">
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
</div>
Links in alerts
Use the .alert-link utility class to quickly provide matching colored links within any alert.
<div class="alert-block">
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</a>
</div>
</div>
Callouts
Callouts also are alerts, but in different style.
Well done!
You successfully read this important alert message.
Heads up!
This alert needs your attention, but it's not super important.
Warning!
Better check yourself, you're not looking too good.
Oh snap!
Change a few things up and try submitting again.
<div class="alert-block">
<div class="callout callout-success" role="alert">
<h4>Well done!</h4>
<p>You successfully read this important alert message.</p>
</div>
<div class="callout callout-info" role="alert">
<h4>Heads up!</h4>
<p>This alert needs your attention, but it's not super important.</p>
</div>
<div class="callout callout-warning" role="alert">
<h4>Warning!</h4>
<p>Better check yourself, you're <a href="#">not looking too good</a>.</p>
</div>
<div class="callout callout-danger" role="alert">
<h4>Oh snap!</h4>
<p><a href="#">Change a few things up</a> and try submitting again.</p>
</div>
</div>
Icons
This template supports Glyphicons which is part of Bootstrap, and Font Awesome. You can look for your favorite icons online:
- Glyphicons: http://getbootstrap.com/components/#glyphicons
- Font Awesome: http://fontawesome.io/icons
By the way, you can see the list of icons in the rest of this article.
Table of Content
Having a table of content in above of a page never has been so easy to creat. Just include each topic in an ol tag and add .toc class to it; theDocs will take care of other parts!
Check the following exampleLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="toc-block">
<ol class="toc">
<li>
<a href="#">First topic</a>
<ol>
<li><a href="#">Sub topic</a></li>
<li>
<a href="#">Sub topic</a>
<ol>
<li><a href="#">Sub-sub topic</a></li>
<li><a href="#">Sub-sub topic</a></li>
</ol>
</li>
<li><a href="#">Sub topic</a></li>
</ol>
</li>
<li><a href="#">Second topic</a></li>
<li><a href="#">Third topic</a></li>
<li><a href="#">Fourth topic</a></li>
</ol>
</div>
Views
Views are another way to display several related information together. Mostly you can use them to list the articles which is available in your documentation. Choose the layout that suits the type of content you’re displaying.
List view
In this way, you can show meta data below the title, and write some description of the article before viewing it.
-
Get Going Fast
A quick-start guide to all the basics you need to get up and running now. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.
-
Get a Homepage
Learn how to turn that blog into a static website for your business or your organization. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.
-
Get Lingo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis bibendum ligula. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.
<div class="list-type">
<ul class="list-view">
<li>
<h5><a href="#">Get Going Fast</a></h5>
<p class="meta-data">August 19, 2015 | 3 mins | Beginner</p>
<p>A quick-start guide to all the basics you need to get up and running now. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.</p>
</li>
<li>
<h5><a href="#">Get a Homepage</a></h5>
<p class="meta-data">August 26, 2015 | 5 mins | Beginner</p>
<p>Learn how to turn that blog into a static website for your business or your organization. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.</p>
</li>
<li>
<h5><a href="#">Get Lingo</a></h5>
<p class="meta-data">September 05, 2015 | 12 mins | Intermediate</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis bibendum ligula. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.</p>
</li>
</ul>
</div>
Grid view
Grid view is a great way to show several articles with a short description, or just showing available categories and a short description about its content.
-
post
get_post
Retrieves post data given a post ID or post object.
-
helper
sanitize_title
Sanitizes title or use fallback title.
-
category
in_category
Tests if the current post is assigned to any of the specified categories.
-
posts
is_single
This conditional tag checks if a single post of any post type is being displayed.
-
posts
add_post_meta
Adds a custom field to a specified post which could be of any post type.
-
helper
get_bookmark
Retrieve Bookmark data based on bookmark link ID.
<div class="list-type">
<ul class="grid-view view-col-3">
<li>
<h6>post</h6>
<h5><a href="#">get_post</a></h5>
<p>Retrieves post data given a post ID or post object.</p>
</li>
<li>
<h6>helper</h6>
<h5><a href="#">sanitize_title</a></h5>
<p>Sanitizes title or use fallback title.</p>
</li>
<li>
<h6>category</h6>
<h5><a href="#">in_category</a></h5>
<p>Tests if the current post is assigned to any of the specified categories.</p>
</li>
<li>
<h6>posts</h6>
<h5><a href="#">is_single</a></h5>
<p>This conditional tag checks if a single post of any post type is being displayed.</p>
</li>
<li>
<h6>posts</h6>
<h5><a href="#">add_post_meta</a></h5>
<p>Adds a custom field to a specified post which could be of any post type.</p>
</li>
<li>
<h6>helper</h6>
<h5><a href="#">get_bookmark</a></h5>
<p>Retrieve Bookmark data based on bookmark link ID.</p>
</li>
</ul>
</div>
Two column
If you need to have two column in each row, simply remove .view-col-3 from ul.grid-view tag.
Categorized view
In this view, you can categorize you articles ot tutorials in several part and show more content in fewer space.
-
Getting started
New To theDocs - Where to Start theDocs in Your Language Lessons Tutorials Frequently Asked Questions -
Learn How to Use
Creating a starter page Creat your header Creat a footer Add links to sidebar -
Working With Themes
Theme Development Design and Layout Color cariations -
Write a Plugin
Writing a Plugin Plugin API Plugin Resources -
Contribute to Development
Developer Documentation Reporting Bugs Development Blog FAQ Developer Documentation
<div class="list-type">
<ul class="categorized-view">
<li>
<h5>Getting started</h5>
<a href="#">New To theDocs - Where to Start</a>
<a href="#">theDocs in Your Language</a>
<a href="#">Lessons</a>
<a href="#">Tutorials</a>
<a href="#">Frequently Asked Questions</a>
</li>
<li>
<h5>Learn How to Use</h5>
<a href="#">Creating a starter page</a>
<a href="#">Creat your header</a>
<a href="#">Creat a footer</a>
<a href="#">Add links to sidebar</a>
</li>
<li>
<h5>Working With Themes</h5>
<a href="#">Theme Development</a>
<a href="#">Design and Layout</a>
<a href="#">Color cariations</a>
</li>
<li>
<h5>Write a Plugin</h5>
<a href="#">Writing a Plugin</a>
<a href="#">Plugin API</a>
<a href="#">Plugin Resources</a>
</li>
<li>
<h5>Contribute to Development</h5>
<a href="#">Developer Documentation</a>
<a href="#">Reporting Bugs</a>
<a href="#">Development Blog</a>
<a href="#">FAQ Developer Documentation</a>
</li>
</ul>
</div>
Three column
If you need to have three column in each row, add .view-col-3 to the ul.categorized-view tag.
Promo
In marketing, promotion refers to any type of marketing communication used to inform or persuade target audiences of the relative merits of a product, service, brand and you can use this component to beautify your presentation. The aim of promotion is to increase awareness, create interest, generate sales or create brand loyalty.
With icon
Make it fancier by adding an icon to your promo boxes.Check this example to learn basic usage.
Responsive
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
Customizable
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
Full of features
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
<div class="promo-block">
<div class="row">
<div class="col-md-4">
<div class="promo">
<i class="fa fa-mobile"></i>
<h3>Responsive</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
<div class="col-md-4">
<div class="promo">
<i class="fa fa-cog"></i>
<h3>Customizable</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
<div class="col-md-4">
<div class="promo">
<i class="fa fa-code"></i>
<h3>Full of features</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
</div>
</div>
Alignment
Add class .left or .right to .promo tag, if you want to change alignment.
Responsive
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
Customizable
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
Full of features
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
<div class="promo-block">
<div class="row">
<div class="col-md-4">
<div class="promo center">
<i class="fa fa-mobile"></i>
<h3>Responsive</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
<div class="col-md-4">
<div class="promo center">
<i class="fa fa-cog"></i>
<h3>Customizable</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
<div class="col-md-4">
<div class="promo center">
<i class="fa fa-code"></i>
<h3>Full of features</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
</div>
</div>
Small icon
Add .small-icon class to .promo tag to make your icons smaller.
<div class="promo-block">
<div class="row">
<div class="col-md-4">
<div class="promo left small-icon">
<i class="fa fa-tv"></i>
<h3>Responsive</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
<div class="col-md-4">
<div class="promo left small-icon">
<i class="fa fa-wrench"></i>
<h3>Customizable</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
<div class="col-md-4">
<div class="promo left small-icon">
<i class="fa fa-cubes"></i>
<h3>UI Elements</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
</div>
</div>
With button
If you want to guide user to another pages, you can use button links in your promo blocks.
Responsive
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
Learn moreCustomizable
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
Learn moreFull of features
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
Learn more
<div class="promo-block">
<div class="row">
<div class="col-md-4">
<div class="promo">
<h3>Responsive</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
<a class="btn btn-primary" href="#">Learn more</a>
</div>
</div>
<div class="col-md-4">
<div class="promo">
<h3>Customizable</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
<a class="btn btn-primary" href="#">Learn more</a>
</div>
</div>
<div class="col-md-4">
<div class="promo">
<h3>Full of features</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
<a class="btn btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
</div>
Alignment
You can also use both .left and .right in .promo.
With image
Make it fancier by adding an image to your promo boxes.
Responsive
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
Customizable
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
Full of features
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
<div class="promo-block">
<div class="row">
<div class="col-md-4">
<div class="promo">
<img src="assets/img/placeholder.png" alt="Responsive">
<h3>Responsive</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
<div class="col-md-4">
<div class="promo">
<img src="assets/img/placeholder.png" alt="Customizable">
<h3>Customizable</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
<div class="col-md-4">
<div class="promo">
<img src="assets/img/placeholder.png" alt="Full of features">
<h3>Full of features</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
</div>
</div>
Bordered
Add .bordered to img tag, so you'll have a border around image!
Responsive
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
Customizable
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
Full of features
Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.
<div class="promo-block">
<div class="row">
<div class="col-md-4">
<div class="promo">
<img class="bordered" src="assets/img/placeholder.png" alt="Responsive">
<h3>Responsive</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
<div class="col-md-4">
<div class="promo">
<img class="bordered" src="assets/img/placeholder.png" alt="Customizable">
<h3>Customizable</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
<div class="col-md-4">
<div class="promo">
<img class="bordered" src="assets/img/placeholder.png" alt="Full of features">
<h3>Full of features</h3>
<p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
</div>
</div>
</div>
</div>
Tabs
Add quick, dynamic tab functionality to transition through panes of local content.
Text tabs
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it?
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.
<div class="tab-block">
<div class="tabs tabs-text">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#home1" class="active" aria-controls="home" role="tab" data-toggle="tab">Home</a>
</li>
<li role="presentation">
<a href="#profile1" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
</li>
<li role="presentation">
<a href="#messages1" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
</li>
<li role="presentation">
<a href="#settings1" aria-controls="settings" role="tab" data-toggle="tab"><i class="fa fa-cogs"></i> Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active fade in" id="home1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div role="tabpanel" class="tab-pane fade" id="profile1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div role="tabpanel" class="tab-pane fade" id="messages1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div role="tabpanel" class="tab-pane fade" id="settings1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
</div>
</div>
Alignment
Add .text-center or .text-right to the ul.nav to change the position of tabs.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it?
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.
<div class="tab-block">
<div class="tabs tabs-text">
<!-- Nav tabs -->
<ul class="nav nav-tabs text-right" role="tablist">
<li role="presentation">
<a href="#home3" class="active" aria-controls="home" role="tab" data-toggle="tab">Home</a>
</li>
<li role="presentation">
<a href="#profile3" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
</li>
<li role="presentation">
<a href="#messages3" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
</li>
<li role="presentation">
<a href="#settings3" aria-controls="settings" role="tab" data-toggle="tab"><i class="fa fa-cogs"></i> Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active fade in" id="home3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div role="tabpanel" class="tab-pane fade" id="profile3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div role="tabpanel" class="tab-pane fade" id="messages3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div role="tabpanel" class="tab-pane fade" id="settings3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
</div>
</div>
Big icon tabs
Tabs make it easy to explore and switch between different views with icons.
<div class="tab-block">
<div class="tabs tabs-icon">
<!-- Nav tabs -->
<ul class="nav nav-tabs text-center" role="tablist">
<li role="presentation">
<a href="#home2" class="active" aria-controls="home" role="tab" data-toggle="tab">
<i class="fa fa-home"></i>
<span>Home</span>
</a>
</li>
<li role="presentation">
<a href="#profile2" aria-controls="profile" role="tab" data-toggle="tab">
<i class="fa fa-user"></i>
<span>Profile</span>
</a>
</li>
<li role="presentation">
<a href="#messages2" aria-controls="messages" role="tab" data-toggle="tab">
<i class="fa fa-comment-o"></i>
<span>Messages</span>
</a>
</li>
<li role="presentation">
<a href="#settings2" aria-controls="settings" role="tab" data-toggle="tab">
<i class="fa fa-cogs"></i>
<span>Settings</span>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active fade in" id="home2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div role="tabpanel" class="tab-pane fade" id="profile2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div role="tabpanel" class="tab-pane fade" id="messages2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div role="tabpanel" class="tab-pane fade" id="settings2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
</div>
</div>
ACCORDION
You might find this tutorial useful.
<div class="accordion-block">
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h6 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#quiz1" aria-expanded="true" aria-controls="quiz1">
Where can I configure the theme?
</button>
</h6>
</div>
<div id="quiz1" class="collapse in" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Once installed you can go to the theme settings page to configure the theme: <span class="breadcrumb-bg">Site administration > Appearance > Themes > Edifi</span>
<p>You might find <a href="#">this tutorial </a>useful.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingOne">
<h6 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#quiz2" aria-expanded="false" aria-controls="quiz2">
How do I customise the theme to use my brand’s colour scheme?
</button>
</h6>
</div>
<div id="quiz2" class="collapse " aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
It’s super easy and we’ve got a <a href="#">tutorial</a> for you.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingOne">
<h6 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#quiz3" aria-expanded="false" aria-controls="quiz3">
I need to completely customise the theme. Do you have documentation for it?
</button>
</h6>
</div>
<div id="quiz3" class="collapse " aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
We’ve written some useful tutorials to help you with some basic theme customisations:
<ul>
<li><a href="#"> Moodle Theme Edifi – How to customise the theme to use your brand’s colour scheme</a></li>
<li><a href="#">Moodle Theme Edifi – Useful Bootstrap 4 Components</a></li>
<li><a href="#">Moodle Theme Edifi – Useful HTML code for the footer content blocks</a></li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingOne">
<h6 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#quiz4" aria-expanded="false" aria-controls="quiz4">
I’ve installed your theme successfully but it’s not showing up in the theme selector page. What should I do now?
</button>
</h6>
</div>
<div id="quiz4" class="collapse " aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
You probably need to<a href="#"> purge the Moodle cache.</a> If purging the cache doesn’t work please try the steps list in this tutorial.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingOne">
<h6 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#quiz5" aria-expanded="false" aria-controls="quiz5">
I’ve received your theme update. How do I upgrade your theme?
</button>
</h6>
</div>
<div id="quiz5" class="collapse " aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
You need to replace the whole theme folder with the new one to ensure you don’t miss any changes. Also remember to <a href="#">purge the Moodle cache </a>to see all the changes.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingOne">
<h6 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#quiz6" aria-expanded="true" aria-controls="quiz6">
Will I lose all of my theme configurations after upgrading the theme?
</button>
</h6>
</div>
<div id="quiz6" class="collapse " aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
No, you won’t. All of your theme configurations are safely stored in your database so you won’t lose anything.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingOne">
<h6 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#quiz7" aria-expanded="true" aria-controls="quiz7">
Do I get free future updates of the theme?
</button>
</h6>
</div>
<div id="quiz7" class="collapse " aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Yes. If there is an available update for the theme version you bought we will email the update to you absolutely free. You can check the theme Changelog to see the theme updates. Please make sure you whitelist our email (<a href="#">Lmsace.com</a>) so the update emails don’t end up in your spam folder!
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingOne">
<h6 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#quiz8" aria-expanded="true" aria-controls="quiz8">
I found a bug/issue in your theme. Where can I report it?
</button>
</h6>
</div>
<div id="quiz8" class="collapse " aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Please email us at <a href="#">Lmsace.com </a>with your Moodle version/build and theme version so we can investigate and fix the bug/issue for you asap.
</div>
</div>
</div>
</div>
</div>
</div>
Steps
Prepare a chronological guide to perform an action in your product.
Text
The simplest way to make a step.
Adding a gallary to Wordpress
-
Place your cursor
A gallery can go anywhere on a page or post - by itself on a blank page, or above, below, or in the midst of text. Start by placing your cursor where you want the gallery to appear.
-
Click the Add Media button
Once you've placed your cursor where you want your image gallery to appear, click on the Add Media button (located left above the editing window) to launch the media uploader interface. In the resulting popup window, select the 'Create a Gallery' option from the list of actions on the left.
-
Look for image or upload
You can add or select the images you want to include in your image gallery by choosing from either of the following options in the center of the media uploader window.
-
Write alt and title text
You can add or select the images you want to include in your image gallery by choosing from either of the following options in the center of the media uploader window.
-
-
Add and/or Select the Images
You can add or select the images you want to include in your image gallery by choosing from either of the following options in the center of the media uploader window.
-
Edit Your Gallery
On the Edit Gallery page, you can do the following things before inserting the gallery you have created into your page or post.
<div class="steps-block">
<h3>Adding a gallary to Wordpress</h3>
<ul class="step-text">
<li>
<h5>Place your cursor</h5>
<p>A gallery can go anywhere on a page or post - by itself on a blank page, or above, below, or in the midst of text. Start by placing your cursor where you want the gallery to appear.</p>
</li>
<li>
<h5>Click the Add Media button</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</li>
<li>
<h5>Add and/or Select the Images</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</li>
<li>
<h5>Edit Your Gallery</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</li>
</ul>
</div>
Image
If you have a picture for every step, we suggest you to use this step as it's more interactive.
Placing your cursor
In order to add an image to your page or post, you must first insert your cursor in the place in the text where you want the image to appear. By placing your cursor within your text, you can add images inline with your content. You can also place your cursor on a blank line if you want the image to appear by itself instead.
Click the Add Media button
Once you’ve placed your cursor on the line where you want your image to appear, click on the Add Media button to launch the media uploader interface, and then select the Insert Media option from the list of actions in the left side of the media uploader window.
Add or Select Your Image
You can add or select the image you want to add to your page or post by choosing from either of the following options in the center of the media uploader window:
- Upload Files: Upload the image you want to use from your computer by dragging it into the upload area.
- Media Library: Select from any previously uploaded images in the media library by clicking on the one you wish to add to your page or post.
Attachment Details
The Attachment Details pane displays a small un-cropped thumbnail of the image, as well as important information such as the filename, date uploaded, and image dimensions in pixels.
<div class="steps-block">
<div id="step-image" class="step-image carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#step-image" data-slide-to="0" class="active"></li>
<li data-target="#step-image" data-slide-to="1"></li>
<li data-target="#step-image" data-slide-to="2"></li>
<li data-target="#step-image" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="assets/img/step1.png" alt="">
<div class="carousel-caption">
<h4>Placing your cursor</h4>
<p>In order to add an image to your page or post, you must first insert your cursor in the place in the text where you want the image to appear. By placing your cursor within your text, you can add images inline with your content. You can also place your cursor on a blank line if you want the image to appear by itself instead.</p>
</div>
</div>
<div class="item">
<img src="assets/img/step2.png" alt="">
<div class="carousel-caption">
<h4>Click the Add Media button</h4>
<p>Once you’ve placed your cursor on the line where you want your image to appear, click on the Add Media button to launch the media uploader interface, and then select the Insert Media option from the list of actions in the left side of the media uploader window.</p>
</div>
</div>
<div class="item">
<img src="assets/img/step3.png" alt="">
<div class="carousel-caption">
<h4>Add or Select Your Image</h4>
<div>
<p>You can add or select the image you want to add to your page or post by choosing from either of the following options in the center of the media uploader window:</p>
<ul>
<li><strong>Upload Files:</strong> Upload the image you want to use from your computer by dragging it into the upload area.</li>
<li><strong>Media Library:</strong> Select from any previously uploaded images in the media library by clicking on the one you wish to add to your page or post.</li>
</ul>
</div>
</div>
</div>
<div class="item">
<img src="assets/img/step4.png" alt="">
<div class="carousel-caption">
<h4>Attachment Details</h4>
<p>The Attachment Details pane displays a small un-cropped thumbnail of the image, as well as important information such as the filename, date uploaded, and image dimensions in pixels.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#step-image" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="right carousel-control" href="#step-image" role="button" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
Media
Image
You can add a shadow around your images by adding .img-shadow class to the img tag.
<div class="media-block">
<img class="img-shadow img-responsive center-block" src="assets/img/placeholder.png" alt="shadowed image">
</div>
Use figcaption tag to add a caption to your images.
<div class="media-block">
<figure>
<img src="assets/img/placeholder.png" alt="image test">
<figcaption>some description about the image</figcaption>
</figure>
</div>
More classes
Don't forget that you can always use classes like .img-responsive, .img-rounded, .img-circle, and img-thumbnail which is part of Bootstrap.
<div class="media-block">
<img class="img-responsive img-rounded" src="assets/img/placeholder.png" alt="image">
<img class="img-responsive img-circle" src="assets/img/placeholder.png" alt="image">
<img class="img-responsive img-thumbnail" src="assets/img/placeholder.png" alt="image">
</div>
Video
Adding a video to your page from any source. Just wrap them inside .video class.
YouTube
<div class="media-block">
<div class="video">Embed code</div>
</div>
Vimeo
<div class="media-block">
<div class="video">Embed code</div>
</div>
Self-hosted
Don't forget to add width="100%" and height="100%" attributes.
<div class="media-block">
<div class="video">
<video src="path/to/video.mp4" width="100%" height="100%" controls>
</div>
</div>
Lightbox
Implementing as easy as adding a data-lity attribute to your <a> tags.
Image iFrame Youtube iFrame Vimeo Google Maps
Here's the code to generate above buttons. You can use an <img> tag to show a poster image as well.
<div class="media-block">
<a class="btn btn-default" href="assets/img/index.png" data-lity>Image</a>
<a class="btn btn-default" href="//www.youtube.com/watch?v=hQfNtnKm5nA" data-lity>iFrame Youtube</a>
<a class="btn btn-default" href="//vimeo.com/127738920" data-lity>iFrame Vimeo</a>
<a class="btn btn-default" href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>
</div>
FAQ
New to Moodle? Like to know what some of the acronyms mean, check out our Moodle FAQ. Please check to see if your question is already answered in one of FAQ pages listed below.
Category 1
-
Question sentence 1?
Here is the answer of the question -
Question sentence 2?
Here is the answer of the question
Category 2
-
Question sentence 1?
Here is the answer of the question -
Question sentence 2?
Here is the answer of the question
<div class="faq-block">
<div class="faq">
<input class="faq-search" type="text" placeholder="Type to searchLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">
<h5>Category 1</h5>
<ul>
<li>
<h6>Question sentence 1?</h6>
<div>Here is the answer of the question</div>
</li>
<li>
<h6>Question sentence 2?</h6>
<div>Here is the answer of the question</div>
</li>
</ul>
<h5>Category 2</h5>
<ul>
<li>
<h6>Question sentence 1?</h6>
<div>Here is the answer of the question</div>
</li>
<li>
<h6>Question sentence 2?</h6>
<div>Here is the answer of the question</div>
</li>
</ul>
</div>
</div>