Getting Started: A Template Guide

This page is intended to provide an easy referencing point for all HTML markup that you may create, edit, or otherwise use throughout the template. Please note, in the examples below, some code samples may appear to run off the page. However, all samples are scrollable, meaning that any run-on code can be viewed by scrolling left and right.

HTML

html In the below code samples, italicized markup represents user-defined values.

<html>
<body>
<leader>...</leader>
<header>
<background>...</background>
<content>...</content>
</header>
<section>
<heading>...</heading>
<content>...</content>
</section>
</body>
</html>

Body

body In the below code samples, italicized markup represents user-defined values.

<body id="ecore" color1="primary_color" color1="secondary_color" btncolor="tint_amount" btnhover="shade_amount">
...
</body>

color1

The primary color for the template's color scheme.

All possible values include:

Standard eCore Colors (eColors) – see Colors section of the Template Guide for more details
Standard HTML Colors – see Colors section of the Template Guide 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 section of the Template Guide for more details
Standard HTML Colors – see Colors section of the Template Guide 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

Leader

leader In the below code samples, italicized markup represents user-defined values.

<leader type="prefix" lang="prefix_language" cont="is_continued">
...
</leader>

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
advorg – adds the prefix ADVANCED ORGANIZER
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

Header

header In the below code samples, italicized markup represents user-defined values.

<header>
<background>
<img valign="vertical_alignment" alt="alternative_text" desaturate="saturation_amont" src="image_url"/>
<colorize bgcolor="background_color" opacity="transparency_amount"></colorize>
<pattern align="horiztonal_alignment" valign="vertical_alignment" opacity="transparency_amount" src="pattern_url" size="pattern_size"></pattern>
</background>
<content>
<h1>...</h1>
<sh1>...</sh1>
</content>
<header>

<img src="image_url" alt="alternative_text" valign="vertical_alignment" desaturate="saturation_amount"/>

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

<colorize bgcolor="background_color" opacity="transparency_amount">

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 section of the Template Guide for more details).

All possible values include:

Standard eCore Colors (eColors) – see Colors section of the Template Guide for more details
Standard HTML Colors – see Colors section of the Template Guide 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

<pattern src="pattern_url" opacity="transparency_amount" align="horizontal_alignment" valign="vertical_alignment" size="pattern_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

Section

section In the below code samples, italicized markup represents user-defined values.

<section image="icon_image" fit="icon_size" shape="icon_shape">
<heading>
<h2>...</h2>
<sh2>...</sh2>
</heading>
<content>
...
</content>
</section>

image

The source to an icon or other image.

All possible values include:

Standard eCore Icons – see Icons section of the Template Guide 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

Define

define In the below code samples, italicized markup represents user-defined values.

<define xmlsrc="xml_doc_url" term="xml_vocab_term">
...
</define>

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

Lists

ul and ol In the below code samples, italicized markup represents user-defined values.

Unordered Lists

Bulleted

<ul marker="marker_type">
<lt marker="marker_type">List title...</lt>
<li marker="marker_type">List item...</li>
<ls marker="marker_type">List item and subtitle...</ls>
</ul>

marker

The marker by name.

All possible values include:

Standard HTML Markers – see Markers section of the Template Guide for more details
Custom Markers – see Markers section of the Template Guide for more details

Ordered Lists

Numbered

<ol marker="marker_type">
<lt marker="marker_type">List title...</lt>
<li marker="marker_type">List item...</li>
<ls marker="marker_type">List teim and subtitle...</ls>
</ol>

<ul>
<li>List level 1 item 1...
<ul>
<li>List level 2 item 1...</li>
</ul>
</li>
<ls>
<ol>
<li>List level 3 item 1...</li>
</ol>
</ls>
</ul>
</li>
</ul>

<ul class="keywords">
<li>Keyword 1...</li>  
<li>Keyword 2...</li>  
...
<li>Keyword n...</li>
</ul>

Images, Videos, Audio, Objects, and iFrames

img, video, audio, object, and iframe In the below code samples, italicized markup represents user-defined values, bolded markup represents custom attributes specific to the given element in the given context, and highlighted markup represents standard attributes that are used specifically for the given element in the given context only.

Images

Outside multimedia

<img src="image_url" alt="alternative_text" title="title_text" float="relative_position" lspace="left_spacing" rspace="right_spacing"/>

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

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

Inside multimedia

<img src="image_url" alt="alternative_text" title="title_text"/>

Videos

Outside multimedia

