Instructions: The content on this page is for instructor use only. The directions and HTML to create color boxes to enhance information are included on the page.

Did you know?

Did you know "Q" is the only letter that doesn't appear in any U.S. state name?

Go through the list of the fifty nifty states, and we guarantee you won't find any state with the letter Q in its name!

Adding a "Did you know? Box

The #hex code for the background color in the "Did you know?" box is # EEF6F7, and the 1px solid color is #EEF6F7. The hex code #425757 was used for the "Did you know?" box border, and #ffffff for the text. For additional # hex code inspiration, you can visit the website "Google Color Picker." It's essential to choose colors that are easy to read and meet accessibility standards, which you can check with the Adobe Color Accessibility Tool.

Note: At times, UDOIT flags color usage; therefore, to resolve this issue, I have added the <div class="phpally-ignore"> to the HTML. This allows ADA readers to disregard color, particularly since it does not convey any significance.

Directions:

Copy and paste the HTML code below to create a "Did You Know" or Important to Remember" box for essential information students should know. Here is a link for those who need a refresher on using the HTML view in the Rich Content Editor.

HTML for a "Did you know? Box:

<div class="img-rounded border border-trbl border-round" style="float: right; background-color: #eef6f7; width: 315px; height: 260px; margin-left: 50px; border: 1px solid #EEF6F7;">
<h3 style="color: #ffffff; background-color: #425757; text-align: center; padding: 5px;">Did you know?</h3>
<div class="phpally-ignore" style="height: 200px; overflow-x: hidden; overflow-y: auto; padding: 6px 15px; text-align: left;">
<p>Did you know "Q" is the only letter that doesn't appear in any U.S. state name?</p>
<p>Go through the list of the fifty nifty states, and we guarantee you won't find any state with the letter Q in its name!</p>
</div>
</div>

Adding Colored-Blockquote Boxes

Directions:

Suppose you want to add a colored blockquote box to your page to highlight important information for students. Use the HTML below to add a Block Quoke for important information for students to remember.

The # d3ecfb hex code is used as the background color. For additional # hex code color inspirations, you can visit the website "Google Color Picker." It's essential to choose colors that are easy to read and meet accessibility standards, which you can check with the Adobe Color Accessibility Tool.

Important Note: Under the Americans with Disabilities Act (ADA), you can use color to highlight important information. However, color cannot be your only method of conveying meaning. Always pair colored text with text cues or icons and ensure color combinations provide sufficient contrast for readability.

Note: At times, UDOIT flags color usage; therefore, to resolve this issue, I have added the <div class="phpally-ignore"> to the HTML. This allows ADA readers to disregard color, particularly since it does not convey any significance.

At this point, you should have already reviewed the Concourse Syllabus located on the left side of the screen, which includes the following:

A course schedule, grading criteria, methods of evaluation, technology requirements, and institutional policies and procedures

It also provides information about the instructor, office hours, instructor policies, and textbook materials

If you still need to view the Concourse Syllabus, please do so before continuing on this page.

HTML to add a "Colored Blockquote" Box:

<div class="phpally-ignore" style="background-color: #d3ecfb; margin: 30px 100px; padding: 10px;">
<blockquote>
<p style="text-align: center;"><strong>At this point, you should have already reviewed the Concourse Syllabus located on the left side of the screen, which includes the following:</strong></p>
<ul>
<li>A course schedule, grading criteria, methods of evaluation, technology requirements, and institutional policies and procedures</li>
<li>It also provides information about the instructor, office hours, instructor policies, and textbook materials</li>
</ul>
<p style="text-align: center;"> <strong><span style="font-size: 14pt;">If you still need to view the Concourse Syllabus, please do so before continuing on this page</span>.</strong></p>
</blockquote>
</div>

Creating a Linear-Gradient Background:

At this point, you should have already reviewed the Concourse Syllabus located on the left side of the screen, which includes the following:

A course schedule, grading criteria, methods of evaluation, technology requirements, and institutional policies and procedures
It also provides information about the instructor, office hours, instructor policies, and textbook materials

If you still need to view the Concourse Syllabus, please do so before continuing on this page.

HTML for the Linear-Gradient Background:

<div class="phpally-ignore" style="background: linear-gradient(141deg, #78CAFC 0%, #A6DBFC 51%, #ECF7FD 75%); padding: 25px; margin-bottom: 25px;">
<p style="margin-bottom: 25px; text-align: center;"><strong><span style="font-family: inherit; font-size: 1rem;">At this point, you should have already reviewed the Concourse Syllabus located on the left side of the screen, which includes the following:</span></strong></p>
<ul>
<li>A course schedule, grading criteria, methods of evaluation, technology requirements, and institutional policies and procedures</li>
<li>It also provides information about the instructor, office hours, instructor policies, and textbook materials</li>
</ul>
<p style="text-align: center;"><strong><span style="font-size: 14pt;">If you still need to view the Concourse Syllabus, please do so before continuing on this page</span>.</strong></p>
</div>