In Quercus, you can add extra emphasis, such as Boxes, Alerts, and Flash Notices, to highlight specific content or call attention to an important message. This might be to remind a user to do something before they're finished or re-iterate information.

The following are examples with accompanying HTML code snippets (see "How do I add this code?"). Once the box or alert is created, you can format the text within the banner.

Examples

Borders:

Practice Quiz Guidelines

Shadow Boxes:

Practice Quiz Guidelines

Alerts:

Remember to try the practice quiz!

Flash Notices:

Warning: Remember to try the practice quiz!

How do I add this code?

Warning! Working with HTML in Quercus can be tricky and can cause unintended display results. It is possible to revert to a previous version of your Page via Revision History, see "How do I view the history of a page in a course?"

In order to add this emphasis, you can use the Rich Content Editor to add the specific HTML code using the HTML editor (see "How do I use the HTML view in the Rich Content Editor as an instructor?"). The Rich Content Editor is used in features that support the editor (Announcements, Assignments, Discussions, Pages, Quizzes, or Syllabus).

One thing to be aware of when adding this code is that the actual banner does not display while in the Rich Content Editor. In order to view the results, you must "Save" the page.

Select and copy the code snippet (available with examples below).
Navigate to a Quercus page (or create a new Quercus page) or to an area where there is a Rich Content Editor (eg. announcements, discussions).
Select "Edit", and switch to the HTML Editor, then paste in your code in the text box.
Click Save to view the results.

Border with code

Border

<div class="content-box pad-box-mini border border-trbl">
  <p><strong>Practice Quiz Guidelines</strong></p>
</div>

Shadow box with code

Shadow Box

<div style="margin: 50px 15% 50px 15%; background-color: #ccc;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #fff; border: 2px solid #ccc;">
<p>Lorem ipsum...</p>
</div>
</div>

Alert Examples with code

Information: Sample .alert .alert-info style.

<!-- Alert-info -->
 <p> 
   <div class="alert alert-info"> 
     <strong>Information:</strong> Sample .alert .alert-info style. 
   </div> 
</p>

Success: Sample .alert .alert-success style.

<!-- Success -->
<p> 
  <div class="alert alert-success"> 
    <strong>Success:</strong> Sample .alert .alert-success style. 
  </div> 
</p>

Error: Sample .alert .alert-error style.

<!-- Error -->
<p> 
  <div class="alert alert-error">
    <strong>Error:</strong> Sample .alert .alert-error style. 
  </div> 
</p>

Alert: Sample .alert style.

<!-- Alert -->
<p>
  <div class="alert">
    <strong>Alert:</strong> Sample .alert style.
  </div>
</p>

Flash Notice Examples with code

Info: Sample flash notice style. Close

<div class="ic-flash-info">
    <div class="ic-flash__icon" aria-hidden="true">
      <i class="icon-info"></i>
    </div>
    Info: Sample flash notice style.
    <button type="button" class="Button Button--icon-action close_link">
      <i class="icon-x" aria-hidden="true"></i>
      <span class="screenreader-only">Close</span>
    </button>
</div>

Success: Sample flash notice style. Close

<div class="ic-flash-success">
    <div class="ic-flash__icon" aria-hidden="true">
      <i class="icon-check"></i>
    </div>
    Success: Sample flash notice style.
    <button type="button" class="Button Button--icon-action close_link">
      <i class="icon-x" aria-hidden="true"></i>
      <span class="screenreader-only">Close</span>
    </button>
</div>

Warning: Sample flash notice style. Close

 <div class="ic-flash-warning">
    <div class="ic-flash__icon" aria-hidden="true">
      <i class="icon-warning"></i>
    </div>
    Warning: Sample flash notice style.
    <button type="button" class="Button Button--icon-action close_link">
      <i class="icon-x" aria-hidden="true"></i>
      <span class="screenreader-only">Close</span>
    </button>
  </div>

Error: Sample flash notice style. Close

<div class="ic-flash-error">
    <div class="ic-flash__icon" aria-hidden="true">
      <i class="icon-warning"></i>
    </div>
    Error: Sample flash notice style.
    <button type="button" class="Button Button--icon-action close_link">
      <i class="icon-x" aria-hidden="true"></i>
      <span class="screenreader-only">Close</span>
    </button>
  </div>

If you have any questions about this Course Template and how to use it, please contact us at fase.edtech@utoronto.ca.