Do you want to know more about building an awesome look & feel? Then follow our brief learning journey in the Academy by clicking the link below:

Mini Masterclass - Building awesome look & feels

Click the tab and select a look & feel per subenvironment.

https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/3026858560/original/qumafikeIf3th27GgbCT8fvmMBE2vBC7QA.png?1488804274

Once selected, the look and feel is immediately visible on learners' screens. Even when you are pretending to be a learner when testing a template, or shadowing a course as an instructor.

You can also select a look and feel per template and per course. Selecting a look and feel for a template can be done in the template by clicking the More button and then choose Settings. Select the look and feel you would like to link to the template under Default instantiate settings.
Do you want to link a look and feel to your course? You can do this on the Settings tab of a course. Select the look and feel under Advanced settings. 

If you cannot select a look & feel, you can create one first by clicking Manage look & feel. Don't forget to select it after creating it; otherwise, your settings won't be visible.

Tip: If you haven't already, open the support widget with this article. It makes it a lot easier to configure the look & feel!

You can create your own look and feel with the information below, but our Training Improvement Engineers can also create a personal and unique look and feel for you! If you want to make use of this service you can reach out to the Training Improvement Engineers on their website:

aNewSpring Training Improvement Engineer Service

Click + Look & Feel to create a new one. You can choose a theme as a base and customize it further.

There are two configurations modes: basic and advanced.

Basic

In the following image, you can identify what these settings will affect on the login screen.

https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/3012752123/original/conf_1.jpg?1442926329

Some settings only affect pages when you are logged in:

https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/3012745302/original/conf_2.png?1442913389


Advanced

Element colours

Primary colourThe primary colour affects the same items as in the basic settings; see above.

Secondary colour The secondary colour affects the same items as in the basic settings; see above.

Course tile header colourThis is the background colour for the header of the tiles that you find on the 'Home' page. It will only be visible if the tile does not have an image.

Page elements colourThis is the default background colour for elements like tiles, the advice box, activities and widgets.

Homepage box background colour This is the background colour for the login box.

Homepage box background opacitySetting this to 0% will make the background for the login box fully transparent and 100% will make it opaque.

Homepage box with text background colourBy default it uses the settings of 'Homepage box background colour'; changing this will overwrite it for the text box above the login field (this is a custom setting and not active in most learning environments).

Homepage box with text background opacity -

Advice bar colour - See below.
Advice bar icon colour - See below.
Advice bar title colour - See below.
Advice bar text colour - See below.
Advice bar link colour - See below.
Advice bar close button colour - See below.
Advice bar colour (in the MemoTrainer widget)You can set a different bar colour for MemoTrainer advice when the MemoTrainer widget is opened as a 'subpage'.

https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/3012745864/original/conf_3.png?1442914513

These settings overwrite the default settings:

"View objectives" text colour This changes the text colour of the "View objectives" link at the top of the learning journey.

Activity colourThis is the background colour of activities; it overwrites the setting 'Page elements colour' for this element.

Widget header colourThis is the background colour of the widget headers; it overwrites the setting 'Page elements colour' for this element.

Widget title colour This is the text colour for the title in the widget headers; it overwrites other text settings.

Widget icon colour This is the icon colour in the widget headers; it overwrites other colour settings.

Widget background colourBy default, this is a slightly lighter version of the 'widget header colour' or the 'page elements colour'. It is the background colour for the widget content when the widgets are expanded.

Subpage background colourWhen widgets are collapsed, they will open in a subpage in front of the activities. This is the background colour of the subpage. 

User statistics background colour - See below.
User statistics background opacity - See below.
User statistics border colour - See below.
User statistics table background colour (even rows) - See below.
User statistics table background colour (odd rows) - See below.

https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/3012746522/original/conf_4.png?1442915843

Input field text colour -
Input field background colour -


Background images and colours

Background colourThis is the main background colour for the learning environment. It will only be visible when there is no background image.

Background imageThis is the image on the background of all course pages, except for the login and activity screens. We recommend an image that is about 2000 x 1500 pixels and no more than 500 kB. Other images are also possible.

Background image repetition - See 'General settings' below.
Background image position - See 'General settings' below.
Background image fixed - See 'General settings' below.
Background image sizingSee 'General settings' below.

Background image for login screenThis is the background image for the login screen. It will use the same additional settings as the main background image.

Background video for login screen (mp4) - This will replace the background image for the login screen with a video. We recommend to not use a large file because it might take a while to load. For this to function well in all browsers, you will need to upload three different types of video formats: 
MP4, WEBM, OGV - 

Background video for login screen (webm) WEBM

Background video for login screen (ogv) OGV (sometimes called OGG).

Background overlay colour The overlay is the area in front of the background colour or image and behind the content of the page. This is present on all pages, except for the login screen and the activity screen.

Background overlay opacity - You can use this option to make the overlay transparent, which usually looks nice when you have a background image.

Background footer colour


Header, logo and subheader

Header background colourThis is the background colour for the header; it is behind the logo.