Generic Player

<video float="relative_position" lspace="left_spacing" rspace="right_spacing" controls>
<source src="video_url" type="video_type">
<track src="track_url" srclang="track_language" kind="track_type" label="track_title">
</video>

Custom Player (Preferred)

<video float="relative_position" lspace="left_spacing" rspace="right_spacing" preload="metadata" crossorigin="anonymous">
<source src="video_url" type="video_type" resolution="video_resolution">
<track src="track_url" srclang="track_language" kind="track_type" label="track_title">
<cue in="in_point" out="out_point">Cue name...</cue>
</video>

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

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).

Inside multimedia

Generic Player

<video controls>
<source src="video_url" type="video_type">
<track src="track_url" srclang="track_language" kind="track_type" label="track_title">
</video>

Custom Player (Preferred)

<video preload="metadata" crossorigin="anonymous">
<source src="video_url" type="video_type" resolution="video_resolution">
<track src="track_url" srclang="track_language" kind="track_type" label="track_title">
<cue in="in_point" out="out_point">Cue name...</cue>
</video>

Audio

Outside multimedia

<audio float="relative_position" lspace="left_spacing" rspace="right_spacing" controls>
<source src="audio_url" type="audio_type">
</audio>

Inside multimedia

<audio controls>
<source src="audio_url" type="audio_type">
</audio>

Objects

Outside multimedia

<object data="object_url" type="object_type" float="relative_position" lspace="left_spacing" rspace="right_spacing"></object>

Inside multimedia

<object data="object_url" type="object_type"></object>

iFrames

Outside multimedia

Fixed Size

<iframe src="frame_url" width="pixel_width" height="pixel_height" float="relative_position" lspace="left_spacing" rspace="right_spacing"></iframe>

Scalable Size (2^nd Preferred)

<iframe src="frame_url" width="percent_width" origwidth="pixel_width" origheight="pixel_height" float="relative_position" lspace="left_spacing" rspace="right_spacing" autoscale></iframe>

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

Fluid Size (1^st Preferred)

<iframe src="frame_url" width="pixel_width" height="pixel_height" fluid></iframe>

The custom attributes float, lspace, and rspace cannot be used because they do not work with the custom fluid attribute.

Inside multimedia

Fixed Size

<iframe src="frame_url" width="pixel_width" height="pixel_height"></iframe>

Scalable Size (2^nd Preferred)

<iframe src="frame_url" width="percent_width" origwidth="pixel_width" origheight="pixel_height" autoscale></iframe>

Fluid Size (1^st Preferred)

<iframe src="frame_url" width="pixel_width" height="pixel_height" fluid></iframe>

Captions can be added to any of the above types of media using the same format outlined below.

<img class="caption" 
src="image_url" 
alt="alternative_text" 
title="title_text" 
float="relative_position" 
lspace="left_spacing" 
rspace="right_spacing"
caption="caption_text"
caption-src="caption_url"
caption-state="is_showing"
caption-mode="caption_mode"/>

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 " 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. Attributions can be added to any of the above types of media using the same format outlined below.

<img class="caption" 
src="image_url" 
alt="alternative_text" 
title="title_text" 
float="relative_position" 
lspace="left_spacing" 
rspace="right_spacing"
attribution-state="is_showing"
license="image_license"
license-src="license_url"
by="image_author"
from="source_name"
from-src="source_url"
copyright-owner="copyright_owner"
copyright_year="copyright_year"
derivative="is_derived"/>

attribution-state

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.

license

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

Standard Licenses

AttributelicenseCC-0

Version1.0

TitleCC 0

Image

AttributelicenseCC-BY or licenseCC-BY-4.0

Version4.0

TitleCC BY 4.0

Image

AttributelicenseCC-BY-3.0

Version3.0

TitleCC BY 3.0

Image

AttributelicenseCC-BY-2.5

Version2.5

TitleCC BY 2.5

Image

AttributelicenseCC-BY-2.0

Version2.0

TitleCC BY 2.0

Image

AttributelicenseCC-BY-1.0

Version1.0

TitleCC BY 1.0

Image

AttributelicenseCC-BY-SA or licenseCC-BY-SA-4.0

Version4.0

TitleCC BY-SA 4.0

Image

AttributelicenseCC-BY-SA-3.0

Version3.0

TitleCC BY-SA 3.0

Image

AttributelicenseCC-BY-SA-2.5

Version2.5

TitleCC BY-SA 2.5

Image

