New Course QRG1.pdf

1. When you log into Evolve Author, you will be login into the Dashboard page.
2. To Start creating a
course, click on the
“Create Course”
button.

3. You will be now prompted with a new screen. There are 3 key areas to
focus
1 Course Title: You need to
enter a title for your course
2 Select Theme: You
need to select a theme from
the theming options provided
to you.
3 Create: Click the button to create
the course.

4. Once the course is created, now it’s time to theme it.
5. Now you are presented with a ‘Page Builder’ page.
6. To access theming, you need to select the “Appearance” tab.

7. Now we are presented with a page full of themes.
8. To create a new theme “Create New Theme”.

9. You will be prompted with a new theme creation screen.
1 Simply give a new
name for the theme.
2 Select a
theme from the
drop-down
menu and the
following
screen.
3 Click create.

10. Your newly created theme will appear in the list of the
themes.
A To edit the theme
you created, click on.

11. You will be now navigated to the “Theme Editor” screen.
12. The Theme Editor consists of:
1. General
2. Default Colors
3. Fonts
4. Images
5. Icons
6. Course
7. Navigation
8. Loading
9. Notification Dialog
10. Menu
11. Menu Content Item
12. Page
13. Components
14. Extension Page
15. Extensions
16. Hero Image
17. Header
18. Footer Navigation
19. Footer Navigation
20. Article
21. Article Divider
22. Article Locking
23. Article Styles
24. Block
25. Component
26. Component Item
27. Component Inline Feedback
28. Button
29. Attempts Counter
30. Link
31. Tooltip Content
32. Tooltip
33. List
34. Caption
35. Label
36. Variable
37. Progress Bar
38. Chart
39. Score
40. Marking
41. Game
42. Simulation
43. Video Player
44. Localisation

1) General Option
This is where you can set general settings such as the Them title, showing
labels, setting as a favourite menu or setting as the default menu for all
the courses been build using Evolve Author, Locking the theme for
editors, exporting and deleting the theme.
A Theme Title: The name of the theme.
B Set As Default: By turning on, will set the theme as the default
theme when developing a new course.
C Lock Theme: This is a restriction control of who can edit the theme.
D Export Theme: This allows you to export the theme and distribute it
to another Evolve Author account.
E Delete Theme: You can delete this theme.

2) Default Colors Editor
Select the colors that you can use for theme in this course. Changing a
default color will update all places the replaced color was used
automatically.
A Colors: Available primary colors, default by Evolve Author.
B Color Name: Any color name you want to call it.
C Color Picker: Pick your own custom color. If you are using the sliders, click the slider and move it to
choose the desired color you need.
D Hex: If you know the Hex value of the colour you want, enter the Hex value of the color.
E RGB: If you know the RGB value of the colour you want, enter the RGB values in the appropriate boxes.
F A: This the alpha value. Alpha value stands for transparency. Higher the number, lower the transparency. You
need to give a value between 0 – 100. If you enter ‘100’, there is no transparency. If you enter ‘0’, it will be fully
transparent.
G Update Color: You need to click this button to update an existing color details changed or if you create a
new color, to be able to use the color.
I Cancel: Click this if you need to cancel changes.

3) Fonts
This is where we can set the accessing fonts be available
right throughout the courses built using this theme.
A Font Picker: There are few system default fonts available. You can add or change by following B,C,D,E,F steps.
B Click here to edit the font
C Now you will be prompted with a dialog to select a font either installed, available in google for download and use
or pre-installed web safe fonts available to use.
D If there is fonts setup during the installation of Evolve Author; they will appear here. Simply just select and font
and click on it to install. If you do not want it, simply click the “Close” button.
E All available google fonts are freely available for you to install and use. Simply just select and font and click on it
to install. If you do not want it, simply click the “Close” button.
F These are classified as default W3 web compatible fonts. Simply just select and font and click on it to install. If
you do not want it, simply click the “Close” button.

Import Images: Select images to import from the asset library for use in this theme.
4) Images

5) Icons
Theme Icons: Set the icons set that will be used in this theme. Icon sets can be
uploaded in the asset management section of Evolve

6) Course
This is where you setup the course. Here we themefy the how the
course looks like, setts the appearance, add accessibility so that
the course layouts and looks be constant on every device and sets
the type settings for the course.
A Settings: This relates to setting up background image for
the course.
A1 Click on the button and upload the appropriate image.
A2 Click on the drop-down list and select the appropriate option you desired.
A3 Click on the drop-down list and select the appropriate positioning as you
desired.
A4 Use the same you used for the background image with a smaller
dimensions.
A5 Click on t
A6 Click

6) Course
A5 Click on the button and upload the appropriate image.
A6 Click on the drop-down list and select the appropriate option
you desired.

6) Course
B1 Click on the square to select a color.
C1 Click on the “+” button to set the focus outline colour for all
focusable elements in the course.
D1 Here you can select the font you desired from an available
collection of fonts. Simply click on the font name and a drop-down
menu of fonts will be displayed. Click to select the font. You can
click on each alignment icons to set the alignments. Simply click on
the color box to choose a different color.
B Appearance: This relates to setting up the look of the
course.
C Accessibility: This is where you set suitability of the
course, specially for an vision impaired person.
D Body Text Appearance: This is where you set the fonts
for overall text appearance for the course.

6) Course
D2 By selecting each device, you could set the color for each
device. If you want a standard font, simply click on the “Apply all”
button link.
D3 Here you can set the font size, font thickness and line
thickness. You can simply change the values by clicking on the up
and down arrow for each item.

7) Navigation
This is where we set the navigation of the course. There
are key areas to be focusing ranging from A -F.
A Settings: This is where the main settings of the
navigation is set. This section refers to the navigation
position, icons and features.
A1 Hide Top Navigation: Enabling this will
hide the top navigation completely.
A2 Hide Side Navigation: Enabling this will
hide the side navigation completely, this includes
the hamburger menu if it is enabled.
A3 Show Dashboard Button: This button allows
you to turn on/off the dashboard button appearing
on the top left when developing courses.