Header background opacityYou can make this colour transparent to show the page background colour or an image.

Background imageThis will overwrite the header background colour and opacity and show an image instead.

Background image repetitionSee 'General settings' below.

Background image positionSee 'General settings' below.

Background image for login screen You can also set a header background image for the login screen. This is also placed behind the menu, above the logo.

Logo imageYou can upload the logo here. We recommend a PNG file with a transparent background. It should be the right size before uploading.

Logo width This field will automatically get a value after uploading the logo.

Logo height This field will automatically get a value after uploading the logo.

Padding above and under logo This will add padding above and under the logo; it is 10 pixels by default.

Menu background colour - See below.
Menu background opacity -

Menu fontZie 'Algemene instellingen' onderaan de pagina.

Menu font weightZie 'Algemene instellingen' onderaan de pagina.

Menu font sizeZie 'Algemene instellingen' onderaan de pagina.

Menu font colour - See below.

Menu background colour (when hovering over the item) -

Menu background colour (active item) - See below.
Menu text colour (active item) - See below.
Menu border colourSee below.

https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/3012748408/original/conf_5.png?1442919311

Subheader background colourThis is the background colour for the subheader, which you will find on some pages (like 'Home' and the course overview) right below the menu.

Subheader background opacityBy making this background colour transparent, the page's background image will show through.

Subheader background imageAn image will replace the background colour and opacity.

Subheader background repetition - See 'General settings' below.

Subheader background position - See 'General settings' below.


Text fonts and colours

These settings apply to all text

Text font - See 'General settings' below.
Text font weightSee 'General settings' below.

Text font sizeThe default size is 16 pixels. Change it to make all text smaller or larger. All font sizes in the platform will be derived from this, unless otherwise specified with other settings.

Text font colour -

You can overwrite these settings for titles:

Title font See 'General settings' below.

Title font weightSee 'General settings' below.

Title font size This will overwrite the default size that the font size of titles will be derived from. By default, this is also 16 pixels. Use a smaller or larger number of pixels to decrease or increase the size of titles.

Title font colour -

Examples of activities are lessons, assignments and assessments. You can overwrite the settings for the activity titles

Activity title fontSee 'General settings' below.

Activity title font weightSee 'General settings' below.

Activity title font sizeThis is an absolute size in pixels.

Activity title font colour -

Link colour - This is the colour for most links. By default, this is the same as the 'Primary colour'.


Primary buttons

The primary buttons are the most important buttons in the platform for the learner. The primary buttons need attention because they are used to navigate the learner to the next step in the learning journey. An example is the Continue button in an activity no navigate to the next page in the activity.

HeightThis is the button height for both the primary and secondary buttons.

Height (for smaller buttons) This is the button height for buttons in widgets; by default, they are less high.

Background colour -

Text colour -

Font weight See 'General settings' below.

Font size See 'General settings' below.

Rounded corners These are 50% by default, which makes the sides of the button round. 0% would make the button square.

Border sizeYou can add a border to the primary buttons by entering a size here.

Border colourThis changes the colour for that border.

Background colour (when hovering over button) The colour of the button will change when you hover over it with a mouse.

Text colour (when hovering over button) -

Border colour (when hovering over button) -

Background colour (when pressing button) It will also change when pressing the button.

Text colour (when pressing button) -

Border colour (when pressing button) -

Background colour (when button is disabled) Sometimes a button is not accessible (e.g. the button to start an activity when the activity is not available yet). This is gray by default.

Text colour (when button is disabled) -

Border colour (when button is disabled)

Secondary buttons

The secondary buttons are the less important buttons in the platform for the learner. They aren't used ot navigate the learner to the next step in the learning journey. An example is the Check button in an assessment activity. 

Background colour By default, a secondary button is white.

Text colourThis is also the 'Primary colour' by default.

Border size -

Border colour It uses the 'Primary colour' by default.

Background colour (when hovering over button) -

Text colour (when hovering over button) -

Border colour (when hovering over button) -

Background colour (when pressing button) -

Text colour (when pressing button) -

Border colour (when pressing button) -

Background colour (when button is disabled) -

Text colour (when button is disabled) -

Border colour (when button is disabled) -


Content parts and plus editor

These are the default settings for all content. This also applies to questions made with the plus editor. See 'General settings' below for information on the options available for each text style.

Heading font -
Heading font weight -
Heading font size - This is an absolute size in pixels.
Heading font colour -
(Heading is similar to the option Heading 1 in the Paragraph Format drop down menu when selecting the formatting via the Texteditor or Pluseditor > Text)

Subheading font -
Subheading font weight -
Subheading font size - This is an absolute size in pixels.
Subheading font colour -
(Subheading is similar to the option Heading 2 in the Paragraph Format drop down menu when selecting the formatting via the Texteditor or Pluseditor > Text)

Sub-subheading font -
Sub-subheading font weight -
Sub-subheading font size - This is an absolute size in pixels.
Sub-subheading font colour -
(Sub-subheading is similar to the option Heading 3 in the Paragraph Format drop down menu when selecting the formatting via the Texteditor or Pluseditor > Text)

