CME Dept. Links Format Samples Test Page

Menu

Styles Navigation Notices Colors Resources Back to Top

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.

Highlight Text, class "section-highlight-1".

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.

Lists Expand Close
Standard Lists
  • Bulleted text, unorganized.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  1. Bulleted text, Organized.
  2. Commodo quis imperdiet massa tincidunt nunc pulvinar.
Detailed Lists
"dt" text
"dd" text
Stylized list
This list is indented
Detailed list icons
Can be used on "dt" or "dd" or any other text. Does not replace "ul" or "ol" bullet icons (yet).
class used: list-dot
class used: list-arrow
class used: list-check
class used: list-cross
class used: list-info
class used: list-note

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

Add the classes to a DIV tag surrounding the paragraph tag, and add the notice message within span tags

<p><strong>NOTICE</p></strong>

class="notice- (any notice code)"
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>

NOTICE:

class="notice- notice-info"
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

SUCCESS!

class="notice- notice-success"
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

WARNING!

class="notice- notice-warning"
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ALERT!!

class="notice- 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
  • .bg-name for coloring backgrounds
  • .border-name for adding a 1px border in the named color

Main system colors

Main

ilearnblue, blue
#006e9e

nchblue
#007FA3

magenta
#CC3162

adminblue
#313147

RSS

rsscath
#B10936

rssrad, facdev
#870074

rsstrauma
#1b458c

rsstumor
#CB066C

rsshpn
#616161

System

lightgray
#f1f1f1

paleblue
#ddeaef

palegreen
#e3f2c7

palegold
#f7dda6

palemagenta
#f5c5d4

Programs/Schedules

.item-NAME for coloring agenda sections or .bg-NAME outside of agendas for color only

break
#F5DEB3

lunch
#cefdce

moderator
#b0e7ff

qa
#ecf2fa

breakout
#dbdaff

ars
#ffe597

nocme
#D7D2D2

agendafooter
#cefdce

Additional colors

gold
#FAA700

green
#1D7300

green
#0B7300

aliceblue
#DDECF7

pictonblue
#3EACF0

biceblue
#116DAB

medcoolblue
#596376

darkcoolblue
#434b5c

plum
#870074

deeppink
#FF1094

mulberry
#C83887

beige
#fdf5e6

white
#fff

medgray
#696969

darkgray
#595959

charcoal
#232023

black
#000