7) Navigation
A5 Use Hamburger Menu: Shows a hamburger menu
icon in the top navigation bar to show and hide the side
navigation. This will also disable mobile colors for the
navigation bar and use desktop colors.
A6 Hide Back Button: Hides the back button in
the top navigation bar.
A7 Keep Space for Back Navigation Button:
Enable this to keep a fixed space for the
navigation back button even if not displayed. This
can help avoid issues where the navigation logo
shifts position, when set to the left side.
A4 Use Home Icon for Dashboard Button: If ‘A3’ is
disabled, this option is not available. This creates an
Home icon for the button. This is optional.

7) Navigation
B Navigation Logo: This is where you set a logo for
your navigation bar. This if used for branding and to indicate
the learner that there is a course navigation option available.
B1 Enable a Logo to be displayed in the top navigation
bar
B2 You can set how your logo would appear on
small screens. You can specify the height for a
big logo as well as for a small logo.
B3 Here you can specify the alignment
positioning for the logo.

7) Navigation
C Navigation Title: This where you set the title for
the navigation to appear.
C1 Navigation Title: Enable to display the course title
in the navigation bar.
C2 Hide Mobile Navigation Title: Enable to
hide the title on mobile devices.
C3 Navigation Title Position: Set where the
navigation title should appear on both mobile and
desktop devices.

7) Navigation
D Navigation Top: This is where you set the top
navigation positioning for the course.
D1 Navigation Top Height: Set height for the top
navigation for desktop devices.
D2 Navigation Top Mobile Height: Set height for
the top navigation at mobile device size.
D3 Navigation Top Background Color: Set
background color for the top navigation.
D4 Navigation title Text Styles: This is where
you select the font family and the colour of the
font. You can additionally add a background color.
You can also set the font size, the thickness of the
font and the line spacing for the font.
D5 Device: You can set specific fonts and size for desktop and
mobile devices individually or have an one size and font for all the
devices.

7) Navigation
E Navigation Side: If you want to set your
navigation to be on the side, this is where you configure it.
E1 Navigation Side Width: Set width for the side
navigation.
E2 Navigation Side Background Color: You can
set the background color for the side navigation.
E3 Navigation Side Items Mobile Alignment:
Here you can set side navigation items alignment
on mobile devices.
E4 Navigation Side Icon colors: This let you set
top navigation icons colors for each state.

7) Navigation
E Navigation Text: This is where you can set the
font family for the navigation items.
E1 Navigation Text Font Family: You can set the
font for the top and side navigation text.

8) Loading
Loading: This is where you can set an custom animation for a loader.
Simply click on “Select Theme Image” and set the height for the loading
image.
NOTE: It must be a GIF image.

9) Notification
Dialog
This is the area you set your custom
notifications for events to notify the
learner as well as the course
administrator.
A Settings: This is where you set the
alignments for the Notification Dialog
box.
A1 Here you can set the
alignment for the notification icon,
button and body text appearing in
the notification dialog box.
A2 Here you can hide the notification icon and the
button; simply by turning on the button toggles.

9) Notification
Dialog
A3 Here you can select your own
custom close button by clicking on the
“Select Icon” button and selecting the
desired icon.
B Animations: Here you can set
the animations on how the notification
dialog would appear.
B1 Animations In & Out: Here
you can set the animation entrance
and exit as the same way you set in a
PowerPoint entrance and exit. You
could select the way you want, by
selecting from the drop-down menu.

9) Notification
Dialog
B2 Animations In & Out Speed:
Here you can set the speed of the
notify dialog animation when entering
& exiting the screen. Speed is in
milliseconds, choose a larger number
for a slower animation.
C Appearance: This is where
you set the artistic and decoration of
your notification dialog. This is
basically the look and the feel.
C1 Digital Background Color:
Here you can set the background
color for notify.
C2 You can set the a border to all sides or set borders on
each side individually and set the border radius to create
rounded corners.

9) Notification
Dialog
C3 This is where you can create a
shadow behind the content.
D Layout: Here is where you can set
the layout of the notification dialog box.
D1 You can set the maximum
width and content padding for the
notification dialog box.
D2 You can set the button padding
for the notification dialog box.

9) Notification
Dialog
E Title Text Appearance: This
allows you to set the title text
appearance.
E1 Here you can set the font, the
colour for the text, font size, font
thickness, line spacing. You can
also set text settings for all devices
or separately for desktop devices
and mobile devices.

9) Notification
Dialog
F1 You can specify the position of
the title by specifying the top,
bottom, left and right values in
pixels. You can also set a common
positioning for both mobile and
desktop devices. It is recommended
to set individually.
F Title Text Layout: Here
you can set the padding and the
position of the title.

9) Notification
Dialog
G1 Here you have to select the font, the
font color, font size, font thickness and the
line space.
G Body Text Appearance:
This is where you can set how the
body text appears.
H Body Text Layout: Here
you can set the spacing around your
body text inside your Notification
Dialog.
H1 You can simply set the white space which is called a
padding around your text by simply clicking on the “Add
Padding” and setting up the space as you desire.

9) Notification
Dialog
I Icon Appearance: This is
where you set the icon related to your
custom Notification Dialog box to
appear.
I1 You can set the icon color, simply by
clicking on the color and selecting it.
I2 Here you can set the size of the
icon.
I3 Here you can specify the colors for different
feedback icons.

9) Notification
Dialog
J Button Appearance: Here
you can set how your buttons appear
on a Notification Dialog.
J1 Here you can set the colors for different
notification button occurrences. You can
also set the colors for the close button.
J2 This allows you to set the
shadow for each of the buttons to
appear.

9) Notification
Dialog
K Indicator Appearance: This is
where you set how any indicators appear
on Notification Dialog box.
K1 Here you can specify text color
and the background color for your
Indicator.

10) Menu
This is where you configure the appearance of the course menu.

10) Menu
1 Settings: This is where you set the basic
configuration of the menu. It’s visibility, should it use
heading styles and the menu item duration icon.
1.1 Hide Menu Headers: Set menu headers to not be
visible.
1.2 Use Menu Header Styles: Enable this to apply
different styles to the menu header and menu header
info bar. By default the menu will use styles from the
Header section in the theme editor.
1.3 Menu Item Duration Icon: Set an icon to be
displayed before the item duration text.
1.4 Show Progress Bars on Menu Items?: This setting
can be set in the content (Course/Topic Menu settings).
Selecting Show/Hide overrides the setting in the
content.

