Styles


Elucidat’s ‘Styles’ control panel that will allow you to change the look of your whole project.

So what does that mean for you? Well, now you can create a theme with your logos, brand colours and fonts in seconds!

This video will introduce you to ‘Styles’:

Saving ‘Styles’

When you are saving your ‘Style’ you have 2 options:

…this option will mean that the save you make only applies to the ‘Project’ you are currently working on.

…this option will mean that the save you make applies to all Projects using this theme, it also means that the Style will become the default Style for that Theme in your account.

For example, I make a Style called ‘Example’ and then save this as the default for the Theme I am using (in this case I am using the Bolt theme) by selecting ‘All Projects using this Theme’ when saving my Style.

If I create a new Project using the Bolt theme it will immediately apply the ‘Example’ Style.

The name of the Default Style will also display before the Theme name:

Basic Styles

Basic Styles will allow you to control the majority of elements in your theme, if you are looking to set up a Style quickly this is the best option to use.

Your Logo: This allows you to add a logo which will immediately display in any ‘Client Logo’ field in your course.

…by default there will be a ‘Client Logo’ field in the footer of your theme, you can add additional ‘Client Logo’ fields using the ‘Layout designer’ , they can be can chosen in the ‘Media and Imagery’ options.

Background colour for all pages: This allows you to add a colour fill that will display in the background of your whole Project.

Background image for all pages: This allows you to add an image that will display in the background of your whole Project.

Font size: This allows you to add a base font size for all of the text in your Project.

Font for titles and headings: This allows you to add a font which will display for Titles and when you choose one of these text formats:

Font for everything else: This allows you to add a font which will display when you choose one of these text formats:

Text colour: This allows you to alter the colour of your body text.

Text background colour: This allows you to alter the background colour of text boxes, for example here with a green background:

…and with a blue background:

Emphasis colour: This allows you to colour parts of the page such as interactive elements or links.

Action colour: This allows you to colour ‘Submit’ buttons in Questionnaire Page Types.

Colour for navigation elements: This allows you to colour the text and buttons in your Header and Footer.


Advanced Styles

The Advanced Styles options allow you to get more control over the small nuances of your content.

Advanced Styles are broken up into 6 core sections Buttons, Graphs, Header & Footer, Menu & Popups, Pages and Typography.

These options will become available after clicking the ‘Advanced Styles’ button here:

…let’s take a look at each section.


Buttons

Button alignment: This allows you to set where your buttons are aligned to in your containers:

Toggle button background: This allows you to set the background colour for buttons such as Hotspots and Timelines, in the example below there is a blue background.

Toggle button text/icon: This allows you to set the text/icon colour for buttons such as Hotspots and Timelines, in the example below there is a white button text/icon

Action button background: This allows you to set the background colour for buttons such as Submit and Link Buttons, in the example below I have a blue background.

Action button text: This allows you to set the text/icon colour for buttons such as Submit and Link Buttons, in the example below there is a white button text/icon.

Secondary button colour: This allows you to set the colour for button that perform secondary actions (eg. Back button).

Navigation button background: This allows you to set the background colour for buttons in the header and footer.

Navigation button text: This allows you to set the text/icon colour for header and footer buttons.

Navigation button border width: This allows you to add a border to elements in the header and footer:

No border
1px
2px

Text button border radius: This allows you to add rounded corners to your buttons:

Menu button border radius: This allows you to choose if the menu will inherit the value of ‘Text button border radius’.

Border radius for icons: This allows you to choose border radius for icons.

Icon style: This allows you to choose from several different icon styles.

Focus outline: This allows you to choose how the focus displays if you are using a screenreader, for example here I have set a focus of 3 px Dashed Red:


Graphs

Graph default height: This allows you to choose the height of your graph, for example here I have a small, medium and large graph example (to scale):

Label font size: This allows you to choose the font size of your labels in the area labelled in the image below.

Label font colour: This allows you to choose the font colour of your labels in the area labelled in the image below.

Graph Colours: This area will allow you to change the colour values of all of the sections of your graph.

Header & Footer

Header background colour: This allows you to choose the colour of your entire header.

Header text colour: This allows you to choose the text colour of your entire header.