AttributelicenseCC-BY-SA-2.0

Version2.0

TitleCC BY-SA 2.0

Image

AttributelicenseCC-BY-SA-1.0

Version1.0

TitleCC BY-SA 1.0

Image

AttributelicenseCC-BY-ND or licenseCC-BY-ND-4.0

Version4.0

TitleCC BY-ND 4.0

Image

AttributelicenseCC-BY-ND-3.0

Version3.0

TitleCC BY-ND 3.0

Image

AttributelicenseCC-BY-ND-2.5

Version2.5

TitleCC BY-ND 2.5

Image

AttributelicenseCC-BY-ND-2.0

Version2.0

TitleCC BY-ND 2.0

Image

AttributelicenseCC-BY-ND-1.0

Version1.0

TitleCC BY-ND 1.0

Image

AttributelicenseCC-BY-NC or licenseCC-BY-NC-4.0

Version4.0

TitleCC BY-NC 4.0

Image

AttributelicenseCC-BY-NC-3.0

Version3.0

TitleCC BY-NC 3.0

Image

AttributelicenseCC-BY-NC-2.5

Version2.5

TitleCC BY-NC 2.5

Image

AttributelicenseCC-BY-NC-2.0

Version2.0

TitleCC BY-NC 2.0

Image

AttributelicenseCC-BY-NC-1.0

Version1.0

TitleCC BY-NC 1.0

Image

AttributelicenseCC-BY-NC-SA or licenseCC-BY-NC-SA-4.0

Version4.0

TitleCC BY-NC-SA 4.0

Image

AttributelicenseCC-BY-NC-SA-3.0

Version3.0

TitleCC BY-NC-SA 3.0

Image

AttributelicenseCC-BY-NC-SA-2.5

Version2.5

TitleCC BY-NC-SA 2.5

Image

AttributelicenseCC-BY-NC-SA-2.0

Version2.0

TitleCC BY-NC-SA 2.0

Image

AttributelicenseCC-BY-NC-SA-1.0

Version1.0

TitleCC BY-NC-SA 1.0

Image

AttributelicenseCC-BY-NC-ND or licenseCC-BY-NC-ND-4.0

Version4.0

TitleCC BY-NC-ND 4.0

Image

AttributelicenseCC-BY-NC-ND-3.0

Version3.0

TitleCC BY-NC-ND 3.0

Image

AttributelicenseCC-BY-NC-ND-2.5

Version2.5

TitleCC BY-NC-ND 2.5

Image

AttributelicenseCC-BY-NC-ND-2.0

Version2.0

TitleCC BY-NC-ND 2.0

Image

AttributelicenseCC-BY-NC-ND-1.0

Version1.0

TitleCC BY-NC-ND 1.0

Image

When using a Standard License in the license attribute, the license-src attribute (see the following section) will automatically populate. Do note that if a Standard License name is given as the value of the license attribute, any value placed in the license-src attribute (see below) will consequently be ignored. For instances where you need to use a different license version than the ones listed above, or you need to use a different license altogether, simply provide the license's name in the license attribute and a link to the license in the license-src attribute (see below) if appropriate, making sure that your license attribute value does not match any of the above Standard Licenses.

license-src

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

When using a Standard License in the license attribute, the license-src attribute (see the previous section for more details) will automatically populate, meaning that no value for the license-src is necessary. If a Standard License name is given as the value of the license attribute (see above), and a value is placed in the license-src attribute, this value will be ignored. For instances where you need to use a different license version than the ones listed above, or you need to use a different license altogether, simply provide the license's name in the license attribute (see above) and a link to the license in the license-src attribute, making sure that your license attribute (see above) value does not match any of the previously mentioned Standard Licenses (see the section on the license attribute for more details on Standard Licenses).

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:

URLs – the web address the media was retrieved from

copyright-owner

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.

copyright-year

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.

Subsection

subsection In the below code samples, italicized markup represents user-defined values.

<subsection image="icon_image" fit="icon_size" shape="icon_shape" position="icon_position">
<subheading>
<h3>...</h3>
<sh3>...</sh3>
</subheading>
<subcontent>
...
</subcontent>
</subsection>

image

The source to an icon or other image.

All possible values include:

Standard eCore Icons – see Icons section of the Template Guide 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

Boxes

boxes In the below code samples, italicized markup represents user-defined values.

<boxes>
<box image="icon_image" fit="icon_size" shape="icon_shape" position="icon_position" align="horizontal_alignment">
<heading>
<h4>...</h4>
<sh4>...</sh4>
</heading>
...
</box>
</boxes>

