Theme configuration (look & feel)

Last modified: 2016-10-17 16:21:43 +0200

Where can I edit the theme (look & feel)?

If you go to the Settings () page, you will find the option Edit theme. The settings page is only visible for users with the Tenant role.


Tip: If you haven't allready, open the support widget with this article. It makes it much more easy to configure your theme!


There are two configurations modes: basic and advanced.

Basic

In the image below you can find what these settings will affect on the login screen.

Some settings only affect pages when logged in:

Advanced

Element colors

Primary color - The primary color affects the same items as in the basic settings, see above.
Secondary color - The secondary color affects the same items as in the basic settings, see above.
Course tile header color - This is the background color for the header of the tiles that you find on 'Home'. It will only be visible if the tile does not have an image.
Page elements color - This is the default background color for elements like tiles, the advice box, activities and widgets.
Homepage box background color - This is the background color for the login box.
Homepage box background opacity - 0% will make the background for the login box fully transparent and 100% will make it opaque.
Homepage box with text background color - By default it uses the settings of 'Homepage box background color', changing this will overwrite it for the text box above the login field (this is custom and not active in most learning environments).
Homepage box with text background opacity
Advice bar color - See below.
Advice bar icon color - See below.
Advice bar title color - See below.
Advice bar text color - See below.
Advice bar link color - See below.
Advice bar close button color - See below.

These settings overwrite the default settings.

"View objectives" text color - This changes the text color of the "View objectives" link at the top of the learning journey.
Activity color - This is the background color of activities, it overwrites the setting 'Page elements color' for this element.
Widget header color - This is the background color for the widget headers, it overwrite the setting 'Page elements color' for this element.
Widget background color - By default this is a slightly lighter version of the 'widget header color' or 'page elements color'. It is the background color for the widget content when the widgets are expanded.
Subpage background color - When widgets are collapsed, they will open in a subpage in front of the activities. This is the background color for it. 
User statistics background color - See below.
User statistics background opacity - See below.
User statistics border color - See below.
User statistics table background color (even rows) - See below.
User statistics table background color (odd rows) - See below.


Input field text color
Input field background color

Background images and colors

Background color - This is the main background color for the learning environment. It will only be visible when there is no background image.
Background image - This is the image on the background of all course pages, except for the login screen and the activity screen.We recommend an image that is about 2000 by 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 sizing - See 'General settings' below.
Background image for login screen - This 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 not using a large file, because it might take a while for the user to load. For this to function well in all browsers, you will need to upload 3 different types of video formats. MP4,
Background video for login screen (webm) - WEBM,
Background video for login screen (ogv) - and OGV (sometimes called OGG).
Background overlay color - The overlay is the area in front of the background color or image and behind the contents 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.

Header, logo and subheader

Header background color - This is the background color for the header, it is behind the logo.
Header background opacity - You can make this color transparent to show the page background color or image.
Background image - This will overwrite the header background color and opacity and show an image instead.
Background image repetition - See 'General settings' below.
Background image position - See '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 image - You can upload the logo here. We recommend a PNG file with a transparent background. It should already 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.
Menu background color - See below.
Menu background opacity
Menu text color - See below.
Menu background color (when hovering over item)
Menu background color (active item) - See below.
Menu text color (active item) - See below.
Menu border color - See below.


Subheader background color - This is the background color for the sub header, which you will find on some pages (like 'Home' and the course overview) right below the menu.
Subheader background opacity - By making this background color transparent, the page's background image will show through.
Subheader background image - An image will replace the background color and opacity.
Subheader background repetition - See 'General settings' below.

Subheader background position - See 'General settings' below.

Text fonts and colors

These settings apply to all text:

Text font - See 'General settings' below.
Text font weight - See 'General settings' below.
Text font size - The default size is 16 pixels. Change it to make all texts smaller or larger. All font sizes in the platform will be derived from this, unless otherwise specified with other settings.
Text font color

You can overwrite these settings for titles:

Title font - See 'General settings' below.
Title font weight - See '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 one is also 16 pixels. Use a smaller or larger amount of pixels to decrease or increase the size of titles.
Title font color

Activies are e.g. lessons, assignments and assessments. You can overwrite the settings for the activity titles:

Activity title font - See 'General settings' below.
Activity title font weight - See 'General settings' below.
Activity title font size - This is an absolute size in pixels.
Activity title font color
Link color - This is the color for most of the links. By default this is the same as the 'Primary color'.

Menu font - Zie 'Algemene instellingen' onderaan de pagina. 
Menu font weight - Zie 'Algemene instellingen' onderaan de pagina. 
Menu font size

Primary buttons

Height - This is the button height for both primary and secondary buttons.
Height (for smaller buttons) - This is the button height for buttons in widgets, by default they are less high.
Background color
Text color
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 fully round. 0% would make it square.
Border size - You can add a border to the primary buttons, by entering the size here.
Border color - This changes the color for that border.
Background color (when hovering over button) - The color of the button will change when you hover over it with a mouse.
Text color (when hovering over button)
Border color (when hovering over button)
Background color (when pressing button) - It will also change when pressing the button.
Text color (when pressing button)
Border color (when pressing button)
Background color (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 color (when button is disabled)
Border color (when button is disabled)

Secondary buttons

Background color - By default, a secondary button is white.
Text color - This is also the 'Primary color' by default.
Border size
Border color - It uses the 'Primary color' by default.
Background color (when hovering over button)
Text color (when hovering over button)
Border color (when hovering over button)
Background color (when pressing button)
Text color (when pressing button)
Border color (when pressing button)
Background color (when button is disabled)
Text color (when button is disabled)
Border color (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 about the options per text style.

Heading font
Heading font weight
Heading font size - This is an absolute size in pixels.
Heading font color
Subheading font
Subheading font weight
Subheading font size - This is an absolute size in pixels.
Subheading font color
Sub-subheading font
Sub-subheading font weight
Sub-subheading font size - This is an absolute size in pixels.
Sub-subheading font color
Paragraph font
Paragraph font weight
Paragraph font size - This is an absolute size in pixels.
Paragraph font color
Paragraph line height

Questions

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

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

Activity screen

When you start an activity, you will usually end up in this screen, 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 color - You can also set a background color, which will only be visible if there is no background image.
Background image repetition - See 'General settings' below.
Background image position - See 'General settings' below.
Background image fixed - See 'General settings' below.
Sidebar background color - This is the collapsible pane on the left side of the screen. You can set the background color for it.
Sidebar background opacity - By making the background color for the sidebar transparent, the background color or image will show through.
Sidebar text color
Title background color - The title is at the top part of the screen, next to the 'Back to overview' button. This contains the name of the activity. Change its background color here.
Title text color - Sometimes you might wish to change the title's text color to look good with the background.
Title bar logo - We advise against placing a logo here, due to the page's responsiveness. We did add 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.
Title bar logo height - This field will automatically get a value after uploading the logo.
Pagination indicator color - You can change the background color of the active item in the pagination at the bottom of the page.

Borders

Rounded corners for buttons and text fields - This will only apply to buttons and text fields.
Page element rounded corners - This applies to page elements, which are the tiles, advice box, activities and widgets.
Page element border size - You can also add a border to these page elements, by entering a size here.
Page element border style
Page element border color

Shadows

You can also apply shadows to 'page elements'.

Horizontal placement - See image below.
Vertical placement - See image below.
Blur radius - This is the amount of pixels that it takes to fade out the color of the shadow. See image below.
Spread radius - This stretches the shadow in all directions by a certain amount of pixels.
Color - This is the color of the shadow
Opacity - You would probably want to make the shadow transparent in most cases, use this option for it.

General settings

Images

Repetition - This indicates whether the image should be repeated. It is useful for background patterns, y means vertical and z means horizontal.
Position - Here you can indicate at what edge or corner you would like to position the image.
Fixed - Scroll means that when you scroll, the image will move up and down the page. Choosing fixed will give the image a fixed position on the screen that 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

Font - We only support standard web safe fonts and Google Fonts.
Font weight - To 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 per setting, see above for details.

If you have changed the theme, it is possible that you cannot see the update immediatly. Usualy this is caused by cache memory in your browser. Refresh it to see the changes you made. It differs per browser how to refresh the cache, but the most common keyboard shortcut is CTRL+SHIFT+R.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.
Can you please tell us how we can improve this article?