Theme - How to Configure a Theme


We recommend reviewing the following pages to understand what these elements are and how they are used in a theme:

  • System pages - pages that are dynamically created by Learndot based on the content added. These may contain blurbs, and the layouts may be configurable with a page template.
  • Custom pages - pages you add that can fully be edited.
  • Blurbs - re-usable pieces of text, that admins can configure.
  • Page Template - A layout of a System Page, often multiple available to be chosen from, that contains widgets of dynamic content and blurbs.


In this section, we outline what type of theme change we support and do not support.

Supported Basic Theme Changes

  • Website Interface
    • Blurbs - Blurbs are re-usable pieces of text, and we support using these inside Learndot on Custom and System pages
      • It is common to edit the blurbs pageHeader and pageFooter - where the header and footer code to your Learndot site is entered
    • Pages - Custom pages in Learndot allow the hosting of content in the site.
      • We support static content only on Custom pages
      • We do NOT support dynamic content on custom pages. 
      • The Workaround to adding dynamic content to the site is either:
        • Work with the Learndot Professional Services team to get a quote for setting up a Template on one of the existing URLs (i.e. /classes)
        • Work with your development team to use the Learndot API to create the elements you need on your website (i.e. hosted outside Learndot)
    • Banners and Logos - images that are associated with the company, courses or components on the site
      • These are set in the Administration console, and we also support the hosting of these files in the Static Files manager
    • Fonts - control the design, shape and feel of the text on the site
      • We support custom fonts and open fonts. If you are using a custom font please ensure that it is licensed for the URL's that Learndot is available on. There are generally 2, which include:
        • <company-name>
        • <chosen-domain>.<company-name>.<company-extension>
    • CSS - custom style sheets control the styling of the elements on the pages
      • The product has areas where custom CSS can be entered. Our support team is not in a position to assist with custom CSS and will not make changes to these fields in the application. If Support tickets come in for custom CSS assistance they will be redirected to Professional Services (PS) and require the usage of PS hours to complete. Where there are requests for items that the product cannot do, an enhancement request will be lodged with the product team for consideration.
    • Javascript - 
  •  Learner Interface
    • Company logo
    • Default user logo
    • Banner image
    • Configurable link names, and destinations up to 4 links (reccomend least number of characters). Only 4 links are supported so that the headings will be responsive when viewed on mobile devices (phones/tablets)
    • CSS - this is not included in the onboarding process for phase1 (before go-live), however it is possible as a phase 2 item, or can be done by your design team
    • Javascript - is not supported and cannot be loaded in the learner interface
    • No further changes outside those mentioned above are supported, this interface is relatively fixed in its layout and design.

Supported Advanced Theme Changes

  • Website Interface
    • For customers looking to have more control over the interface and public experience of the site, the advanced option is to use the Learndot API to collect the elements you wish to display, and then render them on your existing website with links to Learndot. This method is useful for customers looking to achieve an experience that is beyond what is possible with custom pages.
  • Learner Interface
    • This interface is fixed, we do not support advanced changes to this interface (only the basic ones mentioned above).

Best Practices

Our recommendations to consider when building a learning site design

  • Pages - review the existing pages (URL's) in the Theme Testing Matrix to see the available objects on each page, then work these elements into your design.
  • Header links - it is best to use a set of navigation links specific to the learning site (micro-site style), rather than copying the navigation links from the main website. This is because often the main site is managed by the marketing team, and they will make updates to the main site as needed, while not update the learning site. This creates maintenance for the Education team to match the updates made to the website. To remove this maintenance, keep the styling of the main site and change the links to be relevant to the learning site. Alternatively, have the marketing team manage the branding on both the website and the learning site.


  1. Prepare a mockup of your desired site with responsive HTML (preferred) or in photoshop 
  2. Prepare the assets needed to build the theme

    (tick)ResourceSize (Pixels W x H)FormatNotesExampleExample of placement on site

    Company Logo (Website)600 x 150PNGTransparent logo requested

    Email Header Image600 x 100PNG

    This image is used as a header for emails that are sent out of the Learndot

    Course Banner (default)1200 x 400PNG

    Course Logo (default)200 x 200PNG

    Course Banner (Per Learning Component Type)1200 x 400PNG

    Course Logo (Per Learning Component Type)200 x 200PNG

    Course Banner (unique per course if desired)1200 x 400PNG

    Course Logo (unique per course if desired)200 x 200PNG

    Company Logo (Learner UI)
    PNGOften similar to website company logo but with different dimensions, transparent logo requested

    Favicon16 x 16 / 32 x 32PNGSkin.Favicon

    Learner UI Banner1200 x 400PNG

    Default User Profile Picture200 x 200PNG

    Proof of Completion1101 x 779PNG

    This is used for proof of completions generated and emailed to users.


  1. Add the Header and Footer HTML and Javascript into the Header and Footer blurbs
    1. Header Blurb (pageHeader)
    2. Footer Blurb (pageFooter)
  2. Review the default pages of the site, and choose which you wish to use:
    1. LDE Testing Matrix (Sample) -
  3. Adjust the page layouts using the inbuilt templates, our services team are available to work with you if you would like a new templates 
  4. Build any new Custom pages (often a landing page - note that we ONLY support static HTML on custom pages, not dynamic content)
  5. Upload the images as the default (and/or specific courses) Logos and Banners
  6. Set the Learner UI banner and Default User profile picture in Setup → Skin → Learner UI