10) Menu
2 Menu Header: This is
where you can customise the
menu header.
2.1 Here you can select the image, set it’s size and the position of the
image for desktop devices.
2.2 Here you can set the image for mobile devices using the same
settings as for desktop devices.

10) Menu
3 Animations: Here you can set the animation for the menu
appearance. You can set the direction, animations, and animation
timing; simply by clicking on each option. Further instructions
provided under each options in the interface itself.
4 Item Animations: This exactly
the same as the menu item.
5 Appearance: This is where you
set the color of the menu. Simply click on
the “+” to add the color.

10) Menu
6 Layout: Here you can set the
maximum width of the menu by entering the
desired size. The size must be set to pixels.

10) Menu
7 Item Appearance:
Here you can set the borders
and shadow for the menu. You
can also set the background
colour for the items in the
menu.
8 Item Layout: Here you
can set the position of the items.
You can also set a common item
layout position for both mobile
and desktop devices. You can
also set them individually.
Similarly you can set the white
spacing around menu items.
9 Item Title Appearance: Here you
can set the appearance for the item title. You
can set the font, text alignment, colour, font size,
font thickness and line spacing. You can set the
information individually for both desktop
devices and mobile devices. Also you got an
option of doing a common settings to be shared
by both types of devices.

10) Menu
10 Item Text Layout:
Here you can set the margins
for the item title text. You can
set the information
individually for both desktop
devices and mobile devices.
Also you got an option of
doing a common settings to be
shared by both types of
devices.
11 Item Description Appearance: Here you can set the
appearance for the item description. You can set the font, text alignment,
colour, font size, font thickness and line spacing. You can set the information
individually for both desktop devices and mobile devices. Also you got an
option of doing a common settings to be shared by both types of devices.

10) Menu
12 Item Description
Text Layout: Here you
can set the margins for the
item description text. You can
set the information
devices.
13 Item Duration Appearance: Here you can set the
appearance for the item duration details. You can set the font, text
alignment, colour, font size, font thickness and line spacing. You
can set the information individually for both desktop devices and
mobile devices. Also you got an option of doing a common settings
to be shared by both types of devices.

10) Menu
14 Item Duration
Text Layout: Here you
can set the margins for the
item duration text appearance.
You can set the information
devices.
15 Item Completion Appearance: Here you can set the
appearance for the item completion details. You can set the font, text
alignment, colour, font size, font thickness and line spacing. You can set the
information individually for both desktop devices and mobile devices. Also
you got an option of doing a common settings to be shared by both types of
devices.

10) Menu
16 Item Completion
Text Layout: Here you can
set the margins for the item
completion text appearance.
You can set the information
devices.
17 Item Footer: This is where you can set the footer
information. Here you can set the color for the item footer & arrange
the white spacing (padding) around your footer. You can set the
information individually for both desktop devices and mobile devices.
Also you got an option of doing a common settings to be shared by
both types of devices.

10) Menu
18 Item Button
Appearance: Here you can
set the colors for all the items
appearing in your menu.
Simply select the desired colors
as your requirement.
19 Item Progress Appearance: Here
you can specify colours for the progress of your
menu. Simply select the desired colors as your
requirement.

10) Menu
20 Header Appearance: Here you can
specify the color for your header, set borders and
shadows around your borders. To stylise, simply click
on each button. The interface will have instructions to
set the values as required.
21 Header Layout: Here you can set the
maximum width, maximum width for the content,
margins and the white spacing around your header. To
add the information as required, simply click on each
button. The interface will have instructions to set the
values as required.
22 Header Text Title Appearance: Here you can set the appearance for the
header title text. You can set the font, text alignment, colour, font size, font thickness and line
spacing. You can set the information individually for both desktop devices and mobile devices.
Also you got an option of doing a common settings to be shared by both types of devices.

10) Menu
23 Header Title Text Layout: Here you
can set the margins for the header title text
appearance. You can also set the padding positioning
as you require. You can set the information
individually for both desktop devices and mobile
devices. Also you got an option of doing a common
settings to be shared by both types of devices.
24 Header Body Text Appearance:
Here you can set the appearance for the body text
information. You can set the information individually
for both desktop devices and mobile devices. Also
you got an option of doing a common settings to be
shared by both types of devices.

10) Menu
25 Header Body Text Layout: Here you
can set the margins for the body text appearance. You
can also set the padding positioning as you require.
You can set the information individually for both
desktop devices and mobile devices. Also you got an
option of doing a common settings to be shared by
26 Header Info Appearance: Here you can
specify the border details appearing on the info section
of the header. To stylise, simply click on each button.
The interface will have instructions to set the values as
required.
27 Header Info Layout: Here you can set the margins for the information text
appearance. You can also set the padding positioning as you require. You can set the information
individually for both desktop devices and mobile devices. Also you got an option of doing a
common settings to be shared by both types of devices.

10) Menu
28 Header Info Text Appearance: Here
you can set the appearance for the header information
text. You can set the font, text alignment, colour, font
size, font thickness, line spacing & background color
of the text. You can set the information individually for
both desktop devices and mobile devices. Also you got
an option of doing a common settings to be shared by
29 Control Appearance: Here you can set
the colours for your control to appear in the menu. You
can specify both background colours and icon colours.
Simply select the desired colors as your requirement.

11) Menu Content Item
A Settings:
This allows you to
enable menu
content item styles.
Simply enable it by
turning it on.
B Container
Appearance:
Here you can
specify the color for
your header, set
borders and
shadows around
your borders. To
stylise, simply click
on each button. The
interface will have
instructions to set
the values as
required.

C Container
Layout: You can
specify the width
of the container
and set the margins
for the information
text appearance.
You can also set the
padding
positioning as you
require. You can set
the information
individually for
both desktop
devices and mobile
devices. Also you
got an option of
doing a common
settings to be
shared by both
types of devices.

D Item
Appearance:
Here you can
specify the color
for your header, set
borders and
shadows around
your borders. To
stylise, simply
click on each
button. The
interface will have
instructions to set
the values as
required.