Paragraph font -
Paragraph font weight -
Paragraph font size - This is an absolute size in pixels.
Paragraph font colour -
Paragraph line height
(Paragraph is similar to the option Paragraph in the Paragraph Format drop down menu when selecting the formatting via the Texteditor or Pluseditor > Text)


Questions

These are the default settings for all questions, except for question text made with the plus editor. Those will have the styles defined above. See 'General settings' below for more information about the options available for each text style.

Question font -
Question font weight -
Question font size - This is an absolute size in pixels.
Question font colour -
Question line height -

Description font is used for the small text under questions, like "Multiple answers are possible".

Description font -
Description font weight -
Description font size - This is an absolute size in pixels.
Description font colour -
Description line height -

Answer font -
Answer font weight -
Answer font size - This is an absolute size in pixels.
Answer font colour -
Answer line height


Colour palette for content parts and questions

Set some default colours that authors can use in the text editor for text and the background of text. 

Text colour 1 -
Text colour 2 -
Text colour 3 -
Text colour 4 -
Text colour 5 -
Background colour 1 -
Background colour 2 -
Background colour 3 -
Background colour 4 -
Background colour 5 -

Please be aware that the colours shown in the palette of the author depend on the look & feel settings. Are there more look & feels set with different text and / or background colours? Then the colour can be different when the question or content part is viewed in a different subenvironment.


Activity screen

When you start an activity, you will usually end up on this screen, which is often also called the 'player' or 'course part player'. There are a number of settings to adjust:

Background image This is the image to use as a background.

Background colour You can also set a background colour, which will only be visible if there is no background image.

Background image repetitionSee 'General settings' below.

Background image position See 'General settings' below.

Background image fixed See 'General settings' below.

Background image sizingSee 'General settings' below.

Sidebar background colourThis is the collapsible pane on the left side of the screen. You can set its background colour.

Sidebar background opacity By making the background colour for the sidebar transparent, the background colour or image will be visible.

Sidebar text colour -

Title background colourThe title is at the top of the screen, next to the 'Back to overview' button. This contains the name of the activity. Change its background colour here.

Title text colour Sometimes, you might wish to change the text colour of the title to look good against the background.

Title bar logo We advise against placing a logo here due to the responsiveness of the page. We added this option because, sometimes, marketing guidelines make a logo mandatory. In that case, upload it here.

Title bar logo width This field will automatically get a value after uploading the logo. You can adjust this value manually, but this will only change the width of the space in which the logo is shown, not the width of the logo itself. If you want to adjust the logo's width, edit the logo itself under 'Title bar logo'. 

Title bar logo height This field will automatically get a value after uploading the logo. You can adjust this value manually, but this will only change the height of the space in which the logo is shown, not the height of the logo itself. If you want to adjust the logo's height, edit the logo itself under 'Title bar logo'. 

Pagination indicator colour - You can change the background colour of the active item in the pagination at the bottom of the page.


Borders

Rounded corners for buttons and text fieldsThis will only apply to buttons and text fields.

Page element rounded corners This applies to page elements, that is the tiles, advice box, activities and widgets.

Page element border sizeYou can also add a border to these page elements by entering a size here.

Page element border style -
Page element border colour


Shadows

You can also apply shadows to 'page elements'.

Horizontal placement See image below.

Vertical placement See image below.

Blur radiusThis is the number of pixels that it takes to fade out the colour of the shadow. See image below.

Spread radiusThis stretches the shadow in all directions by a certain number of pixels.

ColourThis is the colour of the shadow

Opacity - You would probably want to make the shadow transparent in most cases; use this option to do this.

https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/3012750235/original/conf_6.png?1442922821


Accessibility

Keyboard focus colour - This is the colour of the border of the component that is focused on by the keyboard when the user navigates through the platform by using the keyboard. 


General settings

Images

RepetitionThis indicates whether the image should be repeated. It is useful for background patterns; y denotes vertical and z denotes horizontal.

Position Here, you can indicate at what edge or corner you would like to position the image.

Fixed - When you scroll, the image moves up and down the page. Choosing fixed will give the image a fixed position on the screen, which does not move when scrolling through the page.

Sizing - Auto is the standard setting. Cover means that the whole background will be covered by an image, but parts of the image might be cut off. Contain means that the whole image will be visible in the background, but parts of the background will be empty.


Fonts

FontWe only support standard web safe fonts and Google Fonts.

Font weightTo be able to load the correct files from Google Fonts, you can choose between numbers; 400 is the same as normal, 700 is the same as bold.

Font size - This works differently as per the setting; see the preceding for details.

If you have changed the theme, it is possible that you will not see the update immediately. Usually this is caused by cache memory in your browser. Refresh to see the changes you made. The process of refreshing the cache differs as per the browser, but the most common keyboard shortcut is CTRL+SHIFT+R.

Tip: If you haven't already, open the support widget with this article. It makes it a lot easier to configure the look & feel!