1: Template Guide

# Getting Started

A Template Guide

## Layout

Learning the Template Layout

The eCore template is based on a sectioned layout.

The first two sections are the header and navigation sections: The header is where the page's title will live while the navigation section will be generated at page load based on the content of the page. This means that the navigation section will not appear in the template's HTML until the page is being viewed.

The remaining sections are where the page's content will live. These sections are designed to alternate in color, so the even numbered sections will be eCore's standard light gray color while odd numbered sections will be white (see Colors for more details on the Standard eCore Colors).

While this general layout defines the overall template, know that it does not have to define your content: Various types of subsections have been designed for your use and can be placed inside these content sections to help organize your content. To better familiarize yourself with how content can be better laid out and what you can and can't do, see the next section on template Features.

## Features

Learning the HTML

Because of the template's design, many features and some content may not be editable in the base HTML editor. As a general rule, it's best to use the WYSIWIG editor strictly for adding, editing, or deleting text. For instance, a couple of examples of where the WYSIWIG editor will not properly generate the desired outcome and/or may break the template's look and feel if used include:

• Accordions

Because these are hidden by default, they will not appear in the WYSIWIG editor. Editing and/or creating these will require the use of Source Code HTML editor, or the supplemental Accordion Generator to be provided along with this template guide.

• Multimedia

These require a special multimedia wrapper to maintain their responsive design, so the WYSIWIG editor will be unable to create a true multimedia section. Editing and/or creating these will require the use of Source Code HTML editor, or the supplemental Multimedia Generator to be provided along with this template guide.

While these are only two examples, there are likely many other instances where the WYSIWIG editor will fall short. That's why it's important to familiarize yourself with how the HTML of the template looks and works, so you can maximize the template's capabilities and make use of all its built-in features. Below is a simplified version of how the template's base HTML is built:

<html>
<body>
<background></background>
<content>...</content>
<section>
<content></content>
</section>
</body>
</html>

Upon further inspection, you'll notice both a header and section tag. These designate the header section and a single content section, respectively. Remember, the navigation section is only inserted on page load, so you will not see it in the base HTML if you were to view it in the Source Code editing window. However, a section on the dynamically injected nav bar, as well as the dynamically created floating side menu, has been included below for completeness.

#### The following sections breakdown to the HTML markup and explain how the various features of the template relate to each snippet of code:

In any HTML document, the body tag is always the wrapper for all visual elements of the page. In the eCore template, the body tag has been modified to accept four custom attributes as follows:

<body color1="" color2="" btncolor="" btnhover="">

#### color1

The primary color for the template's color scheme.

All possible values include:
• Standard eCore Colors (eColors) – see Colors for more details
• Standard HTML Colors – see Colors for more details
• HEXs – prefixed with #
• RGBs – formatted as rgb(R,G,B)

#### color2

The secondary color for the template's color scheme.

All possible values include:
• Standard eCore Colors (eColors) – see Colors for more details
• Standard HTML Colors – see Colors for more details
• HEXs – prefixed with #
• RGBs – formatted as rgb(R,G,B)

#### btncolor

The amount of tint (lightness) for all navigation buttons. By default, this value is set to 10% if undeclared.

All possible values include:
• Percentages – ranging from 0% (no tint) to 100%
• Decimals – as a representation of a percentage equivalent, ranging from 0.00 (no tint) to 1.00

#### btnhover

The amount of shade (darkness) for all navigation buttons on hover. By default, this value is set to 10% if undeclared.

All possible values include:
• Percentages – ranging from 0% (no shade) to 100%
• Decimals – ranging from 0.00 (no shade) to 1.00 and representing of a percentage equivalent

The leader section is an optional addition to your page, which can be used for displaying things like lesson or chapter numbers or even for creating breadcrumbs. When included, the leader tag should always be nested just inside the opening body tag immediately before the opening header tag, making it the first child of the body element. Do note, the leader tag is only intended for accepting inline-elements, such as text and links. In addition, each leader tag has three custom attributes as follows:

<leader type="" lang="" cont="">

#### type

The prefix to be added to the leader text. If this value is undeclared, by default, no prefix will be added.

All possible values include:
• Undefined – no prefix added
• intro – adds the prefix INTRODUCTION
• lesson – adds the prefix LESSON
• unit – adds the prefix UNIT
• module – adds the prefix MODULE
• chapter – adds the prefix CHAPTER
• preface – adds the prefix PREFACE
• prologue – adds the prefix PROLOGUE
• epilogue – adds the prefix EPILOGUE
• glossary – adds the prefix GLOSSARY
• appendix – adds the prefix APPENDIX
• index – adds the prefix INDEX
• foreword – adds the prefix FOREWORD
• afterword – adds the prefix AFTERWORD
• footnotes – adds the prefix FOOTNOTES
• endnotes – adds the prefix ENDNOTES
• part – adds the prefix PART

#### lang

The language of the prefix to be added to the leader text. If this value is undeclared and a type has been set, by default, prefixes will be in English.

All possible values include:
• undefined – defaults to English
• en – sets the prefix language to English
• es – sets the prefix language to Spanish
• fr – sets the prefix language to French

#### cont

The suffix to be added to the leader text to indicate a continuation. If this value is undeclared and a type has been set, by default, the suffix will not be added.

All possible values include:
• undefined – no suffix added
• yes – adds the suffix (continued)
• no – no suffix added

The header section can be identified by the header tag. Inside this header tag are two additional tags: a background tag, which is used to for the header's background, and a content tag, which is used for the page's title and subtitle. The background of the header section, is made up of three additional tags as follows:

<background>
<img/>
<colorize></colorize>
<pattern></pattern>
</background>

These three tags essentially act as layers, which create the desired background effect. The first tag, img, is used for a background image. The second tag, colorize, is used to add a color overlay overtop of the background image or to specify a solid background color in the event that an image is not used. Lastly, the third tag, pattern, is for creating a textured layer overtop of the other layers if desired.

The img tag has been modified to accept the following standard and custom attributes:

<img src="" alt="" valign="" desaturate=""/>

#### src

The source of the image.

All possible values include:
• Absolute Paths – URLs
• Relative Paths – file directories

#### alt

The text alternative to the image.

All possible values include:
• user-defined – for all images complementary to the page's content as provided by the content author
• null – for decorative images only

#### valign

The vertical alignment of the image within its container. By default, this value is set to middle if undeclared and an src is given.

All possible values include:
• top – align the top of the image to the top of the container
• middle – align the middle of the image to the middle of the container
• bottom – align the bottom of the image to the bottom of the container

#### desaturate

The amount of desaturation applied to the image. By default, this value is set to 75% if undeclared and an src is given.

All possible values include:
• Percentages – ranging from 0% (no desaturation) to 100%
• Decimals – ranging from 0.00 (no desaturation) to 1.00 and representing of a percentage equivalent

The colorize tag has been modified to accept the following custom attributes:

<colorize bgcolor="" opacity="">

#### bgcolor

The background color of the element, for use as a solid or overlay. By default, this value is set to ecore-light-grey if undeclared (see Colors for more details).

All possible values include:
• Standard eCore Colors (eColors) – see Colors for more details
• Standard HTML Colors – see Colors for more details
• HEXs – prefixed with #
• RGBs – formatted as rgb(R,G,B)

#### opacity

The amount of transparency applied to the element. By default, this value is set to 50% if undeclared.

All possible values include:
• Percentages – ranging from 0% (no transparency) to 100%
• Decimals – ranging from 0.00 (no transparency) to 1.00 and representing of a percentage equivalent

The pattern tag has been modified to accept the following custom attributes:

<pattern src="" opacity="" align="" valign="" size="">

#### src

The source of the pattern.

All possible values include:
• Absolute Paths – URLs
• Relative Paths – file directories

#### opacity

The amount of transparency applied to the pattern. By default, this value is set to 100% if undeclared and an src is given.

All possible values include:
• Percentages – ranging from 0% (no transparency) to 100%
• Decimals – ranging from 0.00 (no transparency) to 1.00 and representing of a percentage equivalent

#### align

The horizontal alignment of the pattern within its container. By default, this value is set to auto if undeclared and an src is given.

All possible values include:
• Percentages – relative to the left side of the pattern, ranging from 0% to 100%
• Pixels – relative to the left side of the pattern, suffixed with px
• Decimals – relative to the left side of the pattern, representing a pixel equivalent
• Left – align the left of the pattern to the left of the container
• Center – align the center of the pattern to the center of the container
• Right – align the right of the pattern to the right of the container

#### valign

The vertical alignment of the pattern within its container. By default, this value is set to auto if undeclared and an src is given.

All possible values include:
• Percentages – relative to the top side of the pattern, ranging from 0% to 100%
• Pixels – relative to the top side of the pattern, suffixed with px
• Decimals – relative to the top side of the pattern, representing a pixel equivalent
• Top – align the top of the pattern to the top of the container
• Center – align the center of the pattern to the center of the container
• Bottom – align the bottom of the pattern to the bottom of the container

#### size

The size of the pattern relative to its original size. By default, this value is set to contain if undeclared and an src is given.

All possible values include:
• Percentages – relative to the original pattern size, ranging from 0% to 100%
• Contain – fit into available space
• Cover – fill all available space