E Item
Layout: Here
you can set the
margins for the
information text
appearance. You
can also set the
padding
positioning as you
the information
individually for
both desktop
devices and mobile
devices. Also you
got an option of
doing a common
settings to be
shared by both
types of devices.

F Item Title
Text
Appearance:
Here you can set
the appearance for
the title text
information. You
can set the
information
individually for
both desktop
devices and mobile
devices. Also you
got an option of
doing a common
settings to be
shared by both
types of devices.

G Item Title
Text Layout:
You can specify the
width of the
container and set the
margins for the
information text
appearance. You can
also set the padding
positioning as you
the information
individually for both
desktop devices and
mobile devices.
Also you got an
option of doing a
common settings to
be shared by both
types of devices.

H Item Body
Text
Appearance:
Here you can set
the font, text
alignment, colour,
font size, font
thickness and line
spacing. You can
set the information
individually for
both desktop
devices and mobile
devices. Also you
got an option of
doing a common
settings to be
shared by both
types of devices.

I Item Body
Text Layout:
You can specify the
width of the
container and set the
margins for the
information text
appearance. You can
also set the padding
positioning as you
the information
individually for both
desktop devices and
mobile devices.
Also you got an
option of doing a
common settings to
be shared by both
types of devices.

12) Page
This is where you configure the page to be stylised using a theme.

12) Page
A Settings: Here you can configure having an page header. To
enable simply turn on by clicking the toggle switch to on.
B Background Image: Here you
can set an background image for the page.
You can select an image as the
background image, select the appropriate
size from the drop-down menu, select the
positioning of the image by selecting from
the drop-down menu and you can have a
repeated background image by simply
turning on the toggle button. You could
also the configure the same to display on
mobile images. The same settings apply. It
is recommended to have a small size
image for mobile devices.

12) Page
C Header Graphic Settings: Here you can configure the visual appearance of the header
graphic. You got the option of making it visible for large screens and having it as a floating image on
the device. To turn each feature on, simply turn the toggle to on position.

12) Page
D Animation: You can add animation to the page
appearance. You can have it sliding vertically and
horizontally. You could also have it with fade in effect and
scale in effect. To enable each feature, simply click on the
toggle switches to turn on. You can also control the flow
control of the animation. Simply click on the drop-down
menu next to ‘Easing’ and select the appropriate preset you
wish to apply.

12) Page
E Appearance: Here you can set the look and the feel for page and contents. You can set the
page background color and the page content background color.

12) Page
F Layout: Here you can set the layout for
the page appearance. You can set the
maximum width for the page and the content
and set the padding for the page and content
area of the page.

13) Components
Here you can set arrangement for special components used for assessing and media presentation.

13) Components
A Accordion: Here you can configure the layout of the accordion. You can remove item
spacing and display accordion item icons on to the right side. To enable these options, simply toggle
the buttons to on and to turn it off, do the vice versa.

13) Components
B Capture: Here you get to configure the progress bar of using the capture feature. Also you can configure the
timer for the use of the capture feature.

13) Components
C Icon: Here you can
configure the styling for the
icon color, alignment and the
size of the icon.

13) Components
D Flip Cards: Here you can configure if you need to use a single styling for the flip cards. You could configure
component item styles and you could remove the horizontal ‘Flip Card’ spacing. To enable these options, simply
toggle the buttons to on and to turn it off, do the vice versa.

13) Components
E MCQ: Here you can stylise the
standard icons used for MCQ. Default
options are already set. You could remove
them and change with different icons if you
wish.

13) Components
F Media Carousel: You can configure the shape of the sliding buttons and you have
the ability to hide or show the disable buttons appearing.

14) Extension Page
B Capture: Here you get to configure the progress bar of using the capture feature. Also you can configure the
timer for the use of the capture feature.
This is where you can stylise the extension appearing in your course.

14) Extension Page
A Settings: Here you can enable if you want to stylise the extension page components. To
enable these options, simply toggle the buttons to on and to turn it off, do the vice versa.

14) Extension Page
B Extension Page: Here you can set a background color to the page and stylise it.

14) Extension Page
C Extension Hero Image: Here you can stylise a hero
image used for the extension page. You can set a border around the
image, set a radius around an rounded boarder, add a shadow to the
border and also you get to stylise the title text and the body text.
You can specify the font, alignment, colour of the font, background
colour (if you need), font size, font thickness and line spacing. You
can set this for both mobile and desktop devices or you could set
them individually.

14) Extension Page
D Extension Header: Here you can set a style for the header of the
extension you being using. You can set a background color, add a border, add a
rounded border and set the radius and add a shadow around the border. You can
also do typesetting for the title and the body text in the header. You can specify
the font, alignment, colour of the font, background colour (if you need), font
size, font thickness and line spacing. You can set this for both mobile and
desktop devices or you could set them individually.

14) Extension Page
E Extension Article: Here you can set a style for the article extension. You can add a border, add
a rounded border and set the radius and add a shadow around the border.

14) Extension Page
G Extension
Component: Here you can add
a style for the extension
component. You can set a
background color, add a border,
add a rounded border and set the
radius and add a shadow around
the border. You can also do
typesetting for the title and the
body text in the header. You can
specify the font, alignment, colour
of the font, background colour (if
you need), font size, font thickness
and line spacing. You can set this
for both mobile and desktop
devices or you could set them
individually.

14) Extension Page
H Extension Component Item: Here you can stylise an individual
component item. You can set a background color for each item.

15) Extension
Here you can enable few options for all the available extensions provided to you by the system
installation. This menu changes according to the extension you have added.

15) Extension A About: Here you can you can set icons for’ about navigation
button’ and ‘about header icon’.
B Achievement: Here
you can stylise you
achievement page. You can set
an icon for both the navigation
button and the header.
Additionally you got an option
of enabling and disabling
having the achievement button
appearing on the header on the
page and in the menu. You can
enable and disable this by
simply turning on the
enable/disable switch. You can
also set the colors for the
points, stars and lives. You
have an option of setting
maximum width of the image.
C Bookshelf Icon: Here you can turn off the bookshelf icon.