image

The source to an icon or other image.

All possible values include:

Standard eCore Icons – see Icons section of the Template Guide 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

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.

Grid

grid In the below code samples, italicized markup represents user-defined values.

<grid width="grid_width" spacing="item_spacing">
<griditem width="item_width">...</griditem>
</grid>

grid 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)

griditem 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)

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)

Accordion

accordion In the below code samples, italicized markup represents user-defined values.

<accordion>
<panel topic="panel_title">...</panel>
</accordion>

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

Callout

callout In the below code samples, italicized markup represents user-defined values.

<callout image="icon_image">
<memo>...</memo>
</callout>

image

The source to an icon or other image.

All possible values include:

Standard eCore Icons – see Icons section of the Template Guide for more details
Absolute Paths – URLs
Relative Paths – file directories

Table

table In the below code samples, italicized markup represents user-defined values, and bolded markup represents custom attributes specific to the given element in the given context.

<table float="relative_position" lspace="left_spacing" rspace="right_spacing">
<caption>Description of table for accessibility...</caption>
<tbody>
<tr>
<th scope="col_or_row">Scope used for accessibility...</th>
<th scope="col_or_row">...</th>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>

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

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

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. While it's not recommended to use tables due to their incompatibility with mobile devices, when using tables, be sure to take into account users' needs, such as accessibility and printer-friendliness: For accessibility, use a caption immediately after the opening table tag to provide an explanation of the table and use the scope attribute on table headers (th) to clarify whether the header is for a column (col) or row (row). For printing, make use of the thead, tbody, and tfoot tags to indicate which header and/or footer rows, if any, should be repeated on each page of the printed document.

Multimedia

multimedia In the below code samples, italicized markup represents user-defined values.

<multimedia image="icon_image">
<description align="horizontal_alignment">...</description>
<media>...</media>
<transcript>...</transcript>
</multimedia>

image

The source to an icon or other image.

All possible values include:

Standard eCore Icons – see Icons section of the Template Guide for more details
Absolute Paths – URLs
Relative Paths – file directories

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

Transcript

transcript In the below code samples, italicized markup represents user-defined values.

<transcript>
<trans>
<time>MM:SS</time>
<person>Speaker 1</person>
<noise>[Sound 1]</noise>
<span>Transcribed line 1...</span>
</trans>
<trans>
<time>MM:SS</time>
<person>Speaker 2</person>
<noise>[Sound 2]</noise>
<span>Transcribed line 2...</span>
</trans>
...
<trans>
<time>MM:SS</time>
<person>Speaker n</person>
<noise>[Sound n]</noise>
<span>Transcribed line n...</span>
</trans>
</transcript>

Hoverable

hoverable In the below code samples, italicized markup represents user-defined values.

<hoverable width="hoverable_width" itemwidth="item_width" itemshape="item_shape">
<hoveritem>
<background>...</background>
<content>
<showing align="horizontal_alignment" valign="vertical_alignment">...</showing>
<hiding align="horizontal_alignment" valign="vertical_alignment">...</hiding>
</content>
</hoveritem>
...
</hoverable>

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

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

HTML

Body

color1

color2

btncolor

btnhover

Leader

type

lang

cont

Header

src

alt

valign

desaturate

bgcolor

opacity

src

opacity

align

valign

size

Section

image

fit

shape

Define

xmlsrc

term

Lists

Unordered Lists

marker

Ordered Lists

Images, Videos, Audio, Objects, and iFrames

Images

Outside multimedia

float

lspace

rspace

Inside multimedia

Videos

Outside multimedia

Generic Player

Custom Player (Preferred)

resolution

in

out

Inside multimedia

Generic Player

Custom Player (Preferred)

Audio

Outside multimedia

Inside multimedia

Objects

Outside multimedia

Inside multimedia

iFrames

Outside multimedia

Fixed Size

Scalable Size (2nd Preferred)

origwidth

origheight

autoscale

Fluid Size (1st Preferred)

Inside multimedia

Fixed Size

Scalable Size (2nd Preferred)

Fluid Size (1st Preferred)

caption

caption-src

caption-state

caption-mode

Examples

attribution-state

license

Standard Licenses

license-src

by

from

from-src

Scalable Size (2^nd Preferred)

Fluid Size (1^st Preferred)

Scalable Size (2^nd Preferred)

Fluid Size (1^st Preferred)