Footer background colour: This allows you to choose the colour of your entire footer.

Footer text colour: This allows you to choose the text colour of your entire header.

Menu & Popups

These settings allow you to control the presentation you course menu:


Menu font size: Allows you to alter the size of all of your course menu text.

Menu background: Allows you to alter the background colour of the content outside of the menu:


Menu content area background: Allows you to alter the background colour of the content inside of the menu:


Menu text colour: Allows you to alter the text colour of the text inside of the menu.

Menu icon colour: Allows you to alter the icon colour of icons inside of the menu.

Menu active page text colour: Allows you to alter the text colour of the name of the page that the learner is currently on.

Menu active page background: Allows you to alter the background colour of the name of the page that the learner is currently on.

Pop-up background: Allows you to alter the background colour that displays behind pop ups that display in Page Types such as ‘Hotspot’ and ‘Questionnaire’:

Pop-up content area background: Allows you to alter the background colour of the pop ups that display in Page Types such as ‘Hotspot’ and ‘Questionnaire’:

Pop-up text colour: Allows you to alter the text colour in pop ups that display in Page Types such as ‘Hotspot’ and ‘Questionnaire’:

Tooltip background: Allows you to alter the background colour of Tooltips:

Tooltip title: Allows you to alter the text colour of your Tooltip title.

Tooltip text: Allows you to alter the text colour of your Tooltip text.


Pages

Base spacing: Allows you to alter the global padding of your content.

Placeholder image: Allows you to add an image that will show as a placeholder until you add your own image.

Border radius for page elements: Allows you to alter the whether your content has rounded corners globally.

Card background colour: Allows you to alter the background colour of accordion, questionnaire, menu, buildup and tab items.

Card text colour: Allows you to alter the text colour of accordion, questionnaire, menu, buildup and tab items.

Card action colour: Allows you to alter the text colour of accordion, questionnaire, menu, buildup and tab items after they have been interacted with.

Questionnaire item background: Allows you to alter the background colour of questionnaire items only.

Questionnaire item text colour: Allows you to alter the text colour of questionnaire items only.

Questionnaire item emphasis colour: Allows you to alter the text colour of questionnaire items after they have been interacted with.

Draggable item background: Allows you to alter the background colour of draggable items in the ‘Drag and drop’ Page type.

Draggable item Text: Allows you to alter the text colour of draggable items in the ‘Drag and drop’ Page type.

Media player background: Allows you to alter the background colour of your audio and video players.

Media player accent colour: Allows you to alter the colour of the progress and volume bars in your audio and video players.

Closed Caption background: Allows you to alter the background colour of your Closed captions.

Closed Caption text colour: Allows you to alter the text colour of your Closed captions.

Closed Caption font size: Allows you to alter the text size of your Closed captions.

Typography

Line height: Allows you to set the global line height (the vertical distance between lines of text) of your content.

Text link colour: Allows you to alter the text colour of any text that you add links to with the text editor.

Intro text: Allows you to alter the text colour of any text that is in an ‘Introductory Text Box’ Part:

Intro text background: Allows you to alter the background colour of any text that is in an ‘Introductory Text Box’ Part.

Intro text font size: Allows you to alter the font size of any text that is in an ‘Introductory Text Box’ Part.

H3 header font size: Allows you to alter the font size of any text that uses the H3 heading format.

You select your header from this dropdown in the text editing menu:

H4 header font size: Allows you to alter the font size of any text that uses the H4 heading format.

H5 header font size: Allows you to alter the font size of any text that uses the H5 heading format.

H6 header font size: Allows you to alter the font size of any text that uses the H6 heading format.

Small laptop font size: Allows you to apply a font size for the laptop view mode.

Small laptop line height: Allows you to apply a line height for the Laptop view mode.

Tablets and landscape phones font size: Allows you to apply a font size for the Tablets and landscape phones view mode.

Tablets and landscape phones line height: Allows you to apply a line height for the Tablets and landscape phones view mode.

Portrait phones font size: Allows you to apply a font size for the Portrait phone view mode.

Portrait phones line height: Allows you to apply a line height for the Portrait phone view mode.

 

Next steps: back to Themes