15) Extension
D Branding: This is where you setup your
copyright information. You can simply set the
background color for the copyrights, do type setting, set
the maximum width for the copyright box, set the
padding, set the margins, add a border, set the radius if
you are setting up an round border and adding a shadow
around the border. You can set this for both mobile and

15) Extension E Course Assessment: Here
you can configure the course
assessment page appearance. You can
setup and header icon, set the course
assessment notify progress circle
size, course assessment notification
percentage font size and spacing for
the course assessment overview.
F Course
Attainment:
This is where you
can configure
‘Course Attainment’
indicators. Here you
can add a icon to the
course header and
icon for course
notification.
G Course Navigation: Here you can stylise the course navigation. You can set the
colors for the text appearing and background color of the navigation.

15) Extension
H Hint: This is where
you stylise the hits
appearing. You can configure
hint open and close icon
along with the option to
create a theme for the hints.
You could also configure the
background color for hints
popping up, add a box with
shadows around the border,
setting up the border, adding
a rounded border and setting
up the maximum width. You
can also set the padding, type
setting for title text, margins
for title text and how the
body text should appear. You
can set this for both mobile
and desktop devices or you
could set them individually.

15) Extension
I Glossary: Here you can configure the appearance of the glossary. You can set the icons
for both the navigation button and for the header icon.

15) Extension J Page Indicator:
This is where you can
configure to show which
page your are currently
navigating. Here you can
the location of the page
indicator, page indicator
circle color, page
indicator active circle
color, page indicator
circle title text color, page
indicator active circrcle
title text color, size of the
page indicator circle,
page indicator circle
spacing and the padding
around the page indicator.
You can set this for both
mobile and desktop
devices or you could set
them individually.

15) Extension
K Progress: Here you get to configure the styling of the side panel which sits on a side for the convenience of
accessing navigation and the sticky navigation menu which follows through. Here you can do the type setting for the side
panel. You can set the navigation maximum height & width along with the color settings & type setting for the sticky
navigation panel.

15) Extension
L Resources: Here you can configure icons for the navigation button and the header.

15) Extension
M Search: Here
you can configure the
appearance on both how
the search panel and the
results panel appers. You
can also set the link
colors in the search
results panel.

15) Extension
N Scroll Progress: Here you can configure the
look and feel of the progress bar. You can set the position
of the progress scroll bar, set it’s background and
indicator colors along with the maximum height for
desktop devices and the maximum width for the mobile
devices.

15) Extension
O Tags: Here you can set an icon for the navigation and header of how the tags would
appear.

15) Extension
P Video Intro: Here you can configure a
background when setting up a video to play on full
screen.

16) Hero Image
This is where you can set an image as an banner for all your pages.

16) Hero Image
A Settings: Here you can
pick your hero image for both
desktop devices and mobile
devices. Also you can set the
positioning for the image. You
can even position the logo
within content by simply
enabling the ‘Position Logon
Within Content’ option button.

16) Hero Image
B Animation: Here you can set the animation for
appearing the image on your page. You can also set the
speed appearing by selecting the speed from the drop-
down menu. To enable animation features, simply
click on the enable buttons to enable required
animation and click the same button to disable when
you do not need any of the animation settings.

16) Hero Image
C Appearance: Here you can
set a border around the image. You
can add a shadow as well as a
rounded border around the image.

16) Hero Image
D Layout: Here you can set the
margins, maximum width and the cell
padding around the image.

16) Hero Image
E Title Text Appearance: : Here
you can set the look and the feel of your title
of the image appearing. You can specify the
font, alignment, colour of the font,
background colour (if you need), font size,
font thickness and line spacing. You can set
this for both mobile and desktop devices or
you could set them individually.
F Title Text Layout: Here you can set
the margins and the padding around the
image text title. You can set the top, bottom,
left and right positioning. You can set the
position to all devices or set mobile and
desktop devices individually.

16) Hero Image
G Body Text Appearance: Here you
can set the body text appearing on the image.
You can set the font, text alignment, text color,
background color, font size, font weight and
line spacing. You can set these setting
individually for desktop and mobile devices or
set a common setting for both desktop and
mobile devices.
H Body Text Layout: Here you can set
the position of the body text on your image.
Simply set the maximum width, the margins
and padding. You can set a common layout for
both mobile and desktop devices or you could
set them individually.

17) Header
This is where you can configure your header.

17) Header
A Background Image: Here you can set the background image for your header. You can set the size and the
position and also the option of repeating the image. You can set it for both desktop and mobile devices.

17) Header
B Animation: Here you can set the
animation for appearing the text on the header.
You can also set the speed appearing by
selecting the speed from the drop-down menu.
To enable animation features, simply click on
the enable buttons to enable required animation
and click the same button to disable when you
do not need any of the animation settings.

17) Header
C Appearance: Here you can configure
background color and add a border around the
header. You are also given an option to set up a
rounded border and a shadow around it.

D Layout: Here you can set the maximum width for your header, maximum width for the header content,
margins and padding. You can set a common layout for both mobile and desktop devices or you could set them
individually.
17) Header

17) Header E Title Text
Appearance: : Here you can
set the look and the feel of your
title of the image appearing. You
can specify the font, alignment,
colour of the font, background
colour (if you need), font size,
font thickness and line spacing.
You can set this for both mobile
and desktop devices or you could
F Title Text Layout: Here
you can set the margins and the
padding around the image text
title. You can set the top, bottom,
left and right positioning. You can
set the position to all devices or set
mobile and desktop devices
individually.

17) Header
G Body Text Appearance: Here you
can set the body text appearing on the image.
You can set the font, text alignment, text color,
background color, font size, font weight and
line spacing. You can set these setting
individually for desktop and mobile devices or
set a common setting for both desktop and
mobile devices.
H Body Text Layout: Here you can set
the position of the body text on your image.
Simply set the maximum width, the margins
and padding. You can set a common layout for
both mobile and desktop devices or you could

I Icon Appearance: Here you can set the color of your
header icon.
17) Header
J Info Appearance: Here you can set the background
color for the header info and the color of the text.

18) Footer Navigation
This is where you can configure the navigation set inside your footer for
effective accessibility.

