User Interface Elements

The following smart tags can be used to display UI (user interface) elements.

Course Cards and Other Information

• {teamcards} : Displays photos, names (optionally linked) and optional descriptions of anyone anywhere on the site who has one of the roles selected in Site Administration > Appearance > Course > Course Contacts. Only Verbose format is suitable for use in a side block.

• {coursecards} or {coursecards categoryID} : Display available courses as cards. Note that the courses to be displayed only include (a) the courses that the user is already enrolled in OR (b) courses that the user is able to enrol in (e.g. self-enrolment is enabled and there are no restrictions that would prevent the user from self-registering in the course.) You can optionally specify the ID number of a category. Example: {coursecards 1} will only display courses in the default Miscellaneous category. Note: The categoryID is not the "Category ID Number" field that you can optionally specify when creating a category. The maximum number of courses displayed is controlled by the front page setting called frontpagecourselimit. Course will be displayed if its visibility is set to Show AND (either has no end date OR a future end date). Courses not visible will be still visible to site admins or users with viewhiddencourses capability.

• {coursecard ids} : Display specific course cards by specifying a list of one or more course ids separated by a space. Example: {coursecard 20 43 104} will display 3 course cards assuming they exist. Courses that have their visibility set to Hidden or that have an expired end-date will only be visible to those who have the capability to see hidden courses (e.g. Site Administrator or Manager role). The maximum number of courses displayed is controlled by the front page setting called frontpagecourselimit. Course will be displayed if its visibility is set to Show AND (either has no end date OR a future end date). Courses not visible will be still visible to site admins or users with viewhiddencourses capability.

• {courseprogress} : Displays course progress status in words. Only works within a course.

• {courseprogresspercent} : Displays course progress percentage as a number without a percentage symbol. Only works within a course.

• {courseprogressbar}: Displays course progress status as a status bar. Only works within a course.

• {categorycards} or {categorycards id} : Display top-level categories as cards using the current category as the top-level category. For example, on the Frontpage, it will display all top-level categories. However, if you are inside the Miscellaneous category (e.g., in Miscellaneous > Your Course), it will only display the next level of categories under the Miscellaneous category. You can optionally specify a category in the tag.

• {mycourses} : Display an unordered list of links to all my enrolled courses.

• {myccourses} : Display an unordered list of links to all my completed courses. Only includes courses in which course completion has been configured and enabled.

• {mycoursescards[ categoryID(s)]} : Displays a series of cards for my enrolled courses. You may optionally specify one or more category IDs separated by a space. A message indicating that you are not logged-in will be displayed if you are not logged in. Course will be displayed if its visibility is set to Show AND (either has no end date OR a future end date). Courses not visible will be still visible to site admins or users with viewhiddencourses capability.

Labels, Buttons & Graphics

• {label type}{/label} : Display text over background colour. The Boost theme supports the following types: info, important, secondary, success and warning. Other themes may also support primary, danger, light, dark and more. Example: {label info}For your information{/label}. Actual foreground and background colours vary depending on the theme. If the type is not specified, it will default to info. If the type specified is not supported by your theme, it may default to secondary.

• {button URL}Label{/button} : Create a clickable button link formatted like a primary button.

• {chart radial x caption text} : Create a radial (circle / doughnut) chart given it a value of x between 0 and 100 and an optional caption. If you do not want a caption, just specify a blank space instead of the Heading text.

• {chart pie x caption text} : Create a pie chart given a value of x between 0 and 100 and an optional title. If you do not want a caption, just specify a blank space instead of the caption text.

• {chart progressbar x caption text} : Create a horizontal progress bar chart giving it a value of x between 0 and 100 and an optional caption. If you do not want a caption, just specify a blank space instead of the caption text.

• {chart progresspie x --size:150px --border:20px --color:purple --bgcolor:#f0f0f0 --title:caption text}Create a (circle / doughnut) progress chart giving it a value of x between 0 and 100. You can specify the height/width (size) and the thickness (border) of the line in* px as well as the color and background color by name or by RGB value. You can also specify a caption. Note that all parameters that begin with two dashes (--) are optional.

• {showmore}{/showmore} : Toggle showing content between opening and closing more tags. Limitations: Can only be used inline with text. Must now weave into other opening and closing tags.

• {qrcode}{/qrcode} : Generate and display a QR Code for the content between the tags.

• {keyboard}...{/keyboard} : Will format the enclosed text by putting a box around it to make it look like a key on a computer keyboard.

Alerts and Icons

• {note}content{/note} : Enables you to include a note which will not be displayed.

• {help}content{/help} : Enables you to create popup help icons.

• {info}content{/info} : Enables you to create popup help icons just like the popup Help icons but with an "i" information icon.

• {alert style}content{/alert} : Creates an alert box containing the specified content. You can change the style by specifying an optional parameter. Example: {alert primary} or {alert success}. List of styles. In addition, you can also specify {alert border} which will simply put a border around your content. This cannot be combined with other styles.

• {highlight}{/highlight} : Highlight text like a highlighter in bright yellow. NOTE: Must only be used within a paragraph.

• {marktext}{/marktext} : Highlight text using HTML5's mark tag. You can style this tag using CSS in your theme using a fc-marktext class.

• {markborder}{/markborder} : Surrounds text with a red dashed border. You can style this tag using CSS in your theme using a fc-markborder class (border and padding with !important to override).

• {getstring:component_name}stringidentifier{/getstring} or {getstring}stringidentifier{/getstring}: Display a language string in the current language.

• {fa/fas/fab/fa-solid/fa-brands fa-...} : Insert FontAwesome icon. Note: FontAwesome Font/CSS must be loaded as part of your theme. Supports FontAwesome 4.x and 6.0. If you have the pro version installed, it the additional icons will be supported as well.

• {glyphicon glyphicon-...} : Insert Glyphicons icon. Note: Glyphicons Font/CSS must be loaded as part of your theme.

HTML

• {-} : Is substituted for ­, a soft hyphen that only appears when needed.

• {nbsp} : Is substituted for a non-breaking space when displayed.

• {hr} : Horizontal rule.

• {details}{summary}{/summary}{/details} : An easy way to create an HTML 5 Details/Summary expandable section in your page. IMPORTANT: {details}{summary}{/summary} must all be on one line (it is ok if the line wraps). The rest of the details can be on multiple lines followed by the {/details}. This is an experimental feature that may result in invalid HTML but it works. You can optionally add a CSS class name to the opening details tag. Example: {details faq-class}

Back to section / Back to course button

Help students navigate your site by implementing this handy-dandy BACK button. Works at both the section and activity level.

If you are in a section and want to go directly back to the main course outline but scroll down to the current section, try this: