Menu

Styles Navigation Notices Colors Resources

Format Samples and Resources

Headers

Sample default heading styles

This is H2 Heading

This is H3 Heading

This is H4 Heading

This is H5 Heading
This is H6 Heading

Sample w3css heading styles

w3h2
w3h3
w3h4
w3h5
w3h6

h2 title-divider

h2 sub-divider

.w3h2 {color: #df376f;}
.w3h3 {font-size: 20px; line-height: 26 px; color: #037da2; font-weight: bold!important;}
.w3h4 {font-size: 18px; line-height: 24 px; color: #616161; text-transform: uppercase; font-weight: bold!important}
.w3h5 {font-size: 16px; line-height: 22px; color: #616161; text-transform: uppercase;}
.w3h6 {font-size: 13px; font-style: italic;}
.sub-divider {background-color: #ddeaef; border-radius: 12px 12px 0 0; color: #006894!important;}
.title-divider {background-color: #006e9e; color: #FFF!important;}
h2.title-divider, h2.sub-divider {padding: 18px 0 3px 6px; margin: 3px 0 5px 0;}

Other Text Samples

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bulleted text, unorganized.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Bulleted text, Organized.

  1. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  2. Commodo quis imperdiet massa tincidunt nunc pulvinar.

Indented Text, class "indent-half", with a link, class "clean-link".

Indented Text, class "indent", with a link.

Indented Text, class "indent-double".

A quote:

This is a quote. Mi bibendum neque egestas congue. Volutpat ac tincidunt vitae semper quis. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt.

Navigation

Button Samples

Button classes used as button text. Enter both a button class and a color property for any button link (shown below with bgcolor-ilearnblue

activity-button

activity-button-b

activity-button-c

content-button

Link Icons

Add the text inside the brackets [ ] to the "class" field to display the following icons next to text links

[interna;] Test link to an internal page.

[external] Test link to external website.

[email] .

[phone] Test link to phone number.

[file-pdf]  Test link to download pdf file. (Not recommended for files uploaded directly to iLearn as the system already adds an icon)

[file-ppt]  Test link to download powerpoint file.

Notices

When adding notice formats, you can add it as a class to the html paragraph or div tag.
Adding the class to the paragraph will only add the background color, border, and padding.
Adding the class to a DIV tag surrounding the paragraph tag, instead of a paragraoh class, will do the same but also add the appropriate icon

NOTICE-INFO: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

NOTICE-SUCCESS: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

NOTICE-WARNING: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

NOTICE-ALERT: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Colors

the following color classes are available:

  • .color-name for coloring text
  • .bgcolor-name for coloring backgrounds
  • .border-name for adding a 1px border in the named color

Main system colors

ilearnblue
#006e9e

nchblue
#007FA3

adminblue
#313147

magenta
#CC3162

rsscath
#B10936

rssrad
#870074

rsstrauma
#1b458c

rsstumor
#CB066C

rsshpn
#616161

rssfacdev
#870074

lightgray
#f1f1f1

paleblue
#ddeaef

palegreen
#e3f2c7

palegold
#f7dda6

palemagenta
#f5c5d4

Additional colors

beige
#fdf5e6

darkcoolblue
#434b5c

medgray
#696969

darkgray
#595959

gold
#FAA700

green
#1D7300

green (text)
#0B7300

medcoolblue
#596376

plum
#870074

darkgray
#616161