A Settings: Here you can set the visibility, appearance and also convert the footer to a button. To turn on
each feature, simply click on each toggle and vice-versa to turn it off.

B Icons: Here you can
configure the icons for next,
previous, locked navigation
backward & forward and the home
button. By default system icons are
set; however you can change it if
you desire.
C Appearance: Here you can
set the color for the footer
background, add a border around the
footer, set a rounded radius for the
footer border and add a shadow for
the border.

D Layout: Here you can set
the maximum width, margins and
the padding for the footer.

E Link Text Appearance: Here you can set the
link text appearing on the header. You can set the font,
text alignment, text color, font size, font weight and line
spacing. You can set these setting individually for desktop
and mobile devices or set a common setting for both
desktop and mobile devices.
F Link Icon Appearance: Here you can
configure the size of the icon and the link colors. You
can add a border around the icons if you like.

G Page Counter Appearance: Here you
can set the page counter display text appearing on the
header. You can set the font, text alignment, text color,
background color, font size, font weight and line
spacing. You can set these setting individually for
desktop and mobile devices or set a common setting
for both desktop and mobile devices.
H Home Button Appearance: Here you
can configure the size of the button and the button
colors. You can add a box shadow around the button if
you like.

19) Article
This is where you specify a style sheet for a Article Block.

19) Article
A Settings: Here you can set the background image, set it’s size and
positioning. You can also use an image for mobile devices.

19) Article
B Article Title
Decoration: Here you can
set a standing out header for the
title. You also have an option to
set an image as a background.
Simply select the image, set it’s
height in pixels and set the
alignment. You can use the same
settings for a image for mobile
devices if you need it.

19) Article
C Article
Icon: Here you
can set an icon for
your article. This is
good if you got so
many categories of
articles; eg: journal
articles, logbook
information, etc..
Simply select the
icon, select it’s
positioning, set the
size in pixels, add
the padding in
pixels. You can also
set an icon for
mobile devices. Use
the same image with
different positioning.

19) Article
D Appearance: This is where you set the
visual appearance for the article. You can set
the background colour, borders and shadow
effects around your articles.

19) Article
E Layout: Here you can specify
how each article will be laid out.
Simply set the maximum width, the
margins and padding. You can set a
common layout for both mobile and
desktop devices or you could set
them individually.

19) Article
F Header Appearance: This is
where you can create a standout header for
your article. You can set the background
colour, borders and shadow effects around
your articles.

19) Article
G Header Layout: Here you can set the
position of the header of your article. Simply set the
maximum width, the margins and padding. You can
set a common layout for both mobile and desktop
devices or you could set them individually.

19) Article
H Title Text Appearance: Here you can set the look and the feel of your
title of the article appearing. You can specify the font, alignment, colour of the font,
background colour (if you need), font size, font thickness and line spacing. You can
set this for both mobile and desktop devices or you could set them individually.

19) Article
I Title Text Layout:
You can specify the style how
you want your title to appear
by selecting the “Article Title
Display Style” from the drop-
down menu. Your given with
the options of ‘Block’ and
‘Inline Block’. Simply set the
maximum width, the margins
and padding. You can set a
common layout for both
or you could set them
individually.

19) Article
J Body Text Appearance: Here you can set the look and the feel of your text
information in the body of the article appearing. You can specify the font, alignment,
colour of the font, background colour (if you need), font size, font thickness and line
spacing. You can set this for both mobile and desktop devices or you could set them
individually.

19) Article
K Body Text
Layout: Here you can
set the position of the
body text of your article.
Simply set the maximum
width, the margins and
padding. You can set a
mobile and desktop
them individually.

19) Article
L Article Component
Appearance: Here you can set the
look and the feel of the content
information of the body of your article
itself is appearing. You can specify the
background colour (if you need), font
size, font thickness and line spacing. You
can set this for both mobile and desktop
individually.

19) Article
M Article Content Layout: Here
you can set the position of the content
information of the body of your article.
desktop devices or you could set them
individually.

20) Article Divider
Here you can separate articles appearing on a page. There are few options you can set for
an article divider. You can set the color, how it appears, the layout and any graphic text
styles.

20) Article Divider
A Settings: Here you can set the background
image, set it’s size and positioning. You can also
use an image for mobile devices.

20) Article
Divider
B Appearance: Here
you can set the background
color, setting up a border
radious & setting up a
shadow for your border.

20) Article
Divider
C Layout: Here you
can set the maximum
width, the margins for the
borders to be appearing and
the padding amount around
the borders.

20) Article Divider
D Graphic Text Styles: Here you can set the type of font, text alignment, font color, background color, font
size, font weight and line spacing. You can set these setting individually for desktop and mobile devices or set a
common setting for both desktop and mobile devices.

21) Article Locking
This is where you can set the settings for an article content and preventing
it from changing. Basically setting a unchangeable default style. You can
set the parameters for appearance, default locking appearance and text
appearance of the article content.

21) Article Locking
A
Appearance:
This is where you
can set a default and
non-changeable
background color,
icon color and the
default icons size.

21) Article Locking
B Default
Locking
Appearance: : Here
you can set the colors for
the default looking
appearance. Once you set
the colors, these will be
set as default colors. You
can change the default
colors when applying
styles.

21) Article Locking
C Text Appearance: This is where you set the type setting for your text. You can specify the font, font
alignment, font color, font size, font thickness and line spacing. You can set these setting individually for desktop
and mobile devices or set a common setting for both desktop and mobile devices.

22) Article Styles
This is where you specify styling for Article Blocks and various elements.

A Settings: Here you can set the background image, set it’s size and
22) Article Styles : Articles

B Article Title
Decoration: Here you can
set a standing out header for the
title. You also have an option to
set an image as a background.
Simply select the image, set it’s
height in pixels and set the
alignment. You can use the same
settings for a image for mobile
22) Article
Styles :
Articles

C Article
Icon: Here you
can set an icon for
your article. This is
good if you got so
many categories of
articles, logbook
information, etc..
Simply select the
icon, select it’s
positioning, set the
size in pixels, add
the padding in
pixels. You can also
set an icon for
mobile devices. Use
the same image with
different positioning.

