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.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- 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
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] Test link to 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