The navigation section is dynamically injected into the page and cannot be viewed or manipulated in the source HTML code. Each button on the nav bar is created based on each section included in the page. The text in the button is pulled from the first detected title tag (h1, h2, h3, h4, h5, or h6) in the section element's heading, and any section lacking a title tag will not be given a button on the nav bar, which may be desireable for introduction or transition type sections. Additionally, to ensure that longer titles are neatly displayed inside button elements, a plugin has been installed to truncate longer titles with ellipses when the text begins to wrap or overflow (see the Plugins section for more details). This all happens at page load. A sample of what the markup for the nav bar looks like can be seen below:

<nav>
<button></button>
<button></button>
<button></button>
<button></button>
</nav>

The floating side menu is dynamically injected into the page and cannot be viewed or manipulated in the source HTML code. Each button on the floating menu is created based on each section included in the page. In addition, a Top and Bottom button is added for quickly scrolling to the top or bottom of the page, respectively. The text in the button is pulled from the first detected title tag (h1, h2, h3, h4, h5, or h6) in the section element's heading, and any section lacking a title tag will not be given a button on the floating menu, which may be desireable for introduction or transition type sections. Additionally, to ensure that longer titles are neatly displayed inside button elements, a plugin has been installed to truncate longer titles with ellipses when the text begins to wrap or overflow (see the Plugins section for more details). This all happens at page load. A sample of what the markup for the floating menu bar looks like can be seen below:

<menu>
<button></button>
<button></button>
<button></button>
<button></button>
</menu>

Content sections can be identified by their section tags. Each section tag has been modified to accept three custom attributes as follows:

<section image="" fit="" shape="">

#### image

The source to an icon or other image.

All possible values include:
• Standard eCore Icons – see Icons for more details
• Absolute Paths – URLs
• Relative Paths – file directories

#### fit

The size of the image relative to its original size. By default, this value is set to 100% the original width if undeclared and an image is given.

All possible values include:
• Percentages – without a suffix, relative to the original width
• Percentages – with the suffix %w or w%, relative to the original width
• Percentages – with the suffix %h or h%, relative to the original height
• Width – 100% the original width
• Height – 100% the original height

#### shape

The shape of the image. By default, this value is set to circle if undeclared and an image is given.

All possible values include:
• circle
• square

Inside each section tag is two additional tags: a heading tag, which is used for a section's title and subtitle, and a content tag, which is used for a section's content. Thus, the base HTML markup for a section looks like the following:

<section>
<content></content>
</section>

• h1
• h2
• h3
• h4
• h5
• h6
• sh1
• sh2
• sh3
• sh4
• sh5
• sh6

For best aesthetics, each header element should be paired with its corresponding subheader element. That is, h1 should always be paired with sh1, and so forth.

The content tag is where all your section's content and text will be stored and where any additional layout or visual elements, such as subsections, boxes, accordions, multimedia, and so forth, can be used. The following sections outline the types of content that can go inside a content tag:

Text is the most common type of content that will be used. Text content can be placed directly between the opening and closing content tags without being wrapped in paragraph (p) tags, or p tags can be used to create some additional space between paragraphs of text. By default, the WYSIWIG editor will place paragraphs of text in p tags or insert two line breaks (br) to simulate the look and feel of separate paragraphs, but beware that the WYSIWIG editor will also add additional paragraph tags or line breaks when and where unnecessary. Here is an example of what the corresponding markup would look like for pure text content:

<content>
<p>Some text here.</p>
</content>

While text content is the simplest form of content available to you, it doesn't necessarily have to be the dullest. For instance, built into this template are ways to make text a bit more interactive. Below is a list of features that can be applied to text content:

When creating text-based content, it's likely that text contains various vocabulary words, which will need to be defined somehow, either inline or later on down the road. While textbooks and other print resources often use glossaries to define important vocabulary words, we realize that the use of a glossary that has to be referenced frequently is highly impractical when it comes to web-based applications. For this reason, a custom plugin has been developed to enable an instantaneous definition lookup for vocabulary words when a given term is moused over or focused on (for more details see the Plugins section). In addition, clicking the vocabulary word will generate a separate popup window with the term's full definition.

To utilize this feature, a custom define tag has been setup. To enable a definition lookup on a given term, simply wrap the vocabulary word in a define tag, then fill in the define tag's custom xmlsrc attribute with a link to an XML document containing the term's definition and, optionally, fill in the corresponding term attribute as well. As a point of reference, the define tag and its custom attribute are as follows:

<define xmlsrc="" term="">

#### xmlsrc

The source to an XML document containing a list of definitions. If left undefined, the definition lookup will not work.

• Absolute Paths – URLs to XML documents with the file extension .xml
• Relative Paths – file directories to XML documents with the file extension .xml

#### term

The exact term matching an entry in the relevant XML document. This attribute is optional but should be set if the term inside the opening and closing define tag varies from the exact word or phrase listed in the relevant XML document.

• user-defined – lookup uses the term given, which should match exactly to its entry in the relevant XML document
• undefined – lookup performed using the word or phrase inside the define tag instead

The template's definitions feature makes use of XML (standing for Extensible Markup Language), which is a human- and computer-readable language that closely resembles symantic HTML5. For the purpose of creating a vocabulary list, a single XML (.xml) document can be used to store an entire glossary of terms, where both short definitions (meaning-short) and long definitions (meaning-long) can be stored. The base format for all XML files intended for use with the template's definitions feature should resemble the following, where a single definition tag encapsulates a single vocabulary term and its meaning(s), and each definition is nested inside the encompassing definitions tag:

<?xml version="1.0" encoding="UTF-8"?>

<defintions>

<definition>
<term>insert term here</term>
<meaning-short>insert a short meaning here</meaning-short>
<meaning-long>insert a long meaning here</meaning-long>
</definition>

</defintions>
In the example above, you'll notice a meaning-short and meaning-long tag. These can be used for a short meaning and long meaning, respectively, where the definition in the meaning-short tag will be displayed in the floating box that appears when a define element is hovered or focused and the definition in the meaning-long tag will be displayed in a separate popup window when the vocabulary word is clicked by the user. If no meaning-long is provided for a given vocabulary term, then the text to be displayed in the popup window when a user clicks on the vocabulary word will default to the meaning-short definition instead. That means the meaning-short tag is required but the meaning-long is optional.

#### Example

Below is a live example of how a definition looks and how the feature works:

This is a sample vocabulary term. Hover or focus me to see my definition in action, or click me for more information about me in a separate window.

Lists are a standard HTML element, and the WYSIWIG editor comes with a button for creating them easily. However, the eCore template has upgraded its lists with a few built-in features that cannot be accessed through the WYSIWIG editor. To use these features, editing the list's HTML will be required.

For instance, if you want to give your list a title or if you want to designate a subtitle for a sublist, custom lt and ls tags have been setup for your use where the lt tag is for list titles (bolded without a marker plus some additional styling), and the ls tag is for sublist subtitles (bolded with a marker). An example of how both of these can be used is as follows:

<content>
<ul>
<lt>List title</lt>
<li>List item</li>
<ls>List item and sublist subtitle
<ul>
<li>Sublist item</li>
</ul>
</ls>
</ul>
</content>

In addition to the newly added list title and list subtitles, all unordered lists (ul), ordered lists (ol), list items (li), list titles (lt), and list subtitles (ls) can be given custom markers using the marker attribute. Here is an example of what the corresponding markup would look like for a simple list with a custom marker:

<content>
<ul marker="circle">
<li>List item</li>
</ul>
</content>

#### marker

The marker by name.

All possible values include:
• Standard HTML Markers – see Markers for more details
• Custom Markers – see Markers for more details

Sometimes, adding keywords may be necessary after a body of text to help make skimming a page or finding specific key terms on a page easier. The template has been setup to allow unordered lists (ul) to accommodate for these keywords lists. To format a list as a set of keywords, simply add classkeywords to your ul element. When the class is added to a ul element, the keyword list will resemble the following example:

• Keyword 1
• Keyword 2
• Keyword 3
• Keyword 4

Various types of media can be inserted alongside text without using a multimedia container (see the following sections for more details about multimedia containers). This approach is best suited for creating a text wrap effect or when you wish to directly relate text content with some media. Commonly used types of media include:

• Images (img)
• Videos (video)
• Audio (audio)
• Objects (object)
• iFrames (iframe)
• Tables (table)

These media objects have been modified to accept the following custom attribute as shown below on a sample img tag:

<img float="" lspace="" rspace="" />

#### float

The position of the media relative to any wrapped text. By default, this value is set to none.

All possible values include:
• left – position the media off-left with text wrapping to the right
• right – position the media off-right with text wrapping to the left
• center – position the media horizontally center
• sidebyside – position two or more medias next to one another
• none – position the media as normal without text wrapping
By default, the float attribute's sidebyside value will align two media elements side-by-side with no spacing between the two elements. For aligning more than two media elements side-by-side, you can use the float attribute in conjunction with the standard width attribute to achieve the desired results. For instance, setting width33% and floatsidebyside for three consecutive images will align all three images side-by-side. To learn how to apply spacing between or around floated media objects, see the next two sections below.

#### lspace

The left spacing to be added to the media. By default, this value is set to 20 when floatright or 0 otherwise.

All possible values include:
• Digits – without a suffix, representative of a pixel value
• Pixels – with the px suffix
• Percents – with the % suffix
When using spacing on media with floatsidebyside, it's important to make sure that all applied width, lspace, rspace attributes for the your series of floated objects always totals 100% or as close to 100% as possible. This will ensure that all floated objects in the series remain side-by-side.

