Web Features

Web Features is a library of approved web layout and design features that may be easily copied into a course as it is designed. All HTML content in the course should be simple and must be maintainable. Complex and/or dynamic web elements not included on the Web Features page must be approved as an external resource. This page is stored in the Equella Managed Content collection and is documented as part of the Online Course Documentation. Any requested additions or changes will be submitted and approved through Online Learning Council. Note that when viewed on this page the default colors and styles are used but when you use them in a course they should take on the course specific styling. If they don't, please let Tim Tanner know and he will update the course stylesheet.

Button

Turn any link into a button: Start Quiz

This may be nice for links to quizzes or discussion boards.

Code Instructions
HTML
Instructions:
  1. Create a link as you normally would.
  2. Open the HTML and find the link tag.
    Hint: Type "<a" into the find on page tool to locate all the link tags.
  3. Add the highlighted code shown below (change button text if necessary).

<a class="button" href="URL">Button Text</a>

Tables

Basic Table
Heading Heading Heading Heading Heading
Text Text Text Text Text
Text Text Text Text Text
Text Text Text Text Text
Text Text Text Text Text
Rubric Table
Heading Heading Heading Heading Heading
Heading Text Text Text Text
Heading Text Text Text Text
Heading Text Text Text Text
Heading Text Text Text Text
Code Instructions
HTML
Instructions:
  Option 1:
  1. Use the code generator below.
  2. Paste the output code into the course page HTML.
  3. Update the page and then fill in the table as normal.
  Option 2:
  1. Create a table as you normally would in D2L.
  2. Open the HTML and find the table tag.
    Hint: Type "<table" into the find on page tool to locate all the table tags.
  3. Add the highlighted code shown below to add the rubric styling.

<table class="rubric">

Code Generator
Basic Rubric
Yes No
Yes No
Columns: Rows:
*Include any row or column headings in the count.

Mouseover pop-up

Here is a mouseover pop-upHere you can put whatever message you would like!

Code Instructions
HTML
Instructions:
  1. Copy the entire code below.
  2. Paste it in the course page HTML where you would like it.
    Hint: Type part of the sentance you want to add it to in the find on page tool to locate the right spot.
  3. While still in the HTML code, update the text within the span tags to the word that will trigger the message. Then add the message you would like to pop up upon mouseover.

<span class="popup">WORD-HERE<span>MESSAGE-HERE</span></span>

Notes

These pop-ups are great for definitions or short explanations, especially in pathway courses.

Overlay

Here is an example overlay

Code Instructions
HTML
Instructions:
  1. Copy the code in the first code box below.
  2. Paste the code in the paragraph where you would like it.
    Hint: Type part of the sentance you want to add it to in the find on page tool to locate the right spot.
  3. Replace "WORD(S)-HERE" with the word or text you want to act as the trigger.
  4. Copy the code in the second code box.
  5. In the course page HTML find the script tag at the bottom of the code right above the closing body tag. Paste the code directly above the script tag.

<a class="triggerOverlay" href="#overlay1">WORD(S)-HERE</a>


<div id="overlay1" class="overlay">
    <h2>Heading</h2>
    Content here...
</div>

Notes

The heading in the overlay should match or in some way connect with the text used in the link that triggers the overlay. The overlay can be used to hold anything you want such as paragraphs, images, tables, etc.

If you need multiple overlays on the same page then make sure to increment the "1" in the href of the new link trigger and in the new overlay ID.

Callout Box

Click to see the effects of different classes applied to the callout. The code that you need will be shown in the code instructions box below.
Position:
Left:
Center:
Right:
Size:
Quarter:
Half:
Full:

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. This is a callout box which can be used to emphasize text. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Code Instructions
HTML
Instructions(callouts within a paragraph):
  1. Copy the code below
  2. Open HTML and paste the code within a paragraph

<span class="callout left quarter">Message Here</span>


Instructions(callouts outside of a paragraph):
  1. Copy the code below
  2. Open HTML and paste the code where desired

<p class="callout left quarter">Message Here</p>

Images

Click to see the effects of different classes applied to the image. The code that you need will be shown in the code instructions box below.
Position:
Left:
Center:
Right:
Size:
Quarter:
Half:
Full:
Caption:
With:
Without:

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. McKay LibraryInsert Caption Text Here Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Code Instructions
HTML
Instructions:
  1. Insert image like you normally would in D2L.
  2. Open HTML and find the image tag.
    Hint: Type "img" into the find on page tool to locate all the image tags.
  3. Add the highlighted code shown below.

The code below is updated with every change made to the demo image above.

<img class="left quarter" src="fileName" alt="..."><span class="caption">Insert Caption Text Here</span>

Note: These classes can be used to size and postion any element such as a callout box, table, or paragraph. Adding these classes will make images or elements responsive to mobile devices.

Class Name Reference Table
Class Name Result
left Floats the image/element to the left
center Centers the image/element on the page and makes it so nothing else will be to the left or right of it
right Floats the image/element to the right
clearfix If floating an element left or right causes elements below to come up higher then they are supposed to then use this class on the floated elements parent container (usually a paragraph or div tag) to fix the problem.
full Makes image/element the full width of the page
half Makes image/element half the width of the page
quarter Makes the image/element a quarter width of the page
caption If you would like a caption under your image then place a span immediately following your image and give the span the class of "caption". NOTE: Your image must be sized and positioned with the classes above for your caption to display correctly under the image.

