Skip to main content

eLearning Styling

To change the styling of the eLearning content that Paligo creates, use a third-party code editor to create your own customized CSS and JavaScript (JS) files. You can then upload these to an eLearning or SCORM layout in Paligo. When you publish with that layout, the CSS and JS are included in the output and applied to the HTML files.

We recommend you begin by publishing your eLearning content with the default layout. Then update the layout settings.

To create your customized CSS or JS file(s) and add them to your Paligo publication:

  1. Publish your eLearning content in Paligo, using your customized eLearning or SCORM layout, see Publish to LMS.

  2. Unzip the output and open its index.html file in a browser.

  3. Use the Browser Inspection Tool to view the existing HTML and test any changes you want to make to the CSS and JS.

  4. When you have the changes you want, use a third-party tool (such as BBEdit) to create a customized CSS or JS file.

  5. Upload Customized CSS and Upload Customized JavaScript to your layout.

  6. Publish your eLearning content again, using the layout with your customized CSS or JS.

  7. Upload the output to your Learning Management System (LMS), see Upload the eLearning Output to your LMS.

Tip

To learn more about using the browser's inspect tool, see Style with CSS. The article is written with HTML5 help center outputs in mind, but it also applies to the eLearning output.

Style the Progress Indicator

If a quiz renders the questions one by one, a progress indicator is shown in the upper left corner of the slide. By default, the progress indicator is shown in a language-neutral way (1 / 3).

Default_Quiz_ProgressBar_small.png

This instruction shows how to override the default setting with a textual content (Question 1 of 3) for English and Swedish. You can add more or other language variants to the CSS, if using other languages than Swedish and English.

  1. Add the following code to the CSS:

    html[lang='en'] #quiz .quiz-progress .progress-current:before {
    content : 'Question ';
}

html[lang='en'] #quiz .quiz-progress .progress-divider:before {
    content: ' of ';
}

html[lang='en'] #quiz .quiz-progress .progress-max:after {
    content: ' : ';
}

html[lang='sv'] #quiz .quiz-progress .progress-current:before {
    content : 'Fråga ';
}

html[lang='sv'] #quiz .quiz-progress .progress-divider:before {
    content: ' av ';
}

html[lang='sv'] #quiz .quiz-progress .progress-max:after {
    content: ' : ';
}

  2. This will update the progress bar to show:

    • English: "Question 1 of 3"

    • Swedish: "Fråga 1 av 3"

      Styled_Quiz_ProgressBar_small.png

  3. Save your CSS.

  4. Upload Customized CSS.

Always Show Progress Indicator

By default, only quizzes that render the questions one by one show a progress indicator.

To override the default setting and get a progress indicator in all types of quizzes:

  1. Add the following code to the CSS:

    #quiz.show-all .quiz-progress {
    display: block;
}

  2. Save your CSS.

  3. Upload Customized CSS.