visual appearance for the article. You can set
the background colour, borders and shadow
effects around your articles.
22) Article Styles :
Articles

them individually.
22) Article
Styles :
Articles

your articles.
Articles

G Header Layout: Here you can set the
position of the header of your article. Simply set the
maximum width, the margins and padding. You can
set a common layout for both mobile and desktop

H Title Text Appearance: Here you can set the look and the feel of your
title of the article appearing. You can specify the font, alignment, colour of the font,
background colour (if you need), font size, font thickness and line spacing. You can
set this for both mobile and desktop devices or you could set them individually.
22) Article
Styles :
Articles

I Title Text Layout:
You can specify the style how
you want your title to appear
by selecting the “Article Title
Display Style” from the drop-
down menu. Your given with
the options of ‘Block’ and
‘Inline Block’. Simply set the
maximum width, the margins
and padding. You can set a
individually.

J Body Text Appearance: Here you can set the look and the feel of your text
information in the body of the article appearing. You can specify the font, alignment,
colour of the font, background colour (if you need), font size, font thickness and line
spacing. You can set this for both mobile and desktop devices or you could set them
individually.
22) Article
Styles :
Articles

K Body Text
set the position of the
body text of your article.
Simply set the maximum
width, the margins and
padding. You can set a
mobile and desktop
them individually.
22) Article
Styles :
Articles

L Article Component
Appearance: Here you can set the
look and the feel of the content
information of the body of your article
itself is appearing. You can specify the
background colour (if you need), font
individually.
Articles

information of the body of your article.
individually.
Articles

A Settings: Here you can set
the background image, set it’s size
and positioning. You can also use an
image for mobile devices.
22) Article Styles : Buttons
This is where you set custom buttons.

A Settings: This is where you
configure the button layout. You can
simply enable by turning on the
features. You got options such as
setting the question buttons full
layout, changing button orders and
by using individual button styles.

B Icon Settings: You can turn
on and off the completion icon and
you can also set action and feedback
button icons.

C Appearance:
Here you can set the
button colors, borders
around the buttons,
radius of the borders
and shadows.

D Layout: Here you can
specify how each buttons will be
laid out. Simply set the maximum
width, the margins and padding.
You can set a common layout for
both mobile and desktop devices
individually.

E Text Appearance:
You can choose the fonts, font
size, font weight and line
spacing. You can set a common
layout for both mobile and
desktop devices or you could

F Submit Button
Appearance: This is where you
set the visual appearance for the
buttons. You can set the background
colour, borders and shadow effects
around your buttons.

G Submit Button Layout: Here
you can set the position and the padding for
the button. You can set a common layout for
both mobile and desktop devices or you

H Submit Button Text
Appearance: You can choose the
fonts, font size, font weight, line
spacing and the colour. You can set a
individually.

I Feedback Button Appearance:
You can choose the fonts, font size, font
weight and line spacing. You can set a
common layout for both mobile and desktop

J Feedback Button Layout:
Here you can specify how each feedback
buttons will be laid out. Simply set the
maximum width, the margins and
padding. You can set a common layout for
both mobile and desktop devices or you

K Feedback Button
Appearance: You can choose the
fonts, font size, font weight, line spacing
and font color. You can set a common
layout for both mobile and desktop
individually.

L Action Appearance: You can set the background color of the button and color of the icon. You can also set the
border, border color, the botton radius and button shadow.

M Action Layout: Here you can set the white spacing around the button. You
need to specify the position coordinates. You can set these settings for both mobile
devices and desktop devices or set them individually.

N Warning Appearance: Here you can set the color of warning button.

O Transcript Button Styles: This is where
you can configure transcript button. You can set the
width of the button, background colors, text color and
border colors.

A Settings: Here you can set the background
image, set it’s size and positioning. You can also
use an image for mobile devices.
22) Article Styles : Article Dividers

B Appearance: Here
you can set the background
color, setting up a border
radious & setting up a
shadow for your border.
22) Article
Styles :
Article
Dividers

C Layout: Here you
can set the maximum
width, the margins for the
borders to be appearing and
the padding amount around
the borders.
22) Article
Styles :
Article
Dividers

D Graphic Text Styles: Here you can set the type of font, text alignment, font color, background color, font
size, font weight and line spacing. You can set these setting individually for desktop and mobile devices or set a
common setting for both desktop and mobile devices.
22) Article Styles : Article Dividers

A
Appearance:
This is where you
can set a default and
non-changeable
background color,
icon color and the
default icons size.
22) Article Styles : Article Locking

B Default
Locking
Appearance: : Here
you can set the colors for
the default looking
appearance. Once you set
the colors, these will be
set as default colors. You
can change the default
colors when applying
styles.

C Text Appearance: This is where you set the type setting for your text. You can specify the font, font
alignment, font color, font size, font thickness and line spacing. You can set these setting individually for desktop
and mobile devices or set a common setting for both desktop and mobile devices.

22) Article Styles : Block
This is where you set the content block properties. Here you can set the appearance, the
layout, how the title text appears, how the title text is being laid out, how the body text
appears and how the body text being laid out. This is a compulsory settings, you need to
setup.

A Appearance: Here you can set the
background color, the ability to separate line on
the block, set a border around the border, set up
the corners for the border radius & set up a
shadow for the borders.

B Layout: Here you can set the
margins around the padding for the
block positioning.

C Title Text
Appearance: Here you can
set the title text appearance in
here. You can set the font, text
alignment, text color,
background color, font size,
font weight and line spacing.
You can set these setting
individually for desktop and
mobile devices or set a
common setting for both

D Title Text Layout: Here you
can set up the maximum width, the text
padding and the placement. You can set
these setting individually for desktop
and mobile devices or set a common
setting for both desktop and mobile
devices.

E Body Text Appearance:
Here you can set the body title text
appearance. You can set the font,
text alignment, text color,
background color, font size, font
weight and line spacing. You can set
these setting individually for
desktop and mobile devices or set a
common setting for both desktop
and mobile devices.

F Body Text Layout: Here
you can set up the maximum width,
the text padding and the placement.
You can set these setting
individually for desktop and mobile
devices or set a common setting for
both desktop and mobile devices.