#### rspace

The right spacing to be added to the media. By default, this value is set to 20 when floatleft or 0 otherwise.

All possible values include:
• Digits – without a suffix, representative of a pixel value
• Pixels – with the px suffix
• Percents – with the % suffix
When using spacing on media with floatsidebyside, it's important to make sure that all applied width, lspace, rspace attributes for the your series of floated objects always totals 100% or as close to 100% as possible. This will ensure that all floated objects in the series remain side-by-side.

Though the WYSIWYG editor offers a similar float option, do note that the results produced by the float attribute differ drastically from the effect that will be produced by the WYSIWYG editor. This is due to the WYSIWYG editor not being able to compensate for changes to the template's layout. It is recommended that you use the float attribute directly for creating text wrap effects instead of any options given in the WYSIWYG editor. Otherwise, undesireable results may occur.

The sections below go into a bit more detail about how to handle and further customize various types of media:

In some instances, captioning your media may be desired and/or attributing your media may be required by the media's license and/or source. For these reasons, captions and attributions have been built into the template. However, not all types of media as previously mentioned will accept captions and attributions. As a point of reference, captioning and attributing can be applied to any of the following types of media elements regardless of whether or not they are within a multimedia container (see the following sections for more details about multimedia containers):

• Images (img)
• Videos (video)
• Audio (audio)
• Tables (table)

Captions and/or attributions can be achieved through the use of a special class and custom attributes, where the class is required for any captioning and/or attributing to take effect. The end result with captions and/or attributions applied is achieved on page load by wrapping the media element in a figure tag, nesting the caption and/or attribution inside the figure element as a figcaption tag, and apply additional styling to achieve the desired effect.

For media elements that you wish to add captions and/or attributions to, the mandatory class and custom attributes are as follows:

<img class="caption"
caption=""
caption-src=""
caption-state=""
caption-mode=""
by=""
from=""
from-src=""
derivative="" />
The classcaption is required. This class is used as a signal to request that captioning and/or attributing be applied to the given element. Without this class, no captions and/or attributions will result.

#### caption

The caption to be displayed. If no value is given or the caption attribute is missing but classcaption has been set, by default, the contents of the alt attribute will be used instead if present.