Drop Down

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.

Code Instructions
HTML
  1. Copy the code below.
  2. Paste the code in the course page HTML.
  3. Update the page and add your headings to the drop-down bars, then add the text/images into the content area as you normally would.

<div class="drop-down">
    HEADING-HERE
</div>
<div class="drop-content">
    CONTENT-HERE
</div>

Notes

You can put anything you would like in the content area including other HTML elements and images. Also note that if the JavaScript for any reason didn't run the dropdowns would all be displayed open and all content would be available.

Image Carousel

Be authentic and consistent
Edify and uplift
Respect Intellectual Property
Be wise and vigilant
Code Instructions
HTML
  1. Copy the code below.
  2. Paste the code in the course page HTML.
  3. Copy and past as many div's with the class slide as you need within the carousel div.
  4. Add an image or other content into each slide

<div class="carousel">
    <div class="slide">
        Insert image or content
    </div>
    <div class="slide">
        Insert image or content
    </div>
</div>

Notes

If the content in the slides need additional stying please contact Bro. Tanner.

Activity Banners

Select Activity:

Case Study

Code Instructions
HTML
Instructions:
  1. Select the desired banner from the drop-down above.
  2. Copy the appropriate code below and past it into the html.

If the activity banner is the main heading of the page:

<h1 class="activity prepare caseStudy">Case Study</h1>

If the activity banner is a sub-section on the page:

<h2 class="activity prepare caseStudy">Case Study</h2>

Note

The only difference between the two code options is that one is built using a heading 1 and the other a heading 2. There will be no visual difference in the banners but it is important to use the correct one for ADA complience.

Banner and Icon Images

If you need a banner as an image you can find them here: Activity Banner Images

If you need just a icon for reference material you can find them here: Activity Icon Images

Columned Text

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

Code Instructions
HTML
Instructions(Using existing paragraphs):
  1. Go into the content page HTML and wrap one or more paragraphs in a div with the class "column" as shown in the code box below. This will be your first column.
  2. Repeat step one for the second column makeing sure the two divs are directly next to each other.
Instructions(Creating new paragraphs):
  1. Copy the entire code shown below.
  2. Go into the content page HTML and paste the code where you would like the columns
  3. Save the change and use the editor as normal to replace "PARAGRAPH" with your text. Note that you can create more paragraphs in each column by hitting return after any of the paragraphs already in the column.

<div class="column" >
    <p>PARAGRAPH</p>
    <p>PARAGRAPH</p>
</div>
<div class="column">
    <p>PARAGRAPH</p>
    <p>PARAGRAPH</p>
</div>

Notes:

You can include images, tables, or other elements within the column as well. It isn't limited to paragraphs. If using images in a column remember the sizing classes will be relative to the width of the column so you will probably want to use the "full" class so the image will span the width of the column.

Columned Lists

Click to see the effects of different classes applied to the columned lists. The code that you need will be shown in the code instructions box below.
Class Name Result
Unspecified By using just the class list-columns, all list will take up as much width as they need and will allow the next list to come up next to it if there is enough space. This is great for lists with short text. If all the lists don't fit on one row then the bullet points on the lists in the following rows may not line up.
Two/Three/Four Specifing how many columns you want to allow will insure that the bullet points will line up with the lists above. It is simply setting the width of each list to 25, 33 or 50 percent.
Center The center class should really only be used if all the lists will fit on one row. Otherwise if lists wrap to a new row they will be centered and again may not line up nicely with the row above.
Columns:
Unspecified:
Two:
Three:
Four:
Position:
Left:
Center:
Example With Short Text
  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor
Example With Longer Text
  • Proin at ex non metus tempus placerat a sit amet metus.
  • Vivamus imperdiet nunc quis lectus viverra tempor.
  • Sed blandit velit consequat facilisis tempor.
  • Cras pellentesque sapien quis ipsum feugiat volutpat.
  • Nam liber tempor cum soluta nobis Nam liber tempor cum soluta nobis
  • Vestibulum sed leo a dolor rutrum euismod vitae egestas odio.
  • In porttitor sapien ac nisl accumsan, eget blandit enim venenatis.
  • Sed auctor sem at tincidunt feugiat.
  • Nunc commodo orci ac ligula ullamcorper, non vulputate metus gravida.
  • Nulla eleifend est eget auctor molestie.
  • Fusce sit amet ex ut metus sollicitudin faucibus et a mauris.
  • Nam liber tempor cum soluta nobis Nam liber tempor cum soluta nobis
Code Instructions
HTML
Instructions:
  1. Copy the code below.
  2. Go into the content page HTML and paste the code where you would like the lists.
  3. Save the change and use the editor to add the items to each list.

<div class="list-columns">
    <ul>
        <li>item</li>
    </ul>
    <ul>
        <li>item</li>
    </ul>
 </div>

Notes:

You can use any number of lists within the div and they will just wrap to a new row when space runs out.

Example Overlay

The MC during the fall The MC during the fall