22) Article Styles : Attempts Counter
Here you can set how many attempts you want your learners tying out the quizzes. Here
you can set the appearance, layout and how the text appears.

A Appearance: Here you can set the background
color, the width of the borders, the style and the color. You
can set it for all the quizzes and for each quize
individually.

B Layout: Here you can set the
space between the attempts counter and
the surrounding elements. You only
have the options of setting the top
placement and bottom placement, the
padding and padding placement. All
dimensions are in pixels. You can set
these setting individually for desktop
and mobile devices or set a common
setting for both desktop and mobile
devices. You can set these setting
individually for desktop and mobile
devices or set a common setting for
both desktop and mobile devices.

C Text Appearance: Here is where
you set the font, the color, font size, font
weight and line spacing. You can set these
setting individually for desktop and mobile
devices or set a common setting for both

22) Article Styles
This is where you specify styling for Article Blocks and various
elements.
Articles: This is where you specify a style sheet for a Article
Block.

22) Article Styles A Settings: Here you can set the background image, set it’s size and

22) Article Styles
B Article Title
Decoration: Here you can set a
standing out header for the title. You
also have an option to set an image
as a background. Simply select the
image, set it’s height in pixels and
set the alignment. You can use the
same settings for a image for mobile

22) Article
Styles
C Article Icon:
Here you can set an
icon for your article.
This is good if you got
so many categories of
articles, logbook
information, etc..
Simply select the icon,
select it’s positioning,
set the size in pixels,
add the padding in
pixels. You can also set
an icon for mobile
devices. Use the same
image with different
positioning.

22) Article Styles
visual appearance for the article. You can set the
background colour, borders and shadow effects
around your articles.

22) Article Styles
them individually.

22) Article Styles
your articles.

22) Article Styles G Header Layout: Here you can set the position of the header of
your article. Simply set the maximum width, the margins and padding.
You can set a common layout for both mobile and desktop devices or you

22) Article Styles
H Title Text Appearance: Here you can set the look and the
feel of your title of the article appearing. You can specify the font,
alignment, colour of the font, background colour (if you need), font size,
font thickness and line spacing. You can set this for both mobile and

22) Article Styles
I Title Text Layout: You can specify the style how you want your
title to appear by selecting the “Article Title Display Style” from the
drop-down menu. Your given with the options of ‘Block’ and ‘Inline
Block’. Simply set the maximum width, the margins and padding. You
can set a common layout for both mobile and desktop devices or you

22) Article Styles
J Body Text Appearance: Here you can set the look and the
feel of your text information in the body of the article appearing. You can
specify the font, alignment, colour of the font, background colour (if you
need), font size, font thickness and line spacing. You can set this for both
mobile and desktop devices or you could set them individually.

22) Article Styles
K Body Text Layout: Here
you can set the position of the body
text of your article. Simply set the
maximum width, the margins and
padding. You can set a common layout
for both mobile and desktop devices or
you could set them individually.

22) Article Styles
L Article Content Appearance:
Here you can set the look and the feel of
the content information of the body of
your article itself is appearing. You can
specify the font, alignment, colour of the
font, background colour (if you need), font

22) Article Styles
information of the body of your article. Simply
set the maximum width, the margins and
padding. You can set a common layout for both
mobile and desktop devices or you could set
them individually.

This is where you specify styling for Article Blocks and various
elements.
Articles: This is where you specify a style sheet for a Article
Block.

22) Article Styles
Buttons: This is where you set custom buttons.
A Settings:
This is where you
configure the button
layout. You can
simply enable by
turning on the
features. You got
options such as
setting the question
buttons full layout,
changing button
orders and by using
individual button
styles.

22) Article
Styles
B Icon
Settings: You can
turn on and off the
completion icon and
you can also set
action and feedback
button icons.

22) Article
Styles
C Appearance:
Here you can set the
button colors, borders
around the buttons, radius
of the borders and
shadows.

22) Article
Styles
D Layout: Here
you can specify how
each buttons will be
laid out. Simply set
the maximum width,
the margins and
padding. You can set
a common layout for
both mobile and
desktop devices or
you could set them
individually.

22) Article
Styles
E Text
Appearance:
You can choose the
fonts, font size, font
weight and line
spacing. You can set
a common layout for
both mobile and
desktop devices or
you could set them
individually.

22) Article Styles F Submit Button Appearance: This is where
you set the visual appearance for the buttons. You can set
the background colour, borders and shadow effects
around your buttons.

22) Article
Styles
G Submit
Button
Layout: Here you
can set the position
and the padding for
the button. You can
set a common layout
for both mobile and
desktop devices or
you could set them
individually.

22) Article
Styles
H Submit Button
Text Appearance: You
can choose the fonts, font size,
font weight, line spacing and
the colour. You can set a
mobile and desktop devices or
you could set them
individually.

22) Article
Styles
I Feedback Button
Appearance: You can
choose the fonts, font size,
font weight and line spacing.
You can set a common
layout for both mobile and
desktop devices or you could

22) Article
Styles
J Feedback Button
specify how each
feedback buttons will be
laid out. Simply set the
maximum width, the
margins and padding. You
can set a common layout
for both mobile and
desktop devices or you
could set them
individually.

22) Article
Styles
K Feedback Button
Text Appearance: You
can choose the fonts, font
size, font weight, line
spacing and font color. You
can set a common layout for
both mobile and desktop
them individually.

22) Article Styles L Action Appearance: You can set the background color
of the button and color of the icon. You can also set the border,
border color, the botton radius and button shadow.

22) Article Styles M Action Layout: Here you can set
the white spacing around the button. You need
to specify the position coordinates. You can
set these settings for both mobile devices and
desktop devices or set them individually.

22) Article Styles K Warning Appearance: Here you
can set the color of warning button.

22) Article Styles
O Transcript Button Styles: This
is where you can configure transcript button.
You can set the width of the button,
background colors, text color and border
colors.

New Course QRG1.pdf

Recommended

Recommended

More Related Content

Similar to New Course QRG1.pdf

Similar to New Course QRG1.pdf (20)

More from HasseyWijetunge

More from HasseyWijetunge (17)

Recently uploaded

Recently uploaded (20)

New Course QRG1.pdf