All possible values include:
• User Defined – the media's caption
You may wish to add a link (a) around a word or phrase in your caption. Doing so is permissible, but must be approached with caution. Any double-quotes (") inside the HTML code must be escaped using &quot; or replaced with single-quotes ('). But wait, if you want to add a link around your entire caption, it is recommended that you use the caption-src attribute instead (see below for more details).

#### caption-src

The link to be added to the caption. If no value is given or the caption attribute is missing but classcaption has been set, by default, no link will be added.

All possible values include:
• URL – the web address to be opened on click
• Named Anchors – the ID of an anchor point on the current page to be jumped to on click

#### caption-state

The visible state of the caption. This can bed toggled to hide the caption when only attribution is desired. If no value is given, an invalid value is given, or the caption-state attribute is missing but classcaption has been set, by default, this value will be set to true.

All possible values include:
• false – or the derivatives off or no to hide captions
• true – or the derivatives on or yes to show captions
Negating the caption-state value with false, or any of its derivatives such as off or no, is required when you wish to turn off captioning. Setting the caption-state attribute to a positive value when you wish to turn on captioning is not required since this is the default behavior. However, setting the value of the caption-state attribute to true, or any of its derivatives such as on or yes, may be preferred for consistency and standardization.

#### caption-mode

The style of caption to be used. If no value is given, an invalid value is given, or the caption-mode attribute is missing but classcaption has been set, by default, this value will be set to show.

All possible values include:
• box – a box underneath the media
• overlay – a box overtop the lower portion of the media
• hide – a visible box overtop the lower portion of the media, which slides out of view on hover
• show – a hidden box underneath the media, which slides in to view on hover
The caption-mode attribute is only required when changing the captioning mode from its default style. However, setting the value of the caption-mode attribute may be preferred for standardization purposes.
##### Examples

An example of each caption-mode is show below:

Hover to try it out. Hover to try it out.

The visible state of the attribution. This can be toggled to show the attribution when corresponding attributes are given (see the follwing sections for more details on corresponding attributes). If no value is given, an invalid value is given, or the attribution-state attribute is missing but classcaption has been set, by default, this value will be set to false.

All possible values include:
• false – or the derivatives off or no to show attributions
• true – or the derivatives on or yes to hide attributions
Affirming the attribution-state value with true, or any of its derivatives such as on or yes, is required when you wish to turn on attributing. Setting the attribution-state attribute to a negative value when you wish to turn off attributing is not required since this is the default behavior. However, setting the value of the attribution-state attribute to false, or any of its derivatives such as off or no, may be preferred for consistency and standardization.

The license belonging to the media. This attribute requires that attribution-state be set to true. If no value is given, an invalid value is given, or the license attribute is missing but classcaption and attribution-statetrue have been set, by default, this attribute will be ignored.

All possible values include:
• Standard License Names – see below on Standard Licenses for more details
• User Defined – the name of any non-standard license as defined below

Version1.0

TitleCC 0

Image

Version4.0

TitleCC BY 4.0

Image

Version3.0

TitleCC BY 3.0

Image

Version2.5

TitleCC BY 2.5

Image

Version2.0

TitleCC BY 2.0

Image

Version1.0

TitleCC BY 1.0

Image

Version4.0

TitleCC BY-SA 4.0

Image

Version3.0

TitleCC BY-SA 3.0

Image

Version2.5

TitleCC BY-SA 2.5

Image

Version2.0

TitleCC BY-SA 2.0

Image

Version1.0

TitleCC BY-SA 1.0

Image

Version4.0

TitleCC BY-ND 4.0

Image

Version3.0

TitleCC BY-ND 3.0

Image

Version2.5

TitleCC BY-ND 2.5

Image

Version2.0

TitleCC BY-ND 2.0

Image

Version1.0

TitleCC BY-ND 1.0

Image

Version4.0

TitleCC BY-NC 4.0

Image

Version3.0

TitleCC BY-NC 3.0

Image

Version2.5

TitleCC BY-NC 2.5

Image

Version2.0

TitleCC BY-NC 2.0

Image

Version1.0

TitleCC BY-NC 1.0

Image

Version4.0

TitleCC BY-NC-SA 4.0

Image

Version3.0

TitleCC BY-NC-SA 3.0

Image

Version2.5

TitleCC BY-NC-SA 2.5

Image

Version2.0

TitleCC BY-NC-SA 2.0

Image

Version1.0

TitleCC BY-NC-SA 1.0

Image

Version4.0

TitleCC BY-NC-ND 4.0

Image

Version3.0

TitleCC BY-NC-ND 3.0

Image

Version2.5

TitleCC BY-NC-ND 2.5

Image

Version2.0

TitleCC BY-NC-ND 2.0

Image

Version1.0

TitleCC BY-NC-ND 1.0

Image

The source of the license. This attribute requires that attribution-state be set to true and that license attribute is set. If no value is given, an invalid value is given, or the license-src attribute is missing, with or without the license attribute being set and with the classcaption and attribution-statetrue having been set, by default, this attribute will be ignored.

All possible values include:
• URLs – the web address to be opened on click

#### by

The author of the media. This attribute requires that attribution-state be set to true. If no value is given or the by attribute is missing but classcaption and attribution-statetrue have been set, by default, this attribute will be ignored.

All possible values include:
• User Defined – the media's author

#### from

The website name of the site the media was retrieved from. This attribute requires that attribution-state be set to true. If no value is given or the from attribute is missing but classcaption and attribution-statetrue have been set, by default, this attribute will be ignored.

All possible values include:
• User Defined – the name of the website the media was retrieved from

#### from-src

The source the media was retrieved from. This attribute requires that attribution-state be set to true. If no value is given or the from-src attribute is missing but classcaption and attribution-statetrue have been set, by default, this attribute will be ignored.

All possible values include:

The copyright owner of the media. This attribute requires that attribution-state be set to true. If no value is given or the copyright-owner attribute is missing but classcaption and attribution-statetrue have been set, by default, this attribute will be ignored.

All possible values include:
• User Defined – the copyright owner of the media
Do note, it is not necessary to provide copyright information for any Creative Commons works or media in the Public Domain. Creative Commons works are universally understood by their respective licenses to be "Some rights reserved," with the reservation of rights outlined by the work's specific license. Thus, this reservation of some rights is already given to the person being attributed and adding copyright information is only redundant. On the other hand, Public Domain pieces are universally understood to be "No rights reserved," or free from copyright.

The copyright year of the media. This attribute requires that attribution-state be set to true. If no value is given or the copyright-year attribute is missing but classcaption and attribution-statetrue have been set, by default, this attribute will be ignored.

All possible values include:
• Year – formatted as YYYY with digits only
• Year Range – formatted as YYYY-YYYY with digits only separated by a single dash (-)

#### derivative

The derivative status of the media, used to indicate whether or not the media is a derivative. This can toggled to add a (derivative) suffix to the attribution. If no value is given, an invalid value is given, or the derivative attribute is missing but classcaption has been set, by default, this value will be set to false.

All possible values include:
• false – or the derivatives off or no to subtract the (derivative) suffix from the attribution
• true – or the derivatives on or yes to add the (derivative) suffix to the attribution
Affirming the derivative value with true, or any of its derivatives such as on or yes, is required when you wish to add the (derivative) suffix to your attribution. Setting the derivative attribute to a negative value when you wish to subtract the (derivative) suffix from your attribution is not required since this is the default behavior. However, setting the value of the derivative attribute to false, or any of its derivatives such as off or no, may be preferred for consistency and standardization.

Embedding videos is a great solution for quickly and easily adding video to your content without knowing the exact HTML markup for including a video from scratch. While it may be easy to copy-and-paste an embed code into the HTML of your page, bear in mind that it's not always as simple to make these videos mobile-friendly. It's common practice for video service providers, such as YouTube and Vimeo, to use iframe objects as a container for any video content. However, iframe elements present some challenges: Because they are designed to be fixed-width and fixed-height objects, attempting to set width100% for an iframe would only cause the iframe to scale disproportionately rather than making it responsive.

To solve this problem and make it possible to proportionately scale iframe videos next to text—for instance, when wanting to set a floated YouTube video's width to a percentage in order to achieve a text wrapping effect—a special set of custom attributes can be used on the iframe tag to achieve an auto-scaling effect. This works by always resizing the iframe video relative to its original aspect ratio. To enable this auto-scaling effect, first, set the width attribute of the iframe object to the desired percentage, then add in the custom attributes as follows:

<iframe width="" origwidth="" origheight="" autoscale>

#### origwidth

The original width of the iframe. Usually, when copying-and-pasting an embed code from a video provider, the default width attribute of the iframe object will contain the value of the video's original width. Simply move that value into the origwidth attribute instead, replacing the width attribute value with your desired width in percents.

All possible values include:
• Digits – the original width of the video as a plain number, no suffixes included

#### origheight

The original height of the iframe. Usually, when copying-and-pasting an embed code from a video provider, the default height attribute of the iframe object will contain the value of the video's original height. Simply move that value into the origheight attribute instead. You can remove the inital height attribute altogether.

All possible values include:
• Digits – the original height of the video as a plain number, no suffixes included

#### autoscale

The auto-scale trigger, which indicates that a video should be scaled according to its aspect ratio. If the attribute is not provided, the video will not scale automatically. Providing the attribute enables this functionality.

All possible values include:
• autoscale – no attribute value is needed

Subsections can be used to better organize your content. These can be inserted into any content tag using the subsection tag as follows:

<content>
<subsection></subsection>
</content>

Like with sections, icons can also be added to subsections. To add an icon to a subsection, use the image attribute on the subsection tag. Along with the image attribute, the subsection tag also accepts three additional custom attributes. All acceptable attributes are as follows:

<subsection image="" fit="" shape="" position="">

#### image

The source to an icon or other image.

All possible values include:
• Standard eCore Icons – see Icons for more details
• Absolute Paths – URLs
• Relative Paths – file directories

#### fit

The size of the image relative to its original size. By default, this value is set to 100% the original width if undeclared and an image is given.

All possible values include:
• Percentages – without a suffix, relative to the original width
• Percentages – with the suffix %w or w%, relative to the original width
• Percentages – with the suffix %h or h%, relative to the original height
• Width – 100% the original width
• Height – 100% the original height

#### shape

The shape of the image. By default, this value is set to circle if undeclared and an image is given.

All possible values include:
• circle
• square

#### position

The position of the image relative to the subsection. If undeclared, by default, this value is set to left and an image is given.

All possible values include:
• left – position the image at the top left of the subsection
• center – position the image at the top center of the subsection
• right – position the image at the top right of the subsection

Similar to the section tag, all subsection tags use subheading and subcontent tags to separate the subsection's title and subtitle from its content:

<content>
<subcontent>
<subcontent></subcontent>
</subcontent>
</content>

Boxes can be used to better organize your content. These can be inserted into any content tag using the boxes and box tags as follows:

<content>
<boxes>
<box></box>
</boxes>
</content>

The boxes tag is used as a wrapper for all of the box tags, indicating where boxes will start and end and what boundary the responsive box elements should be restricted to. Each box element accepts five custom attributes:

<box image="" fit="" shape="" position="" align="">

#### image

The source to an icon or other image.

All possible values include:
• Standard eCore Icons – see Icons for more details
• Absolute Paths – URLs
• Relative Paths – file directories

#### fit

The size of the image relative to its original size. By default, this value is set to 100% the original width if undeclared and an image is given.

All possible values include:
• Percentages – without a suffix, relative to the original width
• Percentages – with the suffix %w or w%, relative to the original width
• Percentages – with the suffix %h or h%, relative to the original height
• Width – 100% the original width
• Height – 100% the original height

#### shape

The shape of the image. By default, this value is set to circle if undeclared and an image is given.

All possible values include:
• circle
• square

#### position

The position of the image relative to the box. By default, this value is set to center the image to the center of the box if undeclared and an image is given.

All possible values include:
• left – position the image at the top left of the box
• center – position the image at the top center of the box
• right – position the image at the top right of the box

#### align

The horizontal alignment of text inside the box. By default, this value is set to center the text inside the box if undeclared.

All possible values include:
• left
• center
• right
• justify

Like the content tags of the section and subsection, the box tag also uses a heading tag to separate its heading and/or subheading from its content. However, the box tags do not use a content tag for their content since only text content inside a box is preferred. Because media elements, like images, videos, audio, and so forth take a longer time to load and resize and would require a bit more coercing to play nicely with our fluid layout, media content can cause some fluctuations to the boxes layout. More specifically, the media elements will not scale fast enough causing the box elements to be larger than ideal. Despite this limitation, boxes are a great solution for configuring text and other elements with a relatively fixed height. A simple example of how the markup of a box would look is provided below:

<content>
<boxes>
<box>
<h3>Box title here</h3>
<sh3>Box subtitle here</sh3>
Box content here.
</box>
</boxes>
</content>
By default on page load, each box element is assigned a background color equal to the template's primary theme color and given 15% opacity. If you wish to prevent this default behavior, you can do so by adding the skipbg class to the box element's class attribute. However, this is only recommended if setting a custom background style on a box element. Additionally, a hover and focus effect is also added to each box element: When a box is moused over or in focus, the box's hue changes. To prevent this behavior on mouseover and focus, you can use the nohover class when and where desired.

Grids can be used to better organize your content. These can be inserted into any content tag using the grid and griditem tags as follows:

<content>
<grid>
<griditem></griditem>
</grid>
</content>

The grid tag is used as a wrapper for all of the griditem tags, indicating where the grid will start and end and what boundary the responsive griditem elements should be restricted to. The grid tag accepts two optional attributes as follows:

<grid width="" spacing="" >

#### width

The width of the grid area. By default, this value is set to 100% if undeclared.

All possible values include:
• Percentages – with the suffix %, relative to the grid width
• Pixels – with or without the suffix px
• Digits – without a suffix, interpreted as pixels (px)

#### spacing

The space between grid items. By default, this value is set to 0 the original width if undeclared.

All possible values include:
• Percentages – with the suffix %, relative to the grid width
• Pixels – with or without the suffix px
• Digits – without a suffix, interpreted as pixels (px)

A separate griditem tag is nested inside the grid for each item you wish to add to the grid. Any type of simple content, including but not limited to text, images, videos, and audio, is ideal for use inside a griditem while more complex content, such as boxes or accordions, are not suited for use inside a griditem tag. While the attributes for the grid tag are optional, each griditem tag requires that a width attribute be set. A width for each griditem is mandatory in order for the grid to work as expected. The width of a griditem element can be set using the custom width attribute as follows:

<griditem width="">

#### width

The width of the grid item. This value is required and must be set by the user. In other words, there is no default, and any undeclared values will cause the grid layout to break.

All possible values include:
• Percentages – with the suffix %, relative to the grid width
• Pixels – with or without the suffix px
• Digits – without a suffix, interpreted as pixels (px)

The grid layout is similar to the boxes layout in that it uses a highly responsive mechanism to size and position griditem elements accordingly. However, it's important to note that grid layouts have their own limitations because they're more or less designed to be "stackable" objects, meaning that they attempt to fill in as much negative, vertical and horizontal space as possible while compensating for the varying widths and heights of the griditem elements given the available space they have to work with. You may begin to notice some of the known limitations the grid layout currently has in the following situation(s):

• When resizing the browser window.

Though window resizing does not have a dramatic impact on the layout most of the time, frequent resizing and/or big, sudden changes to window size may cause the layout to render inaccurately. This is because the grid layout requires an adequate amount of time to calculate a new layout. When resizing happens faster than the grid can fully process, some overlapping or oddly sized griditem elements may results.

• When using varying, or dissimilar, widths.

While the grid does its best to find the the "best fit" for all griditem elements, dissimilar widths—or more specifically, widths that do not possess a common denominator—may not render perfectly as anticipated. Bear in mind, it can only do but so much. With that said, using widths that are all in the same units (% or px) and ensuring that all widths are similar in terms of denominators will help ensure that the grid layout renders as best as possible across varying screen sizes.

Despite the aforementioned limitations of grid elements, grid layouts can still be a great solution for displaying content of all types. For example, some uses for a grid layout may include creating a unique spread of mixed-media content or for a photo or video gallery. While the possibilities with grid layouts are virtually endless, it's important to use them with caution. Using several, media-rich grid layouts on a single page can easily reduce template performance, slow down page load, and cause lags while scrolling through content.

Accordions can be used to better organize your content and provide an element of interactivity. These can be inserted into any content tag using the accordion and panel tags as follows:

<content>
<accordion>
<panel></panel>
</accordion>
</content>

The accordion tag is used as a wrapper for all of the panel tags, indicating where an accordion will start and end. Each panel element accepts one custom attribute, which is required for setting up and displaying the accordion properly on page load:

<panel topic="">

#### topic

A short phrase or keyword describing the panel's contents.

All possible values include:
• user-defined – the panel's visible text in its closed state

Callouts can be used for an excerpt, side note, or call-to-action. These can be inserted into any content tag using the callout and memo tags as follows:

<content>
<callout>
<memo></memo>
</callout>
</content>

In this instance, the memo tag is similar to a content tag in that it's used for holding the text of the callout. Each callout element accepts one custom attribute:

<callout image="">

#### image

The source to an icon or other image.

All possible values include:
• Standard eCore Icons – see Icons for more details
• Absolute Paths – URLs
• Relative Paths – file directories

When inserting media into the eCore template a majority of the time, a special multimedia container should be used in order to maximize responsiveness and usability across all browsers, platforms, and devices. The exception to when media should not be placed inside a multimedia container is when you wish to have your media alongside your text content. The markup for the multimedia tag will always resemble the following:

<content>
<multimedia>
<description></description>
<media></media>
<transcript></transcript>
</multimedia>
</content>

In the above example, you'll notice three additional tags inside the multimedia tag: description, media, and transcript. The description is used for supplying a brief overview of the multimedia content or can be used to provide instructions to students. If you prefer to have the description display underneath the media instead, you can simply move the description tag below the media tag in the HTML. The media tag is where your media object is actually placed, whether video, audio, image, or otherwise. The last tag, transcript, is used for creating a visually-appealing transcript to go along with your media content. The transcript itself will resemble an accordion.

##### The multimedia Tag

The multimedia tag accepts one custom attribute:

<multimedia image="">

#### image

The source to an icon or other image.

All possible values include:
• Standard eCore Icons – see Icons for more details
• Absolute Paths – URLs
• Relative Paths – file directories
##### The description Tag

The description tag accepts one custom attribute:

<description align="">

#### align

The horizontal alignment of text inside the description. By default, this value is set to left align the text inside the description if undeclared.

All possible values include:
• left
• center
• right
• justify
##### The media Tag

The media tag is setup for all types of media objects. Some common media include:

• iFrames (iframe) – The new standard for YouTube video.
• Objects (object) – The old standard for YouTube video.
• Videos (video) – The current HTML5 standard for video.
• Audio (audio) – The current HTML5 standard for audio.
• Images (img) – The standard for images.
Any media objects placed inside a multimedia container are intended to be fluid, or responsive. In other words, any media inside a multimedia container will be automatically resized to the width of its container. However, iframe elements are an exception. Because iframe elements require an exact width and height, a special jQuery plugin has been installed to assist in dynamically resizing any iframe media, such as YouTube videos, with respect to its original aspect ratio (see the Plugins section for more details). To invoke this dynamic resizing on an iframe, be sure to include the fluid attribute on the iframe element. No value is needed for the fluid attribute, but the fluid attribute is required for full fluidity. Without it, the iframe will retain its standard width and height. All other media is scaled proportionately using standard HTML and CSS practices and does not require any additional attributes.

Some media elements have been highly customized to offer users a more accessible and/or responsive experience. Below provides more detail on the media elements that have been modified:

While the standard HTML5 video player serves its purpose, a more advanced and feature-rich video element has been setup using a custom-made plugin (see the section on Plugins for more details) specific to eCore applications. This plugin not only contains the standard video player controls but also adds features to the video player while enhancing the overall accessible and responsive experience. Some of the added features include but are not limited to:

• Speed Settings

Users can toggle the video's playback rate, making it slower or faster.

• Quality Settings

If varying resolution source files are provided, users can change between the different resolutions to optimize the performance of video playback.

• Caption Settings

If varying language track files are provided, users can change between the different languages to personalize their captions.

In order to permit some of the above features, the required markup for the HTML5 video element has been slightly adapted to meet our needs. More specifically, aside from the source tag's standard src (source file) and type (mime type, commonly video/mp4) attributes, the source tag has also been given a custom resolution attribute used to indicate the source's resolution as follows:

<source src="" type="" resolution="">

#### resolution

The resolution of the source file. If left undefined, the source file is assumed to be 1080p.

All possible values include:
• 1080p or 1920x1080 – sets the quality setting to 1080p
• 720p or 1280x720 – sets the quality setting to 720p
• 480p or 854x480 – sets the quality setting to 480p
• 360p or 640x360 – sets the quality setting to 360p
• 240p or 426x240 – sets the quality setting to 240p
• 144p or 254x144 – sets the quality setting to 144p

Unlike the source tag of the video element, the track tag has not been modified. However, it's implementation has been slightly standardized to better suit our needs: For example, the track element's standard label attribute should be used to specify the name of the language of the track's captions or subtitles, and the srclang value should reflect the track's language with a standard HTML language abbreviation. As a reference, the track element generally resembles the following format, where the kind attribute refers to the type of text track being used (typically captions or subtitles):

<track src="example.en.vtt" kind="captions" srclang="en" label="English">

Aside from the aforementioned features, this custom video player also has a few tricks up its sleeve: First and foremost, the video player is capable of thumbnail previewing when the mouse enters and moves overtop of the video's timeline. To enable this feature, simply add the thumbnails attribute to the video tag, no value required. Be forewarned, however, that enabling thumbnail previewing may result in heavier CPU usage and/or greater RAM (memory) consumption than intended on the users' end.

Secondly, this video player is capable of handling custom cue points, similar to chapter markers: When cue points are added to a video, a bar is inserted underneath the video player, which is intended to resemble the video's timeline except with in- and out-points showing where each cue starts and ends; the cue bar itself is setup to toggle the video's cue points through the use of buttons. While the buttons on the cue bar do not contain labels themselves, hovering over or tabbing to any particular button will reveal the cue's name or title. Cue points are initialized using a custom cue tag nested inside the video element as follows:

<video>
<source>
<track>
<cue></cue>
</video>

Each cue tag accepts and needs two custom attributes to work, which are below. In addition to these custom attributes, the text inside the cue element is also required as it's used to create the cue's name or title:

<cue in="" out="">Cue name here</cue>

#### in

The in-point of the cue. A value is required in order for the cue to work.

All possible values include:
• start – sets the value to the start-point of the video
• 00:00:00 – a time formatted as hh:mm:ss, with or without the leading zero in hh
• 00:00 – a time formatted as mm:ss, with or without the leading zero in mm
• 0.00 – a time formatted as s.ss, with or without decimal places
The value of the in attribute cannot be greater than or equal to the value of the out attribute or less than the starting point of the video (0).

#### out

The out-point of the cue. A value is required in order for the cue to work.

All possible values include:
• end – sets the value to the end-point of the video
• 00:00:00 – a time formatted as hh:mm:ss, with or without the leading zero in hh
• 00:00 – a time formatted as mm:ss, with or without the leading zero in mm
• 0.00 – a time formatted as s.ss, with or without decimal places
The value of the out attribute cannot be less than or equal to the value of the in attribute or greater than the ending point of the video (the video's duration).

Lastly, the video player has been fully setup with accessibility and responsiveness in mind: The video player is designed to be fluid and will adapt to smaller or larger screen sizes as required. In fact, on smaller, mobile screens, the controls panel has been made completely touch-friendly and is designed to cover more surface area of the video when toggled, making it easier to use the video controls on a small screen. For example, a SWIPE UP on the video will show the controls, and a SWIPE DOWN will hide them again; a SWIPE RIGHT on the mute button will allow the user to toggle the video's volume level while a SWIPE LEFT on the mute button again will hide the same volume controls (volume controls are only available for non-iOS devices).

For accessibility, all controls have been made tabbable, and some additional accessibility features have been added: For instance, using the SPACE key when the video or timeline is in focus will stop or start playback of the video, and pressing the LEFT and RIGHT arrow keys while the video or any of the buttons are in focus will allow the user to seek the video backward or forward, respectively. Additionally, the cue bar, when enabled, has also been made completely accessible, where the SPACE key can be used to toggle play or pause, ENTER key to toggle a cue, and LEFT and RIGHT arrow keys to move backward or forward in the video's time, respectively.

##### The transcript Tag

The transcript tag uses its own specific set of tags to format and style transcripts as desired. These tags include a time tag for indicating timing, which is always formatted as 00:00; a person tag for identifying speakers; a noise tag for identifying background noises; and a span tag for all remaining transcribed text. Each transcripted line, beginning with the timing and ending with the transcribed text, is then wrapped in a trans tag for further clarity. Below shows a simplified example of how some markup for a single line from a transcript may look:

<transcript>
<trans>
<time>00:00</time>
<person>Audience</person>
<noise>[APPLAUSE]</noise>
<span>Transcribed text here.</span>
</trans>
</transcript>

Because the process of creating a transcript is highly involved, it's recommended that you use the Transcript Generator to be provided along with this Template Guide in order to create transcripts on a per need basis. When adding a transcript to a multimedia container, be sure to always place the compiled transcript code at the end of the multimedia tag so as to not interfere with the media object when it plays or any other preceding elements.

Furthermore, the template has been highly specialized to enable an auto-scrolling feature for transcript tags that will synchronize transcription alongside its respective video or audio player while the media plays. This feature has been added specifically as an enhancement for accessibility in addition to video and/or audio captioning and is made possible through the implementation of a custom-made plugin specific to eCore applications (see the Plugins section for more details). When creating a transcript, it's important to make sure that (a) times are in sequential order, from start to finish, and that (b) times are not duplicated and the value of each time is unique. This will ensure that the auto-scrolling feature will work properly at all times.

Hoverables are designed for interactivity. These can be inserted into any content tag using the hoverable and hoveritem tags as follows:

<content>
<hoverable>
<hoveritem>
<background></background>
<content>
<showing></showing>
<hiding></hiding>
</content>
</hoveritem>
</hoverable>
</content>

The hoverable tag is used as a wrapper for all of the hoveritem tags, indicating where a hoverable will start and end. The hoverable element accepts three custom attributes as follows:

<hoverable width="" itemwidth="" itemshape="">

#### width

The width of the hoverable area. By default, this value is set to 100% if undeclared.

All possible values include:
• Percentages – with the suffix %, relative to the container width

#### itemwidth

The width of the hover items. This value is not set by default and should be declared.

All possible values include:
• Percentages – with the suffix %, relative to the hoverable width

#### itemshape

The shape of the hover items. By default, this value is set to square if undeclared.

All possible values include:
• Square
• Rectangle
• Circle

While the hoverable tag acts as a container for its hoveritem elements, each hoveritem tag is a holder for its background and content elements. The background tag can be used for applying media to the background of a hover item, such as images, while the content tag is where the hoverable's text is held: Inside the content tag are showing and hiding tags, which are used for the default text to be displayed and the text to be displayed on hover, respectively. Both the showing and hiding tags accept two custom attributes as follows:

<showing align="" valign="">
<hiding align="" valign="">

#### align

The horizontal alignment of the text. By default, this value is set to center if undeclared.

All possible values include:
• Left – align the text to the left of the hover item
• Center – align the text to the center of the hover item
• Right – align the text to the right of the hover item

#### valign

The vertical alignment of the text. By default, this value is set to middle if undeclared.

All possible values include:
• Top – align the text to the top of the hover item
• Middle – align the text to the middle of the hover item
• Bottom – align the text to the bottom of the hover item

Hoverables work by displaying any background that's given along with the text from the showing tag by default. When the hoveritem is hovered over (on mouseover) or tabbed to (in focus), the showing and hiding elements are toggled, temporarily hiding the showing tag and showing the hiding tag. When visible, the hiding tag displays in a semitransparent dark grey with white text. In instances where text overflows its hoveritem element, hovering over the bottom or top portions of the hoveritem will scroll the text down or up, respectively. All hoverable elements have also been made accessible: As an alternative to using the mouseover actions, each hoveritem can also be toggled using the TAB key for moving between hover items and the UP and DOWN keys for scrolling text.

## Colors

Learning the Color Scheme

The eCore template uses a two-color color scheme, which can be changed if desired. The colors used for the color scheme are declared as attributes on the body tag. The color1 and color2 attributes define the primary and secondary colors, respectively.

Acceptable values for the color1 and color2 attributes include:

• Standard eCore Color Names (eColors), designated by ecore- plus the color name
• Standard HTML Color Names
• HEX Color Values, preceded by #
• RGB Color Values, in the format of rgb(R,G,B)

For a complete list of available eColors and HTML colors, see below:

### eColors

Standard eCore Colors

Hover over a color to reveal its attribute value, HEX code, and RGB numbers.

### HTML Colors

Standard HTML Colors

Hover over a color to reveal its attribute value, HEX code, and RGB numbers.

#### Yellow Green

The template uses a built-in mechanism to automatically contrast colors in most places where you see color overtop of a background color. This means that darker backgrounds will always be given white text , and lighter backgrounds will always be given a darker color text, that is, eCore dark grey . The only except to this rule is the text in the gradient strip of the headerbackground, which requires that an alternative font color be provided if the default white text does not contrast appropriately.

## Fonts

Learning the Font Styles

The eCore template uses embedded webfonts for header and body text in order to retain font styles across all browsers and platforms. The default font used for all text is Open Sans, but all embedded webfonts are as follows:

TypeSans Serif

FamilyOpen Sans, Helvetica Neue, Helvetica, Arial, sans-serif

SampleAa Bb Cc

PurposeCode, Decorative

TypeMonospace

FamilyCourier, Consolas, monospace

SampleAa Bb Cc

PurposeDecorative

TypeScript

FamilyJenna Sue

SampleAa Bb Cc

### eGlyphs

Standard eCore Glyphs

The eCore template also uses a custom glyph collection called eGlyphs. This collection has also been embedded alongside the template’s webfonts, so it is available for use on a per need basis.

#### How to Use eGlyphs:

There are several ways to start using eGlyphs in the template. Below are a two examples:

Change the style of font of your targeted text.
1. Open the HTML editor for the page you wish to edit.
2. Highlight the text you wish to change, or place your cursor where you wish to insert a new glyph.
3. In the options bar, find and click the Insert Attributes button.
4. In the Style box, type: font-family: eGlyphs;
5. Click the Create button.
6. Type the unicode or ligature for the glyph you desire.
Change the class of your targeted text.
1. Open the HTML editor for the page you wish to edit.
2. Highlight the text you wish to change, or place your cursor where you wish to insert a new glyph.
3. In the options bar, find and click the Insert Attributes button.
4. In the Class box, type: ecore-
5. Click the Create button.
6. Type the unicode or ligature for the glyph you desire.

Hover over a glyph to reveal its class attribute value, ASCII character code, and ligature(s), respecitvely.

## Icons

Learning the Icon Presets

The eCore template uses a custom collection of icons called eCons. These icons have been made available for use throughout the template, including with all of the following layout elements:

• Section
• Subsection
• Box
• Callout
• Multimedia

An eCon can be specified for use in the image attribute of the aforementioned elements using the ecore- prefix plus the icon’s name. Refer to the following section for a list of all available eCons:

### eCons

Standard eCore Icons

Hover over an icon to reveal its image attribute value.

## Backgrounds

Learning the Background Collection

The eCore template comes with a ready-to-use collection of background images for use in the background tag of the header section (see Features for more details). These backgrounds are stored in the backgrounds folder inside the template's assets library, or in other words, at the path assets > backgrounds relative to the template's hosted root directory. As a point of reference, the template's hosted root directory can be found at https://ecore.usg.edu/videos/template. The available backgrounds, their respective source paths, and what subject area they are best suited for, can be found below. To reveal the source path, which will need to be inputted into the src attribute of the img tag inside the headerbackground, simply hover over the image of interest:

## Markers

Learning the Marker Options

The eCore template offers a wide variety of list markers for use throughout the template. These markers can be accessed through the use of the custom marker attribute on any list tag, which includes:

• Unordered Lists (ul)
• Ordered Lists (ol)
• List Items (li)
• List Titles (lt)
• List Subtitles (ls)

Refer to the sections below for a complete list of available markers:

### Unordered Markers

Markers for ul Tags

Hover over a list item to reveal its marker attribute value.

• Circle
• White Circle
• Dotted Circle
• Square
• White Square
• Triangle
• White Triangle
• Dash
• Bar
• Diamond
• Asterisk
• Heavy Asterisk
• Checkbox
• Xbox
• Checkmark
• Heavy Checkmark
• Xmark
• Heavy Xmark
• Angle
• Arrow
• Heavy Arrow
• Round Arrow
• Double Arrow
• Squiggle Arrow
• Dashed Arrow
• White Arrow

### Ordered Markers

Markers for ol Tags

Hover over a list item to reveal its marker attribute value.

1. Decimal
3. Upper Alpha
4. Lower Alpha
5. Upper Roman
6. Lower Roman

## Classes

Learning the Class Presets

Built into the eCore template are several class presets that can be used for styling things quickly and easily on the fly. These classes are prebuilt values for the class attribute, which apply some preset styling to the element the class is applied to. For an overview of the template's preset classes, see below:

### Text Classes

For Text Styles

Standing for first-line indent, the .f-indent class indents the first-line of a body of text. The size of the indention is approximately 50px. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.f-indent{ text-indent: 50px; }

#### HTML

<p class="f-indent"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Standing for small first-line indent, the .f-indent-small class indents the first-line of a body of text. The size of the indention is approximately half the size of the normal .f-indent width (25px). To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.f-indent-small{ text-indent: 25px; }

#### HTML

<p class="f-indent-small"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Standing for big first-line indent, the .f-indent-big class indents the first-line of a body of text. The size of the indention is approximately double the size of the normal .f-indent width (100px). To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.f-indent-big{ text-indent: 100px; }

#### HTML

<p class="f-indent-big"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Standing for hanging indent, the .h-indent class indents all lines of a body of text after the first-line. The size of the indention is approximately 50px. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.h-indent{ padding-left: 50px; text-indent: -50px; }

#### HTML

<p class="h-indent"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Standing for small first-line indent, the .h-indent-small class indents all lines of a body of text after the first-line. The size of the indention is approximately half the size of the normal .h-indent width (25px). To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.h-indent-small{ padding-left: 25px; text-indent: -25px; }

#### HTML

<p class="h-indent-small"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Standing for big first-line indent, the .h-indent-big class indents all lines of a body of text after the first-line. The size of the indention is approximately double the size of the normal .h-indent width (100px). To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.h-indent-big{ padding-left: 100px; text-indent: -100px; }

#### HTML

<p class="h-indent-big"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Standing for paragraph indent, the .p-indent class indents an entire body of text. The size of the indention is approximately 50px. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.p-indent{ padding-left: 50px; }

#### HTML

<p class="p-indent"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Standing for small paragraph indent, the .p-indent-small class indents an entire body of text. The size of the indention is approximately half the size of the normal .p-indent width (25px). To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.p-indent-small{ padding-left: 25px; }

#### HTML

<p class="p-indent-small"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Standing for big paragraph indent, the .p-indent-big class indents an entire body of text. The size of the indention is approximately double the size of the normal .p-indent width (100px). To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.p-indent-big{ padding-left: 100px; }

#### HTML

<p class="p-indent-big"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .single-space class sets the line spacing of a body of text to approximately 100%, or the height of 1 line. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.single-space{ line-height: 100%; }

#### HTML

<p class="single-space"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .half-space class sets the line spacing of a body of text to approximately 150%, or the height of 1.5 lines. This is the same spacing used by the eCore template by default. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.half-space{ line-height: 150%; }

#### HTML

<p class="half-space"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .double-space class sets the line spacing of a body of text to approximately 200%, or the height of 2 lines. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.double-space{ line-height: 200%; }

#### HTML

<p class="double-space"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .big-text class increases the size of the font by a fifth the font's original size, setting the font size to approximately 1.20em. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.big-text{ font-size: 1.20em; }

#### HTML

<p class="big-text"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .bigger-text class increases the size of the font by a third the font's original size, setting the font size to approximately 1.33em. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.bigger-text{ font-size: 1.33em; }

#### HTML

<p class="bigger-text"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .biggest-text class increases the size of the font by a half the font's original size, setting the font size to approximately 1.50em. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.biggest-text{ font-size: 1.50em; }

#### HTML

<p class="biggest-text"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .big-text class decreases the size of the font by a fifth the font's original size, setting the font size to approximately 0.80em. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.small-text{ font-size: 0.80em; }

#### HTML

<p class="small-text"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .big-text class decreases the size of the font by a third the font's original size, setting the font size to approximately 0.66em. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.smaller-text{ font-size: 0.66em; }

#### HTML

<p class="smaller-text"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .big-text class decreases the size of the font by a half the font's original size, setting the font size to approximately 0.50em. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.smallest-text{ font-size: 0.50em; }

#### HTML

<p class="smallest-text"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .outline class outlines the object it is applied to using a 1px solid line in eCore dark grey . To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.outline{ border: 1px solid #333333; }

#### HTML

<p class="outline"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .outline-children class outlines the immediate children of the object it is applied to using a 1px solid line in eCore dark grey . To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.outline-children > *{ border: 1px solid #333333; }

#### HTML

<p class="outline-children"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .reference class applies traditional reference formatting to a body of text, including hanging indentation and double-spacing, in addition to some custom styling to make reference text obvious but non-obtrusive. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.reference{
display: block;
box-sizing: border-box;
background: rgba(243,243,243,0.25);
text-indent: -30px;
text-align: left;
line-height: 200%;
font-size: 0.8rem;
}

#### HTML

<p class="reference"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .quote class wraps a body of text in quotation marks. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.quote{
display: block;
}
.quote:before{
content: '“';
}
.quote:after{
content: '”';
}

#### HTML

<p class="quote"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .quote-styled class wraps a body of text in stylized quotation marks. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.quote-styled{
display: block;
}
.quote:before{
content: '❝ ';
}
.quote:after{
content: ' ❞';
}

#### HTML

<p class="quote-styled"></p>

#### Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet ornare elit, ac maximus justo. Sed varius ante vitae quam sagittis, aliquet gravida mauris consequat. Nunc imperdiet elementum mauris sit amet finibus. Sed ex urna, tincidunt id dolor in, pretium vulputate erat. Duis sagittis dapibus erat, eu hendrerit tortor suscipit id. Ut non pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The .quote-by class is used for styling a quote byline. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.quote-byline{
display: block;
margin-top: 10px;
text-align: right;
font-style: italic;
}
.quote:before{
content: '― ';
}

#### HTML

<p class="quote-byline"></p>

#### Sample

Standing for pronunciation, the .pronun class formats the given text like a pronunciation, adding a / before and after the text. To learn more about how it works or to see it in action, reference the CSS code, HTML markup, and sample preview below.

#### CSS

.pronun{
font-size: 1em;
}
.pronun:before,
.pronun:after{
content: '/';
font-size: 1rem;
}

#### HTML

<p class="pronun"></p>

Lorem ipsum

### Color Classes

For Color Styles

#### Text Color

The following classes can be used for changing the color of text to a standard eColor.

Changes the text color to eColor's green.

Changes the text color to eColor's teal.

Changes the text color to eColor's light teal.

Changes the text color to eColor's rust.

Changes the text color to eColor's medium orange.

Changes the text color to eColor's light mint.

Changes the text color to eColor's purple.

Changes the text color to eColor's red.

Changes the text color to eColor's light green.

Changes the text color to eColor's yellow.

Changes the text color to eColor's light teal.

Changes the text color to eColor's sky blue.

Changes the text color to eColor's dark purple.

Changes the text color to eColor's coral.

Changes the text color to eColor's mint.

Changes the text color to eColor's turquoise.

Changes the text color to eColor's orange.

Changes the text color to eColor's slate.

Changes the text color to eColor's powder blue.

Changes the text color to eColor's light blue.

Changes the text color to eColor's medium blue.

Changes the text color to eColor's blue.

Changes the text color to eColor's medium teal.

Changes the text color to eColor's dark teal.

Changes the text color to eColor's medium indigo.

Changes the text color to eColor's indigo.

Changes the text color to eColor's dark indigo.

Changes the text color to eColor's dark slate.

Changes the text color to eColor's dark green.

Changes the text color to eColor's light orange.

Changes the text color to eColor's pink.

Changes the text color to eColor's medium coral.

Changes the text color to eColor's dark coral.

Changes the text color to eColor's dark red.

Changes the text color to eColor's black.

Changes the text color to eColor's dark-grey. This is also the template's default font color.

Changes the text color to eColor's dark-gray. This is also the template's default font color.

Changes the text color to eColor's light grey.

Changes the text color to eColor's light gray.

Changes the text color to eColor's white.

#### Background Color

The following classes can be used for applying a solid background color to an element.

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's

Changes the background color to eColor's

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

The following classes can be used for creating a linear gradiant background effect like that of the page title.

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's

Changes the background color to eColor's

Changes the background color to eColor's .

Changes the background color to eColor's .

Changes the background color to eColor's .

Any number of classes can be combined to create the desired look and feel. When chaining classes in the class attribute, be sure to use only spaces to separate your different class attribute values. Below is an example of more than one class being applied to a single element:

<p class="f-indent double-space">
The first line of this text will be indented and all of the text will be double-spaced.
</p>

When chaining multiple classes together, it's important to remember any classes manipulating the same CSS property or group of properties will cancel each other out. In this instance, only the class that you listed last in your class attribute list will be the one that takes effect. For example, if you were to use classf-indent h-indent, because both .f-indent and .h-indent use the same text-indent property, the resulting text-indent would have the value of -50px because the h-indent class was listed last. In this example, the f-indent class value is thus canceled out.

## Plugins

Learning the Functionality

Plugins are prebuilt extensions, usually by other people, that can be used to add some functionality to a page. Think of them as a means to prevent reinventing the wheel metaphorically speaking, or a quick and dirty way to create some new functionality on a large, reproducible scale with little to no effort. In this case, plugins have been used to expedite the template development process and add additional functionality to the template. The plugins being used and their purposes are as follows:

• Captions

Used as an adapted version of the original, this plugin makes media captions and attribution possible. It works by wrapping captioned objects in a figure and adding caption and attribution text to the figure element's native figcaption. For more on adding captions and/or attributions, see the section on template Features.

• Fluidwidth Video

Used as an adapted version of the original, this plugin automatically resizes any videos that use an iframe. Since iframe elements require a specific width and height, this plugin works by resizing iframe videos according to their original aspect ratio. In order to invoke this plugin so that an iframe video is resized, the iframe element must be given the fluid attribute. No value is needed, but the fluid attribute itself is needed in order to flag the iframe element for resizing. For more on how fluidwidth video resizing is used, check out the Features section of this template.

• Ellipsis Truncate

Used as an adapted version of the original, this plugin truncates long title text in the nav bar and floating side menu with an ellipsis (...). It works by limiting the number of lines of text to one line and restricting the text to the designated area. It adds ellipsis where text would otherwise wrap to a new line or spill over into a nondesignated area. For more on the nav bar or floating side menu, visit the Features section of the template.

• Masonry

Used as an adpated version of the original, this plugin does the bulk of the workload involved in crafting the grid layouts. It works by calculating the available space inside the grid and positioning each griditem accordingly based on its "best fit" given the varying widths and heights of each griditem. For more about how grid layouts work, see the section on template Features.

• Transcript Auto-Scroll

Developed specifically for eCore template applications, this plugin synchronizes transcript element scrolling with the respective video or audio element's playback. It works by capturing the time for each transcripted line, converting it to a position within the video's or audio's duration, and comparing the video's current playback time against the transcription's timing. When the video or audio player reaches a time that is equal to or greater than a transcripted line's time but not greater than the time for the next transcripted line, that specific line is highlighted, and the transcript box scrolls to that particular line, making sure it's easily within the user's viewing pane. For more about how transcript elements work, see the section on template Features.

• Video Player

Developed specifically for eCore template applications, this plugin converts standard HTML5 video elements to a fully customized, accessible, and responsive video player. It works by looking for video elements that are missing their controls attribute, which signals the plugin to create a custom set of controls, as well as additional features, that have been modified to be mobile- and disability-friendly. For more about how this custom video player works, see the section on template Features.

• Definitions

Developed specifically for eCore template applications, this plugin enables instantaneous definition lookups on vocabulary terms when a user mouses over or focuses on any given vocabulary word. It works by looking for vocabulary terms that have been wrapped in a special define tag, which contains a link to an XML document in its xmlsrc; retrieving, opening, and reading the XML document, which resembles a glossary-like list of definitions; finding, fetching, and saving the relevant definition, which matches the given term; and creating a temporary preview of the term's definition. For more about how to configure and use this define element, see the section on template Features.

The above plugins are dependent on the use of jQuery, an extension of the JavaScript library. At present, the template uses jQuery version 1.12.3 since it contains backwards support for older Internet Explorer browsers. Additional jQuery-based libraries such as jQuery Mobile and the unofficial Detect Mobile Browsers plugin are also being used by the template but are primarily used behind the scenes and do not add any additional front-end functionality.

Creating external links is always easy. An external link, or a tag, can be created using the built-in hyperlink builder from the WYSIWIG editor or hand-coded in the the format below, where the href attribute is used for the link's address, such as a URL or email address, and the title tag is used for accessibility purposes (for more details on accessibility, read the section on Accessibility):

<a href="" alt="" title="">
Do note, the title attribute of the a is not necessarily mandatory. If the anchor text—the text inside the a tag that will be hyperlinked— is descriptive enough, omitting the title attribute may be permissible.

For external links, an a tag can be used for several types of addresses. As previously mentioned, URLs and email addresses are two of the most common use case scenarios. The list below goes into further detail about some of the more popular types of link addresses and how they are used inside the href attribute of the the a tag:

Absolute URLs are your traditional URL, beginning with a web protocol, such as http:// or https://, and ending with the domain address.

<a href="http://www.example.com">

Relative URLs are in the form of a directory structure, referring to the underlying files and folders which make up of the current site and relative to the current file's location within the folder tree unless otherwise specified.

<a href="folder/file.ext">

In addition, any of the below prefixes can be used in order to change the relativeness of a relative path:

• / – means relative to the root directory in a folder tree
• ../ – moves up a level to the previous folder

Prefixed with mailto:, clicking a hyperlinked email address triggers a "Compose New Message" window in the user's default email platform to the given email recipient.

<a href="mailto:johndoe@example.com">

In some cases, you may want to have multiple recipients in your mailto: link. Additional recipients can be added by separating them with a comma (,). In addition to adding recipients, mailto: addresses can be customized in other ways. For instance, using any of the below suffixes will precompose different parts of the email message:

• cc= – for clear copying one or more recipients
• bcc= – for blind copying one or more recipients
• subject= – for defining preset text in the Subject field
• body= – for defining preset text in the Body field

None or all of the suffixes can be used at any given time. When adding suffixes, you use a ? before the first suffix. Additional suffixes are then chained with an & before them.

Prefixed with tel:, clicking a hyperlinked tel: number from a mobile device or any desktop computer with calling software triggers a phone call to the given telephone number. Using a country code, such as +1 for US telephone numbers, is advised for best results.

<a href="tel:+15555555555">

Prefixed with sms:, clicking a hyperlinked sms: number from a mobile device triggers a new text message to the given telephone number while clicking from a desktop computer will have no effect. Using a country code, such as +1 for US telephone numbers, is advised for best results.

<a href="sms:+15555555555">

In some cases, you may want to have multiple numbers in your sms: link. Additional numbers can be added by separating them with a comma (,). In addition to adding numbers, sms: addresses can be customized in other ways. For instance, using the below suffix will precompose different parts of the text message:

• body= – for defining the preset text of the Body field

When adding the suffix, you use a ? before it.

Prefixed with skype:, clicking a hyperlinked skype: username or number from a mobile device or desktop computer with Skype installed triggers a new Skype call to the given recipient unless the default Skype link behavior is changed. When using a phone number, it's recommended that you prefix the number with its respective country code, such as +1 for US telephone numbers.

<a href="skype:user">

In some cases, you may want to have multiple recipients in your skype: link. Additional numbers can be added by separating them with a semicolon (;). In addition to adding recipients, skype: addresses can be customized in other ways. For instance, using any of the below suffixes will change the default Skype link behavior accordingly:

• call – the default behavior, triggers the call dialog within Skype
• chat – triggers the chat dialog within Skype
• sendfile – triggers the send file dialog within Skype
• userinfo – triggers the user information dialog within Skype

Only one of the above suffixes can be added at time. When adding the suffix, you should use a ? before it.

Although Relative URLs have been included in the above list, they will rarely be used if ever since the template files are hosted on a separate server. For linking to template asset files, like icons, backgrounds, and so forth, you'll need to use an Absolute URL. As a point of reference, the template's root folder is located at .

Along with links to external sources, internal links can be used to make navigating the current page easier or for referencing content located somewhere else in the page. Because in-page links utilize a smooth scrolling system, creating an internal link is slightly different from how you would create a standard a tag. As a guide, follow the example below when creating internal links:

<a href="javascript:void(0)" jumpto="section-#" onclick="jump(this);">

For all internal links, the href attribute of the a tag should be voided using javascript:void(0). Using javascript:void(0) removes the default behavior of the a tag, enabling us to create our smooth scrolling link. The jumpto attribute is then used to specify the section within the current page that we wish to go to when our link is clicked. The jumpto attribute will always have a value identical to section-# where the # is replaced with the section number. Sections are always numbered top-down, meaning that your first section will always be section-1, second section will always be section-2, and so forth for each section in your document. Lastly, the remaining attribute in the a tag above and its corresponding value, onclickjump(this);, are required. This is the function that creates the smooth scrollling effect when our link is clicked.

## Templates

Learning the Basic Templates

Various templates have been setup and made available to help expedite the course development process. These HTML template files can be found in the root template folder, each file starting with _template and containing the .html extension. While these templates are intended to help make course development quickier and easier, do note that these templates have been made to be very minimilistic and, thus, do not fully reflect all available Features that have been mentioned throughout this template guide.

By and large, these templates are designed to serve as a foundation for you to build upon by adding layout elements, utilizing features, and customizing styles as outlined in this guide. A total of 14 templates currently exists with their layouts mirroring the visual representations below. Hovering over each visual will reveal the name of its cooresponding HTML template file:

## Accessibility

Learning the Accessible Features

As a requirement for 508 compliance, this template has been created with accessibility features at the forefront of its design. The template's accessible feature include but are not limited to the following:

The entire template has been made tabbable, including all standard tabbable elements as well as some nonstandard tabbable elements, like the bulk of the page's text content. In other words, students should be able to use the TAB and SHIFT+TAB keys to scan the page's entire content without missing any text, links, buttons, and so forth. This feature is added dynamically at page load by indexing the entire page and adding tabindex0 to all targeted content.

While tabbing through the page, you will also notice a dotted focus ring being applied to the element that has been tabbed to and is in focus. This focus ring is intended to help students figure out where they are on the page. To make this focus ring even more helpful, this focus ring has been made to slowly pulse, or enlarge then shrink back to normal size, every so often after one minute (60s) of inactivity. This focus ring can also be hidden completely from view by using the ESC key while the current tab order will be retained.

A big part of 508 compliance relates to the ability of screen readers to accurately read through the contents of a page. The template has been designed with this necessity not only in mind but at the forefront of its design. Thus, the template reflects a fully readable layout and markup, including readbility by the LMS's built-in "Listen" button powered by ReadSpeaker. Yes, this even means that elements that may appear to be visually hidden will be read aloud.

In addition to the template's readability by screen readers, the template has also been designed with the goal of making all HTML markup readable by and understandable to the people who will be manipulating the template the most. With this in mind, the template has been designed fully in semantic HTML5, where every element's name is intended to clearly describe its use and/or purpose.

Tooltips are used to provide additional information about an element on the page. Usually, a tooltip is shown when an element containing a title attribute is moused over (on hover), but the template's tooltip feature has been enhanced to also show a pseudo tooltip when an element containg a title attribute is tabbed to (in focus).

While this improvement to tooltips makes a significant difference in how accessible the title attribute is, it's important to note that it's not perfect. Unfortunately, the pseudo tooltip method does not work on all elements. For instance, this pseudo approach is not compatible with the img tag even though tooltips should still be displayed on hover of the image.

Though this is not related to the template's built-in accessibility features, it's an important accessibility requirement that instructional designers and anyone else who may manipulate this template should know. Alternative text and the use of the alt attribute of img tags is a huge factor in accessibility compliance. Because the alternative text is what's read by screen readers, it's important to always fill in the alt attribute with a meaningful description of the visual. Of course, the exception to using the alt attribute is if an image is purely decorative. Only when an image is decorative can the alt attribute be omitted.

While this template is intended to be fully accessible, it may not be perfect. Please pass on any issues or concerns regarding accessibility compliance to Lauren Hamel at lauren.hamel@ung.edu.